HYPERMEDIA. Hypertext Definitions

Transcription

1 HYPERMEDIA Hypertext - a network structure of information units connected by relational units Multimedia - use of multiple media Hypermedia - multimedia hypertext Hypertext Definitions Components (units, nodes, containers) - the information content; may be text, graphics, or other media Links - connection between components Anchors - the location in components to which links are attached Link markers - the manifestation of links that are presented to users Formatting, margins, fonts, spacing Navigation - process of moving from one component to another by following links Trails/webs/guides/paths - subsets of components on links, created by the user or as a pre-defined route through the hypertext Screen resolution - size and color Window - size(s) and management Some good resources

2 The next two Images are from Mischitz

3 History Vannevar Bush ( ) grandfather of hypertext publication has been extended far beyond our present ability to make real use of the record proposed Memex, published in Atlantic Monthly, 1945, in an article entitled As We May Think a device in which an individual stores his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility.

4 a device where individuals stores all personal books, records, communications etc. items retrieved rapidly through indexing, keywords, cross references,... can annotate text with margin notes, comments... can construct a trail (a chain of links) through the material and save it acts as an external memory! Bush s Memex device based on microfilm records, not computers! but not implemented

5 J.C.R. Licklider (1960) Outlined man-computer symbiosis The hope is that, in not too many years, human brains and computing machines will be coupled together very tightly and that the resulting partnership will think as no human brain has ever thought and process data in a way not approached by the information-handling machines we know today.

6 Produced goals that are pre-requisite to man-computer symbiosis immediate goals: time sharing of computers among many users electronic i/o for the display and communication of symbolic and pictorial information interactive real time system for information processing and programming large scale information storage and retrieval intermediate goals: facilitation of human cooperation in the design & programming of large systems combined speech recognition, hand-printed character recognition & light-pen editing long term visions: natural language understanding (syntax, semantics, pragmatics) speech recognition of arbitrary computer users heuristic programming

7 Ivan Sutherland s SketchPad Sophisticated drawing package (1963 PhD Thesis) introduced many new ideas/concepts now common - hierarchical structures defined pictures and sub-pictures - object-oriented programming: master picture with instances - constraints: specify details which the system maintains through changes - icons: small pictures that represented more complex items - copying: both pictures and constraints - input techniques: efficient use of light pen - world coordinates: separation of screen from drawing coordinates - recursive operations: applied to children of hierarchical objects Parallel developments in hardware: low-cost graphics terminals input devices such as data tablets (1964) display processors capable of real-time manipulation of images (1968)

8 Augment/NLS ( ) Doug Engelbart The Problem (early 50s)...The world is getting more complex, and problems are getting more urgent. These must be dealt with collectively. However, human abilities to deal collectively with complex / urgent problems are not increasing as fast as these problems. If you could do something to improve human capability to deal with these problems, then you'd really contribute something basic....doug Engelbart

9 at SRI created the Human Augmentation system NLS (on-line system, not a good acronym) a shared journal of papers, reports, and memos Not designed as a hypertext, but had many features such as: o Point and click o Expanding outline processors o Multiple Windows o Remote collaboration o Mouse

10 The mother of all demos In what has come to be known as the mother of all demos Douglas Engelbart demonstrated the first computer mouse at the Fall Joint Computer Expo in San Francisco on December 9, Engelbart also demoed the chord keyset (on left) that was a keyboard used with five piano-like keys. Englebert worked at the Stanford Research Institute which was also perfecting the acoustic modem at this time. Other technologies demonstrated during the landmark 90 minute session included hypertext, object addressing, dynamic file linking, and shared-screen collaboration in which two persons at different sites communicated over a network via both audio and video. Demo inspired interactive computing

11 Xanadu (1965) Ted Nelson Coined the term hypertext, also docuverse and stretch text, he was a computonian. Vision: A repository for everything ever written Partially implemented.

