design patterns for the web #1
DESCRIPTION
Design Patterns for the Web #1. October 21, 2004. Hall of Fame or Hall of Shame?. java.sun.com. Hall of Fame. Good branding java logo value prop Inverted pyramid writing style Fresh content changing first read news in sidebar Obvious Links. Design Patterns for the Web #1. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design Patterns for the Web #1](https://reader030.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.