Design Patterns for the Web - PowerPoint PPT Presentation

Loading...

PPT – Design Patterns for the Web PowerPoint presentation | free to view - id: 6f87f1-MDRiY



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Design Patterns for the Web

Description:

Design Patterns for the Web – PowerPoint PPT presentation

Number of Views:79
Avg rating:3.0/5.0
Slides: 96
Provided by: Jame3246
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Design Patterns for the Web


1
Design Patterns for the Web
2
Hall of Fame or Hall of Shame?
  • java.sun.com

3
Hall of Fame
  • Good branding
  • java logo
  • value proposition
  • Inverted pyramid writing style
  • Fresh content
  • changing first read
  • news in sidebar
  • Obvious Links

4
Design Patterns for the Web
5
Outline
  • Web Design Process, Specialties Artifacts
  • Detailed Design Example
  • Web Design Patterns

6
Good Web Site Design Matters
  • NY Times, Aug 30 1999, on IBM Web site
  • Most popular feature was search because
    people couldn't figure out how to navigate the
    site
  • The second most popular feature was the help
    button, because the search technology was so
    ineffective.
  • After redesign
  • use of the "help" button decreased 84 percent
  • sales increased 400 percent

Good Web Site Design can Lead to Healthy
Sales http//www.nytimes.com/library/tech/99/08/cy
ber/commerce/30commerce.html
7
Web Design Process
8
Design Specialties
  • Information Architecture
  • encompasses information navigation design
  • User Interface Design
  • also includes testing evaluation

Information Design
Navigation Design
Graphic Design
9
Artifacts of Design Practice
  • Designers create representations of sites at
    multiple levels of detail
  • Web sites are iteratively refined at all levels
    of detail

Site Maps
Storyboards
Schematics
Mock-ups
10
Site Maps
  • High-level, coarse-grained view of entire site

11
Storyboards
  • Interaction sequence, minimal page level detail

12
Schematics
  • Page structure w/ respect to information
    navigation

13
Mock-ups
  • High-fidelity, precise representation of page

14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
Quick-Flow Checkouts
20
Basic Web Design
  • Let's take a closer look page by page

21
(No Transcript)
22
  • What site is this?
  • Logo in top-left corner denotes the site
  • Another logo at top-right to reinforce
  • examples of SITE BRANDING (E1)

23
  • What kind of site is this?
  • Shopping cart icon
  • Tab row content categories on left
  • Prices in content area
  • UP-FRONT VALUE PROPOSITION (C2)
  • example of PERSONAL E-COMMERCE (A1)

24
  • What can I do here?
  • Welcome for new visitors
  • Tab row / Search on top
  • Categories
  • Prices
  • Examples of OBVIOUS LINKS (K10)

25
  • Most important info visible without scrolling
  • ABOVE THE FOLD (I2)

26
(No Transcript)
27
  • What site am I at?
  • Logo in upper-left reinforces brand, can click to
    go to home
  • Same font, layout, color scheme also reinforces
  • examples of SITE BRANDING (E1)

28
  • Where am I in the site?
  • Home gt Music are LOCATION BREAD CRUMBS (K6)
  • TAB ROW (K3) says Music
  • Album cover, Product Highlights, and CD cover

29
  • Can I trust these sellers?
  • Who am I buying from?
  • Are they reputable?
  • What about shipping?

30
  • The Fold
  • Hmm, whats below here?

31
  • Impulse buy
  • PESONALIZED RECOMMENDATIONS (G3)
  • About this album
  • Lots of unused space
  • Still more info below

32
  • Is this product any good?
  • Editorial reviews
  • Customer reviews
  • RECOMMENDATION COMMUNITY (G4)

33
(No Transcript)
34
  • What site am I at?
  • Logo in upper-left
  • Colors, layout, font
  • examples of SITE BRANDING (E1)

35
  • Where am I in the site?
  • Last link clicked was Buy!
  • Shopping Cart and Proceed to Checkout
    reinforce that this is the right page
  • SHOPPING CART (F3)

36
  • Cross-selling
  • Possibly a pleasant surprise
  • Impulse buy
  • CROSS-SELLING UP-SELLING (G2)