12 The Personal Computer Alan Kay (1969) Inventor of Smalltalk Dynabook vision (and cardboard prototype) of a notebook computer: Imagine having your own self-contained knowledge manipulator in a portable package the size and shape of an ordinary notebook. Suppose it had enough power to out-race your senses of sight and hearing, enough capacity to store for later retrieval thousands of page-equivalents of reference materials, poems, letters, recipes, records, drawings, animations, musical scores... In 1968 I was working on an early desktop 'personal computer' when I visited Seymour Papert's LOGO classroom and saw something really marvelous: elementary-aged children confidently doing differential vector geometry as 'playing with toys,' using a mathematically based computer language as their vehicle. This classroom combined all the best of Maria Montesorri's observations that children are set up by nature to learn the world around them through play and that some of the really powerful ideas of math and science of the last 2 centuries can be learned through play...on the plane trip back I started thinking about what a children's computer

13 would be like. It would have to be much more portable than the desktop machine, since children are mobile: but if you could put the hardware of the desktop computer on the back of a flat-screen display, keep the weight at 2 lb. or less, be able to use both a stylus and a keyboard, and have the software be object oriented so it would be easier for the kids to make simulations of ideas...i called this idea the Dynabook (Fig. 1)...The central idea of the DynaBook is to begin where children start--'art'--and follow through to where adults should wind up--'art.' The root words (ars in Latin and techne in Greek) simply mean 'to make.' We are makers. We make, not just to have, but to know. Not just to have and know and learn, but to grow. We now use art for communication, for shelter, for satisfaction, for transportation to different worlds, for reminding us we are not beasts of burden, and much more (Fig.2). My grandfather once wrote, "Art enters in when we labor thoughtfully with some goal in mind, that is, when we cut loose from action that is merely mechanical." Two extremely important 'new' arts to enhance with the Dynabook are science and mathematics..."-- Alan Kay "The Computer Revolution Hasn't Really Happened Yet" In Peter J. Denning, ed. (2002) The Invisible Future: The Seamless Integration of Technology into Everyday Life. New York, NY: McGraw-Hill, pp ISBN:

14 Ted Nelson (Again) 1974: Computer Lib/Dream Machines popular book describing what computers can do for people (instead of business!) Amazon 5 used & new from $ Edition: Paperback KMS (Knowledge Management System) KMS was developed at Carnegie Mellon University and has been a commercial product since It runs on UNIX workstations. The interesting thing about KMS is the simple data structure, which provides for just one type of node, a frame. A frame can cover the whole screen or the screen can be split into two frames (Just like Memex).

15 Contrary to window-based systems, one cannot change the size of a frame or scroll the text in it. There was also a special home frame, which was directly accessible from any other frame, and backtracking to the previous frame was also possible. o only one command context is available; no distinction is made between editing, viewing, and navigating o anchors are not highlighted; they may be separated from other text by whitespace to indicate the special status of this text. o scrolling is not provided, since quick navigation between frames is seen as a more efficient substitute o nodes are not typed o no clipboard is necessary, since items may be moved directly o destination anchors are not provided because frames themselves are small enough logical units o link properties are not required since one can just as easily follow the link as view its descriptors o no maps are provided, as they are not judged to be worth the extra complexity

16 Norman Meyrowitz's Intermedia (1985) Intermedia, developed at Brown University from 1985 to 1991, was probably the most promising educational hypertext system. Unfortunately, it was only implemented for Apple's version of the UNIX operating system, and in 1991, when funding was discontinued, the system died. In contrast to KMS, Intermedia was a window-based system. Information was displayed in resizable, scrollable windows. Intermedia used the Macintosh user interface in a very consistent way. The applications which existed within the Intermedia framework included a text editor (InterText), a graphics editor (InterDraw), a scanned image viewer (InterPix), a three-dimensional object viewer (InterSpect), and a timeline editor (InterVal). Ted Nelson was at Brown

17 Peter Brown's Guide (1986) Guide was developed at the University of Kent on a UNIX system. In 1986 it was released as a commercial product by OWL (Office Workstation Ltd.) first for Macintosh and later for the IBM PC. Thus, it was the first hypertext system available on both systems. It is also a window-based system.

18 Links An interesting aspect of Guide is that it supports three different kinds of hypertext links: o inline replacements : provides a hierarchical structure like in a book. A replacement link expands the text to a larger text (i.e., from a title of a section to the section itself). o pop-ups: opens a little window with a short explanatory text. The window disappears as soon as the mouse button is released. Hence, you cannot copy or save the displayed text. o references: jumps to another location in the hypertext. To differentiate between the three link types, the shape of the cursor changed depending on the type of link; o an asterix for a pop-up link, o an arrow for a reference link, o a circled cross to open an inline replacement, and a square to close an inline replacement.

