Published on May 21, 2007
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
SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS & FEATURES 20
UNPACKING EXPERIENCE 22 PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN
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
24% CONTENT 76% SITE OVERHEAD 35
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
“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 email@example.com 46
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 ...
Designing for Web 2.0: The Visual Ecosystem. Luke Wroblewski, Principal Designer, Yahoo! Social Media Track: Design and User Experience ... With Web 2.0 ...
Additional Information; Web 2.0 Expo: Designing for Web 2.0. by Luke Wroblewski April 20, 2007. In my Designing for Web 2.0: The Visual Ecosystem talk at ...
Designing for Web 2.0 : The Visual Ecosystem ... 가장 먼저 웹2.0이 도래하면서 디자인에서도 모든 것이 바뀔 것이라는 말로..
Die Broschüre zum Web 2.0. „Blogging, Ajax, Wikipedia, Flickr: ... Designing for Web 2.0: The Visual Ecosystem Luke Wroblewski: ...
In this Photoshop tutorial we're going to learn how to create a web 2.0 layout, ... Visual Effects; ... Create a Professional Web 2.0 Layout
Conference By Track. Web 2.0 Expo will feature 7 ... Web 2.0 Edition; Designing for Web 2.0: The Visual Ecosystem; Embracing the Chaos: Designing For and ...
Event: Web 2.0 Expo 2007. by Luke Wroblewski April 13, 2007. On Wednesday, April 18, ... My talk is on Designing for Web 2.0: The Visual Ecosystem:
View 36239 Designing For Web posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. ... 2 Visual Design; 3 Illustration;