Transcript Issues with Web Design

UI Design for the
World Wide Web
UI Design for the Web
• Should be the same as UI design for the
desktop, right?
• Same principles, sure, but there are
differences.
Some context
• Why might you choose the web for delivery
of an interface?
– Reporter: Why do you rob banks?
– Willie Sutton: Because that’s where the money
is!
Good design can mean more
sales
• NY Times Online, August 1999
– Most popular feature was search – because
people couldn’t figure out how to navigate the
site
– Second most popular feature was help –
because the search technology was so
ineffective
• After redesign, use of help decreased by
84% and sales increased by 400%
Design Issues
•
•
•
•
•
Breadth vs. depth
Navigation vs. content
Seller vs. buyer (designer vs. user)
Limited widget sets
Limited interactivity
• Designing Web Usability, Jacob Nielsen 1999
Breadth vs. Depth
• Numerous studies have shown that when
designing menu structures, breadth is better
than depth (but don’t get too broad)
• Short term memory - 7  2 items
– But remember that people can chunk things
• Most good menus (in desktop software) do
have 7 or fewer chunks of related items
• It is different on the web
Details
• Consider 64 items – Many possible structures
– 64 x 1, 32 x 2, 16 x 4, 8 x 8, 4 x 16
– 26, 4 x 4 x 4
• Measures
– Reaction time, errors, user preferences
• Issue
– Do the leaf items have a sensible categorical
structure?
Breadth vs. Depth on the Web
• Designers favor greater breadth
• Why?
–
–
–
–
Slow download times
Different types of links: data vs. operations
More flexibility in layout
Sites typically aren’t designed for maximum
efficiency
– Search
Studying Breadth vs. Depth on
the Web
• Web Page Design: Implications of Memory, Structure and Scent For
Information Retrieval. Larson and Czerwinski, CHI 98
• 512 items from Encarta encyclopedia in these structures:
– 8x8x8, 16x32, 32x16
– no download delays
• Results
– 16 x 32 - best performance
– 8 x 8 x 8 - worst performance
– 32 x 16 - slight user preference
• Discussion / Implications
– Short term memory is only one factor
– Limiting depth is more important than increasing breadth
– Chunking is a likely important factor
Navigation vs. Content
• Nobody wants to navigate… but navigation
is a necessary evil
• Screen space devoted to navigation is
screen space that is not devoted to content
AD
Navigation
AD
Content
Navigation
AD
Content
Navigation
AD
What’s up with that?
• Seller versus buyer…
• May lead to designer versus user
• While we focus on user centered design, designers may not
be able to serve user needs exclusively
• More true for websites, since they’re driven by ads (in
contrast to desktop software)
• Banner ads are the prototypical example – users hate them,
marketers require them… designers probably would prefer
to be on the user’s side, but…
• Be aware of these trade-offs, so you can make informed
decisions
Widget sets - desktop
• Text entry, push buttons, dropdown menus,
lists, combo boxes, radio buttons, check
boxes, menu bars, sliders, spinners, tables,
trees, dialog boxes, tabs, file chooser
dialogs, complex formatted text fields
• Containers
• Powerful layout management
Widget sets - HTML
• Text entry, push buttons, dropdown menus,
lists, combo boxes, radio buttons, check
boxes, menu bars, sliders, spinners, tables,
trees, dialog boxes, tabs, file chooser
dialogs, complex formatted text fields
• Containers
• Powerful layout management
Limited interactivity
• Desktop
– Direct manipulation (e.g., drag and drop, drawing tools
/ graphical editors, interactive visualizations), powerful
Undo models
• Web
– DM only possible in limited, problematic ways
• JavaScript
• DHTML
• Java
– Issues?
Problems/Mistakes in
Web Design
• Many from Jacob Nielsen… 1996, 1999,
2002
• You may disagree….
Nielsen 1996
• Most are still quite relevant
10. Slow download time
• Remember response time effects on users
– < 0.1 sec – seems instantaneous
– 0.1 – 1.0 sec – noticeable, breaks “DM illusion”, but
doesn’t disrupt users’ train of thought
– > 10 sec – users will want to know so they can work on
other tasks
• Implications for web-based interfaces
– Minimalist design
– Fast server, efficient code
9. Stale Content
• Growth of the web makes this problem
worse
• Most people would rather create new
content than maintain existing
• Old content causes a loss of credibility…
bad for e-commerce
• Hire a web gardener to “root out the weeds
and replant the flowers”
8. Non-standard link colors
• Links to pages that have not been visited
should be blue
• Links to visited pages should be purple
• Don’t mess with these colors
– They’re a standard
– Remember the principle of consistency
• So don’t underline non-links either
7. Missing or non-standard
navigation support
• Users don’t know your site the way you do
• Need to provide an overview of the structure
– Site map
– Good search feature
• (Sort of) standards
– Site logo in upper left corner that leads to the home
page
– Outline / path structure showing current location on the
site
?
6. Info “below the fold”
• Many users do not scroll beyond the visible
section of a page 
• Put all critical content and navigation
information at the top of the page
5. Orphan pages
• Each page should indicate what site it’s part
of
– Because users may not enter at your home page
• Every page should have
– A link to the home page
– An indication of where they fit within the site
structure
4. Complex URLs
• Bad to have exposed machine addresses
• Users try to decode URLs
– To learn site structure
• URLs should be human readable
– Directory structure should reflect site structure
– Sometimes people need to type URLS
• Long URLs are hard to email
– This is the biggest issue today
http://www.chiplace.org/index.php?name=PNphpBB2&file=viewforum&f=10
http://useit.mondosearch.com/cgibin/MsmGo.exe?grab_id=5414544&EXTRA_ARG=&host_id=2&page_id=315&que
ry=heuristic+evaluation&hiword=HEURISTIC+EVALUATION+HEURISTICS+EV
ALUATIONS+EVALUATED+EVALUATING+EVALUATE+EVALUATORS+EVALU
ATOR+EVALUATIVE+
3. Evil animations
• Animations seize people’s attention
– So be very cautious in using them
– Now people equate animations with advertisements and
just tune them out
• Let users use their judgment and decide what they
want to read
• You can use different colors, font size, etc., but be
careful with these features, too
• Think marketer vs. user conflict
2. Gratuitous use of bleeding
edge technology
• Many people won’t be able to use your site
• Need to download a plugin?  lots of
people won’t do it… and will never come
back
• If they run into a problem, e.g., Javascript
error… many users will never return
1. Frames
• Unit of navigation not equal to unit of view
• Can’t email URLs
• Search engines have problems
• Not as big a problem as in the early days
Selected 1999 Mistakes
7. Unclear link titles
• Click here for product details
• Very important when links are taken out of
context, e.g., by screen readers for vision
impaired users
2. Opening new browser
windows
• Clicking on a link opens the page in a new
window
• Really? I often like this, but Nielsen’s
contention is that this decision should be
left up to the user
1. Breaking the Back button
• When a new browser window is opened
• Immediate redirects
• Preventing caching… requires page to be
re-fetched / regenerated from the server
Selected 2002 mistakes
5. Blocks of Text
• A big block of text is deadly for an interactive experience.
• Write for online, not print. To engage users and support
scanning, use the following effective techniques:
–
–
–
–
–
–
–
Subheads
Bulleted lists
Highlighted keywords
Short paragraphs
The inverted pyramid
A simple writing style
De-fluffed language devoid of marketese.