UI Design for the WWW - PowerPoint PPT Presentation

1 / 56
About This Presentation
Title:

UI Design for the WWW

Description:

Banners and backgrounds. Desired content. Map, picture of new grandchild ... Cool if cursor changed form according. to what kind of link it's over. Multimedia Links ... – PowerPoint PPT presentation

Number of Views:153
Avg rating:3.0/5.0
Slides: 57
Provided by: jdf2
Category:
Tags: www | backgrounds | cool | design

less

Transcript and Presenter's Notes

Title: UI Design for the WWW


1
UI Design for the WWW
  • Creating Effective Sites and Pages

This material has been developed by Georgia Tech
HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley,
Diane Gromala, Elizabeth Mynatt, Jeff Pierce,
Colin Potts, Chris Shaw, John Stasko, and Bruce
Walker. Comments directed to foley_at_cc.gatech.edu
are encouraged. Permission is granted to use with
acknowledgement for non-profit purposes. Last
revision April 2004.
2
Dilberts Design for the Web
3
User Behaviors Browse, Search
  • Search - Seeking to find a particular item, fact
    or piece of information.
  • -gt Buying products, doing research, downloading
    software, ...
  • Promote ease and speed
  • Browsing - Scanning for interesting item, fact
    or piece of information.
  • -gt Surfing, doing research, ...
  • Without a goal, attractiveness trumps ease speed

4
Page/Site Goals
Convey image or impression Meet people
Raise money/donations Entertain an audience
Promote myself Teach people about a topic Get
famous Tell a story
Convey information/access employees,
shareholders, customers colleagues, public
Sell products Advertise/market service
Recruit Announce, survey Nurture communities
5
Developing a Site
  • 1. Identify objectives
  • 2. Generate content - typically a topics list
  • 3. Logically organize content - clusters
  • 4. Provide structure to clusters
  • 5. Transform content to pages with graphic design
  • 6. Test and iterate
  • So what else is new????

