CS 160: Lecture 14
based on notes by James Landay
Outline
- Design patterns in architecture & SE
Review
- Team principles: why small teams?
- What are the tradeoffs in communication media?
Myers-Briggs
- (E/I) Extrovert/Introvert
- Aside: more objective analysis (John, UCB) suggest there are five natural dimensions.
Myers-Briggs
- Diversity in types is useful for creativity
- Did not really discuss productivity..
UI personalities
- 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.
Motivation for Design Patterns
- Most examples from UI literature are critiques
- 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
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”
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
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
Web Design Patterns Book
- James Landay, Doug van Duyne & Jason Hong
- Patterns broken into groups
- content design
- self service
- encouraging e-commerce
- e-merchandising methods
- fast sites
- providing help
- privacy policies
- improving location on portals
- improving browser compatibility
- navigation
- writing
- layout
- consistency
- site-brand
- mass customization
- homepages
- site search
- browsing for content
Announcements
- JFC office hours today 1-2
Pattern Examples
Home Page Design Rules
Home Page Design Rules
- Strong 1st impressions
- compelling titles & logos
- simple navigation
- Create a site that will be easy to update
Home Page Design Rules
- Highlights articles of general interest in center & right
- Subsections further down show more detail in particular areas
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.
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
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
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
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
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
Six Ways to Make a Good Home Page
- Make it download quickly (2-3 seconds)
- if not, they’ll go elsewhere
- 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
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?
Summary
- Design patterns allow us to reuse?
- 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
Next Time