Spring 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 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 CSAMosaicHome.htmlhttp://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

Spring 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 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 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 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 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., :) –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., create discussions (e.g., google groups) nurture communities (e.g., google for colon cancer)

Spring 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 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 How to present info: –short unstructured lists –linear structures –arrays, tables –hierarchies, trees –multitrees (e.g., indexed photos, iPhoto, …) –networks

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