Intro To Web Design
MSIT 588
Dr. Carl Rebman
1
Good Web Site Design Matters
• NY Times, Aug 30 1999, on IBM Web site
– “Most popular feature was … search …
because people couldn't figure out how to
navigate the site“
– “The second most popular feature was the
help button, because the search technology
was so ineffective.”
• After redesign
– use of the "help" button decreased 84 percent
– sales increased 400 percent
Good Web Site Design can Lead to Healthy Sales
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
2
Outline
• Overview of Basic Web Design
• Web Design Patterns
3
Basic Web Design
• Let's take a closer look page by page
4
5
• What site is this?
– Logo in top-left corner
denotes the site
– Another logo at top-right
to reinforce
6
• What kind of site is this?
–
–
–
–
Shopping cart icon
Tab row content
Categories on left
Prices in content area
7
• What can I do here?
–
–
–
–
–
Welcome for new visitors
Tab row / Search on top
“Categories”
Prices
All links are clear
8
• Above the Fold
– Most important info
visible without scrolling
9
10
• What site am I at?
– Logo in upper-left
reinforces brand, can
click to go to home
– Same font, layout, color
scheme also reinforces
11
• Where am I in the site?
– “Home > Music” are
location breadcrumbs
– Tab row says “Music”
– Album cover, “Product
Highlights”, and CD cover
12
• What can I do?
– See more info about this
album
– “Buy!” “Buy!” “Buy!”
– See more info about
specific CDs
13
• Can I trust these sellers?
– Who am I buying from?
– Are they reputable?
– What about shipping?
14
• The Fold
– Hmm, what’s below here?
15
• Impulse buy
– Recommended products
• About this album
• Lots of unused
whitespace
• Still more info below…
16
• Is this product any
good?
– Editorial reviews
– Customer reviews
• Some important info
below the fold here
– Nothing critical though
17
18
• What site am I at?
– Logo in upper-left
– Colors, layout, font
19
• Where am I in the site?
– Last link clicked was
“Buy!”
– “Shopping Cart” and
“Proceed to Checkout”
reinforce that this is “the
right page”
20
• Cross-selling
– Possibly a pleasant
surprise
– Impulse buy
21
• What am I going to buy?
– Easy to remove
– Easy to move to wishlist
• How much will it cost?
– Shipping costs there, no
nasty surprises
22
• What can I do?
– “Proceed to Checkout”
action button
– Visually distinct
– 3D, looks clickable
– Repeated above and
below the fold
23
24
• What if I don’t have a
User ID?
• What if I forgot my
password?
25
• Error message
– Small, hard to see
– Too far away from where
people will be looking
– Page looks too similar to
last page (did anything
happen?)
26
27
• What site?
– Logo, layout, color, fonts
• Where in site?
– Checkout, step 1 of 3
– “Choose shipping
address”
28
• Note what’s different
– No tab rows
– No impulse buys
– Only navigation on page
takes you to next step
• This is a Process Funnel
– Extraneous info and links
removed to focus users
29
Quick-Flow Checkouts
30
Quick-Flow Checkouts
• Last step of process
– Step 3, “Place Order”
– “Place my order” button
• Two buttons for fold
31
Quick-Flow Checkouts
• No nasty surprises
– Can see order
– Total price is same as
shopping cart
32
• Easy to change shipping
Quick-Flow
and billing
• Easy to save this info
Checkouts
– Easier to setup info in
context of specific task
instead of setup first
– Clearer to users why this
info is needed in former
33
Design Patterns
• Design is about finding solutions
– Unfortunately, designers often reinvent
• Hard to know how things were done before &
to reuse solutions
• Design patterns communicate common
design problems & solutions
– First used in architecture [Alexander]
– Ex. How to create a beer hall where people
socialize?
34
Design Patterns
35
Design Patterns
• Not too general & not too specific
– Use solution “a million times over, without ever
doing it the same way twice”
• Design patterns are a shared language
– A language for “building and planning towns,
neighborhoods, houses, gardens, and rooms.”
– Ex. Beer hall is part of a center for public life…
– Ex. Beer hall needs spaces for groups to be
alone…
36
Design Patterns
Cities
& Towns
(8) Mosaic of Subcultures
(31) Promenade
(33) Night Life
Local
Gatherings
(90) Beer Hall
(95) Building Complex
Interiors
(179) Alcoves
(181) The Fire
37
Web Design Patterns
• Now used in Web design
[van Duyne, Landay, & Hong]
– book shipping this week
– published by Addison-Wesley
• Communicate design
problems & solutions
– how to create navigation bars
for finding relevant content…
– how to create a shopping cart
that supports check out…
– how to make e-commerce sites
where people return & buy…
38
Web Design Patterns Book
• Patterns broken into related groups
Site genres
Advanced ecommerce
Navigational framework
Completing tasks
Home page
Page layouts
Content management
Search
Trust and credibility
Page-level navigation
Basic ecommerce
Speed
39
Process Funnel (H1)
• Problem – Need a way to help people
complete highly specific stepwise tasks
• Desktop Solution
40
Process Funnel (H1)
• Web Solution
– “Next” to step
forward
– “Back” to undo
41
Process Funnel (H1)
• Some problems
– How much longer
before I finish?
– Why are there ads
and nav bars?
– What if users need
extra help?
42
Process Funnel (H1)
• Problem – How much longer?
• Solution – Progress bars
43
Process Funnel (H1)
• Problem – Why ads and nav bars?
• Solution – Remove them and present
minimal interface
• New problem – What site?
• Solution – Keep the logo, layout, colors
44
Process Funnel (H1)
• Problem – What if users need extra help?
• Solution – Use pop-up windows because
we want to keep people in the funnel
45
Process Tunnel
46
Process Tunnel
47
Solution Diagram
Process Funnel (H1)
48
Related Patterns
Process Funnel (H1)
(A1) E-Commerce
(A10) Web Apps
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(K3) Tab Rows
(K4) Action Buttons
(H8) Context-Sensitive Help
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
49
Meaningful Error Messages
(K13)
• Problem – When customers make
mistakes, they need to be informed of
the problem and how to recover
• Solution
– Clear statement of problem
– Explain how to recover
– Position near the problem
50
51
• Clear error message
– Two messages at top
• Explain how to recover
– Says it is missing
required information
• Position near the
problem
– Error messages far
– Required info marked in
green, hard to see
52
53
• Clear error message
• Explains how to recover
• Positioned near the
problem
54
Solution Diagram
Meaningful Error Messages (K13)
55
Related Patterns
Meaningful Error Messages (K13)
(H1) Process Funnel
(H2) Sign-in / New Account
(F1) Quick-Flow Checkout
(K12) Preventing Errors
(K11) Familiar Language
(K13) Meaningful Error Messages
56
“What am I Searching For?”
57
“What am I Searching For?”
58
Search
T h e s e a rc h re s u lts
h e re c a n b e s o rte d in
m a n y w a y s , in clu d in g
fo o d , c u isin e , a n d
a re a .
T h e s e a rc h re s u lts
a ls o p ro v id e g o o d
in fo rm a tio n , in clu d in g
th e re s ta u ra n t’s
a d d re s s , th e p h o n e
n u m b e r, a n d p a rt o f
th e re v ie w
59
Search
O n ly th e m o s t
re le v a n t s e a rc h
re s u lts a re s h o w n .
A ls o , th e s e a rc h
re s u lts a re d iv id e d
u p in to d iffe re n t
lo g ic a l c a te g o rie s ,
m a k in g it e a sie r to
fin d w h a t y o u a re
lo o k in g fo r.
60
Search
Is it a “n o te b o o k ,” a
“la p to p ,” o r a “T h in k P a d ”
c o m p u te r? O n IB M ’s
w e b s ite , it d o e s n ’t
m a tte r, th e y a ll w o rk
c o rre c tly !
A ls o , a s p e cia l s e a rch
re s u lt a p p e a rs th a t le ts
p e o p le g e t to th e rig h t
p a g e q u ic k e r.
T h e s e a re th e s ta n d a rd
s e a rc h re s u lts .
61
Search
S ta te s th a t it
c o u ld n ’t fin d a n y
re s u lts .
D o e s th e n e x t
s e a rc h , w h a t a
p e rs o n w o u ld d o
a n y w a y , in s te a d o f
p re s e n tin g “N o
re s u lts .”
62
Pattern Examples
Navigation Bar
63
Web Design Patterns
Navigational
Framework
(B1) Multiple Ways to Navigate
Search / Wizard /
Relate / Promote
(B2) Browsable Content
Navigation
(K3) Tab Rows
(K2) Navigation Bar
(K10) Obvious Links
Speed
(L2) Fast-Downloading Images
64
Web Design Patterns
(A1) Personal E-Commerce
(H1) Process Funnel
(F1) Quick-Flow Checkout
(I1) Grid Layout
(F3) Shopping Cart
(I2) Above the Fold
(K4) Action Buttons
(L2) Fast-Downloading Images
65
Summary
• Lots of issues involved in designing
web sites
• Design patterns one way of capturing
good design knowledge
66
Further Reading
Books on Web Design
• Web Design in a Nutshell. Jennifer Niederst.
O'Reilly , 1999.
• Design of Sites. Doug Van Duyne, James
Landay, Jason Hong. Addison-Wesley. 2002.
• Information Architecture for the World Wide
Web. Louis Rosenfeld and Peter Morville.
O'Reilly, 1998.
• Don’t Make Me Think! Steven Krug. Que,
2000.
67
Further Reading
Books on Web Design
• Community Building on the Web. Amy Jo
Kim. Peachpit Press, 2000.
• Designing Visual Interfaces: Communication
Oriented Techniques. Kevin Mullet and
Darrell Sano. Prentice Hall / SunSoft Press.
1994.
• Understanding Comics. Scott McCloud.
Kitchen Sink Press, 1994.
• Designing Web Usability. Jakob Nielsen. New
Riders Publishing, 1999.
68
Further Reading
Websites on Web Design
• UsableWeb.com, links to other usability sites
• Usability.gov, for building accessible websites
• Web pages that suck, at
http://www.webpagesthatsuck.com/
• Net tips for designers, at
http://www.dsiegel.com/tips/
• User Interface Engineering, at
http://www.uie.com
• ZDNet Ecommerce Best Practices, at
http://www.zdnet.com/ecommerce.
69
Further Reading
Websites on Web Design
• New York Times Ecommerce Times, at
– http://www.nytimes.com/pagestechnology/cybertimes/commerce/
• Webword.com usability log
• CNet Builder.com, info on building sites
• ACM’s CHI-Web Mailing List
– http://www.acm.org/sigchi/web/chi-web.html
• Goodexperience.com web log
• Jakob Nielsen useit.com
70
Descargar

Designing for the Web: An Introduction