Luke Wroblewski who is currently Senior Principal of Product Ideation & Design at Yahoo! Inc.

UPDATE 10 Feb 2008: Slides from this talk are now up at Luke’s site.

My extremely rough notes from today’s session. Not very edited, but I told Michelle, who has so beautifully summarised the other sessions, that I’d put up this session she missed.

>>>>>>>>>>>>>>>>

First, showed eye tracking study on Squidoo. People scan all over the place, they are reading very little text.
>>>>>>>>>>>>>>

1. Design Considerations

1.1 Presentation: What is this thing, why do I care about it

1.2 Interaction How your application behaves in response to user actions

1.3 Organisation: The structure of your application

>>>>>>>>>>>>>>

1.1 Presentation

Web site should quickly communicate:

1. What is this – usefulness

2. How do I use it? Usability

3. Why should I care”? Desirability

Screenshot of Videoegg – “video sharing over easy”. Site is full of value propositions. Can easily see what it is and why I should use it.

>>>>>>>>>>>>>>>>>>>>>

So What’s different about today’s web?

Once upon Webmasters created webpages that were assembled into sites.

>>>>>>>>>>>>>

2. Recent shifts

2.1 Locomotion > Services

2.2 Pages > Rich interactions

2.3 Sites > Content experiences

2.4 Webmasters > Everyone

>>>>>>>>>>>>>

2.1 Locomotion > Services

2.1 Ways we interact with the world

• Locomotion
• Conversation
• Manipulation

(Terry Winograd Stanford)

Yahoo Answers grew from 0 – 90 million in 18 months…

Yahoo answers allows you to have anything answered in 5 mins.

Conversation prominent online

Manipulating – mixing , re-adding, – showed Writely >> google docs

All three factors are now allowed.

>>>>>>>>>>>.

Web transitions

1. Locomotion to digital representations of physical entities. First websites included:

* Directories

* Brochures online

2. Next – Digital manipulations of physical goods

*E-commerce everywhere

*Amazon, ebay

3. Now becoming – Digital Services

*Enabling conversation

*Display surfaces

*Content creation

*Aggregation

* Entertainment

(spending time hanging out)

>>>>>>>>>>>>>>>>>>>>

Overhead to create a Digital Service is now very low:

Hosting = costs less than a cup of coffee per month

Free Open Source platforms

Development toolkits

Instant global audience – 1.2B people use the internet (Sept 2007)

>>>>>>>>>>>>>>>

Know your core business

* Define yourself

* Focus on the core

* Build outward

What is the core of your business – work that out and then build outward and upward ….

Define core, then focus on itCore underpinning,

>>>>>>>>>>>>>>>>>>>

Digg – know and define core

Voting, commenting, socially filtering the news

Every news article and can digg

Quote from Digg founder:

“When we made the move to the one-click Digg, activity went through the roof, it was just insane! Just the ease of the one-click and you’re done making the whole difference in the world”.

Flickr – core focus

Person takes picture > Greeeeat diagram of how flicker works

Core focus = person takes picture of a subject

How do you build outward from the core – grow outward, don’t just whack it on top of it.

>>>>>>>>>>>>>>>>

Packaging design for web applications

Meaningfully shouting

Being distinctive, yet appropriate for what your product does

>>>>>>>>>>>>>>>>

2. Back of Pack info(like what used to be on back of cereal box)

Support the story

Outline features and benefits

Eg. Zoho

Eg. Yahoo – Can click to get help – explaining in context

>>>>>>>>>>>>>>..

3. Unpacking experience

Eg. Experience of getting new Apple laptop out of the box

Very personal and engaging to unpack

Jump cut (a site) – can start using immediately

Google videos – have to log in first before you do stuff

PBwiki as an example where it is not intuitive or easy to work out what to do.

Compare this to: Geni – add self, add parents …. are sent email every so often….

5 million profiles in 5 months

>>>>>>>>>>>>>>>>>>>

2.2 Pages > Rich interactions

AJAX Interface design – allows you to just update/change a part of page without complete reload

Trad = User action > screen reload > data update

AJAX – User action > Data update (just small part of page updated)

eg. Digg, ratings on YouTube, To do lists.

Design Patterns

– Repeatable design solutions to common problems

