Design patterns for the web
Download
1 / 97

Design Patterns for the Web - PowerPoint PPT Presentation


  • 53 Views
  • Uploaded on

Design Patterns for the Web. October 31, 2006. 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Design Patterns for the Web' - sloane-nixon


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Design patterns for the web

Design Patterns for the Web

October 31, 2006


Hall of fame or hall of shame
Hall of Fame or Hall of Shame?

  • java.sun.com

User Interface Design, Prototyping, and Evaluation


Hall of fame
Hall of Fame

  • Good branding

    • java logo

    • value prop

  • Inverted pyramid writing style

  • Fresh content

    • changing first read

    • news in sidebar

  • Obvious Links

User Interface Design, Prototyping, and Evaluation


Design patterns for the web1

Design Patterns for the Web

October 31, 2006


Outline
Outline

  • Review of Heuristic Evaluation

  • Web Design Process, Specialties & Artifacts

  • Detailed Design Example

  • Web Design Patterns

User Interface Design, Prototyping, and Evaluation


Review of heuristic evaluation
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

User Interface Design, Prototyping, and Evaluation


Good web site design matters
Good Web Site Design Matters

  • 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

Good Web Site Design can Lead to Healthy Sales

http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

User Interface Design, Prototyping, and Evaluation


Web design process
Web Design Process

User Interface Design, Prototyping, and Evaluation


Design specialties

User Interface

Design

Usability Evaluation

Information Architecture

Design Specialties

  • Information Architecture

    • encompasses information & navigation design

  • User Interface Design

    • also includes testing & evaluation

Information Design

Navigation Design

Graphic Design

User Interface Design, Prototyping, and Evaluation


Artifacts of design practice
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

User Interface Design, Prototyping, and Evaluation


Site maps
Site Maps

  • High-level, coarse-grained view of entire site

User Interface Design, Prototyping, and Evaluation


Storyboards
Storyboards

  • Interaction sequence, minimal page level detail

User Interface Design, Prototyping, and Evaluation


Schematics
Schematics

  • Page structure w/ respect to information & navigation

User Interface Design, Prototyping, and Evaluation


Mock ups
Mock-ups

  • High-fidelity, precise representation of page

User Interface Design, Prototyping, and Evaluation


1

User Interface Design, Prototyping, and Evaluation


2

User Interface Design, Prototyping, and Evaluation


3

User Interface Design, Prototyping, and Evaluation


4

User Interface Design, Prototyping, and Evaluation


5

User Interface Design, Prototyping, and Evaluation


Quick flow checkouts

6

Quick-Flow Checkouts

User Interface Design, Prototyping, and Evaluation


Basic web design
Basic Web Design

  • Let's take a closer look page by page

User Interface Design, Prototyping, and Evaluation


1

User Interface Design, Prototyping, and Evaluation


1

  • What site is this?

    • Logo in top-left corner denotes the site

    • Another logo at top-right to reinforce

    • examples of SITE BRANDING (E1)

User Interface Design, Prototyping, and Evaluation


1

  • What kind of site is this?

    • Shopping cart icon

    • Tab row content & categories on left

    • Prices in content area

    • UP-FRONT VALUE PROPOSITION (C2)

    • example of PERSONAL E-COMMERCE (A1)

User Interface Design, Prototyping, and Evaluation


1

  • What can I do here?

    • Welcome for new visitors

    • Tab row / Search on top

    • “Categories”

    • Prices

    • Examples of OBVIOUS LINKS (K10)

User Interface Design, Prototyping, and Evaluation


1

  • Most important info visible without scrolling

  • ABOVE THE FOLD (I2)

User Interface Design, Prototyping, and Evaluation


2

User Interface Design, Prototyping, and Evaluation


2

  • 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)

User Interface Design, Prototyping, and Evaluation


2

  • 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

User Interface Design, Prototyping, and Evaluation


2

  • Can I trust these sellers?

    • Who am I buying from?

    • Are they reputable?

    • What about shipping?

