Download - Design Patterns for the Web #1
![Page 1: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/1.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2004
Design Patterns for the Web #1Design Patterns for the Web #1
October 21, 2004
![Page 2: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/2.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 2
Hall of Fame or Hall of Shame?
• java.sun.com
![Page 3: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/3.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 3
Hall of Fame
• Good branding– java logo– value prop
• Inverted pyramid writing style
• Fresh content– changing first
read– news in sidebar
• Obvious Links
![Page 4: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/4.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2004
Design Patterns for the Web #1Design Patterns for the Web #1
October 21, 2004
![Page 5: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/5.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 5
Outline
• Review of Heuristic Evaluation
• Web Design Process, Specialties & Artifacts
• Detailed Design Example
• Web Design Patterns
![Page 6: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/6.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 6
Review of Heuristic Evaluation• Have evaluators go through the UI twice• Ask them to see if it complies with heuristics
– note where it doesn’t & say why
• Combine the findings from 3 to 5 evaluators• Have evaluators independently rate severity• Alternate with user testing
![Page 7: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/7.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 7
Good Web Site Design Matters
Good Web Site Design can Lead to Healthy Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
• 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
![Page 8: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/8.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 8
Web Design Process
![Page 9: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/9.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 9
Design Specialties
• Information Architecture– encompasses
information & navigation design
• User Interface Design– also includes
testing & evaluation
Information Architecture
User InterfaceDesign
Information Design
Navigation Design
Graphic Design
Usability Evaluation
![Page 10: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/10.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 10
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
![Page 11: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/11.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 11
Site Maps
• High-level, coarse-grained view of entire site
![Page 12: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/12.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 12
Storyboards
• Interaction sequence, minimal page level detail
![Page 13: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/13.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 13
Schematics
• Page structure w/ respect to information & navigation
![Page 14: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/14.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 14
Mock-ups
• High-fidelity, precise representation of page
![Page 15: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/15.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 15
1
![Page 16: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/16.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 16
2
![Page 17: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/17.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 17
3
![Page 18: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/18.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 18
4
![Page 19: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/19.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 19
5
![Page 20: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/20.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 20
Quick-Flow Checkouts6
![Page 21: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/21.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 21
Basic Web Design
• Let's take a closer look page by page
![Page 22: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/22.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 22
1
![Page 23: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/23.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 23
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right to
reinforce– examples of SITE BRANDING (E1)
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right to
reinforce– examples of SITE BRANDING (E1)
1
![Page 24: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/24.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 24
• What kind of site is this?– Shopping cart icon– Tab row content– Categories on left– Prices in content area– example of PERSONAL E-
COMMERCE (A1)
• What kind of site is this?– Shopping cart icon– Tab row content– Categories on left– Prices in content area– example of PERSONAL E-
COMMERCE (A1)
1
![Page 25: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/25.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 25
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS (K10)
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS (K10)
1
![Page 26: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/26.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 26
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
1
![Page 27: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/27.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 27
2
![Page 28: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/28.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 28
• 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)
• 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)
2
![Page 29: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/29.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 29
• Where am I in the site?– “Home > Music” are
LOCATION BREAD CRUMBS (K6)
– TAB ROW (K3) says “Music”– Album cover, “Product
Highlights”, and CD cover
• Where am I in the site?– “Home > Music” are
LOCATION BREAD CRUMBS (K6)
– TAB ROW (K3) says “Music”– Album cover, “Product
Highlights”, and CD cover
2
![Page 30: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/30.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 30
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
2
![Page 31: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/31.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 31
• The Fold– Hmm, what’s below here?
• The Fold– Hmm, what’s below here?
2
![Page 32: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/32.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 32
• Impulse buy• PESONALIZED
RECOMMENDATIONS (G3)
• About this album• Lots of unused space• Still more info below…
• Impulse buy• PESONALIZED
RECOMMENDATIONS (G3)
• About this album• Lots of unused space• Still more info below…
2
![Page 33: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/33.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 33
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION
COMMUNITY (G4)
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION
COMMUNITY (G4)
2
![Page 34: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/34.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 34
3
![Page 35: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/35.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 35
• What site am I at? – Logo in upper-left– Colors, layout, font– examples of SITE BRANDING (E1)
• What site am I at? – Logo in upper-left– Colors, layout, font– examples of SITE BRANDING (E1)
3
![Page 36: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/36.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 36
• 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)
• 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)
3
![Page 37: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/37.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 37
• Cross-selling– Possibly a pleasant
surprise– Impulse buy– CROSS-SELLING & UP-
SELLING (G2)
• Cross-selling– Possibly a pleasant
surprise– Impulse buy– CROSS-SELLING & UP-
SELLING (G2)
3
![Page 38: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/38.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 38
• 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)
• 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)
3
![Page 39: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/39.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 39
• What can I do?– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct– 3D, looks clickable– Repeated above and
below the fold
• What can I do?– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct– 3D, looks clickable– Repeated above and
below the fold
3
![Page 40: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/40.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 40
4
![Page 41: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/41.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 41
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT (H2)
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT (H2)
4
![Page 42: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/42.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 42
5
![Page 43: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/43.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 43
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”– QUICK-FLOW CHECKOUT (F1)
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”– QUICK-FLOW CHECKOUT (F1)
5
![Page 44: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/44.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 44
• Note what’s 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
• Note what’s 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
5
![Page 45: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/45.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 45
Quick-Flow Checkouts6
![Page 46: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/46.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 46
Quick-Flow Checkouts
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two HIGH-VISIBILITY ACTION
BUTTONS (K5) for fold
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two HIGH-VISIBILITY ACTION
BUTTONS (K5) for fold
6
![Page 47: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/47.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 47
Quick-Flow Checkouts
• No nasty surprises– Can see order– Total price is same as
shopping cart– ORDER SUMMARY (F7)
• No nasty surprises– Can see order– Total price is same as
shopping cart– ORDER SUMMARY (F7)
6
![Page 48: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/48.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 48
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
• 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
![Page 49: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/49.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 49
Summary
• Lots of issues involved in designing web sites
![Page 50: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/50.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 50
Next Time
• Midterm
• Following Lecture– Web Design Patterns in detail
![Page 51: Design Patterns for the Web #1](https://reader030.vdocuments.us/reader030/viewer/2022020117/56813e5a550346895da854a0/html5/thumbnails/51.jpg)
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 51
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.
• Don’t Make Me Think! Steven Krug. Que, 2000.