19 Bill Atkinson's HyperCard (1987) Bill Atkinson originally designed HyperCard as a graphic programming environment and many of its applications have nothing to do with hypertext [Nie95]. It was free with every Mac from 1987 to Many Mac users started to create multimedia presentations. Even after 1992 a free version of a HyperCard-reader was still shipped. HyperCard is a frame-based system like KMS with the major drawback that link anchors are not strings like in Guide, but physical positions on a document (card). Hence, you cannot edit a document without redesigning the areas of the links. A card is the basic node of HyperCard, and a collection of cards is called stack. Links do not have to be hardwired but can also be programmed in HyperTalk, HyperCard's scripting language. HyperTalk is a very easy to use programming language, which could be another reason why HyperCard became so popular. The popularity of HyperCard resulted in the birth of many followers like SuperCard, Plus, MetaCard, Toolbook, Authorware Professional, and HM-Card.

20 The First Hypertext Conference (1987) In 1987 the first conference on hypertext, ACM Hypertext'87, was held at the University of North Carolina. Half of the 500 people who wanted to join the conference had to be turned away, and the others were squeezed into two auditoriums that were connected by video transmission. The World Wide WWW (WWW, W3, or The WWW), developed at CERN (the European Particle Physics Laboratory in Geneva, Switzerland), was first demonstrated at the ACM Hypertext'91 conference. Figure 0-1 Tim Berners-Lee Its breakthrough did not come until the year 1993 when the National Center for Supercomputing Applications (NCSA) released Mosaic, a point-and-click graphical browser for the WWW. The World Wild WWW will be discussed in the next Section.

21 In 1994 the first Hyper-G server, developed at Graz University of Technology, was released. Hyper-G is built upon the WWW but overcame some of its shortcomings by implementing new features inspired by Ted Nelson's Xanadu and Intermedia. Hyper-G supports full-text search, bidirectional links, user rights, etc. Hyperwave is the name of the commercial version of Hyper-G.

22 Commercial machines: Xerox Star (1981) First commercial personal computer designed for business professionals First comprehensive GUI used many ideas developed at Xerox PARC familiar user s conceptual model (simulated desktop) promoted recognizing/pointing rather than remembering/typing property sheets to specify appearance/behaviour of objects what you see is what you get (WYSIWYG) small set of generic commands that could be used throughout the system high degree of consistency and simplicity modeless interaction limited amount of user tailorability

23 First system based upon usability engineering inspired design extensive paper prototyping and usage analysis usability testing with potential users iterative refinement of interface Commercial failure cost ($15,000); - IBM had just announced a less expensive machine limited functionality - e.g., no spreadsheet closed architecture, - 3rd party vendors could not add applications perceived as slow - but really fast! slavish adherence to direct manipulation

24 Commercial Machines: Apple Apple Lisa (1983) based upon many ideas in the Star; predecessor of Macintosh, somewhat cheaper ($10,000) commercial failure as well Apple Macintosh (1984) old ideas but well done! succeeded because: aggressive pricing ($2500) did not need to trailblaze - learnt from mistakes of Lisa and corrected them; - market now ready for them developer s toolkit encouraged 3rd party non-apple software interface guidelines encouraged consistency between applications domination in desktop publishing because of affordable laser printer and excellent graphics

25 Aspen Movie Map (1978) Probably the first hypermedia system MIT -- Producer: Michael Naimark Allowed user to take a simulated drive through the city of Aspen using an interactive LaserDisk

26 Potential Applications In Schneiderman this list is labeled as candidates for hypermedia applications, other than the wills, its all happened. =============================================== Business Product catalogs and advertisement Organization charts and policy manuals Annual reports and orientation guides Resumes and biographies Treaties, contracts and wills Newsletters and news magazines Software documentation and code Information Resources Encyclopedias, glossaries and dictionaries Medical and legal reference books Religious and literary annotations College catalogs and department guides Travel and restaurant guides Scientific journal, abstracts, and indexes Personal Learning Instruction and exploration Repair and maintenance guides Time lines and geographic maps Online help and technical documentation Cookbook and home-repair manuals Mysteries, fantasies, and jokebooks Hypernovels and Hyperpoems