User Interface Design, Prototyping, and Evaluation


2

  • The Fold

    • Hmm, what’s below here?

User Interface Design, Prototyping, and Evaluation


2

  • Impulse buy

    • PESONALIZED RECOMMENDATIONS (G3)

  • About this album

  • Lots of unused space

  • Still more info below…

User Interface Design, Prototyping, and Evaluation


2

  • Is this product any good?

    • Editorial reviews

    • Customer reviews

    • RECOMMENDATION COMMUNITY (G4)

User Interface Design, Prototyping, and Evaluation


3

User Interface Design, Prototyping, and Evaluation


3

  • What site am I at?

    • Logo in upper-left

    • Colors, layout, font

    • examples of SITE BRANDING (E1)

User Interface Design, Prototyping, and Evaluation


3

  • 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)

User Interface Design, Prototyping, and Evaluation


3

  • Cross-selling

    • Possibly a pleasant surprise

    • Impulse buy

    • CROSS-SELLING & UP-SELLING (G2)

User Interface Design, Prototyping, and Evaluation


3

  • 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)

User Interface Design, Prototyping, and Evaluation


3

  • What can I do?

    • “Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON (K5)

      • Visually distinct

      • 3D, looks clickable

      • Repeated above and below the fold

User Interface Design, Prototyping, and Evaluation


4

User Interface Design, Prototyping, and Evaluation


4

  • What if I don’t have a User ID?

  • What if I forgot my password?

  • SIGN-IN/NEW ACCOUNT (H2)

User Interface Design, Prototyping, and Evaluation


5

User Interface Design, Prototyping, and Evaluation


5

  • What site?

    • Logo, layout, color, fonts

  • Where in site?

    • Checkout, step 1 of 3

    • “Choose shipping address”

    • QUICK-FLOW CHECKOUT (F1)

User Interface Design, Prototyping, and Evaluation


5

  • 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

User Interface Design, Prototyping, and Evaluation


Quick flow checkouts1

6

Quick-Flow Checkouts

User Interface Design, Prototyping, and Evaluation


Quick flow checkouts2

6

Quick-Flow Checkouts

  • Last step of process

    • Step 3, “Place Order”

    • “Place my order” button

  • Two HIGH-VISIBILITY ACTION BUTTONS (K5) for fold

User Interface Design, Prototyping, and Evaluation


Quick flow checkouts3

6

Quick-Flow Checkouts

  • No nasty surprises

    • Can see order

    • Total price is same as shopping cart

    • ORDER SUMMARY (F7)

User Interface Design, Prototyping, and Evaluation


Quick flow checkouts4
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

User Interface Design, Prototyping, and Evaluation


Design solutions
Design = Solutions

  • Design is about finding solutions

  • Unfortunately, designers often reinvent

    • Hard to know how things were done before

    • Why things were done a certain way

    • How to reuse solutions

User Interface Design, Prototyping, and Evaluation


Design patterns
Design Patterns

  • Design patterns communicate common design problems and solutions

    • First used in architecture [Alexander]

      • Ex. How to create a beer hall where people socialize?

User Interface Design, Prototyping, and Evaluation


Using design patterns
Using Design Patterns

  • Not too general and not too specific

    • Use a solution “a million times over, without ever doing it the same way twice”

  • Design patterns are a shared language

    • for “building and planning towns, neighborhoods, houses, gardens, & rooms.”

    • Ex. Beer hall is part of a center for public life…

    • Ex. Beer hall needs spaces for groups to be alone… ALCOVES

User Interface Design, Prototyping, and Evaluation


A web of design patterns
A Web of Design Patterns

(8) Mosaic of Subcultures

Cities

& Towns

(31) Promenade

(33) Night Life

(90) Beer Hall

Local

Gatherings

(95) Building Complex

Interiors

(179) Alcoves

(181) The Fire

User Interface Design, Prototyping, and Evaluation


