Web Design and Patterns

CMPT 281

Outline

• Motivation: customer-centred design• Web design introduction• Design patterns

Hall of Shame or Hall of Fame?

• http://www.balthaser.com/

Customer-Centred Design

• NYTimes, Aug 30 1999, on IBM Web site– “Most popular feature was … search … 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 customer-centered redesign– use of the help button decreased 84%– sales increased 400 percent

Good Web Site Design can Lead to Healthy Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

Click and Go

Customer-Centred Design:“build the right site & build the site right!”

Web Design Patterns• Design patterns communicate

common design problems and solutions– how to create navigation bars

for finding relevant content…– how to create a shopping cart

that supports check out…– how to make 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)

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

NAVIGATION BAR (K2)

• Solution– captures essence on how to solve problem

First-level navigation

Second-level navigation

Link to home

NAVIGATION BAR (K2)

NAVIGATION BAR (K2)

NAVIGATION BAR (K2)

Best Practices for Designing Interfaces

• Iterative design

• Getting it right the first time is hard• Need better support for quick turns around loop

Design

PrototypeEvaluate

Design Patterns

Customer-Centered Design

• Understanding customers, their needs, the tools they use, their social and organizational context

• What if you don’t practice CCD?– might overrun budget & management pulls plug– site may be too hard to learn or use;

visitors may never return

Myths of Customer-Centered Design

• Myth 1: Good Design is Just Common Sense– why are there so many bad sites?

• Myth 2: Only Experts Create Good Designs– experts faster, but anyone can understand & use CCD

• Myth 3: Interfaces can be Redesigned Before Launch– assumes site has right features & being built correctly

• Myth 4: Good Design Takes Too Long/Costs Too Much– CCD can reduce total development time & cost (finds problems early on)

• Myth 5: Good Design Is Just Cool Graphics– only one part of the larger picture of what to communicate & how

• Myth 6: UI Guidelines Guide you to Good Designs– only address how a site is implemented, not features, organization, or flow

• Myth 7: Customers Can Always Rely on Documentation & Help– help is the last resort of a frustrated customer

• Myth 8: Market Research Takes Care of Understanding All Customer Needs– does not help you understand behavior: what people say vs. what they do

• Myth 9: Quality Assurance Groups Make Sure That Web Sites Work Well– QA makes sure product meets spec., not what happens w/ real customers on real problems

Design = Solutions

• Design is about finding solutions– unfortunately, designers often reinvent the wheel

• hard to know how things were done before• why things were done a certain way• how to reuse solutions

Design Patterns

• Design patterns communicate common design problems and solutions– First used in architecture (Christopher Alexander)

Design Patterns

• Not too general & not too specific– use a solution “a million times over, without ever doing it

the same way twice”

• Design patterns are a shared language – a language for “building and planning towns,

neighborhoods, houses, gardens, and rooms.”– E.g. BEER HALL is part of a CENTER FOR PUBLIC LIFE…– E.g. BEER HALL needs spaces for groups to be alone…

A Web of Patterns

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 (principles) & not too specific (guidelines)– designer will specialize to their needs

• Patterns let designers focus on the hard, unique problems to their design situation– every real design will have many of these

Example

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

PROCESS FUNNEL (H1)

• What’s different?– no tab rows– no impulse buys– only navigation on page

takes you to next step

• What’s different?– no tab rows– no impulse buys– only navigation on page

takes you to next step

• What’s the same?– logo, layout, color, fonts

• What’s the same?– logo, layout, color, fonts

PROCESS FUNNEL (H1)

• Problem: What if users need extra help?

Process Tunnel

Floating Windows (H6)

Floating Windows (H6)

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

(K12) Preventing Errors

(H8) Context-Sensitive Help(I2) Above the Fold

(K13) Meaningful Error Messages

(H6) Floating Windows

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

Format of Web Design Patterns

• Pattern Name & Number• Exemplar• Background• Problem Statement• Forces• Solution Summary• Solution Diagram• Related Patterns

Pattern Name and NumberPattern Name and Number

ExemplarExemplar

BackgroundBackground

Problem Statement

Problem Statement

Forces &

Solution

Forces &

Solution

April 1, 2008 CSE 490 L - Spring 2008

Bus StopsBus StopsSolution

Diagram

Solution

Diagram

Related

Patterns

Related

Patterns

Solution

Summary

Solution

Summary

35

Next…

• Complete online tutorials:– http://www.w3schools.com/html/– http://www.w3schools.com/css/

• Reading:– Part 1– K2 (Navigation Bar) and H6 (Floating Windows)