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

Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...ssuserf63bd7
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreNZSG
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdfShaun Heinrichs
 
Excvation Safety for safety officers reference
Excvation Safety for safety officers referenceExcvation Safety for safety officers reference
Excvation Safety for safety officers referencessuser2c065e
 
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdfSherl Simon
 
How to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHow to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHelp Desk Migration
 
Entrepreneurial ecosystem- Wider context
Entrepreneurial ecosystem- Wider contextEntrepreneurial ecosystem- Wider context
Entrepreneurial ecosystem- Wider contextP&CO
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxRakhi Bazaar
 
WSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdfWSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdfJamesConcepcion7
 
Vladyslav Fliahin: Applications of Gen AI in CV (UA)
Vladyslav Fliahin: Applications of Gen AI in CV (UA)Vladyslav Fliahin: Applications of Gen AI in CV (UA)
Vladyslav Fliahin: Applications of Gen AI in CV (UA)Lviv Startup Club
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Jiastral oracle
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesDoe Paoro
 
Rakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi Bazaar
 
Customizable Contents Restoration Training
Customizable Contents Restoration TrainingCustomizable Contents Restoration Training
Customizable Contents Restoration TrainingCalvinarnold843
 
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Aggregage
 
Neha Jhalani Hiranandani: A Guide to Her Life and Career
Neha Jhalani Hiranandani: A Guide to Her Life and CareerNeha Jhalani Hiranandani: A Guide to Her Life and Career
Neha Jhalani Hiranandani: A Guide to Her Life and Careerr98588472
 
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckPitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckHajeJanKamps
 
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...Operational Excellence Consulting
 
MEP Plans in Construction of Building and Industrial Projects 2024
MEP Plans in Construction of Building and Industrial Projects 2024MEP Plans in Construction of Building and Industrial Projects 2024
MEP Plans in Construction of Building and Industrial Projects 2024Chandresh Chudasama
 
WSMM Media and Entertainment Feb_March_Final.pdf
WSMM Media and Entertainment Feb_March_Final.pdfWSMM Media and Entertainment Feb_March_Final.pdf
WSMM Media and Entertainment Feb_March_Final.pdfJamesConcepcion7
 

Recently uploaded (20)

Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource Centre
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf
 
Excvation Safety for safety officers reference
Excvation Safety for safety officers referenceExcvation Safety for safety officers reference
Excvation Safety for safety officers reference
 
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
 
How to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHow to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your Business
 
Entrepreneurial ecosystem- Wider context
Entrepreneurial ecosystem- Wider contextEntrepreneurial ecosystem- Wider context
Entrepreneurial ecosystem- Wider context
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
 
WSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdfWSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdf
 
Vladyslav Fliahin: Applications of Gen AI in CV (UA)
Vladyslav Fliahin: Applications of Gen AI in CV (UA)Vladyslav Fliahin: Applications of Gen AI in CV (UA)
Vladyslav Fliahin: Applications of Gen AI in CV (UA)
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic Experiences
 
Rakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptx
 
Customizable Contents Restoration Training
Customizable Contents Restoration TrainingCustomizable Contents Restoration Training
Customizable Contents Restoration Training
 
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
 
Neha Jhalani Hiranandani: A Guide to Her Life and Career
Neha Jhalani Hiranandani: A Guide to Her Life and CareerNeha Jhalani Hiranandani: A Guide to Her Life and Career
Neha Jhalani Hiranandani: A Guide to Her Life and Career
 
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckPitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deck
 
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
 
MEP Plans in Construction of Building and Industrial Projects 2024
MEP Plans in Construction of Building and Industrial Projects 2024MEP Plans in Construction of Building and Industrial Projects 2024
MEP Plans in Construction of Building and Industrial Projects 2024
 
WSMM Media and Entertainment Feb_March_Final.pdf
WSMM Media and Entertainment Feb_March_Final.pdfWSMM Media and Entertainment Feb_March_Final.pdf
WSMM Media and Entertainment Feb_March_Final.pdf
 

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