37
  • What am I going to buy?
  • Easy to remove
  • Easy to move to wishlist
  • How much will it cost?
  • Shipping costs there, no nasty surprises
  • SHOPPING CART (F3)

38
  • What can I do?
  • Proceed to Checkout HIGH VISIBILITY ACTION
    BUTTON (K5)
  • Visually distinct
  • 3D, looks clickable
  • Repeated above and below the fold

39
(No Transcript)
40
  • What if I dont have a User ID?
  • What if I forgot my password?
  • SIGN-IN/NEW ACCOUNT (H2)

41
(No Transcript)
42
  • What site?
  • Logo, layout, color, fonts
  • Where in site?
  • Checkout, step 1 of 3
  • Choose shipping address
  • QUICK-FLOW CHECKOUT (F1)

43
  • Note whats different
  • No tab rows
  • No impulse buys
  • Only navigation on page takes you to next step
  • This is a PROCESS FUNNEL (H1)
  • Extraneous info and links removed to focus users

44
Quick-Flow Checkouts
45
Quick-Flow Checkouts
  • Last step of process
  • Step 3, Place Order
  • Place my order button
  • Two HIGH-VISIBILITY ACTION BUTTONS (K5) for fold

46
Quick-Flow Checkouts
  • No nasty surprises
  • Can see order
  • Total price is same as shopping cart
  • ORDER SUMMARY (F7)

47
Quick-Flow Checkouts
  • Easy to change shipping and billing
  • Easy to save this info
  • Easier to setup info in context of specific task
  • Clearer to users why this info is needed

48
Design Solutions
  • Design is about finding solutions
  • Unfortunately, designers often reinvent
  • Hard to know how things were done before
  • Why things were done a certain way
  • How to reuse solutions

49
Design Patterns
  • Design patterns communicate common design
    problems and solutions
  • First used in architecture Alexander
  • Ex. How to create a beer hall where people
    socialize?

50
Using Design Patterns
  • Not too general and not too specific
  • Use a solution a million times over, without
    ever doing it the same way twice
  • Design patterns are a shared language
  • for building and planning towns, neighborhoods,
    houses, gardens, rooms.
  • Ex. Beer hall is part of a center for public
    life
  • Ex. Beer hall needs spaces for groups to be
    alone ALCOVES

51
A Web of Design Patterns
(8) Mosaic of Subcultures
Cities Towns
(31) Promenade
(33) Night Life
(90) Beer Hall
Local Gatherings
(95) Building Complex
Interiors
(181) The Fire
(179) Alcoves
52
Web Design Patterns
  • Now used in Web design
  • Communicate design problems solutions
  • how to create navigation bars for finding
    relevant content
  • how to create a shopping cart that supports check
    out
  • how to make e-commerce sites where people return
    buy

53
NAVIGATION BAR (K2)
  • Problem Customers need a structured, organized
    way of finding the most important parts of your
    Web site

54
NAVIGATION BAR (K2)
  • Solution diagram
  • Captures essence on how to solve problem

55
Pattern Groups
  • Our patterns organized by group

Advanced ecommerce Completing tasks Page
layouts Search Page-level navigation Speed The
mobile web
Site genres Navigational framework Home
page Content management Trust and
credibility Basic ecommerce
56
PROCESS FUNNEL (H1)
  • Problem Need a way to help people complete
    highly specific stepwise tasks
  • Ex. Create a new account
  • Ex. Fill out survey forms
  • Ex. Check out

57
PROCESS FUNNEL (H1)
58
PROCESS FUNNEL (H1)
  • Whats different?
  • No tab rows
  • No impulse buys
  • Only navigation on page takes you to next step
  • Whats the same?
  • Logo, layout, color, fonts

59
PROCESS FUNNEL (H1)
  • Problem What if users need extra help?

60
Process Tunnel
61
CONTEXT-SENSITIVE HELP (H8)
62
PROCESS FUNNEL (H1)Solution Diagram
63
PROCESS FUNNEL (H1)Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
64
Patterns Support Creativity
  • Patterns come from successful examples
  • sites that are so successful that lots of users
    are familiar with their paradigms (e.g., Yahoo)
  • interaction techniques/metaphors that work well
    across many sites (e.g., shopping carts)
  • Not too general not too specific
  • you need to specialize to your needs
  • Patterns let you focus on the hard, unique
    problems to your design situation
  • every real design will have many of these

