Designing for Web 2.0: The Visual Ecosystem

Luke Wroblewski

Principal Designer, Yahoo! Social Media

Principles of good visual design have always been applicable to web design: balance, proportion, contrast, color, and typography. As a visual medium, the Web has always had its own set of unique attributes: screen resolution, browsers, platforms, and multiple devices. With Web 2.0, these attributes have expanded to include a new array of services to remix and distribute micro-content (APIs, RSS), as well as participatory content created by the community. How can visual design enhance user experience when your audience might be coming from a browser, an RSS feed, or a widget? How does visual design communicate your brand when your brand is created daily by your community?

In this two-part session, we'll show real-world strategies and techniques for designing your visual ecosystem through two case studies: one focusing on a redesign of an existing site; the other, a startup with a ground-up new UI and user experience design.

-----------------------------------------------------------------------------------------------

Predominantly the way people make sense on the web, the way they actually scan information on a page (example of eye tracking shown) – is erratic, scurrying.

Visual design can help indicate actionable/not actionable elements.

It can help tell the user where they are, and how they‘re expected to interact with the environment.

Design Considerations:
presentation, interaction, organization

Presentation:
the presentation becomes the voice. It can help define the purpose of the site to the people of the site. It can help define the goal.

ex.
VideoEgg.com
goal: the ezest way to get your video online
(that's what they want the user to do - that's the first copy the user sees)

Changes in web from 1.0 to 2.0
- Locomotion
- Conversation
- Manipulation

Locomotion: movement in space
In 2.0, with the help of new technologies (AJAX, FLEX)
users move around the pages less and less.
Vs. early years - it was about moving from place to place -or page to page.

Converasation is communication. (i.e. Terry Winegrad at Stanford )
enabled conversations:
display services (flickr)
content creation (wordpress)
aggregation services (digg)
Entertainment destinations: (YouTube)
(stat: .16% of those who go to YouTube actually contribute/ upload a video)

Comparisons to RealWorld Packaging
Certain aspects of Packaging design can actually be applied to the online world.
Meaningful shouting.
Having the appropriate and distinct personality that makes people take a look

Back of packaging concept
“back of pack stories " on package design – it’s what tells you what this thing is and why should you care.

Consider the experience of unpacking.

(Examples of unpacking experience)
i.e. Unpacking the macbook - one of the first things you see is a rolodex-type card. The card has a silhouette shape suggesting that YOU belong here, this. Suggesting, “hey take a picture of yourself with the onboard camera, because, you can”.

Online, on a website, What's the first thing the user gets when they're interested.
Example, Yahoo Videos - They get a form – registration form.
Okay. A bit of a "boo" "boring"

BUT, what if it was a little more like unpacking the macbook? What if you could give the user a little more of a fun experience?

Examples: Jumpcut.com, Scrapblog.com

Right from the get-go it's "hey make a movie – right now." or "make your own scrapbook, right now"

Only after completed, when you decide you want to save or share - that you get a registration form,

etc.

They're all about the pleasant engagement /experience..

This “more fun” experience allows people to be drawn in. To be engaged. Get hooked.

Giving people an attractive and compelling experience plays an important role.
pages - are now rich content experiences.
with Ajax interface designs. Single spot refreshes. No longer full page refresh.

Bill Scott Designing for AJAX - Bill has compiled a long list - good for reference. Trying to build a vocabulary around it.

invitation/transition/feedback

----------

STAT ALERT:
Technorati:
100k new blogs everyday.

DIGG hit 1million registered users.

----------

content creation
content aggregators
display surfaces
Entertainment

High quality content experience vs, the low quality. What percentage of stuff is dedicated to overhead of site - or content the user is looking for. (Nytimes.com vs Chicago Tribune)

flickr.com/photos/bryce/(more stuff here)

Renkoo.com (in beta)

what is this thing.
why should i care
how do I use it

-----------------

Quote from Will Wright:

most user-created content is crappy. But as we create better tools, we'll increase the

value of the output of those tools.

----------------------

maybe it's about giving users the tools that make it easier to do the right thing.

if you give people the environment for personal expression - then accept it- it's open , they';ll do just that.

TAKE AWAYS:

treat web packaging the way we treat shelf space/product packaging

optimizing content experiences for that particular use.
Might actually engage folks rather than turn them away

www.lukew.com/ff

luke@lukew.com
drop him an email to upload slides.