Transcript Web Design Patterns

Web Design Patterns
(Homepage)
IS 485, Professor Matt Thatcher
Agenda





Administivia
Review
Web design process
Web design patterns
Home page patterns
2
Review

Effective use of color in design
3
Web Site Design Process
Discovery
Design Exploration
Design Refinement
Production
… followed by implementation & maintenance
4
Web Design Process
5
Design Process:
Discovery
Discovery
Design Exploration
Design Refinement
Production
Assess needs
* understand client’s
expectations
* determine scope of
project
* characteristics of
users
* evaluate existing
site and/or
competition
6
Design Process:
Design Exploration
Discovery
Design Exploration
Design Refinement
Production
Generate multiple
designs
* visualize solutions
to discovered
issues
* information &
navigation design
* early graphic
design
* select one design
for development
7
Design Process:
Design Refinement
Discovery
Design Exploration
Design Refinement
Develop the
design
* increasing level of
detail
* heavy emphasis on
graphic design
* iterate on design
Production
8
Design Process:
Production
Discovery
Design Exploration
Design Refinement
Production
Prepare design
for handoff
* create final
deliverable
* specifications,
guidelines, and
prototypes
* as much detail as
possible
9
Design Specialties
User Interface
Design
Usability
Evaluation
Information
Architecture

Information
Architecture
– encompasses information
& navigation design
Information
Design
Navigation
Design
Graphic
Design

User Interface
Design
– also includes testing &
evaluation
10
Motivation for Design Patterns

Most examples from UI literature are
critiques
– Norman, Nielsen, etc.


Design is about finding solutions
Unfortunately, designers often
reinvent
– hard to know how things were done before
– hard to reuse specific solutions

Design patterns are a solution
– reuse existing knowledge of what works well
– communicate design problems & solutions
11
Design Patterns

Using design patterns 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/offline
– if Yahoo does things a way that works well, use it
– Jacob’s Law of the User Experience
12
Web Design Patterns Book


The Design of Sites, by Doug van Duyne, James
Landay, & Jason Hong
Patterns broken into groups (A-L)
site genres (A)
navigational framework (B)
homepages (C)
writing & managing content
(D)
 basic e-commerce (E)
 advanced e-commerce (F)




–
–
–
–
–
–
trust & credibility (G)
completing tasks (H)
page layouts (I)
site search (J)
navigation (K)
fast sites (L)
13
Pattern Format
1.
2.
3.
4.
5.
6.
Pattern Title
Background Information
Problem Statement
Solution
Solution Sketch
Other Patterns to Consider
14
Homepage Portal (C1)

Problem
– without a compelling home page (HP), no one will
ever go on to the rest of your site
– surveys show millions of visitors leave after HP
» most will never come back -> lost sales, etc.
15
HP PORTAL (C1)


Problem: home pages
are portals through
which most visitors
pass.
They must seduce
visitors while
simultaneously balancing
a large number of
issues, including:
–
–
–
–
branding
navigation
content
ability to download quickly
16
Six Ways to Make a Good HP
1) Build your site identity and brand
– present the message of what your company does
– include text, logos, and graphics that provide
» Up-Front Value Proposition (C2)
 promise to visitors
17
Six Ways to Make a Good HP
1) Build your site identity and brand
– Up-Front Value Proposition (C2)
» keep it consistent (font, size, colors, graphics)
» make the site logo large enough to be noticed
» position (usually in the upper-left corner of the site)
18
Six Ways to Make a Good HP
1) Build your site identity and brand
– provide links to Privacy Policy (E4)
» show that you are trustworthy
» identify what info is being collected and how it will be used
» make available on each web page (usually at the bottom)
19
Six Ways to Make a Good HP
2) Make a (+) first impression by
–
testing
» uses Descriptive, Longer Link Names (K9) and Familiar Language (K11)
» understanding customers (especially the target audience)
 who are they? contextual inquiry & surveys
 appropriate colors & graphics?
– neon green & screaming graphics on a skateboarding
site, but not on a business-to-business or health site
20
21
Six Ways to Make a Good HP
3) Seduce with content
– create a
Clear First Read (I3)
» draw the eye to a single item
of interest (graphical)
» make it clean & larger than
rest on the page
 Arial and Verdana are
good fonts to use
» cut down remaining elements
to chosen few
– use Headlines and Blurbs (D3) to
entice customers to seek more
content
– Keep content updated
22
23
24
25
26
Six Ways to Make a Good HP
4) Make navigation easy to use
– novices & experts must instantly “get it”
– use Multiple Ways to Navigate (B1)
» basic features of site as Embedded Links (K7)
» Navigation Bars (K2)

there are several types
» HTML Power (L4)
table colored backgrounds to delineate sections
» Reusable Images (L5) to highlight new things
» build a Page Template (D1) by using a Grid Layout (I1)
 organizes the page cohesively
» provide Consistent Sidebars of Related Content (I6)

27
Logo + value prop
High-Level Browse Categories
Search
Headline
Image
Relate +Promote
Relate +Promote
Fold
Browse
Headline
Relate +Promote
Headline
Headline
Relate +Promote
28
Six Ways to Make a Good HP

Legend
Navigation Bars, Search
Modules, and Site Branding
Content Modules
Consistent Sidebars of
Related Content
29
30
31
32
33
34
35
36
?????
37
?????
38
Six Ways to Make a Good HP

Tab Rows (K3)
– clearly identify active tab
» i.e., use color to highlight it
– create indicator line
» i.e., show the line below the active tab in the same color to make
it clear that the entire page of content belong to the active tab

Location Breadcrumbs (K6)
– use “>” as the separator

Action Buttons (K3) vs. Links
– use links for navigations
– use action buttons for purchases, submitting info, etc.
39
40
41
42
Six Ways to Make a Good HP
5) Make it download quickly (2-3 seconds)
− if not, they’ll go elsewhere
• Strategies
– use HTML Power (L4) (text) as much as
possible
» first thing to download
» get a web-savvy graphic artist (font
colors, styles, & b/g color)
» use Separate Tables (L3)
– use
Fast-Downloading Images (L2)
» small graphics (crop, shrink)
– use min. number of columns &
sections in a Grid Layout (I1)
» easy to scan
43
Six Ways to Make a Good HP
6) Make it accessible
– people with audio, visual, motor, or cognitive disabilities find may
websites difficult to use

Design rules
– minimize typing
– make navigation elements large
– provide good color contrasts
–
–
–
–
–
–
–
» E.g., dark text on light background and vice versa
use sufficiently large fonts
avoid using ALL CAPS
avoid animations and blinking text
don’t have text go from all the way left of the page to the right
avoid green for unvisited and red for visited
use Descriptive, Longer Link Names (K9)
use the ALT attribute of html to provide text version of images
» <IMG SRC=http://... ALT=“Text description of image”
44
Summary

Design patterns allow us to reuse?
–

design knowledge
Previously used in?
– architecture & software engineering

Web design patterns are new & evolving
– example: Homepage
» problem
 if it isn’t compelling, they won’t return
» solutions
 build your site identity and brand
 make a positive first impression
 seduce with content
 make navigation easy
 make it download fast
 make it accessible
45
Take a Look At This…

Web Design Patterns (E-Commerce)
46