27 3 Golden Rules of Hypertext (Shneiderman 1989): 1. Large body of information is organized into numerous fragments 2. The fragments relate to each other 3. The user needs only a small fraction at any time Navigation one of the biggest issues LOST IN HYPERSPACE Solutions: provide guided tours backtrack maintain a visual cache of visited nodes maps fisheye views, etc....

28 Logical Structure vs. Physical Structure Logical Structure chapter section paragraph footnote component link entry point, etc.... Physical Structure page column sidebar card scrolling regions buttons

29 Guidelines Know the user and the task Ensure that meaningful structure comes first Apply diverse skills Respect chunking Show interrelationships Be consistent in creating document names Work from a master reference list Ensure simplicity in traversal Design each screen carefully Require low cognitive load Create and Introduction Root document with links to all major components Top-down strategy Menu strategy Search strategy

30 Should hypertext preserve the presentation of the printed document? Hypertext vs Paper (Shneiderman 1987) text vs. Hyperties Answer Text HT Start sec sec. Body sec sec. Combined sec sec. Hypertext OK if jumping around a lot; may be slower if it can be found at a glance Text superior on most tests 1. people are familiar with books 2. variance among hyper-systems

31 Other Issues Links What should be linked? Different types of links? structure connection relationship functions, computations resolved at runtime How many links? menu- research, etc... (e.g. breadth vs depth) Link markers Source? Distinction? Type? bold, italics, underline Marker Options Link symbols or icons Reverse video Boxes Bold, italics, underline, color Cursor shape Flashing Embedded vs. Segregated Markers? How many different markers can user distinguish?

32 How will system be used? browse, search, etc... Conclusion (4 years ago) You will see hypermedia in the future? Holds great promise in education! What does the future hold?

33 =============================================== SEARCH =============================================== If you have data in hypertext documents or distributed over the web, suddenly search engines and search strategies become an important interface component. YAHOO-ALTAVISTA-LYCOS-WEBCRAWLER-GOOGLE- ASK-DOGPILE-HOTBOT-TEOMA Then again, if you have to access information in a database, this is really the same problem. Now that I think of it an Index is also a data finding mechanism. What rules should govern this group of data finding tools. SSOA 1. semantic figure out what to do, what is the data I want. 2. syntactic how do I express my meaning in this semiotic system 3. object what object do I interface with to start the computer response 4. action physical manipulation of the input system Should be as easy as possible. There must be some way to inform the user of the basic distribution of the data (PALS can access different libraries) What is in the Burton library. (His name might not indicate this is a repository of foreign literature.)

34 Filters Full text string search (human OR person OR man) AND (computer or machine) Word stemming - dog* Word proximity - human and factor in same sentence. Boolean compinations Online thesauras - suggests alternate words with same meaning Word list input - returns number of relevant words in each document Formatted field search TITLE: AUTHOR: DATE: PUBLISHER: LANGUAGE: Controlled vocabulary systems List of word choices, with subchoices, and subsubchoices, I ve always felt these were more way of thinking unreliable than other searching systems.

35 Index based search Use Table of Contents and Index Advantage: you get a good feel for if this book is relevant at all to your purpose Disadvantage: if the writer did not index it you cannot find it. Concordance or Keyword in context Computer generated word list, too large for browsing, but great for power users. Flexible search Rainbow search (search for word with or without formating) Search expansion if you want hypertext the search engine also suggests you look under hypermedia Sound search - foreign words, musical phrases, or animal sounds need to be searched for in a database. And if you are a plain bad speller like me Picture search - find this bitmap of a triangle in my document files, where did I put it? Photographic Libraries - A hot topic, especially for military and space satellite images as well as astronomical images, etc. Graphical boolean expression Since people are not logical, maybe a graphical interface to boolean expressions would be a good idea, but how to implement this?

36 Documentation Problem: LEARNING ABOUT A NEW COMPUTER SYSTEM CAN BE DIFFICULT Solutions: 1. BETTER INTERFACES 2. GOOD DOCUMENTATION Documentation PAPER DOCUMENT quick reference card tutorials conversion manual from popular alternate or antique system alphabetic listing and description of commamd getting started - the highlights novice guide - I do not speak computerease ONLINE INFORMATION Online tutorials Online demos Online Help Online documentation