65
Patterns Offer the Best of Principles,
Guidelines, Templates
  • Patterns help you get the details right, without
    over-constraining your solution
  • unlike principles, patterns not too general, so
    will apply to your situation
  • unlike guidelines, patterns discuss tradeoffs,
    show good examples, tie to other patterns
  • unlike style guides, patterns not too specific,
    so can still be specialized
  • unlike templates, patterns illustrate flows among
    different pages
  • Patterns can serve as documentation for
    team-oriented environments

66
Format of Web Design Patterns
  • Pattern Name and Number
  • Exemplar
  • Background
  • Problem
  • Forces
  • Solution
  • Solution Diagram
  • Related Patterns

67
(No Transcript)
68
Bus Stops
Solution Diagram
Related Patterns
Solution Summary
69
Example of How to Use Patterns
  • Sarah is designer on e-commerce site selling
    custom t-shirts to businesses
  • Her team notices drop-off in checkout process
    (abandoned shopping carts)
  • She turns to design patterns
  • looks to Pattern Group F Basic E-Commerce
  • QUICK FLOW CHECKOUT (F1) catches her eye
  • looks to references
  • PERSONAL E-COMMERCE (A1) skims sees too high
    level for current issue
  • SHOPPING CART (F3) looks promising, but not now
  • PROCESS FUNNEL (H1) how to keep people on task
    exactly what her team needs now!

70
Example of How to Use Patterns
  • Sarah uses PROCESS FUNNEL (H1) to find flaws
    redesign checkout process
  • e.g., notices current checkout is heavy with text
    instructions many links that leave the page
  • Using PROCESS FUNNEL (H1), sketches 3 new designs
  • Gets feedback on new designs from team
  • Iterates to produce 2 designs
  • Performs a quick 1 day evaluation w/ 5 users
  • visits them at work has them use old design
  • anticipated many of the problems, but notes a few
    new ones
  • next she shows new design has user describe
    where each link will go asks whether content
    makes sense
  • uses the results to iterate again present to
    team

71
PROCESS FUNNEL (H1)Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
72
MEANINGFUL ERROR MESSAGES (K13)
  • Problem When customers make mistakes, they need
    to be informed of the problem and how to recover
  • Solution
  • Clear statement of problem
  • Explain how to recover
  • Position near the problem

73
(No Transcript)
74
  • Clear error message?
  • two messages at top
  • Explains how to recover?
  • only implies it is missing required information
  • Positioned near the problem?
  • error messages far
  • required info differs in green/red -gt problem for
    users w/ color deficiency

75
(No Transcript)
76
  • Clear error message
  • Explains how to recover
  • Positioned near the problem

77
MEANINGFUL ERROR MESSAGES (K13)Solution Diagram
78
Web Design Process
79
Patterns in Exploration Phase
  • Use Exploration-level patterns to design overall
    structure
  • different choices will give radically different
    designs
  • For example, how to organize information
  • HIERARCHICAL ORGANIZATION (B3)
  • TASK-BASED ORGANIZATION (B4)
  • ALHABETICAL ORGANIZATION (B5)

80
Patterns in Exploration Phase
TASK-BASED ORGANIZATION (B4) Link the completion
of one group of tasks to the beginning of the
next related task(s)
81
Design Exploration Example
  • John given the task of designing a new subsite
    for showing maps to businesses
  • listings found by typing in address
  • key feature show nearby businesses
  • John comes up with two design sketches
  • Design 1 uses ALPHABETICAL ORGANIZATION (B5) for
    list of all nearby businesses
  • Design 2 uses TASK-BASED ORGANIZATION (B4) for
    list of related nearby businesses

