DESIGNING FOR WEB 2.0:
THE VISUAL ECOSYSTEM
LUKE WROBLEWSKI
WEB 2.0 EXPO, APRIL 2007
1

Luke Wroblewski
Yahoo! Inc.
• Senior Principal, Product Ideation & Design
LukeW Interface Designs
• Principal & Founder
• Product design & strategy services
Author
• Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)
• Functioning Form: Web applications, product
strategy, & interface design articles
Previously
• eBay Inc., Lead Designer
• University of Illinois, Instructor
• NCSA, Senior Designer
http://www.lukew.com
2

3
PHOTOS BY SLING@FLICKR, JELLYMON, YOONHEE_KOO, SPLORP

WITH WEB 2.O
EVERYTHING’S DIFFERENT…
4

5
PHOTOS BY * BEEZY *, STRIATIC, STEVE RHODES, N8AGRIN, ELECRO_N, WILL PATE

SO MAYBE NOT EVERYTHING
IS DIFFERENT.
6

How We Use the Web
“Look around feverishly for anything that is interesting or vaguely resembles
what you are looking for, and is clickable.” -Steve Krug
-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
7

Design Considerations
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Presentation: How your application appears to your audience
• Interaction: How your application behaves in response to user actions
• Organization: The structure of your application
8

Presentation
• All interactions occur through the presentation
• Inform users
• Establish relationships between content
• Guide users through actions
• Make organizational systems clear
• Provide situational awareness
• Maintain consistency to create a sense of place
• Effectively convey brand message to your audience
• Emotional impact
• Engage and invite
• Provide a unique personality
9

What Makes a Great Presentation?
• Visual Organization
• Communicates the
relationships between
user interface elements
• Enables Interaction
Design
• Information Design
• Personality
• Communicates the
brand essence of a
product
• Visceral design
• Color, font, image,
pattern selection
10

The End Goal
• Quickly Communicate
• What is this? Usefulness
• How do I use it? Usability
• Why should I care? Desirability
11

SO WHAT IS DIFFERENT?
12

WEB 2.0 SHIFTS
LOCOMOTION SERVICES
PAGES RICH INTERACTIONS
SITES CONTENT EXPERIENCES
WEBMASTERS EVERYONE
13

WEB 2.0 SHIFTS
LOCOMOTION SERVICES
PAGES RICH INTERACTIONS
SITES CONTENT EXPERIENCES
WEBMASTERS EVERYONE
14

WAYS WE INTERACT WITH THE WORLD:
• Locomotion
• Conversation
• Manipulation
-TERRY WINOGRAD, STANFORD
15

Web Transitions
1. Locomotion to digital representations
of physical entities
• Directories & portals, Yahoo!
• Company sites & brochure-ware
2. Digital manipulation of physical goods
• E-commerce everywhere
• Amazon, eBay
3. Digital services
• Enable conversation & manipulation
• Display surfaces
• Content creation
• Aggregation
• Entertainment
-Types of digital services: TOM CHI, YAHOO! 16

MEANINGFUL
PACKAGING DESIGN SHOUTING
FOR WEB BACK OF PACK
APPLICATIONS
UNPACKING
EXPERIENCE
17

DIFFERENTIATE
MEANINGFUL
ATTRACT
SHOUTING
EMBODY THE BRAND
18

19

SUPPORT THE STORY
BACK OF PACK
OUTLINE BENEFITS &
FEATURES
20

21

UNPACKING
EXPERIENCE
22
PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN

23

24

LOCOMOTION SERVICES
• Visual design considerations
• Meaningful shouting
• Back of pack messaging
• Impactful unpacking experiences
25

WEB 2.0 SHIFTS
LOCOMOTION SERVICES
PAGES RICH INTERACTIONS
SITES CONTENT EXPERIENCES
WEBMASTERS EVERYONE
26

Ajax Interface Design
27

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page
Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom
Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom
Editing. Inline Text Editing. Persistent Portals. Inline Reordering.
Indication. Busy Indication. Cursor Busy. In Context Busy. In Context
Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred
Content Loading. Dynamic Goal. Narrowing Choices. Refining Search.
Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop
Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity
Focus. Configurable Module - Faceplate. Configurable Module - Flip It.
Configurable Module - Inline Configure. Configurable Module - Slide
Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling.
Expandable Paging Boundary. Fresh Content. Hover Detail. In Place
Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest.
On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling
Modules. Auto Save. In Context Tools. Remembered Collection.
Remembered Preferences. Auto Form Fill. Rating an Object.
Transition. Brighten Transition. Cross Fade Transition. Dim Transition.
Expand Transition. Fade In Transition. Fade Out Transition. Flip
Transition. Move Transition. Self-Healing Transition. Collapse
Transition. Slide Transition. Rich Internet Object. Available. Selected.
28
BILL SCOTT, DESIGNING FOR AJAX

INVITATION
TRANSITION
FEEDBACK
29

PAGES RICH INTERACTIONS
• Visual design considerations
• Invitation: communicate potential
• Transition: illustrate manipulation
• Feedback: success, progress, errors
30

WEB 2.0 SHIFTS
LOCOMOTION SERVICES
PAGES RICH INTERACTIONS
SITES CONTENT EXPERIENCES
WEBMASTERS EVERYONE
31

• Content Creation Tools
• 120,00 new blogs created each day -4/07
• Content Aggregators
• digg hits one million registered users -3/07
• Display Surfaces
• MySpace number one site in page views -12/06
• Entertainment
• 100+ million daily streams on YouTube -6/06
32

Sites Content Objects
Emergent Networks: open, inexpensive,
Hierarchies: management, military
simple, close enough
Examples: closed, expensive, complex,
Examples: crowds, friends, incidental
accurate
networks,
ANDREW HINTON’S ARCHITECTURES OF PARTICIPATION 33

34

24% CONTENT
76% SITE OVERHEAD
35

36

37
HTTP://FLICKR.COM/PHOTOS/BRYCE/58299511/

38

39

SITES CONTENT EXPERIENCES
• Visual design considerations
• Primary focus on primary content
• Secondary focus on related and relevant content &
actions
• Visual interest captures attention (avoid clutter &
visual noise)
• If expectations are met
• People look around the page
• Relevant calls to action are welcome
• When content is distributed or remixed
• Core principles of visual communication still
matter: personality & visual organization
40

WEB 2.0 SHIFTS
LOCOMOTION SERVICES
PAGES RICH INTERACTIONS
SITES CONTENT EXPERIENCES
WEBMASTERS EVERYONE
41

42

“Most user-created content is crappy. As we
create better tools, we’ll increase the value of
the output of those tools.” -Will Wright
43

WEBMASTERS EVERYONE
• Visual design considerations
• Supporting personal aesthetics
• Tools for expression: easier to do the right
thing, remain flexible & robust
44

Summary
• Web is a visual medium
• Visual organization & personality
• Look to existing models for cross media brand
management
• Locomotion to Services
• Packaging Design for Web Applications
• Page to Rich Interactions
• Invitation, Transition, Feedback
• Sites to Content Experiences
• Landing page design
• Webmasters to Everyone
• Enable self-expression
• Better content creation tools
-Types of digital services: TOM CHI, YAHOO! 45

For more information…
Functioning Form
www.lukew.com/ff/
Drop me a note
luke@lukew.com
46