Designing for today's Web

Luke Wroblewski, Senior Principal of Product Ideation & Design, Yahoo! Inc. and Principal of LukeW Interface Designs, USA
I really enjoyed this plenary and got a lot out of it. He may have initially been a bit biased towards Yahoo and anti-Google, but eventually he got over that and had excellent points to make. Again these notes are pretty rough. It was a great start to the final day and really got us in the mood and opened our minds.

It isn't that people don't read – they'll read when they find something they want to read. So, there are three key considerations in designing websites: Presentation – voice, where interaction happens; Interaction - responding to users; & Organisation - structure.
Luke strives for usefulness, usability and desirability (why do I care, why should I use it?)
He referred to videoegg – as a good example.

What is different about today's web? What are the recent shifts?

A. From locomotion to services
We interact through locomotion, conversation and manipulation. It is all now much easier and more widely evident on the web. He showed us the huge use of yahoo answers (5 mins to an answer in US; 0 to 90 mill. users in 1.5 years); the spread and use of word processors online. It is all part of the web transition – the locomotion to digital representations of physical entities, then digital manipulation of physical good (e-commerce), and now purely digital services (no physical presence, just display services: aggregation, flickr, MySpace, blogging tools, video editing online, entertainment sites). Many of these services have popped up in last few years with hosting for around US$6 per month. Instantly you can reach a huge audience; there are few barriers to enter; and you can use free open source platforms. BUT, you have about 1.6 secs per month per person to convince them your site is interesting, unique, worthwhile. Therefore you need to know your core – define, focus & build outwards. Some examples of those who do:

• Eg. eBay – global economic democracy. 30th largest economy in world. US$1,800 sold per seconds. 520,000 stores hosted worldwide. (Sorry, no link to eBay, I was the one who shouted out "greed" when Luke asked what makes it work so well.) Luke said it was held together by democratic feedback. Any search or browse defined by democratic comments & feedback; they are not sorted. Interaction on a level playing field is core underpinning element that makes it tick.
  
• Also digg with 3 million people online filtering the news. Interaction on all news items. All can express opinions. One click interaction made the site go - the core element.
• flickr – builds outwards, can be shared, embedded, favourited, etc., but core is a picture of a subject.
  

In packaging design for the web, Luke saw three key tools:

1. "Meaningful shouting" through: differentiation (distinct and appropriate), attraction, and embodying the brand. He looked at three well known wiki tools – how are they distinguished meaningfully? Is it coherent story-wise?
2. “Back of pack” – supporting the story & outlining benefits/features. The new Yahoo home page calls up elements and gives you benefits in three bullets on a pop-up window. It helps people use the product. Yahoo also provided a 2 min video on how to use Yahoo Bookmarks.
3. The unpacking experience – eg. the Apple experience. Culminates with the personal photo taken from your new laptop. Google video just gives you a form. It is an interrogation room. That happens with 90% web services. Jumpcut first asks you to make a movie, so the first things seen is the movie and online editor. After that, you are asked for an email address. Also showed pbwiki – it does the email messaging thing and then three more steps, re passwords, access terms of service, more services, etc., and then you need to get through a barrage of marketing material, all before you can even start! But he compared that to geni (creates a family tree) – it starts with a name to make a tree. You jump straight in right out of the gate. It is what people want to do! They got 5 million profiles in 5 months.
   

B. From pages to rich interactions
It is all about design considerations. Ajax interface design. Pages become more dynamic, updated and rich (although these same pages become more difficult for those who are print handicapped). Examples of inline micro-actions (within previously flat web pages): ratings, online indication, fade, transition, status, transition, etc. You manage three spaces by design: the invitation (to vote/drag); transition (when voting/dragging); and feedback (when the vote/drag is done). All are then encapsulated in design patterns – repeatable design patterns (they catalogue different states and interfaces – eg. Yahoo's pattern library) – the use of search assistance layers after some user hesitation and these deliver more meaningful results, and more conversational information retrieval.

C. From sites to content experiences
Sites used to be structured in hierarchies – closed and rather negative. The emerging networks, like clouds, etc. are not as accurate, but maybe they are accurate enough? Content is not treated as part of a structure, it is treated as part of an experience. See his article on primary and secondary action in web form. The new experiences are delivered in the form of: content creation tools (eg. search, blogs, like ajaxian, wikis), aggregators (like digg, del.icio.us), display surfaces (eg. Facebook, MySpace), and entertainment services (eg. You Tube).
Design considerations again. When readers come to his page it delivers primary content, related content and a bit of context. How much of site dedicated to overhead? People really just want what they came to find and maybe a bit of related stuff and context. Why hamper the user experience with what they don't want. Do you need to get everything into the whole page? (The long tail phenomena again - for most web sites, only a few pages get most of the attention/use.)
Eg. personalised search like ROLLYO and a party planner/arranger like RENKOO
If expectations are met . . . people will look around and may take up relevant invitations.
Distributed or re-mixed content. These experiences are not just about distribution, but bringing content in context (and core design still matters!). Eg. blog posts with rich metadata in it, say from Yahoo Shortcuts (interestingly, I found it easier to find this page online via a Google search than a Yahoo search). Things can be added in with a single click on your blog. Context can be king.

D. From webmaster creation to everyone creates
Community on the web comes from features like tags, ratings reviews, trackbacks, blogs, wikis, subscribe RSS, etc. Unity through shared interests and goals. Something gets them all there around something. Social behaviours – reputation & identity; communications; sequences, etc. Implications: GOOD - Filter, content creation, increased engagement (Yahoo answers), invested consumers and collaborative innovation. BAD – blurred focus, spam and poor quality, power laws (abuse), factions and tribes, privacy and exposure issues.

• Enable identity for communities: welcome, anonymity can be a death sentence, profiles.
• Provide for creators synthesizers, comsumers, not just one or two. Who creates – only 1% create, 10% are synthesizers and 100% are consumers – they read, engage, benefit from content. Value from reaction of people with each other.
• It all depends on the tools. How to get people to contribute and how to encourage quality? MySpace kinda ugly? But is is possible to create good stuff. It is hard to create good profiles on MySpace and easy to create ugly stuff.
• Quality content is based off the level of effort needed to put something in. Burying the submit button encourages fewer but better posts! So some barriers to entry can help QA. The best check on bad behaviour is identity. Has implications for comments on our blogs (Facebook founder, Mark Z.)

See his blog – Functioning Form

Luke's responses to questions:
Re government websites – any trends? Enormous opportunity for us to build on these principles. Many different ways to engage. Eg. initial (adverse) reactions from digital media, film and music and their attitude now.
Getting around crappy content – don't just go for the quick fix, quick dollar, think about the long term (what Liz usually urges us to do!). There are ways to make it good.
Redeveloping sites from scratch – all about knowing your core. Start at that. Not with the amalgam that you have that hides the great original idea. What is really working and what is the core essence?