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 Sales

http://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

Prototype Evaluate

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 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 Number

Exemplar

Background

Problem

Statement

Forces &

Solution

April 1, 2008 CSE 490 L - Spring 2008

Bus Stops Solution

Diagram

Related

Patterns

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)