SlideShare a Scribd company logo
1 of 46
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

More Related Content

What's hot

TopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolTopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolguidecreative
 
The Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should HaveThe Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should Haveguidecreative
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websitesguidecreative
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mindMichael Beahm
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureguidecreative
 
WordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should HaveWordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should Haveguidecreative
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive WebsitesPatrick Kennedy
 
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 1209095 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909JeffTe
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Christina Wodtke
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchyHalil Eren Çelik
 

What's hot (11)

TopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolTopTenWebTricksForYourSchool
TopTenWebTricksForYourSchool
 
The Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should HaveThe Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should Have
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mind
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
 
WordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should HaveWordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should Have
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive Websites
 
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 1209095 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchy
 

Similar to Designing for Web 2.0: The Visual Ecosystem

Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke WRoss Lawley
 
Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.webNika Stuard
 
Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009abcboston
 
Web 2.0 Government 2.0
Web 2.0 Government 2.0Web 2.0 Government 2.0
Web 2.0 Government 2.0Zoe Laycock
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphereeraz
 
Objective Digital Intranet Workshop
Objective Digital Intranet WorkshopObjective Digital Intranet Workshop
Objective Digital Intranet WorkshopObjective Experience
 
Web 2.0 Managerial Economics
Web 2.0 Managerial EconomicsWeb 2.0 Managerial Economics
Web 2.0 Managerial EconomicsAvinash Singh
 
Coworking 7th Floor
Coworking 7th FloorCoworking 7th Floor
Coworking 7th Floorfabiomasetti
 
Reply Web20 University
Reply Web20 UniversityReply Web20 University
Reply Web20 Universityreply
 
Web 2.0, Social Media and Minnesota Historical Society
Web 2.0, Social Media and Minnesota Historical SocietyWeb 2.0, Social Media and Minnesota Historical Society
Web 2.0, Social Media and Minnesota Historical SocietyMinnesota Historical Society
 
(by Joshua Porter) Web2.0 for the rest of us
(by Joshua Porter) Web2.0 for the rest of us(by Joshua Porter) Web2.0 for the rest of us
(by Joshua Porter) Web2.0 for the rest of usPhil Smirnov
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development ProcessHend Al-Khalifa
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best PracticesNick Finck
 
1. What Makes A Good Website - 2008
1. What Makes A Good Website - 20081. What Makes A Good Website - 2008
1. What Makes A Good Website - 2008mdda
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...PR 20/20
 
Social Media And Tourism
Social Media And TourismSocial Media And Tourism
Social Media And TourismKatie Lips
 

Similar to Designing for Web 2.0: The Visual Ecosystem (20)

Wiki Design Considerations
Wiki Design ConsiderationsWiki Design Considerations
Wiki Design Considerations
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
 
Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.web
 
Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009
 
Web 2.0 Government 2.0
Web 2.0 Government 2.0Web 2.0 Government 2.0
Web 2.0 Government 2.0
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphere
 
Objective Digital Intranet Workshop
Objective Digital Intranet WorkshopObjective Digital Intranet Workshop
Objective Digital Intranet Workshop
 
Company Overview
Company OverviewCompany Overview
Company Overview
 
Web 2.0 Managerial Economics
Web 2.0 Managerial EconomicsWeb 2.0 Managerial Economics
Web 2.0 Managerial Economics
 
Coworking 7th Floor
Coworking 7th FloorCoworking 7th Floor
Coworking 7th Floor
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
 
Reply Web20 University
Reply Web20 UniversityReply Web20 University
Reply Web20 University
 
Web 2.0, Social Media and Minnesota Historical Society
Web 2.0, Social Media and Minnesota Historical SocietyWeb 2.0, Social Media and Minnesota Historical Society
Web 2.0, Social Media and Minnesota Historical Society
 
(by Joshua Porter) Web2.0 for the rest of us
(by Joshua Porter) Web2.0 for the rest of us(by Joshua Porter) Web2.0 for the rest of us
(by Joshua Porter) Web2.0 for the rest of us
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development Process
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best Practices
 
1. What Makes A Good Website - 2008
1. What Makes A Good Website - 20081. What Makes A Good Website - 2008
1. What Makes A Good Website - 2008
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...
Social Media for Small Businesses: What Blogs, Forums and Social Networks Can...
 
Social Media And Tourism
Social Media And TourismSocial Media And Tourism
Social Media And Tourism
 

Recently uploaded

Introduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxIntroduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxJemalSeid25
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toumarfarooquejamali32
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
Plano de marketing- inglês em formato ppt
Plano de marketing- inglês  em formato pptPlano de marketing- inglês  em formato ppt
Plano de marketing- inglês em formato pptElizangelaSoaresdaCo
 
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHelene Heckrotte
 
Upgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsUpgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsIntellect Design Arena Ltd
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursKaiNexus
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView
 
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfGraham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfAnhNguyen97152
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfHajeJanKamps
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyHanna Klim
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.mcshagufta46
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...IMARC Group
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Winbusinessin
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..dlewis191
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Reportamberjiles31
 

Recently uploaded (20)

Introduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptxIntroduction to The overview of GAAP LO 1-5.pptx
Introduction to The overview of GAAP LO 1-5.pptx
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb to
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
Plano de marketing- inglês em formato ppt
Plano de marketing- inglês  em formato pptPlano de marketing- inglês  em formato ppt
Plano de marketing- inglês em formato ppt
 
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
 
Upgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsUpgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking Applications
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, Ours
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
 
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdfGraham and Doddsville - Issue 1 - Winter 2006 (1).pdf
Graham and Doddsville - Issue 1 - Winter 2006 (1).pdf
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agency
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.
 
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
Boat Trailers Market PPT: Growth, Outlook, Demand, Keyplayer Analysis and Opp...
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Report
 

Designing for Web 2.0: The Visual Ecosystem

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