Lecture Six Web Intelligence

Document Sample
Lecture Six Web Intelligence Powered By Docstoc
					    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.