Web design patterns
Web Design Patterns

  • Now used in Web design

  • Communicate design problems & solutions

    • how to create navigation bars for finding relevant content…

    • how to create a shopping cart that supports check out…

    • how to make e-commerce sites where people return & buy…

User Interface Design, Prototyping, and Evaluation


Navigation bar k2
NAVIGATION BAR (K2)

  • Problem: Customers need a structured, organized way of finding the most important parts of your Web site

User Interface Design, Prototyping, and Evaluation


Navigation bar k21

First-level navigation

Link to home

Second-level navigation

NAVIGATION BAR (K2)

  • Solution diagram

    • Captures essence on how to solve problem

User Interface Design, Prototyping, and Evaluation


Pattern groups
Pattern Groups

Our patterns organized by group

Site genres

Navigational framework

Home page

Content management

Trust and credibility

Basic ecommerce

Advanced ecommerce

Completing tasks

Page layouts

Search

Page-level navigation

Speed

The mobile web

User Interface Design, Prototyping, and Evaluation


Process funnel h1
PROCESS FUNNEL (H1)

  • Problem: Need a way to help people complete highly specific stepwise tasks

    • Ex. Create a new account

    • Ex. Fill out survey forms

    • Ex. Check out

User Interface Design, Prototyping, and Evaluation


Process funnel h11
PROCESS FUNNEL (H1)

User Interface Design, Prototyping, and Evaluation


Process funnel h12

  • What’s different?

    • No tab rows

    • No impulse buys

    • Only navigation on page takes you to next step

PROCESS FUNNEL (H1)

  • What’s the same?

    • Logo, layout, color, fonts

User Interface Design, Prototyping, and Evaluation


Process funnel h13
PROCESS FUNNEL (H1)

  • Problem: What if users need extra help?

User Interface Design, Prototyping, and Evaluation


Process Tunnel

User Interface Design, Prototyping, and Evaluation


CONTEXT-SENSITIVE HELP (H8)

User Interface Design, Prototyping, and Evaluation


Process funnel h1 solution diagram
PROCESS FUNNEL (H1)Solution Diagram

User Interface Design, Prototyping, and Evaluation


Process funnel h1 related patterns
PROCESS FUNNEL (H1)Related Patterns

(A1) E-Commerce

(A10) Web Apps

