design patterns for the web #2

Hall of Fame or Hall of Shame?Two different sections of page from cnn.comignore the fuzziness that is my screen capture

User Interface Design, Prototyping, and Evaluation

Hall of FameSeparate links that word wrap!Descriptive, longer link names -> know where youll go


Prof. James A. LandayUniversity of WashingtonAutumn 2004

Design Patterns for the Web #2October 27, 2004


OutlineDesign PatternsWeb Design PatternsAdvantages of PatternsHow to Use PatternsAdministriviaMore ExamplesPatterns in the Exploration Phase


Design = SolutionsDesign is about finding solutionsUnfortunately, designers often reinventHard to know how things were done beforeWhy things were done a certain wayHow to reuse solutions


Design PatternsDesign patterns communicate common design problems and solutionsFirst used in architecture [Alexander]Ex. How to create a beer hall where people socialize?


Using Design PatternsNot too general and not too specificUse a solution a million times over, without ever doing it the same way twiceDesign patterns are a shared language for building and planning towns, neighborhoods, houses, gardens, & rooms.Ex. Beer hall is part of a center for public lifeEx. Beer hall needs spaces for groups to be alone ALCOVES


A Web of Design Patterns(181) The Fire(8) Mosaic of Subcultures(179) Alcoves(95) Building Complex(33) Night Life(31) Promenade(90) Beer HallCities & TownsInteriorsLocalGatherings


Web Design PatternsNow used in Web design Communicate design problems & solutionshow to create navigation bars for finding relevant contenthow to create a shopping cart that supports check outhow to make e-commerce sites where people return & buy


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


NAVIGATION BAR (K2)Solution diagramCaptures essence on how to solve problem


Pattern GroupsOur patterns organized by group

Site genresNavigational frameworkHome pageContent managementTrust and credibilityBasic ecommerceAdvanced ecommerceCompleting tasksPage layoutsSearchPage-level navigationSpeed


PROCESS FUNNEL (H1)Problem: Need a way to help people complete highly specific stepwise tasksEx. Create a new accountEx. Fill out survey forms Ex. Check out


PROCESS FUNNEL (H1)


PROCESS FUNNEL (H1)Whats different?No tab rowsNo impulse buysOnly navigation on page takes you to next stepWhats the same?Logo, layout, color, fonts


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


Process Tunnel


CONTEXT-SENSITIVE HELP (H8)


PROCESS FUNNEL (H1)Solution Diagram


PROCESS FUNNEL (H1)Related Patterns(A10) Web Apps(K5) High-Viz Action Buttons(A1) E-Commerce(A11) Intranets(H1) Process Funnel(K2) Navigation Bars(K3) Tab Rows(K4) Action Buttons(K12) Preventing Errors(H8) Context-Sensitive Help(I2) Above the Fold(K13) Meaningful Error Messages


Patterns Support CreativityPatterns come from successful examplessites 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 specificyou need to specialize to your needsPatterns let you focus on the hard, unique problems to your design situationevery real design will have many of these


Patterns Offer the Best of Principles, Guidelines, & TemplatesPatterns help you get the details right, without over-constraining your solutionunlike principles, patterns not too general, so will apply to your situationunlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patternsunlike 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


Format of Web Design PatternsPattern Name and NumberExemplarBackgroundProblemForcesSolutionSolution DiagramRelated Patterns


Bus StopsSolutionDiagramRelatedPatternsSolutionSummary


Example of How to Use PatternsSarah is designer on e-commerce site selling custom t-shirts to businessesHer team notices drop-off in checkout process (abandoned shopping carts)

She turns to design patternslooks to Pattern Group F Basic E-CommerceQUICK FLOW CHECKOUT (F1) catches her eyelooks to referencesPERSONAL E-COMMERCE (A1) skims & sees too high level for current issueSHOPPING CART (F3) looks promising, but not nowPROCESS FUNNEL (H1) how to keep people on task exactly what her team needs now!


Example of How to Use PatternsSarah uses PROCESS FUNNEL (H1) to find flaws & redesign checkout processe.g., notices current checkout is heavy with text instructions & many links that leave the pageUsing PROCESS FUNNEL (H1), sketches 3 new designsGets feedback on new designs from teamIterates to produce 2 designsPerforms a quick 1 day evaluation w/ 5 usersvisits them at work & has them use old designanticipated many of the problems, but notes a few new onesnext she shows new design & has user describe where each link will go & asks whether content makes senseuses the results to iterate again & present to team


Administriva Interactive Prototype #1Prototype your interface in Visual Basic / HTMLHTML sites should use DreamWeaver or other appropriate tool (no raw HTML please)Phone/PDA sites should use AppForge CrossFire on top of Visual BasicSpecial package for targeting apps to PDAs/PhonesPrototype should implement your 3 scenariosPrototype should account for size, resolution, colors, & other attributes of target platformUnderlying functionality does not have to be fully implemented (e.g., hard code data)Should be usable by everyone else in class (docs, runs without additional s/w, etc.)You will make a class presentation