37 Preparing Manuals Historically, not much effort was put into writing the manual - afterthought preparing a manual is difficult It is difficult to organize, write, and fine-tune material that is intended to communicate effectively Don t you love writing papers? Isn t it easy. Presentation will depend on users: syntax vs. semantics 1. Do they know the task? 2. Do they know how to use a similar system? tutorial command reference quick review flow diagram Organization and Writing Style Author must: have technical knowledge know background and reading level of users write well Author should : present concepts in a logical sequence with increasing order of difficulty to ensure: concepts defined, explained before use avoid forward reference pace the material text augmented with images, etc... =============================================

38 Guidelines #1 (Scheiderman) Product Let user tasks guide organization (outside in) Let user learning process shape sequencing Present semantics before syntax Keep writing style clean and simple Show numerous examples (or at least one) Offer meaningful and complete sample sessions Draw transition diagrams Use advance organizers and summaries Provide table of contents, index and glossary Include list of error messages Give credit to all project participants Process Seek professional writers and copy editors Prepare user manuals early (before implementation) Review drafts thoroughly Field test early editions Provide a feedback mechanism for readers Revise to reflect changes regularly ============================================= Recommendations #2 1. Pay attention in English Class 2. If you forgot to pay attention in class there are several books to help, along with some general recommendations Make information easy to find entry points - ways to get there easily tabs arrangement

39 table of contents, index Make information easy to understand simple concrete, natural phrase Make information task sufficient complete, correct, nothing unnecessary Note: most people would rather try it out than read it in a manual Development Process start the manual before the implementation can the manual be completed before the design begins? will clarify the design intentions become concrete helps communication with customers/users/clients informal walk through with users can point out errors, omissions, misunderstandings may need help from technical writers, graphic artists, marketing Advantages of online help availability of information frees up workspace easy, cheap to update fast searching extra capabilities graphics, animation

40 Disadvantages of online help Note: several studies have shown displays to be more difficult to read than paper Poor fonts, low resolution monitors, dot pitch and all that No kerning - AV if it were typeset would shift the V left No ligatures ± 'affine' ± Low contrast and fuzzy boundaries -aliasing / the jaggies Glare and flicker Display size is smaller than papersize, and oriented wrongly. Layout and formating justification, chars per line, margins You have to sit up and you cannot take it out on the porch easily, or in the bathtub Unfamiliarity Basically screens aren t as readable Extra actions necessary to manipulate online information Users may have to switch to manual, etc..., so what was the point? Novices may have difficulties due to extra actions Experience users may benefit from online aids There are benefits to context sensitive help How can online aiding interfaces be improved? Goal - to improve both current and long term user performance Is there a systematic method to develop an online aiding dialogue? Problem:

41 Most online aiding systems are just online manuals support performance, not skill acquisition don t focus on user s goals people like to learn by doing Also, iterative development produces intermediate interfaces hard to develop detailed online aiding Usually contain fact-oriented knowledge rather than procedural knowledge A GOMS analysis can be used to provide a procedural skeleton of the basic information that users need Wierman s additional advice MINIMALIST DESIGN KEYSTROKE HELP CONTEXT SENSITIVE HELP

42 Help 1) Become an expert in technical writing Take a lot of english classes Memorize Strunk and White Learn all the technical jargon of the project Become proficient with a help authoring system 2) Gather the information Continuously Comprehensively Double check - they will keep changing things 3) Plan the help system Use minimalism as your design guide Develp the plan Determining the file topic structure Designing the visual appearance of the Help topics Determining the audience Computer novice Aplication novice Application intermediate Application expert Search subjects Browse sequence Context sensitive help J F1 support Determine the file structure

43 4) Write the text for the help topics Language - Use language appropriate to the audience Amount of text-use the minimum amount. 30% slower Arrangement - Easy entry, easy to find Paragraph length - Use short paragraphs Whitespace - Use it to help group information visually Highlighting - Use judiciously Grapics and icons - Use to support the explanation Consistency - Be rigorously consistent Proofread - Spellecheck it too!! 5) Field Test the results Exclude unused If they use a section a lot redesign GUI to automate 6) Update