the 200ok weblog

In the tradition of my "big stonking posts", these are my notes from WDS08 - basically unfiltered for the most part (so, effectively they are "liveblog" in tone). Anything [inside square brackets] is an aside, my own thoughts rather than something the speaker said. I did think about putting these into the stream post, but it was just getting insanely long :)

Day One

Lynne D Johnson: New Media...New Rules

• Discussing Marshall McLuhan's work – the medium is the message.
• “print is a dying a breed... it's not dead yet, but it will serve a new purpose...”
• “What has become of print?”
• Tom Foremsi – google cheated newspapers by commoditising content
• Does it matter where you get content from? Shouldn't producers just work out how to get along with new ways to deliver content? - Yes. There are plenty of new ways to make money!
• Users still trust experts on factual information, so that still means they trust old media sources. They go to friends for reviews of hotels, electronics, etc...
• But... younger users, 12-24, are starting to trust unknown peers more than experts. They have a totally different approach to media – including the fact they may want to pay for content. They don't care where the content comes from, they just want to aggregate as much as possible.
• Discussing japanese book market – it's all on mobile phone, including some books written on mobile. Non-book sales also went up while mobile sales grew. [my though – the more people read, the more they buy...]
• Should print be scared of Google? Well for a start newspapers are about to “get into bed” with google by letting them wear the cost of digitising newspapers.
• What should newspapers do? Get niche, shorter stories, more stories, in depth coverage of niche content, have a distinct voice, hyperlocalism, mashups with localised content.

Derek Featherstone – accessibility beyond compliance

I was a little late into this session after being barred at the door due to having a coffee in hand. So, I drank it (too fast) and then scurried in...

• Keyboard users can be really disadvantaged by AJAX because they get sent back to the top of the page all the time – they lose context.
• Small barriers to general users can be major barriers to other users... but also a small improvement for us can be a massive improvement for others!
• [2008 and we still have to point out that accessibility is not just about blind people and screen readers...]
• “Links go places, buttons do stuff.” reason to use buttons and not links for in-page controls. Buttons also focussable by default.
• “...we're getting a little meta here...” talking about metadata for a book about tagging.
• Inline editing – you can't get into editing mode on flickr's editable regions. It's mouse-only. So flickr created an edit link, which takes you to another page which is preset to make everything editable. Issues: bad placement, it shouldn't be at the end of the page, after all editing is likely to be one of the first things you want to do. Also the link label is too brief.
• Technical term: nubbin. Derek likes it because he can say “expose the nubbin”.
• “oooh, that's evil. Popup windows bad.”
• Use the principle of proximity: things that are related to each other should be close to each other. Insert info next to relevant location.

Grant Young – social media

• Social media is conversation – you need to remember that. Imagine ads jumping up between people in the pub...
• Trust barometer – who do people trust?
• Control vs influence – what you lose in control you gain in influence.
• Book recommendation: flipping the funnel, by seth godin
• Social media buiding blocks: identity, presence, relationsihps, trust, groups, conversations, sharing.

