CS 160: Lecture 14

1
CS 160 Lecture 14

• Professor John Canny
• Fall 2001
• Oct 18, 2001
• based on notes by James Landay

2
Outline

• Review
• Motivation
• Design patterns in architecture SE
• Web design patterns
• Announcements
• Home page patterns

3
Review

• Team principles why small teams?
• Why set concrete goals?
• What are the tradeoffs in communication media?
• Personality...

4
Myers-Briggs

• Based on Jungs 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.

5
Myers-Briggs

• Rutherfoords results
• Diversity in types is useful for creativity
• Did not really discuss productivity..

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.

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 didsome of
  them!
• Design patterns are a solution
• reuse existing knowledge of what works well

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

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

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 peoples usage habits on/off-line
• if Yahoo does things a way that works well, use it

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
Announcements

• JFC office hours today 1-2

13
Pattern Examples

• Home page design rules
• more next time

14
Home Page Design Rules
15
Home Page Design Rules

• Strong 1st impressions
• compelling titles logos
• simple navigation
• Create a site that will be easy to update

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

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.

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

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 largerthan rest on the page
• cut down remainingelements to chosen few

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

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

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

23
Six Ways to Make a Good Home Page

• Make it download quickly (2-3 seconds)
• if not, theyll 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

24
Six Ways to Make a Good Home Page

• Make it download quickly (2-3 seconds)
• if not, theyll go elsewhere. Which have left
  due to slowness?

25
Summary

• Design patterns allow us to reuse?
• design knowledge
• Previously used in?
• architecture S/E
• Web design patterns are new evolving
• example Home Page
• problem
• if it isnt compelling, they wont 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

26
Next Time

• Web Design Patterns 2
• Readings on web page