PROCESS FUNNEL (H1)Related Patterns(A10) Web Apps(K5) High-Viz Action Buttons(A1) E-Commerce(A11) Intranets(H1) Process Funnel(K2) Navigation Bars(K3) Tab Rows(K4) Action Buttons(K12) Preventing Errors(H8) Context-Sensitive Help(I2) Above the Fold(K13) Meaningful Error Messages


MEANINGFUL ERROR MESSAGES (K13)Problem: When customers make mistakes, they need to be informed of the problem and how to recoverSolutionClear statement of problemExplain how to recoverPosition near the problem


Clear error message?two messages at topExplains how to recover?only implies it is missing required informationPositioned near the problem?error messages farrequired info differs in green/red -> problem for users w/ color deficiency


Clear error messageExplains how to recoverPositioned near the problem


MEANINGFUL ERROR MESSAGES (K13)Solution Diagram


Web Design Process


Patterns in Exploration PhaseUse Exploration-level patterns to design overall structuredifferent choices will give radically different designsFor example, how to organize informationHIERARCHICAL ORGANIZATION (B3)TASK-BASED ORGANIZATION (B4)ALHABETICAL ORGANIZATION (B5)


Patterns in Exploration PhaseTASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s)


Design Exploration ExampleJohn given the task of designing a new subsite for showing maps to businesseslistings found by typing in addresskey feature: show nearby businessesJohn comes up with two design sketchesDesign #1 uses ALPHABETICAL ORGANIZATION (B5) for list of all nearby businessesDesign #2 uses TASK-BASED ORGANIZATION (B4) for list of related nearby businesses


Design #1ALPHABETICAL ORGANIZATION (B5)


Design #2TASK-BASED ORGANIZATION (B4)


Evaluating Which Design to ChooseLow-fidelity Usability Testsketches the rest of the key screens on paperbrings in 5 participants to his officeasks each to carry out 3 tasks while Johns colleague Sam plays computerJohn observes how they perform

Tasks1) look up 1645 Solano Ave., Berkeley CA2) look up 1700 California Ave, San Francisco CA & find Tadich Grill3) look up 2106 N 55th St, Seattle WA & find a Sushi restaurant nearby


Evaluating Which Design to ChooseResults with Design #1 (Alphabetical)Task 1: look up 1645 Solano Aveno difficulties encountered warm-up task!

Task 2: look up 1700 California & find Tadich Grillseveral 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 restaurant3 users only picked restaurants that had restaurant in the name & thus couldnt find Kisaku


Evaluating Which Design to ChooseResults with Design #2 (Task-based)Task 1: look up 1645 Solano Aveno difficulties encountered warm-up task!

Task 2: look up 1700 California & find Tadich Grill1 user took awhile to figure out that Tadich Grill was a restaurant & to click on the Restaurants linkall others found it in 2 clicks (Restaurants->Tadich Grill)

Task 3: look up 2106 55th St & find nearby Sushi restaurant3 found Kisaku in 2 clicks2 others asked for a listing of Japanese restaurants


Evaluating Which Design to ChooseGeneral comments2 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


Design #2 Revision 1Adding More Related Tasks


Design #2 Revision 2Adding HIERARCHICAL ORGANIZATION (B3) & LOCATION BREAD CRUMBS (K6)


Design #2 Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J1)


SummaryLots of issues involved in designing web sitesDesign patterns one way of capturing good design knowledge


Further ReadingBooks on Web DesignWeb 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.


Further ReadingBooks on Web DesignCommunity 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.


Further ReadingWebsites on Web DesignUsableWeb.com, links to other usability sitesUsability.gov, for building accessible websitesWeb pages that suck, at http://www.webpagesthatsuck.com/Net tips for designers, at http://www.dsiegel.com/tips/User Interface Engineering, at http://www.uie.comZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce.


Further ReadingWebsites on Web DesignNew York Times Ecommerce Times, at http://www.nytimes.com/pages-technology/cybertimes/commerce/Webword.com usability logCNet Builder.com, info on building sitesACMs CHI-Web Mailing Listhttp://www.acm.org/sigchi/web/chi-web.htmlGoodexperience.com web logJakob Nielsen useit.com


Next TimeRapid PrototypingReadLewis & Rieman Ch. 6 (online)The Perils of Prototyping by Alan CooperChapter 4 of The Design of Sites


http://www.newscientist.com/opinion/opinterview.jsp?id=ns23631(e.g., Yahoos breadcrumbs)

15 minutes15 minutes15 minutes15 minutes15 minutes

design patterns for the web #2

Documents