CS 160: Lecture 14 - PowerPoint PPT Presentation

1 / 26
About This Presentation
Title:

CS 160: Lecture 14

Description:

Home Page Design Rules ... without a compelling home page (H/P), no one will ever go on to the ... to Make a Good Home Page. Make navigation easy to ... – PowerPoint PPT presentation

Number of Views:34
Avg rating:3.0/5.0
Slides: 27
Provided by: can6
Category:
Tags: home | lecture | page

less

Transcript and Presenter's Notes

Title: 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 -gt 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 -gt 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
Write a Comment
User Comments (0)
About PowerShow.com