Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
UI Design for the WWW Creating Effective Sites and Pages 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 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???? Page/Site Goals • Convey information/access • Convey image or impression employees, shareholders, customers • Meet people colleagues, public • Raise money/donations • Sell products • Entertain an audience • Advertise/market service • Promote myself • Recruit • Teach people about a topic • Announce, survey • Get famous • Nurture communities • Tell a story •Search: promote ease and speed •Browse: without a goal, attractiveness trumps efficiency Generate a Topics List Raw brainstorming of just anything CCI: classes people faculty students administrators equipment directions programs degrees mission undergraduates awards unique points table of contents index contact information map buildings academic units graduates alumni research Put each on index card or post-it note Organize Content Group items into categories People Faculty Students Undergraduates Graduates Staff Academics Courses Undergraduate Graduate Degrees ... Put notecards into piles Current Index on CCI Home Page Departments – Computer Science – SIS Institutes – – Research Labs – – Charlotte Visualization Center … Bioinformatics … Information – Programs – News – Events – Undergraduate Admissions – Graduate Admissions – Contacts – Dean’s List – Bioinformatics Intitiative Faculty/Staff – – – Events – Faculty Listing Staff Listing Research Areas Event Listing Support – COIT Tech Support Search Computer Science – – – – Undergraduate Program Master’s Program Ph.D. Program Graduate Certificate Software and Info. Systems – – – – – B.A. SIS Master’s in IT Ph.D. in IT Certificate Programs Research Projects CCI Homepage Web Site Usability Problems What problems do YOU have on the web?… 1. 2. 3. … … … Text Content Attention spans are short on the web – – So… – users want instant gratification, and reading is 25% slower on screen than on paper People tend to skim web pages, just read headers, highlights, selected paragraphs Tune your writing style to this reality J. Nielsen column on writing for WWW – – http://www.useit.com/alertbox/9710a.html www.useit.com/alertbox/9703b.html Inverse Pyramid Writing Style Inverse Pyramid Writing This is the short blurb describing the article Most important info 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 Title Short Blurbs 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 Summaries 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 Overviews know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text DoesTeasers 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? Less important info 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 Background Information Supporting Details 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 Quotes nonsensical What is good inLong 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 James Landy, U Washington Inverted Pyramid Start with a good concise title – Continue with the most important points – – 50% less than you would offline Use a simple writing style – Use hypertext to split-up information People often won’t scroll or read Use less text – Reflect the content 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 Graphic Design We’ll cover these next class – – – – Consistency Visual structure reinforces logical structure Color Typography www.amazon.com Navigation Often most critical, and weakest part Give user understanding of information space structure – – – Table of Contents (Site Map) Search, Index, Breadcrumbs Navigation bar - tabs or similar 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 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 Home Page Evolution Georgia Tech College of Computing Ancient home page Old home page Newer home page Latest home page Example evolution 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 Evaluating Templates - “Greeking” Have people guess what the areas are See: www.useit.com/al ertbox/980517.ht ml 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 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 Fred’s iguana page. Say explicitly where link is – Check out the tax calculator by Money Magazine. Top Ten Web Design Mistakes of 2005 Legibility Problems Non-Standard Links Flash Content That’s Not Written for the Web Bad Search Browser Incompatibility Cumbersome Forms No Contact Information or Other Company Info Frozen Layouts with Fixed Page Widths Inadequate Photo Enlargment Also – Pop ups Jacob Nielson http://www.useit.com/alertbox/designmistakes.html 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 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 Jeff Johnson’s Web Bloopers Chapter 1 – Content Bloopers 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-ofdate, 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 Chapter 3 – Navigation 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 datainput 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 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 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 Chapter 7 – Link Appearance 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. Sources • Designing Web Usability, J. Nielsen, New Riders, 2000. • The Non-Designer’s 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 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 1997. Sources Jakob Nielsen’s home page, hotlist, recommended books – – www.webtechniques.com Web design fundamentals – http://www.web-bloopers.com/index.php Web Techniques magazine – webreview.com/wr/pub/ Web Bloopers (Jeff Johnson) – www.useit.com/hotlist/ Web Review Design tips – www.useit.com/jakob/ www.useit.com/books/ www.pantos.org/atw/basics.html User Interface Engineering – www.uie.com Good/Bad Sites Good Creating Killer Web Sites www.killersites.com Project Cool site of the day www.projectcool.com Bad Web pages that suck http://www.webpagesthatsuck.com/