Prof. James A. Landay University of Washington Autumn 2004 Design Patterns for the Web #1 October 21, 2004

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Hall of Shame? java.sun.com

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation3 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. Landay University of Washington Autumn 2004 Design Patterns for the Web #1 October 21, 2004

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation5 Outline Review of Heuristic Evaluation Web Design Process, Specialties & Artifacts Detailed Design Example Web Design Patterns

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation6 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 2004User Interface Design, Prototyping, and Evaluation7 Good Web Site Design Matters Good Web Site Design can Lead to Healthy Sales NY Times, Aug , 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 2004User Interface Design, Prototyping, and Evaluation8 Web Design Process

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation9 Design Specialties Information Architecture –encompasses information & navigation design User Interface Design –also includes testing & evaluation Information Architecture User Interface Design Information Design Navigation Design Graphic Design Usability Evaluation

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation10 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 StoryboardsSchematicsMock-ups

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation11 Site Maps High-level, coarse-grained view of entire site

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation12 Storyboards Interaction sequence, minimal page level detail

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation13 Schematics Page structure w/ respect to information & navigation

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation14 Mock-ups High-fidelity, precise representation of page

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation15 1

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation16 2

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation17 3

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation18 4

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation19 5

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation20 Quick-Flow Checkouts 6

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation21 Basic Web Design Let's take a closer look page by page

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation22 1

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation23 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 2004User Interface Design, Prototyping, and Evaluation24 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 2004User Interface Design, Prototyping, and Evaluation25 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 2004User Interface Design, Prototyping, and Evaluation26 Most important info visible without scrolling ABOVE THE FOLD (I2) Most important info visible without scrolling ABOVE THE FOLD (I2) 1

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation27 2

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation28 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 2004User Interface Design, Prototyping, and Evaluation29 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 2004User Interface Design, Prototyping, and Evaluation30 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 2004User Interface Design, Prototyping, and Evaluation31 The Fold –Hmm, what’s below here? The Fold –Hmm, what’s below here? 2

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation32 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 2004User Interface Design, Prototyping, and Evaluation33 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 2004User Interface Design, Prototyping, and Evaluation34 3

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation35 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 2004User Interface Design, Prototyping, and Evaluation36 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 2004User Interface Design, Prototyping, and Evaluation37 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 2004User Interface Design, Prototyping, and Evaluation38 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 2004User Interface Design, Prototyping, and Evaluation39 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 2004User Interface Design, Prototyping, and Evaluation40 4

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation41 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 2004User Interface Design, Prototyping, and Evaluation42 5

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation43 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 2004User Interface Design, Prototyping, and Evaluation44 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 2004User Interface Design, Prototyping, and Evaluation45 Quick-Flow Checkouts 6

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation46 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 2004User Interface Design, Prototyping, and Evaluation47 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 2004User Interface Design, Prototyping, and Evaluation48 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 2004User Interface Design, Prototyping, and Evaluation49 Summary Lots of issues involved in designing web sites

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation50 Next Time Midterm Following Lecture –Web Design Patterns in detail

CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation51 Further Reading Books on Web Design Web Design in a Nutshell. Jennifer Niederst. O'Reilly, Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison- Wesley Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, Don’t Make Me Think! Steven Krug. Que, 2000.