Download - Web Design and Patterns
![Page 1: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/1.jpg)
Web Design and Patterns
CMPT 281
![Page 2: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/2.jpg)
Outline
• Motivation: customer-centred design• Web design introduction• Design patterns
![Page 3: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/3.jpg)
Hall of Shame or Hall of Fame?
• http://www.balthaser.com/
![Page 4: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/4.jpg)
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
![Page 5: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/5.jpg)
Click and Go
![Page 6: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/6.jpg)
Customer-Centred Design:“build the right site & build the site right!”
![Page 7: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/7.jpg)
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…
![Page 8: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/8.jpg)
NAVIGATION BAR (K2)• Problem: Customers need a structured, organized way of
finding the most important parts of your Web site
![Page 9: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/9.jpg)
NAVIGATION BAR (K2)• Problem: Customers need a structured, organized way of
finding the most important parts of your Web site
![Page 10: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/10.jpg)
NAVIGATION BAR (K2)
• Solution– captures essence on how to solve problem
First-level navigation
Second-level navigation
Link to home
![Page 11: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/11.jpg)
NAVIGATION BAR (K2)
![Page 12: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/12.jpg)
NAVIGATION BAR (K2)
![Page 13: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/13.jpg)
NAVIGATION BAR (K2)
![Page 14: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/14.jpg)
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
![Page 15: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/15.jpg)
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
![Page 16: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/16.jpg)
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
![Page 17: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/17.jpg)
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
![Page 18: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/18.jpg)
Design Patterns
• Design patterns communicate common design problems and solutions– First used in architecture (Christopher Alexander)
![Page 19: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/19.jpg)
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…
![Page 20: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/20.jpg)
A Web of Patterns
![Page 21: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/21.jpg)
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
![Page 22: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/22.jpg)
Example
![Page 23: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/23.jpg)
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
![Page 24: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/24.jpg)
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
![Page 25: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/25.jpg)
PROCESS FUNNEL (H1)
• Problem: What if users need extra help?
![Page 26: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/26.jpg)
Process Tunnel
![Page 27: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/27.jpg)
![Page 28: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/28.jpg)
Floating Windows (H6)
![Page 29: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/29.jpg)
Floating Windows (H6)
![Page 30: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/30.jpg)
PROCESS FUNNEL (H1)Solution Diagram
![Page 31: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/31.jpg)
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
![Page 32: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/32.jpg)
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
![Page 33: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/33.jpg)
Format of Web Design Patterns
• Pattern Name & Number• Exemplar• Background• Problem Statement• Forces• Solution Summary• Solution Diagram• Related Patterns
![Page 34: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/34.jpg)
Pattern Name and Number
Exemplar
Background
Problem Statement
Forces &Solution
![Page 35: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/35.jpg)
April 1, 2008 CSE 490 L - Spring 2008
Bus StopsSolutionDiagram
RelatedPatterns
SolutionSummary
35
![Page 36: Web Design and Patterns](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816976550346895de15d6f/html5/thumbnails/36.jpg)
Next…
• Complete online tutorials:– http://www.w3schools.com/html/– http://www.w3schools.com/css/
• Reading:– Part 1– K2 (Navigation Bar) and H6 (Floating Windows)