[Is it a buzzword to say you'll “unpack” a term later?]

• Grant Young having a moment of terror, realising he didn't check what he'd bookmarked on delicious before he took a screenshot...

[Discussing ambient intimacy... noting exactly why I love twitter. It keeps me in contact with friends in a way no other tool has ever managed to do.]

• Powerhouse photo collection – more hits in 4 weeks on flickr than in the entirre previous year on their own site. Go where the people are!
• Discussing the power of the Will it Blend? videos – incredibly cheap to make, but reaches an audience as big as a tv audience.
• My place or yours?
  • If I go to the community will it be appropriate and will I be welcome?
  • But if I set up my own network will people be sufficiently motivated to come and join?
• “Start small. Fail early, learn often...” lurk in networks before you launch official branded profiles.

[Single biggest thing is if you don't participate you should not attempt to market in that space. Because you don't know how it works.]

• Doc Searls: the because effect. Make money because of something, not with something.
• It's not just about eyeballs – it's not how many people you get, it's the quality of the relationship.
• Second wordle spotted!
• “I am not a 'target market'”
• http://zum.io/wds08

Javascript Libraries panel

To be honest I was really just there for the fun of it. I know plenty of serious Javascript hackers and they pretty much agree as follows:

• Ideally you should learn to write your own Javascript
• Frameworks have their place
• If you're going to use a framework, use jQuery. Or at the very least, don't use !#%&ing GWT.

So, that's what I do.

Back at WDS08 however... The sledging in the session was awesome, even if it's a bit scary that the Naked Man In Blue photo keeps turning up.

Jeff Croft - typograhy

• “it's not about picking a cool font”
• Book recommendation: The Elements of Typographic Style by Robert Bringhurst
• Before you can size text on the web, you really need to understand how to size text in general.
  • An em refers to the em square, not the character size.
• Set up a typographic scale and stick to that scale.
  • Comparison to music – using a note out of the chosen scale will sound wrong; using a font size outside the scale will have the same effect.
• Discussing the 62.5% font sizing trick, by Richard Rutter. Set your baseline to 1em = 10px, 1.1em = 11px etc. ok except inhertiance messes it up.
• Croft ultimately goes with px font sizing to make life easier, considers it a classic geek holy war.
• He also suggests avoiding extreme contrast as it can be a bit hard on the eyes.
• “The measure” = the length of a single line of text. 45-75 characters is optimal, using 1 char = 2/3 of an em. So, 30-50 ems is a good line length.
• Strong recommendation to add more leading to your site's body text.
• Vertical rhythm – basically, set base line height and make sure everything adds up to the same value. Including padding and so on. Double it for h1, etc...
• Justified text just doesn't work on the web; largely because hyphenation really doesn't work.
• “Yes, there's a shortage of fonts. Quit bitching about it.”

[So what about the whole back channel anger about his comments on accessibility vs. px sizing? I think the way to think about it is that Jeff Croft may not intend to sound dismissive about accessibility, but he does sound dismissive about accessibility. It was the same thing when his new blog design was launched with extremely low contrast.

The px font sizing thing is a real problem though - we should be able to use px and yes it is a hell of a lot easier. I have had some discussions about this at work and it is very hard to say no to px sizing in a real-world context. Microsoft: get your shit together.]

August de los Reyes - interface/Microsoft Surface

• Discussing the way humans experience emotion; the role of play in life; and ultimately merging philosophy and IT theory. Emotion and design.
• NUI – natural user interface, which is the space where the ms surface product sits.
• Command line -> GUI -> NUI
• Command line is directed and you use recall for commands. GUI is exploratory and uses recognition. NUI is contextual and uses intuition.
• Core idea is that work and play are not opposites or mutually exclusive; and there is joy in doing things as well as joy in the results.
• Three pillars: social, seamless, spatial. Bring people together, blur the lines between the real and virtual/technical, tap into spatial memory and 3D concepts. This should result in strong emotional connections and responses to the interactions around Surface.
• What comes after NUI? XUI – X ui... something organic?

Day two

Jeff Veen – Designing through data

• 1974 as the conceptual end of the sixties... hippie values became mainstream.
• Veen had an epiphany... he saw Pong for the first time, and realised he could control what was on the screen. He could participate instead of just watching!
• Key concept: Tools for partipation combined with the scale of data.
• Every minute people upload 13 hours of video to youtube.
• “the problem with data is it makes me feel dumb.” ...but the truth is when data makes you feel dumb, someone has failed in design to make it understandable.
• Using the pump vs. deaths example, the soho pump...
• Harry Beck – designer of the london tube map. The inspiration was to apply circuit board design onto the tube layout.
• Let people find the story in the data. Provide the tools and let people navigate through it.
• Wore tshirt to google: “math is easy. Design is hard.” apparently that didn't go down so well...
• Taking a concept from zeldman – start with the user, but know yourself. Veen tweaks to know yourself, then understand the user.
• Close the gap between who we are and the people we serve.
• Homework – read steven johnson's “the ghost map”
• veen.com/wds08.pdf

Jina Bolton – sexy stylesheets

• Running through the core stuff... Write it clean, keep it clean. Clarity is beautiful (use descriptive class names etc). Comments are your friend.
• Cross reference between stylesheets – particularly between IE stylesheets and general stylesheets. /* redefined: ie6.css line 25 */
• CSS3 ... Has taken a long time...! note that it's broken up into modules, it's not a single spec as such.
• Backgrounds and borders... one of the most exciting things. Being able to attach multiple images will be awesome....
• Multi column layout – issue, the columns aren't actual nodes so you can't select them. Jina hopes it gets fixed at some point.
• Grid layout – float-offsets and using gr (grid units) as measurement unit.

[The lack of css3 selector support has played a massive part in the markup standard i've just created. We had to include classes like odd and even on table rows; and our backend guys created a scheme of positional class names that wouldn't be required if we had nth-child selectors. Browser makers... get on with it!!!]

• css3.info
• sushiandrobots.com

[My thoughts: We can apply progressive enhancement approaches to CSS, use what's available. It's available in many browsers and we can add all the cruft for IE in conditional stylesheets.]

Michael™ - HTML5

• What works now? Canvas (only one major browser doesn't support it...), video and audio, validation without js. API for offline web applications. APIs for client side data storage (replacing cookies). Native getElementsByClassName (hoo-fucken-ray).
• When did this journey really begin? December 1997 – when HTML4 was published as a recommendation. It was really fast, and “that can never happen again” because you need implementations before you can have a recommendation.

[OK, should that still be the way we go? Can't we have a recommendation based on a proof concept implementation in, say, opera or webkit?]

• Value proposition for HTML5: it makes life better and easier for web developers. It increases interoperability and reduces the need for UA sniffing.
• So what does html5 consist of? Html5 spec; support for some features in 4 major browser engines; html5 parsing libraries; validator.nu html5 validator.
• “[the html5 spec is] A wee bit overloaded.”
• The spec focuses mostly on specifying conformance criteria for browsers. It's not especially aimed at web developers in that sense. But it does also include the info we do need as web developers.
• If we want the web developers version, we need to make noise about it! Blog about it, get on the html email list.
• So much of html5 is based on this: the spec shows what authors should do; then tells browser makers what to do when authors do the wrong thing anyway. HTML5 has decided to avoid draconian error handling.
• “don't get hung up on syntax.” html5 defines html as an abstract language with more than one syntax parsing method.... [?]
• There's only one standard in-memory way to represent stuff and that's the W3C DOM.
• Simplify where we can. eg. Most of the doctype is ignored by browsers, which is why they went with <!DOCTYPE html>. You have to set that to avoid “screwed up mode... fucked up mode... what is it lachlan? Ok, quirks mode.”
• Similarly the character encoding tag is overly complex, so they bring it back to <met charset=”utf-8”>
• demos: http://www.whatwg.org/demos/2008-sept/

[note to presenters: vim + presentations = bad]

• As ever, legal shit gets in the way of video. MS and Apple refuse to implement ogg; firefox won't implement proprietary codecs; etc.
• “ARIA is more of a stopgap than a permanent solution; but it's support – it's a success story.” (paraphrase)
• Accessibility is built in to [ARIA]. ...it's baked in to the html5

Daniel Burka - usability/digg

Interesting comments about digg users – they can be quite immature, but they asked for real feedback and got it. So he says you should still give your users credit ;)

• feedback, feedback, feedback - get lots of feedback
• follow how people actually use your site
• subtraction is iteration too
• measurable goals are crucial
• avoid announcing timelines

slides on slideshare/dburka

book recommendation: “how buildings learn” by stewart brand

Mark Pesce - this, that and the other thing

I've learned that if you're taking lots of notes in one of Mark's keynotes, yr doin it wrong. So although I had the laptop out, it was mostly just for keeping an eye on the back channel. We are hyperconnected after all.

The only notes I wrote were:

• Key statement: We behave like crowds when we really ought to be organising like communities.
• With a new idea – ask youself... will it help people think for themselves?

That said, I'm glad I had wifi. Mark had the backchannel up on screen through much of his talk. With freakishly good timing, my tongue-in-cheek tweet popped up:

• behind you, mark, behind you! #wds08

Mark was steadfastly refusing to look, but the crowd laughed so much I guess he couldn't resist a peek.

See also: WDS08 - the stream.

Labels: big stonking post, liveblog, notes, wds08

In this post:

• Scott Berkun - The myths of innovation
• George Oates - Human Traffic
• Aaron Gustafson - learning to love forms
• Lisa Herrod - Usability: more than just skin deep
• Adrian Holovaty - Being smart about your data
• Mark Pesce - Mob rules

Scott Berkun - The myths of innovation

We are very bad in our industry for forgetting history and repeating mistakes.

The moment of epiphany is a myth - Newton wasn't hit on the head with an apple, but we like to think it's true.

Innovation myths play on the belief that ideas are outside of us, that we might just get lucky to be visited by inspiration but it's not our fault if it doesn't happen. They discount the fact that really Newton spent his whole life asking questions.

We like to think ideas are discrete units, that you can pull out an idea when you need it. However research shows that it's more about process, having a mode of thinking and working that leads to getting results.

Many really successful people/groups don't talk about innovation, they just solve problems.

"The less you use the word 'innovation', the less like you are to actually do it."

When people want to pose as innovators, they tend to use the word a lot.

Challenge - stop using the word "innovation"!

Discussing the mythology of greek builders - we revere their engineering skill because so many things they built survive today; forgetting that all the crappy things fell down. The truth was that only the well-built, marble structures survived. The terrible wooden slums burned down or collapsed.

If we think we're so great at innovation, why is it still so hard to send a nice looking email? Why do we need reference guides to what works? Why is it so hard?

When we mythologise innovation, we forget all the irrelevant factors - politics, business, timing, luck, etc. They massively effect what happens but we have a rosy-eyed view that none of that mattered.

Modern exploration myth - Star Trek - doesn't show a real explorer's life of long periods of wandering around finding nothing. We get *blip* new planet *blip* new planet...

Challenge - spend a half hour looking up the origin of any piece of technology you use. You'll probably discover quite humble origins and many failures before the end success.

Our historical view of events and timelines lets us think that somehow there was a plan, but really the people who really created stuff didn't know where it would go. They didn't know what the life of their invention might be.

Technologists use the word "luddite" as a slur. But we would probably react the same way given the luddites' situation - their livelihoods taken away suddenly by a new tool. If we were replaced with a little black box and sacked, we'd probably want to smash that little black box.

People have an emotional response to change - this is a big challenge to overcome.

Consider warfare technology - Japanese culture felt that gunpowder warfare was dishonorable, so they stayed with sword warfare. This was a culturally-based decision - they chose honour over innovation. The technology alone wasn't enough to change they way they acted.

So, if you want to do something innovative you have to understand how it will play against cultural values. You have to consider the social aspects of what you're doing.

Innovation distilled:

1. Delegate
2. Take risks / make mistakes
3. Reward initiative

Consider the story of 3M. Minnesota Mining and Manufacturing ("one of these things is not like the other"). Entrepreneurial venture, their first effort was a mistake; so that had to go back and take what they learned and try something new. They ultimately became a sandpaper manufacturer.

Then a car company had a painting problem; and one of their engineers (Richard Drew) kept working on a solution, despite the boss saying no "that's not what we do". He ultimately invented masking tape, which made tons of money off it.

So 3M had to work out how to support that sort of innovation.

(truly awesome three paragraph quote that is worth looking up the slides to get ;))

Managers need to empower employees to be innovative, they need to create an environment where people can try things, make mistakes and keep going.

The chairman of 3M bluntly states "Mistakes will be made", it's a truth of innovation. Yet nobody budgets for mistakes. Business likes to think they can avoid mistakes to the extent that they simply won't happen.

[Only about 1/3 of the audience had heard of Google's 20% rule - one day a week is your own to work on what you want.]

The 20% rule actually came from 3M. It was a way to delegate authority to people to try new ideas.

Q&A

Recommendation - work out the non-technical threats to a project, then assign people to work on those threats. They're just as important as the technical issues/threats.

George Oates - Human Traffic

Chaos leads to cooperation - roads narrowed and signage removed led to people having to pay attention and negotiate passage through the shared space. People have since developed their own systems.

What is Flickr? "A great place to be a photo."

But before it was a photo site, it was a game! Online MMORPG, an offbeat and fun world. It was a deeply social space. People formed their own contact networks. This pattern of making friends transferred to Flickr.

There were "magnetic centre" people, who had large bubbles of people forming around them.

So, what next? Photo sharing in 2003? With the rise of digital cameras people wanted to host lots of photos. People wanted to get them off their hard drives and share them with people. But the available services weren't community based. There was an opportunity to mix it up.

The first generation was the same interface as the original game - photos plugged in.

Working on the site, they "didn't sweat the technique". They made mistakes and kept going. [Imagine that, there are strong correlations to Scott Berkun's talk!]

So the early userbase of Flickr had a lot of nerds, bloggers and nerdy bloggers. Also snarfed in the userbase of the original game. With that userbase they had a shared understanding of netiquette. They were understanding and even amused by "the show" as things were changing, breaking, evolving...

There was an appreciation for experimentation.

They moved away from their original interface since people didn't really get it, and it was synchronous - two users had to both be online at the same time to interact.

They had an open "ideas forum", open to everyone but ultimately with about 50 really vocal users. Although a minority they were important to the process.

The "gamma" release was the first instance of shock in the user community. They were taken aback by the changes.

Removing rules from a space can make it more creative and collaborative. People will find their comfort zone within that space.

Initial concepts

Initial concepts for flickr:

1. Mirror the offline experience of looking at photos
2. The "photostream"
3. Individual as publisher
4. Layers (onion concept):
   You
   People you know
   Things you like
   The Universe

Sudden switch... instead of the mundane daily life stuff, with the Jakarta embassy bombing people posted photos within minutes. So it was an unintended news source. But at the same time, there were lots of photos of lovely daily life as well as the

Design strategies

• User personas with care. You don't really know everything about everyone.
• Design for zero data. When people sign up they don't have anything in it yet. Assume naivety (not as a pejorative). Offer some guides, hints, show some options.
• Sensible defaults. Too many options does not mean more choice. "Simple simple simple". Lots of people don't change any settings.
• Experience "gates" (eg. first time you upload a photo, post to a group, tag a photo). Choose your own adventure.
• Show activity. We are social creatures.
• Go UTF-8!

Support structures

Flickr today? It's enormous! 1.5 billion photos, 1 million per day. 10 million members "that's not a community, it's a freakin' society!"

Organic growth. You can't say "let's add some community". Be hands-on at the start, be involved, be human.

Community guidelines. "Don't be creepy." Guidelines set the tone.

Provide excellent customer care. "Thanks! That worked!" Have humans answering emails and participating in forums. Inject some personality into support documentation! Let your brand show (eg. playfulness).

Have neutral point of view. With great power comes great responsibility.

Observing community

Cycle:

1. anonymity
2. recognition of you
3. community
4. leadership
5. celebrity (fame)

rinse. repeat.

...

Your newest member is a delicate little seedling. Nurture them.

...

show yourself - be visible

Beware competition - we're all winners.

Don't become obsessed with interestingness! It's run by the magic donkey :P

Be open - nobody likes surprises. Bad ones, anyway.

Aaron Gustafson - learning to love forms

Aaron's preference for wrapping items is to use a list, ordered or unordered depending on situation. Semantically correct AND useful.

Naming structure for form elements based on form ID - keeps things specific.

Button element - has problems with IE submitting all buttons; but they have a big advantage in terms of how they're rendered. You have more opportunity for control with the button element.

Aaron adds extras like colons to labels using content: in the CSS, so it can be changed easily. About the only browser which doesn't support it is IE, but if the colon doesn't show the form is still fine.

Similarly, uses :focus to highlight current input, even though IE6 won't get it, it's a progressive enhancement.

Width of a select element is usually input width + input padding + 4px

Aaron has created a dropdown alternative which is styleable and accessible, however it is hard and requires javascript.

You can use a hidden input to set a default value for a checkbox, that can be passed to the backend instead of null. The same name is submitted twice, but the second one is picked up by the back end. Aaron has never had to actually write code to ignore the first value; the system just automatically picks up the second/replacement value.

Wrapping an extra <label> around related values - not strictly allowed, but Aaron's testing shows it works ok in screen readers (according to Fangs).

[more stuff about messaging, didn't have time, will post to slideshare slideshare.net/AaronGustafson]

Lisa Herrod - Usability: more than just skin deep

Not only do "disabled" people benefit, there are groups of people who consider themselves "normal" but benefit from accessibility.

Personas tend to be shallow. They may cover one type of user, but don't cover the broad range of people who end up using the sites.

True user experience design: user profiles are inclusive, not exclusive; accessible design from the outset; ground-up approach.

Example: The Australian's search results page, which is accessible and valid but not very usable for screen reader users. Of course it's outside scope of the talk to mention, but some of the issues have a contractual basis ;)

But the real point: valid, compliant code doesn't make a good user experience.

Looking at the accessibility guidelines, there are check points for roles other than frontend. IA and design need to be involved.

Expertise is essential. You need people who actually understand it to work on it.

User testing usually misses people who actually use assistive technology.

It's not all about blindness! Accessibility is a much broader issue. People still focus on blindness.

User Focussed Development == User Centred Design. UFD is the technical equivalent of UCD.

It's not just about the code (it's about the peeps)

Role Specific Checklists - we need accessibility checklists for specific roles in development. Not all the checklists relate to frontend!

Six steps to recovery:

1. Define primary user group
2. Site build
3. Code review
4. User testing
5. Rework code
6. Final compliance review

User profiles can relatively easily incorporate disabilities. Social profile + disability = more complete than just the usual social profile.

The meat of the talk... the checklist! WCAG guidelines, but with items assigned to frontend, scripter, content producer, IA, designer, etc.

Frontend still ends up with the majority of check points, but not all.

Plus it's useful to look at who needs to work with each other to achieve compliance.

Q&A

(spent too much time talking to write)

Slides at scenariogirl.com/usability/usability-more-than-skin-deep

Adrian Holovaty - Being smart about your data

Adrian as a web developer is interested in making a site which is a joy to use and explore, full of serendipitous moments of discovery.

This is becoming a must-have; people are starting to expect it. They're used to sites like IMDb which let you browse deeper or laterally from your starting point.

You could ask yourself: how useful is this site to researchers? They are going to be hard-core users of your data.

Serendipity is good because it increases your site's stickiness (keeps people clicking around) and it increases usefulness.

To make this happen, you have to be smart about your data.

It all starts with the structure.

For large scale sites, you will need really good structure - you're not going to be doing it all manually.

Getting structure is half the battle. It's human stuff, and harnessing that is hard.

Adrian as a background in journalism...

Journos are fundamental data people. They collect, analyse and publish data. But it tends to be fairly flat, not linked enough.

The tragedy is that journos collect all the data, but they don't allow things like rich linking because they don't put any structure into their data. They go to a source, get a bunch of information; they write structured notes; but then they publish plain text.

Lesson one: structure your data.

Lesson two: all data has structure.

Lesson three: give your data "the treatment"

Once you have some structured data, how do you get to a well-done work of hypertext.

Hence, tips for efficient hypertext.

Example: crime data. The original data for Chicago was being published in a boring table, no links.

Step one: list fields. eg. date, time, crime type, address, location type, arrests made?, case number, etc.

Step two: identify which ones are interesting enough that someone would want to browse by them. eg. yes I would browse by the day it happened, yes I want to look up crimes in my suburb. Arrests made? Well perhaps not for browsing - the information is good but you might not browse by it. Similarly probably won't browse a list of case numbers.

Step three: make breakdowns. Crime by date, by time, by type, by location.

Step four: make list pages. All the crimes on a particular date, listed on the page.

Step five: make detail pages for concepts. In this case, a page for the crime listing.

...

Things to note

• You don't know why a user is looking at a particular bit of information
• Permalinks for concepts are important. eg. You should be able to link to a particular crime.
• Also, linkability/bookmarkability
• SEO - advantages to having the most granular page about a given subject.
• Serendipity

...

"By the way, Chicago's nice, you should visit..."

...

Another example is "Faces of the Fallen", showing US marine casualties in Iraq. Done for the Washington Post. It's compelling.

However the concept applies to any information. eg. video game reviews, political advertising

...

So the next logical step, since the output is formulaic... build a tool: Django Databrowse.

Not just for externally available systems, it's an excellent tool for evaluating your own data.

The tool is sometimes useful because it is "dumb" and will show you ways of looking at your data that you yourself might not have tried/thought to try.

Challenges

• Find the structure in your data
• Design for serendipity

www.holovaty.com

Q: How did he encourage journos to enter the extra data?

A: One way is to choose where you want to do it. The more niche/granular you got, the more passionate people are about the data. eg. he did a database for a small paper's movie reviewer, the reviewer was blown away. So if you can find champions it becomes an easy sell.

The Wash Post had a culture of competition which meant people wouldn't share their notes, they were pitted against each other. In those cases there's no way the reporters are going to share it with a web geek.

"Culture stuff... that's for smart people, not geeks..."

Mark Pesce - Mob rules

[Listen to the podcast. The intro was too good to retype. You have to hear it.]

...

We don't especially need mobile phones. They're bling. The way we usually use them is relatively trivial.

But to the third world, they're essential. The mobile is far more necessary for their lives, since it determines whether they find a good market for their produce (or whatever it is they do to survive).

Grameen Bank founded Grameenphone, because so many poor people were taking out loans to buy mobiles.

None of this was predicted.

The first world, the rich, don't know about this. But the poor do. They have known for a while and they've been buying phones.

Sometime in 2008, half of humanity will have a mobile phone.

It's not slowing down. In fact it's getting faster.

Prediction - campaigns by charities, to buy a mobile for the poor.

Nokia created a phone for this market and it is the most successful device in history, far more successful than the ipod.

Pervasive wireless communication is of far more value to the poor than the rich.

They don't need ebay. They can work it out for themselves. They just need connectivity.

People are the network.

The network in every form is anathema to hierarchy.

The net interprets hierarchy. as damage and routes around it.

The network is quietly kicking the legs out from under hierarchy. It's not an epic pitched battle.

The same mob rules apply everywhere, to everyone. It applies just as well to a kenyan farmer with a mobile as it applies to a movie producer in queensland.

"Enough of philosophy, let's play."

One more thing... there's still one hierarchy. which is stubborn and resistant to change. It's Telcos. The firms which created the network are somehow immune to the effects of the network.

BUT this could change.

Meraki mini router... creates a mesh network. They cost <$50.

This means there's the ability to have a decentralised network.

Meraki minis have been given away in San Francisco and is doing better than any official attempt to provide free wifi.

Internet access in Australia has always been about bending over and taking it........

But no more. Mesh networks could change this.

It's all software. Any machine can join the network.

Terranet AB - swedish company turning phones into wifi mesh networks. Telcos didn't fear VOIP on mobiles, they feared mesh networks.

1. The mob is everywhere.
2. The mob is faster, smarter and stronger than you are. "The street finds its own use for things, uses the manufacturers never intended." - William Gibson
3. Mob rule is not about sites, it's about services.
4. The mob does not need a business model.
5. Make networks happen.

Advertising is a form of censorship.

Everything that's online is built on sand. Advertising is a demand that you pay attention. And it's a demand that can no longer be enforced.

If the mob doesn't need a business model, how are you going to make money? The mob doesn't care.

Once networks are created, they can not be destroyed.

Embrace your obsessions. You will be rewarded.

The mob gets whatever it wants. Fortunately they generally want the same stuff as we do - better lives for themselves and their families.

"Wisdom consists of the anticipation of consequences." - Norman Cousins

Have courage and keep moving. Standing still is not an option.

blog.futurestreetconsulting.com / Mob Rules (The Law of Fives)

Labels: big stonking post, conference, liveblog, wds07, web directions south

I had planned to liveblog these as the day went on, but as is now traditional the laptop refused to connect to the wireless network.

So, here they are in One Big Stonking Post™! :)

In this post:

• Rashmi Sinha - the perils of popularity
• Andy Clarke - Think like a mountain
• Cam Adams - Future of web based interfaces
• John Allsopp - where's your web at?
• Chris Wilson - Moving the web forward

Rashmi Sinha - the perils of popularity

Object-based social networks: we don't meet in real life and say "hey let's grow our network..." we do stuff; we meet for stuff like coffee and beer. So the successful new social networks tap into this - they're more human.

flickr/youtube etc - based on objects.

Social app has 3 components - the objects, the place, the graph (social graph)

Four models of popularity:

1. Google - blind sociality. Social network cannot be browsed. They prefer you to search.
2. Digg - laser beam. Very focussed in terms of content type/topics, type of user, etc. Encourages mobs; quick, engaging, transparent and simple metric; but encourages conformity. "3000 diggs... I'll digg it too" (rich get richer effect). Compare with Flickr were you see other photos and you respond by posting your own. [book ref: The Wisdom of Crowds by James Surowiecki]
   
3. YouTube - promiscuous popularity. Many metrics, navigation by popularity. Most viewed will land on homepage. "diff strokes for diff folks" Slideshare launched and discovered that there is slideshow porn! Not most commented, faved or tagged - but it was most viewed. So they had porn on their homepage. Had to sort out community flagging etc to deal with it. Long tail of content - anyone can share; but who reaches the masses? It is a new game to play if you want to put out content which is popular. The way hits are created has changed. [movie ref: The Player]
• [John A's q: this reminds him of Game Theory, what does she think? reply: doesn't formally know Game Theory but sees some parallels, also relating to popular culture eg. Survivor which uses competition as the basis for the product]
• [Chaals: so this means systems will give success to people who can game the system..? reply: not so much as people who know how to play the game, as opposed to gaming the system.]
• [Q: social networks vs. the dangers, especially to young people. A: provide tools to help people filter - let the community filter the site. All social networks are struggling with the issue, particularly as peoples thresholds/standards - ie. "is this porn or not?" is not a black and white question, everyone has a different opinion/threshold. Colin notes: will we get social network police and vigilante groups? My thought: the only 100% sure filter is supervision, the tools can only help but can't be relied on.]
4. Facebook - viral navigation. News feeds, notifications; it's not content being passed around, it's the meta of the applications being passed around. Making spammers of us all?
   
   The rules of the game are always changing. Metrics change, viral pace throttled; but still no levelling of the playing field.

So think... what kind of interaction do you want?

The metric counts:

• Digg - one transparent metric, easily corrupted.
• Youtube - multiple metrics, harder to spam
• (third, missed it)

Give up control! "This is messy" hard to do - you're so invested in it.

Q: methods people are using to prevent gaming the system; could you expand on how Slideshare combats it. A: it's a constantly changing game, it's always a battle.

Make system personally useful. Don't count on altruism, thrive on people's selfishness. What's in it for them? What is your system providing the user?

Q: does real life popularity translate online, for individuals and companies. A: asked the crowd, people didn't seem to think so. Q: will the cool kids be cool online? A: thinks not related at all, eg. pagerank can push people off the first page of results despite other deserving people also being relevant to the search. The systems aren't a direct correlation.

Q: how did Slideshare start becoming popular? A: first thing, make it useful. Powerpoint might be 99% bad but everyone does it, everyone needs it. Also, be agile. No magic bullets. Respond fast, see what is working and do more of that. Take away features when they aren't serving any needs.

Q: how did you know you were successful? A: Alexa tells us we're doing well, our users love us (lots of passionate email/blogs). It's relative! ...really good question, I don't know!

(Link to Perils of Popularity slides)

Andy Clarke - Think like a mountain

Discussing influence of comic books on art, not just Hollywood but "real" art as well like fine art.

They also influenced a lot of young boys who go on to become geeks and make websites.

So what can we take from comics and apply to the web?

Every writer + artist combination will have a style. So the reader has to learn how to follow the story from panel to panel. [book ref: Understanding Comics by Scott McLeod]

Between panels things are going on, but they are implicit. You are left to imagine what's going on. Also you might get a series of panels which aren't explicitly explained but are all related. Then scene to scene cuts.

Compare it with moving between pages, or between sites. When you get there do you need to re-learn what's happening? How do you know you've got where you expected to go?

Consistency used to create rhythm, and that's only broken for dramatic effect - not to fit more content in. The size of the content doesn't drive the design, the story drives the design. The size and shape of panels can give cues as to how long you should spend reading/looking at them.

* takes comic book layout and creates grey box layouts

Can we take comic book rhythm to a website? Many web layouts are fixed width, same as with comics. Not putting a border around some content may bring more emphasis to that content. Seems back to front but it works really well in comics.

Doesn't have to be OTT, it can just be a slight difference in colour/contrast/opacity. Eg. five rows of content, odd rows slightly lighter or darker.

Splash pages - people thought they were cover art but that's not the right way to look at it. The job of the cover is to draw your eye to that title so you pick it up, but on the web we don't need that. Covers also provide continuity between issues.

First panel is more like a splash page. Gives the reader an idea of place and where they're being taken with the story. Some issues might give a "for new readers" summary, helping the reader understand where they are starting from.

Compare comic panel layout with grid design for the web. Comics often use unusual panel layouts, so they have ways to provide the cues you need to decide where to go next. eg. position of speech balloons.

Comics create a sense of drama. But we rarely see it on the web. Similarly we don't generally provide movement and pace. So drama is important!

Example: comic putting just a couple of panels off centre, rotated slightly, to give the sense that something has gone wrong.

Colour changes things - it can be useful to work in pure black and white for structure. Does colour always add something? Sin City uses black and white with the very occasional splashes of yellow and red. Those splashes POP.

We should look for inspiration in non-web media!

(Due to copyright restrictions, the slides probably won't be posted)

fireside chat about w3c specs

Should the big companies be making the decisions about the tools we're getting? It's not their web it's OUR web.

So... we should stop whining and do something.

CSS ELEVEN

International group of visual designers; going to spend time developing a translated example of how things need to work.

Translating CSS specs into visual language.

Two months per spec.

Also calling for input.

Cam Adams - Future of web based interfaces

You'll never create one interface which works for everyone. What about providing a range of interfaces? We can create dynamic interfaces which adapt to the user's needs.

We have the technology. Also, caveat: dynamic interfaces aren't for everyone, not for every site. Also the more browsing-oriented the site is (eg. wikipedia) you're probably not going to need it as much as something like Gmail.

Two approaches: 1) customisation, push from user; 2) analysis, you do the work! Look at what the user is doing and tailor the interface for what they're doing.

customisation

Levels of customisation - eg. Twitter has only a small number of options, MySpace has lots of customisation (although it's really hard - too much HTML/CSS for the average user). MySpace users end up choosing from template sites - ie. they're not expressing themselves.

Customisation - you need to choose how many restraints you'll place on it. MySpace doesn't really stop you doing anything; whereas Flickr is quite rigid - you choose between some layouts. But it still effects how people interact with the page. But are Flickr's 6 choices too static?

Modular approach - eg. landing pages like Netvibes or iGoogle. You can choose what to show and where to put it. Similar to Photoshop's layout options. Still pretty restricted.

What about moving widgets into content? eg. SearchMash (google) customisation modules. Compare "Alpha" (yahoo). Yes, a product called Alpha Beta! It maintains preferences through your session.

Interface should be your mental model. Customisation shouldn't create a gap between the interface and the user's mental model. eg. it's better to let the user just move stuff around, rather than pushing them off to another page then coming back to see the results.

Looking beyond HTML, stuff like canvas and SVG offers cool interface opportunites. Much cooler than flash since they're not plugins!

How can it all be done?

AJAX has enabled a lot of opportunities but it's not required. POJ - plain old javascript - is fine. In fact you can do it all with HTML and forms! However the less you use, the fewer options you can provide. Using more options gives you the full range.

Most important thing is to separate Data, Style and Behaviour. Separating those gives you immense freedom.

analysis

Work out what the user is doing then customise the experience accordingly. Simple example is to run a decent print stylesheet.

You can also adjust the page layout based on window size/resolution. Particularly helpful for a cramped/busy page - let it breathe at higher resolution.

Sidenotes: iPhone does use handheld media type. CSS3 has width-based selectors. Things will get better/easier as we go along.

So anyway, in the meantime, Js can fill the gaps left by CSS/HTML.

But you don't have to change the whole page - you can just change parts. eg. You can track a user's account to show they've already downloaded something, so you no longer have to emphasise that item. If they've visited a bunch of times you can offer to minimise the help area, since they probably don't need it.

But! Give them the choice. Let them confirm or reject.

BBC did "digital patina" which emphasised the areas the user read more often. The sections the user reads the most get darker/more prominent. Pulls the user's eye to the area they use the most.

where now?

Make sure you get the basics right first.

Go with progressive enhancement.

Really put effort into design.

John Allsopp - where's your web at?

The great successes of the web have been built by developers and technologists, not managers.

So what trends are exciting John? :)

Computing paradigm - you go to the web, you go to the computer, you sit in your den isolated while you use it. But this is breaking down. Now the web is becoming ubiquitous, wherever you go, the web is there.

We're also changing the way we interact with computers. eg. the web on a Wii is different to the web on a computer. Same again for a PSP.

Your car will have a browser soon - but hey you're not going to use a mouse and keyboard while driving. So how will you use that?

Key point - you need to separate your application from the interface since it could change so much. Your website could be used on so many devices.

The OS is not looking like the platform so much, rather it's the browser that's the platform. The web is becoming the platform.

Everything is moving from the centre to the edges. We are only just beginning to build apps with this in mind. The centre can not be held.

Current wifi isn't that great but will improve. Devices will increasingly know where they are.

We are unchained from the desktop, we will always be connected wherever we go. So what can we do now, with this situation, that we can't do in the old model?

Devices will be able to react to location and proximity. If you're in the pub it should be able to have your phone alert you if a friend is there too.

It's more than mapping - it's not just where you are. It's about where someone is, who is nearby and what is nearby.

It's a huge opportunity for developers. There are moments of great change when you can do big things - eg. when personal computers arrived, it really changed computing.

It's like the Wii busting up the Xbox vs. PS3 fight.

David Storey about the Wii: "They thought about the users, rather than the technology"

The Wii makes gaming into a casual experience, shared experience. It gets away from the solitary, tethered to screen feeling of old gaming (although consoles did this to some extent when they got people away from PCs).

The Wii also has a fully fledged, standards-based browser (Opera) rather than no browser or a crappy half-baked thing.

So it means the internet is not just on computers now. With the Wii you can have four people on the web at once, in their lounge room. So what web app might you build for that scenario?

Challenges on the Wii: resolution and accessibitily, mousing/interaction, text input, shared experiences. Of course if you've been thinking about accessibility you get a head start on this, you've already been thinking about this stuff.

...

Has the mobile web arrived at last? iPhone, iPod touch, mobiles with decent browsers like Opera and Safari.

These devices will push for better, cheaper wifi - demand will massively increase.

There are no baselines to fall back on. There's none of this "best viewed in.." stuff.

Many of our design and interaction patterns are meaningless if you're not using a PC/laptop. Fixed widths, multi-column, etc... they don't make sense on a plasma screen with a Wii.

User input is profoundly different. No mouse, or even a keyboard. Virtual keyboards are difficult to use so you want to minimise the amount you need to enter. Voice input and commands - might make sense for the car, but you wouldn't want it in your office.

Input is changing - it's not active input all the time, there's passive input like last.fm tracking what you really listen to. In the past you always had to use active input, which mean you actually had to decide to enter some kind of input/event.

This does indeed have privacy and security issues but surely technology can solve those problems.

...

Where's your data at?

Traditional computing and the web... isolated data and services, walled gardens requiring registration, the service owning the data you entered. Data storage and transfer isn't especially structured.

With data at the edges, you get more structure and portability. APIs, RSS, JSON, microformats etc.

Developer's challenge:

• build you application from the API up
• use these internally
• what data and services can you make available?

This is a huge cultural change for organisations and managers. But, value is moving from content to attention. How do you encourage the use of your data?

Attention economy: how can I get more people paying attention to what I've got to say?

...

Users are becoming the ecosystem. They're not just contributing content.

eg. Blogger vs. Wordpress - Wordpress has the users building addons. Blogger doesn't. [of course Blogger doesn't require you to install all the updates :)]