6
Identify Objectives
  • Develop brief statements for the following
    questions
  • What is the purpose or goal of the site?
  • Who is your intended audience?
  • Web site sometimes used to describe an
    administrative organization, not to give the user
    what they want -(

7
Generate a Topics List
Raw brainstorming of just anything
College of Computing, e.g.
awards unique points table of contents index conta
ct information map buildings academic
units graduates alumni research
classes people faculty students administrators equ
ipment directions programs degrees mission undergr
aduates
Put each on index card or post-it note
8
Organize Content
Group items into categories
People Faculty Students
Undergraduates Graduates
Staff Academics Courses
Undergraduate Graduate Degrees ...
Put notecards into piles
9
Provide Structure
Sketch out the high-level organization of the
categories
College
People
Research
Academics
Faculty
Staff
Courses
Students
Degrees
Undergrads
Grads
10
Current Index on CoC Home Page
  • ABOUT THE COLLEGE
  •    Greetings from the Dean
  •    Facts at a glance
  •    Directions
  •    Administration
  •    Computing Facilities
  •    Job Opportunities 
  •  
  • ACADEMICS
  •    Class Websites
  •    Course Information
  •    Undergraduate Program
  •    Graduate Programs
  •    Study Abroad Programs
  • PEOPLE
  •    Faculty Staff
  •    Graduate Student Pages
  •    Undergraduate Student Pages
  • EXTERNAL RELATIONS
  •    Making a Gift to the College
  •    Alumni
  •    Industrial Partners Association
  •    CoC Advisory Board
  •   
  • RESEARCH
  •    Groups Projects
  •    Research Centers
  •    Publications

11
Transform Content
Start transitioning to pages, text, images,
interaction, etc.
Use sketches lists storyboards drawings outlines
Will help you organize yourthoughts and plan
12
CoC Home Page
13
Special Design Challenge
  • On WWW, you dont know your users platform and
    capabilities
  • Screen size - from PDA to hugh
  • Connection speed - from dial-up to really fast
  • Plug-ins
  • What else????

14
Web Design Dimensions/Tensions
Tension Between Opposites
Design
Structure
Artist Aesthetics Gallery
Scientist Organization Library
15
Why Web Site Design Matters
  • Tests of time to complete shopping tasks at
    several major on-line stores - number of clicks
    varied from 8 to 50 high abandonment rate on
    poor sites
  • Jakob Nielsen review of comparative tests on web
    sites - average 68 difference in task completion
    times
  • Nielsen finds 135 improvement from redesign
    effort
  • see http//www.useit.com/alertbox/20040119.html

16
Web SiteUsability Problems
  • What problems do YOU have on the web? (Group
    huddle -)

17
Five Usability Issues
  • Text content
  • Graphic design
  • Navigation
  • Structure
  • Links
  • Others????

18
1. Text Content
  • Attention spans are short on the web - users want
    instant gratification, and reading is 25 slower
    on screen than on paper
  • So
  • People tend to skim web pages, just read headers,
    highlights, selected paragraphs
  • Therefore
  • Tune your writing style to this reality
  • J. Nielsen column on writing for WWW
  • www.useit.com/alertbox/9703b.html

19
INVERSE PYRAMID WRITING STYLE
James Landy, U Washington
20
Journalists Use Inverted Pyramid
from www.nytimes.com
James Landy, U Washington
21
ZDNet Uses Inverted Pyramid
  • Start with a good concise title
  • Reflect the content
  • Continue with the most important points
  • Use hypertext to split-up information
  • People often wont scroll or read
  • Use less text
  • 50 less than you would offline
  • Use a simple writing style
  • Simple sentences -- no hype or advertising
  • Use EMBEDDED LINKS to help visitors find more
    information
  • Use bullets and numbered lists
  • Supports skimming

James Landy, U Washington
22
Using Bullets
James Landy, U Washington
23
2. Graphic Design
  • All the graphic design considerations apply here,
    too
  • Consistency
  • Visual structure reinforces logical structure
  • Color
  • Typography

24
Images Download Speed
  • Avoid anything slow
  • Text-only version for slow-speed connections
  • Completely different design for PDAs
  • User expectations differ for
  • Gratuitous decorative images
  • Banners and backgrounds
  • Desired content
  • Map, picture of new grandchild
  • As networks get faster, ground rules change!

25
The Useful Web
26
3. Navigation
  • Often the most critical element
  • Often the weakest part of a web site
  • Problems due to
  • Users dont have domain knowledge
  • Site structures dont meet expectations
  • Give user understanding of information space
    structure
  • Table of Contents (Site Map)
  • Search, Index, Breadcrumbs (http//hcc.cc.gatech.e
    du/)
  • Navigation bar - tabs or similar

27
Alternative to Breadcrumbs
  • Site map showing current page
  • Called Context Focus

28
4. Structure
  • Connectivity - distance between page pairs,
    averaged over all pairs
  • Branching factor - how many out-links
  • Long scrollable pages vs linked shorter pages
  • Number of links (clicks) to get to a goal page -
    major cause of users abandoning a site


29
Sample Structures
Home Page
web ornetwork
First Page
sequence
Home Page
hierarchy
30
Inconsistent Structure
  • Multiple paths from 4 pages
  • No way back from Sports Flash

31
Entry (aka Tunnel) Page(s)
  • Typically a flashy graphic or animation with
    single link to home page
  • To lure/entice viewer in

Content Pages
Entry Page
Site Map
Home Page
FAQ
Credits
Exit Page
32
Entry Pages
  • Controversial
  • Would be OK for a sculptors site,
  • Not OK for news or shopping site
  • Always provide Skip this introduction link to
    get past the hype

33
Home Page
  • Most important page at your site
  • Critical for image
  • Entices viewer to look at more
  • Give viewer a good idea of what can be found at
    the site
  • Make sure vital content is above the fold
  • Place real content on home page
  • How much graphics do you use?
  • If links are in images, have parallel text labels
    near page bottom

34
Home Page Design Has Evolved
  • From graphics-rich with few links mostly to
    top-level pages of major subsections
  • To link-rich pages that give access to real
    content in one click, plus have some content

35
Home Page Evolution
  • Georgia Tech College of Computing

Ancient home page
Old home page
Currenthome page
36
Structure of Pages - Templates
  • Layout consistency important
  • Graphics banners, grid, breadcrumbs, navigation
    aids, search box
  • Design just once, use for all pages
  • Design tools support this - Dreamweaver etc

37
Evaluating Templates - Greeking
  • Have people guess what the areas are -
  • See www.useit.com/alertbox/980517.html


38
Topology
Abolish linear thinking, that is, dependence on
prior pages
Search engines can send user straight to any page
gt Each page should be able to stand on its own
Return Go back
Link all pages to the home page
39
5. Links
  • Success of link depends on
  • How well user can predict where link will lead
  • How well user can differentiate one link from
    other nearby ones
  • Useful content at other end of link

40
Link Style
  • Short, terse sound bite
  • Prices
  • Long textual explanations maybe even with
    trailing (non-link) clarification
  • Listing of car prices - Current suggested prices
  • Link provides expectation of where it goes
  • Be our guest
  • What does that do?

41
Link Wording
  • Beware the famous here
  • Click here to learn about my BMW Z3
  • vs.
  • I drive fast in my BMW Z3
  • When a link will take someone a good distance,
    use word jump
  • For more on iguanas, jump to Freds iguana page.
  • Say explicitly where link is
  • Check out the tax calculator by Money Magazine.

42
Multimedia Links
Tell what it is and how big it is
Flight of the Valkyries
Click may get surprise
Bell jingling (.au file, 700,00 bytes) ltIMG
SRC/icons/sound.gif ALTSOUNDgt ltA
HREFbell.augt Bell jingling (.au file, 700,000
bytes)lt/Agt Bell jingling (Quicktime movie, 3
meg) ltIMG SRC/icons/movie.gif ALTMOVIEgt
ltA HREFbell.qtgt Bell jingling (Quicktime
movie, 3 meg) lt/Agt
Cool if cursor changed form accordingto what
kind of link its over
43
Link Issues
Embedded Links - Links set in surrounding text.
They can be harder for user to pick and use.
Wrapped Links - Confusing - 3 or 4 items??
Janus Twenty
Investment Company of America
Royce Premier
Too many on a page can be confusing and
take too long to parse
Problem with Image links - Dont change color
to indicate prior traversal
44
Link Issues
  • Within-page links
  • Can be confusing
  • Is this the same page or a differnet page?
  • Use shorter pages to avoid scrolling

45
Good Links
James Landy, U Washington
46
The Killer SiteHas
  • Site
  • Table of contents / Site map
  • Short descriptions of whats there
  • Index (if big enough)
  • Search
  • What else??
  • Page
  • Navigation bar
  • Organization
  • Last updated
  • Problem report
  • E-mail contact

47
Bad Design Bugaboos
All capitals text Scrolling sideways Teeny, tiny
text size, especially in italics Dead
links Telling the user how to set the
browser Poor contrast in text-to-background
color Large typeface (one without impact and
contrast) Animations that dont stop Things that
look like buttons but arent Under construction
notices Neglecting ALT tags for images Not
denoting image sizes Do-nothing home
page Changing color for the heck of it Lack of
mail to/feedback throughout site Sites requiring
advanced browser or plug in Blink tags
48
Jeff Johnsons Web Bloopers
  • Chapter 1 Content Bloopers
  • 1. Home page identity crisis. Home page doesnt
    clearly identify organization or its purpose.
  • 2. Confusing classifications. Content categories
    seem arbitrary or nonsensical.
  • 3. Unhelpful descriptions. Content descriptions
    do not support choosing among items.
  • 4. Conflicting content. Information in different
    parts of site disagrees.
  • 5. Outdated content. Content on site is
    out-of-date, but not clearly marked as archival.
  • 6. Missing or useless content. Information users
    need to accomplish goals is missing.
  • 7. Unfinished content. Blatantly incomplete areas
    of site.
  • Chapter 2 Task-Support Bloopers
  • 8. Redundant requests. Asking users for the same
    data repeatedly.
  • 9. Requiring unneeded data. Making users provide
    non-essential information.
  • 10. Pointless choice. Offering or requiring
    meaningless choices.
  • 11. Omitting important options. Choice excludes
    options some users need.
  • 12. Clueless back-end. Back-end lacks "common
    sense" data needed to support user tasks.
  • 13. Dead-end path Now you tell me! Allowing
    users to go down a path towards a goal before
    telling them it is unavailable.
  • 14. Agonizing task-flow. Accomplishing tasks
    requires many unnecessary, distracting steps.

49
Jeff Johnsons Web Bloopers
  • Chapter 3 Navigation Bloopers
  • 15. Site reflects organization chart. Site
    structure reflects organizations structure or
    history.
  • 16. Numerous navigation schemes. Many ways to
    navigate, but no clear guidance.
  • 17. Deceptive duplicate links. Making users
    think "Do those go to the same place?".
  • 18. Not linking directly. Specific-looking links
    that go to generic pages or home pages.
  • 19. Lost in space Current page not indicated.
    Page doesnt clearly show where user is.
  • 20. The circle game Active link to here. Page
    has active link to itself.
  • 21. Missing links Its BACK or nothing. Page
    provides no navigation links.
  • Chapter 4 Form Bloopers
  • 22. Making people type. Using a text field for a
    choice setting.
  • 23. Intolerant data fields. Text field is too
    picky about how data must be typed.
  • 24. No defaults. Controls and form fields with no
    default value.
  • 25. Faulty defaults. Controls and form fields
    with the wrong default value.
  • 26. Compulsory clicking No default text input
    focus. Users cant just start typing.
  • 27. Lame label placement. Labels mis-aligned
    with, or too far from, data fields.
  • 28. Checkboxes or radiobuttons? Checkboxes
    misused as radiobuttons, or vice-versa.
  • 29. Looks editable but isnt. Using standard
    data-input controls for display-only data.
  • 30. Mysterious controls. Operation of controls is
    unclear due to poor labeling, poor layout, or
    uniqueness of controls.

50
Jeff Johnsons Web Bloopers
  • Chapter 5 Search Bloopers
  • 31. Baffling search controls. Search options
    require knowledge of computer or industry-insider
    concepts.
  • 32. Dueling search controls. Competing search
    boxes on page, with no guidance.
  • 33. Hits look alike. List of found items cannot
    be easily distinguished by scanning.
  • 34. Duplicate hits. List of found items contains
    duplicates.
  • 35. Search myopia Missing relevant items. Items
    that should be found are not.
  • 36. Needle in a haystack Piles of irrelevant
    hits. Many items dont match search criteria.
  • 37. Hits sorted uselessly. Sort-order of found
    items doesnt support user tasks.
  • 38. Crazy search behavior. Modifying search
    criteria yields unexpected results.
  • 39. Search-terms not shown. Not showing what
    search terms produced these results.
  • 40. Number of hits not revealed. Not showing how
    many items were found.
  • Chapter 6 Text Writing Bloopers
  • 41. Too much text. Overly-verbose instructions,
    messages, or link-labels.
  • 42. Speaking Geek. Computer jargon in error
    messages, commands, or instructions.
  • 43. Calling site visitors "user" . Using the
    computer jargon term "user" on a website.
  • 44. Insider jargon. Using the vocabulary of
    industry experts, rather than that of users.
  • 45. Variable vocabulary Different words for the
    same thing. Inconsistent terms.
  • 46. Inconsistent style. Text on site does not
    follow consistent style rules.
  • 47. Typos and grammos Sloppy writing. Failing to
    check and fix text before going live.

51
  • Chapter 7 Link Appearance Bloopers
  • 48. Links dont look like links. Links not marked
    well enough, so users miss them.
  • 49. Non-links look like links. Non-link text is
    underlined or non-link graphics look clickable.
  • 50. Bizarre buttons Click target smaller than it
    seems. Entire boxed area surrounding link label
    looks like part of button, but only label accepts
    clicks.
  • 51. Wrapped links How many? Multi-line text
    links.
  • 52. "Click here" Burying links in text.
    Important navigation links embedded in prose.
  • 53. Been there, done that? Cant tell. Traversed
    links not clearly marked.
  • Chapter 8 Graphic Design Layout Bloopers
  • 54. Tiny text. Text typeface too small for many
    users to read.
  • 55. Camouflaged text. Text contrasts poorly with
    background.
  • 56. Centering everything. Centering prose text,
    bullet items, controls, or data fields.
  • 57. Unobtrusive error messages. Error messages
    easy to miss due to poor placement.
  • 58. Shades of beige color differences too
    subtle. Relying on small color differences to
    convey important meaning.
  • 59. Dead or Alive? Active buttons look inactive.
    Buttons appear "grayed out" but arent.
  • 60. Terrible tabs. Navigation tabs dont look and
    act enough like real tabs.

52
Sources
Designing Web Usability, J. Nielsen, New
Riders, 2000. The Non-Designers Web Book, R.
Williams and J. Tollett, Peachpit Press,
1998. Web Style Guide, P. Lynch and S. Horton,
Yale Univ. Press, 1999. Creating Killer Web
Sites, 2nd edition, D. Siegel, Hayden Books,
1997. Web Site Usability A Designers Guide,
User Interface Engineering, North Andover,
MA, 1997. Web by Design, The Complete Guide,
M. Holzschlag, Sybex, 1998. Web Concept
Design, C. Waters, New Riders, 1996. Hot Wired
Style, Principles for Building Smart Web Sites,
J. Veen, Wired Books, 1997. The Web Design
Wow! Book, J. Davis and S. Merritt, Peachpit
Press, 1998. How to Set Up and Maintain a Web
Site, L. Stein, Addison Wesley 1997.
53
Sources
  • Jakob Nielsens home page, hotlist, recommended
    books
  • www.useit.com/jakob/ www.useit.com/hotlist/
  • www.useit.com/books/
  • Web Review Design tips
  • webreview.com/wr/pub/
  • Web Bloopers (Jeff Johnson)
  • http//www.web-bloopers.com/index.php
  • Web Techniques magazine
  • www.webtechniques.com
  • Web design fundamentals
  • www.pantos.org/atw/basics.html
  • User Interface Engineering
  • www.uie.com

54
Sources
Project Cool Design help www.projectcool.com M
ining Company design help webdesign.miningco.co
m WebReference resources webreference.com Web
design and graphics resources
www.snap.com/main/channel/item/0,4,home-8483,00.ht
ml Cnets web resources www.builder.com Yale
design manual info.med.yale.edu/caim/manual/co
ntents.html
55
Sources
Microsoft WWW Usability Research
msdn.microsoft.com/workshop/design/default.asp Gu
ide to web usability resources
usableweb.com The Design Studio
www.designstudio.net Crystal Waters site
www.typo.com Dont Make me Think - by Steve
Krug http//www.sensible.com/chapter.html
56
Good/Bad Sites
Good Creating Killer Web Sites
www.killersites.com Cool site of the day
cool.infi.net Project Cool site of the day
www.projectcool.com High Five
www.highfive.com Bad Web pages that suck
http//www.webpagesthatsuck.com/
Write a Comment
User Comments (0)
About PowerShow.com