(A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(H8) Context-Sensitive Help

(K3) Tab Rows

(I2) Above the Fold

(K4) Action Buttons

(K5) High-Viz Action Buttons

(K12) Preventing Errors

(K13) Meaningful Error Messages

User Interface Design, Prototyping, and Evaluation


Patterns support creativity
Patterns Support Creativity

  • Patterns come from successful examples

    • sites 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 specific

    • you need to specialize to your needs

  • Patterns let you focus on the hard, unique problems to your design situation

    • every real design will have many of these

User Interface Design, Prototyping, and Evaluation


Patterns offer the best of principles guidelines templates
Patterns Offer the Best of Principles, Guidelines, & Templates

  • Patterns help you get the details right, without over-constraining your solution

    • unlike principles, patterns not too general, so will apply to your situation

    • unlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patterns

    • unlike 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

User Interface Design, Prototyping, and Evaluation


Format of web design patterns
Format of Web Design Patterns Templates

  • Pattern Name and Number

  • Exemplar

  • Background

  • Problem

  • Forces

  • Solution

  • Solution Diagram

  • Related Patterns

User Interface Design, Prototyping, and Evaluation


Pattern Name and Number Templates

Exemplar

Background

Forces &

Solution

Problem Statement

User Interface Design, Prototyping, and Evaluation


Bus Stops Templates

Solution

Diagram

Related

Patterns

Solution

Summary

User Interface Design, Prototyping, and Evaluation


Example of how to use patterns
Example of How to Use Patterns Templates

  • Sarah is designer on e-commerce site selling custom t-shirts to businesses

  • Her team notices drop-off in checkout process (abandoned shopping carts)

  • She turns to design patterns

    • looks to Pattern Group F – Basic E-Commerce

    • QUICK FLOW CHECKOUT (F1) catches her eye

    • looks to references

      • PERSONAL E-COMMERCE (A1) – skims & sees too high level for current issue

      • SHOPPING CART (F3) – looks promising, but not now

      • PROCESS FUNNEL (H1) – how to keep people on task – exactly what her team needs now!

User Interface Design, Prototyping, and Evaluation


Example of how to use patterns1
Example of How to Use Patterns Templates

  • Sarah uses PROCESS FUNNEL (H1) to find flaws & redesign checkout process

    • e.g., notices current checkout is heavy with text instructions & many links that leave the page

  • Using PROCESS FUNNEL (H1), sketches 3 new designs

  • Gets feedback on new designs from team

  • Iterates to produce 2 designs

  • Performs a quick 1 day evaluation w/ 5 users

    • visits them at work & has them use old design

      • anticipated many of the problems, but notes a few new ones

    • next she shows new design & has user describe where each link will go & asks whether content makes sense

    • uses the results to iterate again & present to team

User Interface Design, Prototyping, and Evaluation


Process funnel h1 related patterns1
PROCESS FUNNEL (H1) TemplatesRelated Patterns

(A1) E-Commerce

(A10) Web Apps

(A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(H8) Context-Sensitive Help

(K3) Tab Rows

(I2) Above the Fold

(K4) Action Buttons

(K5) High-Viz Action Buttons

(K12) Preventing Errors

(K13) Meaningful Error Messages

User Interface Design, Prototyping, and Evaluation


Meaningful error messages k13
MEANINGFUL ERROR MESSAGES (K13) Templates

  • Problem: When customers make mistakes, they need to be informed of the problem and how to recover

  • Solution

    • Clear statement of problem

    • Explain how to recover

    • Position near the problem

User Interface Design, Prototyping, and Evaluation



  • Clear error message? Templates

    • two messages at top

  • Explains how to recover?

    • only implies it is missing required information

  • Positioned near the problem?

    • error messages far

    • required info differs in green/red -> problem for users w/ color deficiency

User Interface Design, Prototyping, and Evaluation



User Interface Design, Prototyping, and Evaluation


Meaningful error messages k13 solution diagram
MEANINGFUL ERROR MESSAGES (K13) TemplatesSolution Diagram

User Interface Design, Prototyping, and Evaluation


Web design process1
Web Design Process Templates

User Interface Design, Prototyping, and Evaluation


Patterns in exploration phase
Patterns in Exploration Phase Templates

  • Use Exploration-level patterns to design overall structure

    • different choices will give radically different designs

  • For example, how to organize information

    • HIERARCHICAL ORGANIZATION (B3)

    • TASK-BASED ORGANIZATION (B4)

    • ALHABETICAL ORGANIZATION (B5)

User Interface Design, Prototyping, and Evaluation


Patterns in exploration phase1
Patterns in Exploration Phase Templates

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

User Interface Design, Prototyping, and Evaluation


Design exploration example
Design Exploration Example Templates

  • John given the task of designing a new subsite for showing maps to businesses

    • listings found by typing in address

    • key feature: show nearby businesses

  • John comes up with two design sketches

    • Design #1 uses ALPHABETICAL ORGANIZATION (B5) for list of all nearby businesses

    • Design #2 uses TASK-BASED ORGANIZATION (B4) for list of related nearby businesses

User Interface Design, Prototyping, and Evaluation


Design 1 alphabetical organization b5
Design #1 TemplatesALPHABETICAL ORGANIZATION (B5)

User Interface Design, Prototyping, and Evaluation


Design 2 task based organization b4
Design #2 TemplatesTASK-BASED ORGANIZATION (B4)

User Interface Design, Prototyping, and Evaluation


Evaluating which design to choose
Evaluating Which Design to Choose Templates

  • Low-fidelity Usability Test

    • sketches the rest of the key screens on paper

    • brings in 5 participants to his office

    • asks each to carry out 3 tasks while John’s colleague Sam “plays computer”

    • John observes how they perform

  • Tasks

    1) look up 1645 Solano Ave., Berkeley CA

    2) look up 1700 California Ave, San Francisco CA & find Tadich Grill

    3) look up 2106 N 55th St, Seattle WA & find a Sushi restaurant nearby