– work “positively” for specific problems in specific contexts

– capture best practices

The following are sites to look up further, containing simple AJAX patterns to do useful things on websites:

“Yahoo Pattern Library”

“Designing Interfaces” – Jennifer Tidwell

“Web Design Patterns”

Here’s some solutions that may be useful:

Yahoo – when narrowing down search, if pause longer than set time x, then drop down menu appears with possible things you could be searching for.

Using rich interactions to make info retrieval more interesting

>>>>>>>>>>>>>>>>>>>>>>>>

2.3 Sites > Content experiences

Creating Navigating systems and site tree – traditionally

Usually – set up with hierarchies – closed, expensive, complex, accurate

Non-traditional – inter-relationships that are messy.

Accurate enough

Example of various manifestations of the same content throughout the web. His article Web Application Form Design is seen in Digg, del.icio.us, Facebook, blogosphere etc…but always linking back to single same work. This little bit of content has an entire presence of its own.

When user gets to single work, then it better fulfil the promise offered by the manifestation. Showed newspaper site with low% of space occupied by the article and high % of space occupied by extra stuff – not good.

Content page should probably contain:

1. Content

2. Pointers to related Content

3. Little bit of context

When you make good on the promise of your content, then people are likely to continue and do the things you want on the site.
Content should dominate.
Also access points internally on site.

On most websites a few bits get all the attention and some get little attention (Long Tail ) Try to link items by relevance to pull clickthroughs from high use items to low use items in the Long Tail.
>>>>>>>>>>>>>

Multiple contexts – things you can do for this

You can give code to manifest in differnt sites

Eg. widgets, search boxes, etc.

>>>>>>>>>>>>>>>>>.

Bring you CONTENT IN CONTEXT

Eg. typing blog post at Yahoo – showed page that recognises item in draft blog post, and retrieves info related to that item to the sidebar – ready to be dropped into blog post (suggest info related was rather commercial )

>>>>>>>>>>>>>>

Sites > Content experiences

* Design considerations

– primary focus on primary content

Need to fulfil promise

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

2.4 Webmasters > Everyone

Everyone can create

Focus on creating community

1999 – add discussion boards

2008 – add blogs , trackbacks etc.

Always – creating community is a way to unite groups of ppl by sharing interests and goals

>>>>>>>>>>>>>>>>>

Great products create community

Rare to organise around nothing

( ** twitter ??? ** )

Social behaviours

Sequences, rituals, groups

>>>>>>>>>>>>>>>>>>>>

Who’s in a community

Creators – 1% (core creators)

Synthesisers – 10% (do stuff with the thing that originated)

Consumers – 100% – all benefit

>>>>>>>>>>>>>>>>>>>>>

Why enable community

When ppl interact with each other, valuable things come up.

Sharing options

(subscribe, save, share …)

>>>>>>>>>>>>>>>>>

Community – positive implications

• Pool of people providing a filter
• Original content creation
• Increased Engagement
• Invested Customers
• Collaborative Innovation

>>>>>>>>>>>>>>>>>>

Community – negative implications

• Too much social = blur
• Too many social features can distract
• Quality – splogs
• Power laws – too many ppl in group have power
• Privacy and exposure

>>>>>>>>>>>>..

BEST PRACTICES

Enable identity

1. Welcome

2. Allow personal branding

3. Re-entry points

4. ??

>>>>>>>>>>>>>>>>.

Provide for Creators, Synthesisers and Consumers

Give them all and entry and action point.

CSC personality types do not easily migrate between groups

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

CONTENT CREATION

– User empowerment, not user friendly

Value creation

>>>>>>>>>>>>>>>>>>>>>>>>>

Will Wright:

” Most user created content is crappy. As we create better tools, we’ll increase the value of the output of these tools”.

Media Wiki – hard to create content …. ???

>>>>>>>>>.

Quality content is based on level of effort to put something in.

Bury submit button, fewer ppl will contribute but content will be better.

Barriers to entry – helps increase quality control

Eg. have to login

Yahoo Answers – first got points if you asked qn. Now costs 5 points to ask a qn, but get 2 pts if you get a best answer.

>>>>>>>>>>>>>>>>>

luke@lukew.com

www.lukew.com/ff/