design patterns for the web #1
Post on 07-Jan-2016
22 Views
Preview:
DESCRIPTION
TRANSCRIPT
Prof. James A. LandayUniversity of Washington
Autumn 2004
Design Patterns for the Web #1Design Patterns for the Web #1
October 21, 2004
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 2
Hall of Fame or Hall of Shame?
• java.sun.com
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
Prof. James A. LandayUniversity of Washington
Autumn 2004
Design Patterns for the Web #1Design Patterns for the Web #1
October 21, 2004
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
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 8
Web Design Process
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 11
Site Maps
• High-level, coarse-grained view of entire site
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 12
Storyboards
• Interaction sequence, minimal page level detail
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 13
Schematics
• Page structure w/ respect to information & navigation
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 14
Mock-ups
• High-fidelity, precise representation of page
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 15
1
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 16
2
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 17
3
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 18
4
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 19
5
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 20
Quick-Flow Checkouts6
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 21
Basic Web Design
• Let's take a closer look page by page
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 22
1
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
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
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 27
2
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
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
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
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
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 34
3
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
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
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
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 40
4
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 42
5
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 45
Quick-Flow Checkouts6
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
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
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
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 49
Summary
• Lots of issues involved in designing web sites
CSE490jl - Autumn 2004 User Interface Design, Prototyping, and Evaluation 50
Next Time
• Midterm
• Following Lecture– Web Design Patterns in detail
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.
top related