1. based on notes by James Landay
CS 160: Lecture 14
Professor John Canny
Fall 2001
Oct 18, 2001
based on notes by James Landay
12/9/2018

2. Outline Review Motivation Design patterns in architecture & SE
Web design patterns
Announcements
Home page patterns
12/9/2018

3. Review Team principles: why small teams? Why set concrete goals?
What are the tradeoffs in communication media?
Personality...
12/9/2018

4. Myers-Briggs Based on Jung’s theories (E/I) Extrovert/Introvert
(S/N) Sensing/Intuitive
(T/F) Thinking/Feeling
(J/P) Judging/Perception
Aside: more objective analysis (John, UCB) suggest there are five natural dimensions.
12/9/2018

5. Myers-Briggs Rutherfoord’s results:
Diversity in types is useful for creativity
Did not really discuss productivity..
12/9/2018

6. UI personalities Computer interfaces:
Reeves, Nass and Moon found that text-based interfaces are perceived to have personality.
They found users responded as they would to a person:
people work best with an interface with compatible (similar) type.
12/9/2018

7. Motivation for Design Patterns
Most examples from UI literature are critiques
Norman, Nielsen, etc.
Design is about finding solutions
Designers often reinvent
hard to know how things were done before
hard to reuse specific solutions
Good design takes many iterations
Its nice if someone else already did some of them!
Design patterns are a solution
reuse existing knowledge of what works well
12/9/2018

8. Design Patterns First used in architecture [Alexander]
Communicate design problems & solutions
how big doors should be & where…
how to create a beer garden where people socialize…
how to use handles (remember Norman)…
Not too general & not too specific
use solution “a million times over, without ever doing it the same way twice”
12/9/2018

9. Design Patterns Next used in software engineering [Gabriel]
communicate design problems & solutions
Proxy
surrogate for another object to control access to it
Observer
when one object changes state, its dependents are notified
12/9/2018

10. Design Patterns We can do the same for Web Design
communicate design problems & solutions
how can on-line shoppers keep track of purchases?
use the idea of shopping in physical stores with carts
how do we communicate new links to customers?
blue underlined links are the standard -> use them
Leverage people’s usage habits on/off-line
if Yahoo does things a way that works well, use it
12/9/2018

11. Web Design Patterns Book
James Landay, Doug van Duyne & Jason Hong
Patterns broken into groups
navigation
writing
layout
consistency
site-brand
mass customization
homepages
site search
browsing for content
content design
self service
encouraging e-commerce
e-merchandising methods
fast sites
providing help
privacy policies
improving location on portals
improving browser compatibility
12/9/2018

12. Announcements
JFC office hours today 1-2
12/9/2018

13. Pattern Examples
Home page design rules
more next time…
12/9/2018

14. Home Page Design Rules
12/9/2018

15. Home Page Design Rules Strong 1st impressions
compelling titles & logos
simple navigation
Create a site that will be easy to update
12/9/2018

16. Home Page Design Rules Breadth on left
Highlights articles of general interest in center & right
Links distinguished
Subsections further down show more detail in particular areas
12/9/2018

17. Home Page Design Rules Problem
without a compelling home page (H/P), no one will ever go on to the rest of your site
surveys show millions of visitors leave after H/P
most will never come back -> lost sales, etc.
12/9/2018

18. Six Ways to Make a Good Home Page
Make a positive first impression by
testing
appropriate LINK NAMES & FAMILIAR LANGUAGE?
looking at GUEST PROFILES (another pattern)
appropriate colors & graphics?
neon green & screaming graphics on a skateboarding site, but not on a business-to-business or health site
12/9/2018

19. Six Ways to Make a Good Home Page
Focus on a single item of interest
create a good “first read”
draw the eye to a single graphical item
make it clean & larger than rest on the page
cut down remaining elements to chosen few
12/9/2018

20. Six Ways to Make a Good Home Page
Build your site brand
present the message of what your company does
include the value proposition (promise to visitors)
links to CONFIDENTIALITY INFORMATION & SITE ABUSE POLICIES to show you are trustworthy
12/9/2018

21. Six Ways to Make a Good Home Page
Make navigation easy to use
novices & experts must instantly “get it”
use MULTIPLE WAYS TO NAVIGATE
basic features of site as EMBEDDED LINKS
NAVIGATIONS BARS (there are several types)
HTML table COLORED BACKGROUNDS to delineate sections
REUSABLE ACCENT GRAPHICS to highlight new things
12/9/2018

22. Six Ways to Make a Good Home Page
Lure visitors to return
with fresh content
keep it updated so there is a reason to come back
by seducing with text
you have only seconds
lively, sparkling, precise
12/9/2018

23. Six Ways to Make a Good Home Page
Make it download quickly (2-3 seconds)
if not, they’ll go elsewhere
Strategies
use HTML text as much as possible
first thing to download
images take 10 server-browser comms
get a web-savvy graphic artist (font colors, styles, & b/g color)
use small graphics
use min. number of columns & sections in a grid layout
easy to scan
12/9/2018

24. Six Ways to Make a Good Home Page
Make it download quickly (2-3 seconds)
if not, they’ll go elsewhere. Which have left due to slowness?
12/9/2018

25. Summary Design patterns allow us to reuse? Previously used in?
design knowledge
Previously used in?
architecture & S/E
Web design patterns are new & evolving
example: Home Page
problem
if it isn’t compelling, they won’t return
solutions
make a positive first impression
focus on a single item
build your site brand
make navigation easy
lure visitors to return
make it download fast
12/9/2018

26. Next Time
Web Design Patterns #2
Readings on web page
12/9/2018