How do you encourage ecosystems? Offer customisability; plug in architectures; APIs; licensing which lets people do stuff.

...

Atomic applications

Smaller, more focussed, easier to debug and maintain, easier to bring to market, easier to abandon (lower overhead, you can walk away without major repercussions).

eg. John's products going from big projects to Xray. Xray took only ten days from idea to fully polished release; yet jumped to top of Google results in just two weeks.

...

John put forth a series of challenges - check them out in slideshare.

Chris Wilson - Moving the web forward

Remembering the vision of the web - it was simple to create and serve. Anyone could be a content producer... but not everyone was. Driven by the need to interconnect.

"Web 2.0 is...." 'caring about the quality of web UI'. Rich social experiences to make the web immersive. Connecting people to people, not just information. Portable across platforms, devices even languages and cultures.

Segment the world into three groups of people:

1. Web developers
2. Browser vendors
3. Everybody else

CW's understanding.... being a web developer is painful! Trying to get all the browsers to work, then they change...

The world as a browser vendor:

• hacking browsers is lucrative, so it's a challenge (and a major expense) to vendors
• security is hard. hacks target complex interactions, "they're not just buffer overruns".
• you have to protect against web fraud as well

"We can't break the web." Not only are there deployed browsers, there's also deployed content and you can't have that just stop working.

