Spring 2004

1

Chp.16: Hypermedia and the WWW

• 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)

Spring 2004

2

• 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?

Spring 2004

3

• http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html

• Wow! Can you still download this? (Would you want to?) These days: IE, Safari, Netscape (?), Mozilla

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Spring 2004

4

• 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)

Spring 2004

5

• 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)

Spring 2004

6

• 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.

Spring 2004

7

• 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)

Spring 2004

8

• 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)

Spring 2004

9

• 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

Spring 2004

10

• 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)

Spring 2004

11

• How to present info:– short unstructured lists– linear structures– arrays, tables– hierarchies, trees– multitrees (e.g., indexed photos, iPhoto, …)– networks

Spring 2004

12

• 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?

Spring 2004

13

• 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!)