User Interface Design, Prototyping, and Evaluation


Evaluating which design to choose1
Evaluating Which Design to Choose Templates

  • Results with Design #1 (Alphabetical)

    • Task 1: look up 1645 Solano Ave

      • no difficulties encountered – warm-up task!

    • Task 2: look up 1700 California & find Tadich Grill

      • several users didn’t 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 restaurant

      • 3 users only picked restaurants that had “restaurant” in the name & thus couldn’t find “Kisaku”

User Interface Design, Prototyping, and Evaluation


Evaluating which design to choose2
Evaluating Which Design to Choose Templates

  • Results with Design #2 (Task-based)

    • Task 1: look up 1645 Solano Ave

      • no difficulties encountered – warm-up task!

    • Task 2: look up 1700 California & find Tadich Grill

      • 1 user took awhile to figure out that Tadich Grill was a restaurant & to click on the “Restaurants” link

      • all others found it in 2 clicks (Restaurants->Tadich Grill)

    • Task 3: look up 2106 55th St & find nearby Sushi restaurant

      • 3 found “Kisaku” in 2 clicks

      • 2 others asked for a listing of Japanese restaurants

User Interface Design, Prototyping, and Evaluation


Evaluating which design to choose3
Evaluating Which Design to Choose Templates

  • General comments

    • 2 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

User Interface Design, Prototyping, and Evaluation


Design 2 revision 1 adding more related tasks
Design #2 – Revision 1 TemplatesAdding More Related Tasks

User Interface Design, Prototyping, and Evaluation


Design 2 revision 2 adding hierarchical organization b3 location bread crumbs k6
Design #2 – Revision 2 TemplatesAdding HIERARCHICAL ORGANIZATION (B3) & LOCATION BREAD CRUMBS (K6)

User Interface Design, Prototyping, and Evaluation


Design 2 revision 3 hi fi prototype adding search action module j1
Design #2 – Revision 3 TemplatesHi-Fi Prototype Adding SEARCH ACTION MODULE (J1)

User Interface Design, Prototyping, and Evaluation


Summary
Summary Templates

  • Lots of issues involved in designing web sites

  • Design patterns one way of capturing good design knowledge

User Interface Design, Prototyping, and Evaluation


Further reading books on web design
Further Reading TemplatesBooks 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.

User Interface Design, Prototyping, and Evaluation


Further reading books on web design1
Further Reading TemplatesBooks on Web Design

  • Community 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.

User Interface Design, Prototyping, and Evaluation


Further reading websites on web design
Further Reading TemplatesWebsites on Web Design

  • UsableWeb.com, links to other usability sites

  • Usability.gov, for building accessible websites

  • Web 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.com

  • ZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce.

User Interface Design, Prototyping, and Evaluation


Further reading websites on web design1
Further Reading TemplatesWebsites on Web Design

  • New York Times Ecommerce Times, at

    • http://www.nytimes.com/pages-technology/cybertimes/commerce/

  • Webword.com usability log

  • CNet Builder.com, info on building sites

  • ACM’s CHI-Web Mailing List

    • http://www.acm.org/sigchi/web/chi-web.html

  • Goodexperience.com web log

  • Jakob Nielsen useit.com

User Interface Design, Prototyping, and Evaluation


Next time
Next Time Templates

  • Low-fi Prototyping

  • Read

    • Prototyping for Little Fingers by Rettig (online)

User Interface Design, Prototyping, and Evaluation


ad