Designing for Web 2.0: The Visual Ecosystem

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

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

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

• 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

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

Designing for Web 2.0: The Visual Ecosystem

0 comments

Notes on slide 1

52 Favorites & 3 Groups