Designing for Web 2.0: The Visual Ecosystem

7,022 views
6,952 views

Published on

In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not changed much. However, shifts from locomotion to services, from pages to rich interactions, from sites to content experiences, and from content creation by webmasters to everyone online have introduced unique opportunities and constraints that the presentation layer of Web applications needs to account for.

Published in: Business, Technology
0 Comments
73 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,022
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
73
Embeds 0
No embeds

No notes for slide

Designing for Web 2.0: The Visual Ecosystem

  1. 1. DESIGNING FOR WEB 2.0: THE VISUAL ECOSYSTEM LUKE WROBLEWSKI WEB 2.0 EXPO, APRIL 2007 1
  2. 2. 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. 3. 3 PHOTOS BY SLING@FLICKR, JELLYMON, YOONHEE_KOO, SPLORP
  4. 4. WITH WEB 2.O EVERYTHING’S DIFFERENT… 4
  5. 5. 5 PHOTOS BY * BEEZY *, STRIATIC, STEVE RHODES, N8AGRIN, ELECRO_N, WILL PATE
  6. 6. SO MAYBE NOT EVERYTHING IS DIFFERENT. 6
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. The End Goal • Quickly Communicate • What is this? Usefulness • How do I use it? Usability • Why should I care? Desirability 11
  12. 12. SO WHAT IS DIFFERENT? 12
  13. 13. WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 13
  14. 14. WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 14
  15. 15. WAYS WE INTERACT WITH THE WORLD: • Locomotion • Conversation • Manipulation -TERRY WINOGRAD, STANFORD 15
  16. 16. 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
  17. 17. MEANINGFUL PACKAGING DESIGN SHOUTING FOR WEB BACK OF PACK APPLICATIONS UNPACKING EXPERIENCE 17
  18. 18. DIFFERENTIATE MEANINGFUL ATTRACT SHOUTING EMBODY THE BRAND 18
  19. 19. 19
  20. 20. SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS & FEATURES 20
  21. 21. 21
  22. 22. UNPACKING EXPERIENCE 22 PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN
  23. 23. 23
  24. 24. 24
  25. 25. LOCOMOTION SERVICES • Visual design considerations • Meaningful shouting • Back of pack messaging • Impactful unpacking experiences 25
  26. 26. WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 26
  27. 27. Ajax Interface Design 27
  28. 28. 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
  29. 29. INVITATION TRANSITION FEEDBACK 29
  30. 30. PAGES RICH INTERACTIONS • Visual design considerations • Invitation: communicate potential • Transition: illustrate manipulation • Feedback: success, progress, errors 30
  31. 31. WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 31
  32. 32. • 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
  33. 33. 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. 34. 34
  35. 35. 24% CONTENT 76% SITE OVERHEAD 35
  36. 36. 36
  37. 37. 37 HTTP://FLICKR.COM/PHOTOS/BRYCE/58299511/
  38. 38. 38
  39. 39. 39
  40. 40. 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
  41. 41. WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 41
  42. 42. 42
  43. 43. “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
  44. 44. WEBMASTERS EVERYONE • Visual design considerations • Supporting personal aesthetics • Tools for expression: easier to do the right thing, remain flexible & robust 44
  45. 45. 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
  46. 46. For more information… Functioning Form www.lukew.com/ff/ Drop me a note luke@lukew.com 46

×