Lecture Six Web Intelligence Part One– Critiquing Websites Critiquing The Websites You Use Every Day Purposes from the owner’s side: making money disseminating information Purposes from the customer’s side: buying something getting information being entertained What websites aren’t usually about (from the owner’s side): looking cool (unless it serves profit) high art Some Pre-Sites http://www.sears.com/ http://www.chipotle.com/ http://www.gatormenu.com/ At First Glance IS IT CLEAR WHO YOU ARE ? IS IT CLEAR A USER CAN DO HERE? The Three-Second Rule: This is how long the average user is willing to look to figure this out Who are you? http://www.1amp.com/ http://www.hopt-schuler.com/ Two Important ID approaches 1. Use a name that makes it clear what site does. Or not. The White House 2. Use HTML TITLE tag A good title differentiates you from competition- Walmart An Example of Missed ID Opportunity http://www.christies.com/ Consistency Matters Logo/ Name should be in an obvious place – and consistently placed on home and on every other page For languages read left to right, usually placed upper left Besides using logo, site’s character should be clear. Most important information on first screen. Shouldn’t have to scroll, especially not horizontally Scrolling http://www.cnet.com/ Communicating What a User Can Do Priority Tasks visually stressed in prominent area with space around Number of Priority Tasks kept small ideally, a maximum of four Visual Clutter http://www.thehipp.org/ http://www.amazon.com/ To do business on the Web most effectively Don't get in the way of the sale. Don’t show off, don’t distract. Site Should Play to the User Use user’s point of view example: if you’re GRU, “Home heating tips” not “Consumer information” Have a contact link with clear wording as to who’s being contacted You be the judge: Examples of “contact us” General Motors C-Net McAfee Avoid Location Confusion Home page Visually Distinctive only one “home page” per site Use “website” judiciously Navigation Confusion Seth Godin's Weblog Good Corporate Communication Don’t post internal information Groups “About” Links Explain which services are exclusively on the web If not obvious, explains how site makes money Good Style Force words that need to be together onto one line Be typographically consistent Some Stylistic Annoyances Cuteness, esp. Exclamation Points!! Unexplained Acronyms ALL CAPITALS Overlabelling (Headlines, Feature) Handling Links Start with distinguishing word, not generic Avoid “click here”/ “more” by itself/ “links” Avoid black and grey for link colors Warn user if links will load slowly No mystery meat! Some Unidentifiable Grey Foods The Smithsonian Saturn MOMA The Holy See Navigation Area “Banner blindness” –not above/inside Use Text not Icons Group Links Keep Number of Links to Minimum Examples of Banner Blindness etc Banner Blindness http://www.msn.com/ Grouping links, keeping them to a minimum http://www.thehipp.org/ Graphics For content not decoration BUT pictures of some things sell better than descriptions (example: clothing) Labels if relevance not obvious Keeps style simple, logos minimal - too designed looks like ad Animation Doesn’t use extensive animation on a homepage BUT can be useful to demonstrate how something works Animation Dance Steps Knots and Knotting Good Home Page Title Use Bookmarks well: 8 words, 64 ch. limit http://www.jobmagic.net/ Begins with Company Name Includes a tag describing company strength Avoids “the”, “homepage” “.com” Some Miscellaneous Points Choose URLs carefully register obvious misspellings and directs users to your main site Avoids silly Welcome Messages generics are out of date More Miscellany Load Time reasonable Downtime post a note if some part of site is down and provides a specific time to come back Dates Date fast- breaking stories Uses clear Dates: not 1/5/04 ( Europe says 5/1/04) A Little Entertainment Bad home pages Some Post-Sites Diesel Abe Books Babblefish Scraptopia Lecture Five Part Two: How to Approach Designing your own Sites Don’t be Selfish Remember that you, the designer, and we, the users may have different priorities You: does it look cool? The user: am I interested? can I learn something here? Remember who’s boss If this is out in public, it should be the user! Design for how the user really operates not how you think he/she should. Remember the purpose of any web site. Communication, communication, and communication Be systematic List your messages and prioritize them Design the site accordingly Think conversationally Priority list from high to low 1. If you’re on my site, you probably want this 2. You may well want this too 3. This tool is especially useful 4. Here are some other tools 5. I put these the way I did so you can tell at a glance what kind of site this is 6. If you want to go into depth, here are some links If your site’s purpose is information for an informational site: 1. Page title 2. Site ID 3. Page summary 4. Site navigation If you were designing a commercial site 1. Site ID/logo 2. Primary navigation (more important when you’re selling something) 3. Page title 4. Page contents 5. Secondary navigation Writing for the Web -web users behave differently from people reading books -say less -use clear headings to break up text Imagery for the Web -Be minimal– avoid visual overload -Use imagery that contributes to meaning -Focus for commercial sites: logo, site-id Smart Navigation Design -Is grouped logically -Shows user where she is at all times -Shows her where she’s been -Is visually clear about how to do tasks -makes hyperlinks stand out visually -explains what clicking will do (open a new window, leave the site, start a procedure etc) Some Approaches to Navigation Breadcrumb Trail Horizontal Top Bar Tabs Amazon Combo top and side bars Sears Bars/tabs with drop-down menus VW Paging Your 3066 Preplanning Form 1. Who will be the audience for your page? 2. What do you want people to get from it? Make us a priority list. 3. What specific information will you present and in what form? 4. Tell us your site organization plan. 5. Tell us your navigation method. 6. Set up a time line with goals.
Pages to are hidden for
"Lecture Six Web Intelligence"Please download to view full document