Download chp16 - Andrew T. Duchowski

Chp.16: Hypermedia and the WWW
Spring 2004
• The internet was not invented by Al Gore
• Rather, vision of hypertexed documents is credited to
Vannevar Bush
• In 1945, Bush proposed idea of memex:
– based on microfilm
– based on eye-tracking (huh? I don’t remember
read about that!)
– (it says “at his touch” not by merely looking, but
whatever…it’s actually a pretty good article)
1
Spring 2004
• What is hypertext?
– linked text, basically, coined by Ted Nelson
• What is hypermedia?
– generalized hypertext to include images, movies,
and other media
• Hypertext apps were available in the 80s and 90s (I
used KMS!), but it didn’t really explode until the
browser (internet’s killer app) came along (first
version: mosaic by NCSA at UIUC (ca. 1997)
• HyperCard still around - does anyone use it?
2
Spring 2004
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
• http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/N
CSAMosaicHome.html
• Wow! Can you still download this? (Would you want
to?) These days: IE, Safari, Netscape (?), Mozilla
3
Spring 2004
• Problems with hypertext documents:
– possibility of “hyperchaos”? well, maybe not….
– possibility of “lost in space”? yes, e.g., “how did I
get to this URL?” etc.
• Golden rules of hypertext creation:
– applicable to fragmented information…
– …that is related…
– …but users only needs a small amount at a time
• Contast hypertext with traditional linear document
(e.g., newspaper articles, books, novels)
4
Spring 2004
• Authoring tools should support:
– import (articles, URLs, images, etc.)
– edit (e.g., a link - kind of a pain in Word, hard to
highlight a link)
– export (collections of articles, links, e.g., directory)
– print (web of links - usually linearly)
– search (entire hypertext)
5
Spring 2004
• Other authoring features:
– editing functions (copy, move, etc.)
– lists of links?
– link verification (that would be great!)
– display-formatting (fonts, colors, etc.)
– search and replace
– color
– graphics and video (Insert -> Image)
– collaboration
– compression
– security (passwd), encryption
– etc.
6
Spring 2004
• Designing hypertext documents:
– know thy user
– use high concept structure
– ensure traversal simplicity (be consistent, don’t
“hide” links)
– require low cognitive load
– don’t use too many links
– minimize scrolling
– etc. (other common-sense ideas)
7
Spring 2004
• Designing web sites:
– know thyself: are you an individual, group, university,
corporation, .org, or .gov? (primary way of categorizing
oneself, unless you aim to spoof, e.g., www.whitehouse.com
:)
– examine web site goals:
• sell products (e-commerce, pick a site, any site)
• advertise products (banners, etc.)
• inform and announce (e.g., cnn.com?)
• provide access (e.g., library of congress?)
• offer services (e.g., www.irs.gov, www.uscis.gov)
• create discussions (e.g., google groups)
• nurture communities (e.g., google for colon cancer)
8
Spring 2004
• Designing web sites (cont’d):
– consider size of web site (how many pages)
– consider success of website (e.g., number of hits, products
sold, etc.)
• Basically know who you’re designing for and what you’re going
to give them, e.g.,
– doctors; info on specific topics (cancer)
– public; info on medical treatments (web pages on cancer
would be different than ones for doctors)
– Shneiderman suggests a planning document
9
Spring 2004
• The Object-Action Interface (OAI) Model:
– objects: information objects (web pages?)
– actions: searching, linking
– interface:
• metaphors for information objects, e.g.,
bookshelf, encyclopedia, store, etc.
• handles (affordances) for actions, e.g.,
querying, zooming (e.g., the search dialog)
10
Spring 2004
• How to present info:
– short unstructured lists
– linear structures
– arrays, tables
– hierarchies, trees
– multitrees (e.g., indexed photos, iPhoto, …)
– networks
11
Spring 2004
• Some potential metaphors:
– file cabinet
– book with chapters (e.g., PDF is sort of like this)
– encyclopedia
– TV with channels (TV channels have web pages)
– stores
– museums
– anything else?
12
Spring 2004
• Web-page design:
– page length and number of links (branching factor);
extremely long page with no links is not appealing
– sequencing, clustering, emphasis of objects (particularly on
the home page)
– support for universal access (e.g., keep in mind poor dialup
users - don’t put huge images on your web page)
– consult graphic artists for graphic layout
– provide navigation support (e.g., site map)
– do usability testing (point of the entire textbook and
course!)
13