82
Design 1ALPHABETICAL ORGANIZATION (B5)
83
Design 2TASK-BASED ORGANIZATION (B4)
84
Evaluating Which Design to Choose
  • Low-fidelity Usability Test
  • sketches the rest of the key screens on paper
  • brings in 5 participants to his office
  • asks each to carry out 3 tasks while Johns
    colleague Sam plays computer
  • John observes how they perform
  • Tasks
  • 1) look up 1645 Solano Ave., Berkeley CA
  • 2) look up 1700 California Ave, San Francisco CA
    find Tadich Grill
  • 3) look up 2106 N 55th St, Seattle WA find a
    Sushi restaurant nearby

85
Evaluating Which Design to Choose
  • Results with Design 1 (Alphabetical)
  • Task 1 look up 1645 Solano Ave
  • no difficulties encountered warm-up task!
  • Task 2 look up 1700 California find Tadich
    Grill
  • several users didnt notice that the list of
    nearby businesses was scrollable (due to paper
    affordances?)
  • those that scrolled took awhile to find in list
    of over 500
  • Task 3 look up 2106 55th St find nearby Sushi
    restaurant
  • 3 users only picked restaurants that had
    restaurant in the name thus couldnt find
    Kisaku

86
Evaluating Which Design to Choose
  • Results with Design 2 (Task-based)
  • Task 1 look up 1645 Solano Ave
  • no difficulties encountered warm-up task!
  • Task 2 look up 1700 California find Tadich
    Grill
  • 1 user took awhile to figure out that Tadich
    Grill was a restaurant to click on the
    Restaurants link
  • all others found it in 2 clicks
    (Restaurants-gtTadich Grill)
  • Task 3 look up 2106 55th St find nearby Sushi
    restaurant
  • 3 found Kisaku in 2 clicks
  • 2 others asked for a listing of Japanese
    restaurants

87
Evaluating Which Design to Choose
  • General comments
  • 2 users said they often want to email maps to
    friends who they will be meeting (task-based)
  • 3 users wanted driving directions (task-based)
  • ? TASK-BASED ORGANIZATION (B4) worked better, but
    still had some minor problems

88
Design 2 Revision 1Adding More Related Tasks
89
Design 2 Revision 2Adding HIERARCHICAL
ORGANIZATION (B3) LOCATION BREAD CRUMBS
(K6)
90
Design 2 Revision 3 Hi-Fi Prototype Adding
SEARCH ACTION MODULE (J1)
91
Summary
  • Lots of issues involved in designing web sites
  • Design patterns one way of capturing good design
    knowledge

92
Further ReadingBooks on Web Design
  • Web Design in a Nutshell. Jennifer Niederst.
    O'Reilly , 1999.
  • Design of Sites. Doug Van Duyne, James Landay,
    Jason Hong. Addison-Wesley. 2003.
  • Information Architecture for the World Wide Web.
    Louis Rosenfeld and Peter Morville. O'Reilly,
    1998.
  • Dont Make Me Think! Steven Krug. Que, 2000.

93
Further ReadingBooks on Web Design
  • Community Building on the Web. Amy Jo Kim.
    Peachpit Press, 2000.
  • Designing Visual Interfaces Communication
    Oriented Techniques. Kevin Mullet and Darrell
    Sano. Prentice Hall / SunSoft Press. 1994.
  • Understanding Comics. Scott McCloud. Kitchen Sink
    Press, 1994.
  • Designing Web Usability. Jakob Nielsen. New
    Riders Publishing, 1999.

94
Further ReadingWebsites on Web Design
  • UsableWeb.com, links to other usability sites
  • Usability.gov, for building accessible websites
  • Web pages that suck, at http//www.webpagesthatsuc
    k.com/
  • Net tips for designers, at http//www.dsiegel.com/
    tips/
  • User Interface Engineering, at http//www.uie.com
  • ZDNet Ecommerce Best Practices, at
    http//www.zdnet.com/ecommerce.

95
Further ReadingWebsites on Web Design
  • New York Times Ecommerce Times, at
  • http//www.nytimes.com/pages-technology/cybertimes
    /commerce/
  • Webword.com usability log
  • CNet Builder.com, info on building sites
  • ACMs CHI-Web Mailing List
  • http//www.acm.org/sigchi/web/chi-web.html
  • Goodexperience.com web log
  • Jakob Nielsen useit.com
About PowerShow.com