UI Design for the WWW. Creating Effective Sites and Pages. Dilbert’s Design for the Web. User Behaviors: Browse, Search. Search - Seeking to find a particular item, fact or piece of information. -> Buying products, doing research, downloading software, ... Promote ease and speed
Creating Effective Sites and Pages
• 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
• Sell products
• Advertise/market service
• Announce, survey
• Nurture communities
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????
Raw brainstorming of just anything
College of IT, e.g.:
table of contents
Put each on index card or post-it note
Group items into categories
Put notecards into piles
Sketch out the high-level organization
of the categories
Charlotte Visualization Center
Student Laptop Program
Software and Info. Systems
Master’s in IT
Ph.D. in IT
Research ProjectsCurrent Index on COIT Home Page
Start transitioning to pages, text, images, interaction, etc.
Will help you organize yourthoughts and plan
Tension Between Opposites
This is the short blurb describing
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text
To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t
know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which
is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another?
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text
To see how well this thing works
This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some
Most important info
Less important info
Long QuotesINVERSE PYRAMID WRITING STYLE
Georgia Tech College of Computing
Old home page
Abolish linear thinking, that is,
dependence on prior pages
Search engines can send user straight
to any page ==> Each page should be
able to stand on its own
Link all pages to the home page
Listing of car prices - Current suggested prices
Be our guest
Click here to learn about my BMW Z3
I drive fast in my BMW Z3
For more on iguanas, jump to Fred’s iguana page.
Tell what it is and how big it is
Flight of the Valkyries
Click may get surprise
Bell jingling (.au file, 700,00 bytes)
<IMG SRC=“/icons/sound.gif” ALT=“[SOUND]”> <A HREF=“bell.au”>
Bell jingling (.au file, 700,000 bytes)</A>
Bell jingling (Quicktime movie, 3 meg)
<IMG SRC=“/icons/movie.gif” ALT=“[MOVIE]”> <A HREF=“bell.qt”>
Bell jingling (Quicktime movie, 3 meg) </A>
Cool if cursor changed form accordingto what kind of link it’s over
• Embedded Links - Links set in surrounding
text. They can be harder for user to pick and use.
• Wrapped Links - Confusing - 3 or 4 items??
• Too many on a page can be confusing and
take too long to parse
• Problem with Image links - Don’t change color to indicate
All capitals text
Teeny, tiny text size, especially in italics
Telling the user how to set the browser
Poor contrast in text-to-background color
Large typeface (one without impact and contrast)
Animations that don’t stop
Things that look like buttons but aren’t
“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
1. Home page identity crisis. Home page doesn’t 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.Jeff Johnson’s Web Bloopers
15. Site reflects organization chart. Site structure reflects organization’s 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 doesn’t clearly show where user is.
20. The circle game: Active link to here. Page has active link to itself.
21. Missing links: It’s 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 can’t 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 isn’t. 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.Jeff Johnson’s Web 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 don’t match search criteria.
37. Hits sorted uselessly. Sort-order of found items doesn’t 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.Jeff Johnson’s Web Bloopers
48. Links don’t 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? Can’t 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 aren’t.
60. Terrible tabs. Navigation tabs don’t look and act enough like real tabs.Jeff Johnson’s Web Bloopers
• Designing Web Usability, J. Nielsen, New Riders, 2000.
• The Non-Designer’s Web Book, R. Williams and J. Tollett, Peachpit
• 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 Designer’s 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
Creating Killer Web Sites
Project Cool site of the day
Web pages that suck