Run the numbers... IE has half a billion users, which means if you do something to effect 1% it's hundreds of thousands of people. If you make something break, they'll uninstall the updated browser which caused the problem. So compatibility prevents upgrades.

"The bar" is different for each browser. Each browser's new version is expected to work basically the same way as the previous one.

The very long period of time with IE6 means that people built in the ways to deal with it. IE6 hacks are in libraries, and so on; so many people aren't even aware that they're relying on it.

In short, "we can't break my mom's banking site". She takes away "IE's broken".

The question is... not "why should we care about standards"", it's "how do we support standards without breaking the web for millions of users?"

So who do vendors listen to? Everyone has an opinion and they conflict.

You can't move forward in ways that aren't secure enough for a bank, nor too hard for an IT guy to deploy, no can you break your mum's browser.

So they come to the saying "Leave the web better than we found it"

Better means more secure, more stable, more interoperable, more performant, more powerful (more capable, more features).

Security is not just a browser issue, it's everyone's problem. Vendors, developers, etc.. everyone is involved. Everyone should think about how they might be attacked; and respond accordingly.

Privacy is still an issue; and mashups etc are catalysts for risk. You need to be aware of the data you collect, who sees it, how can they use it and so on.

Chris's rules of compatibility:

• If a page works in browser x, it has to work in the next version of x.
• If a page only uses standards, and it works in one browser, the effort to get it to work in another browser should approach zero.
• Don't needlessly multiply the test matrix (don't trickle out standards in updates)

So you can't just push out updates which change rendering behaviour.

You can't just use quirks and standards mode, since not all bad sites are in quirks mode and vice versa.

What about Microsoft?

• They are working on IE.Next - IE isn't "going away again"
• They are committed to standards
• Web 2.0 changes the assumptions for us

Labels: big stonking post, conference, liveblog, wds07, web directions south