Hypertext as Presentation Technique

Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. Apart from running text, hypertext may contain tables, images and other presentational devices. Hypertext is the underlying concept defining the structure of the World Wide Web.

“Techne resembles epistēmē in the implication of knowledge of principles, although techne differs in that its intent is making or doing, as opposed to ‘disinterested understanding’” - Wikipedia

When we think in language, or even in images, we tend to think sequentially according to the laws of grammar or the linear progression of film montage. Montage is a technique in film editing in which a series of short shots are edited into a sequence to condense space, time, and information. It is usually used to suggest the passage of time, rather than to create symbolic meaning as it does in Soviet montage theory.

"Cinematic montage is not uniform, however; it has its Modernism and PostModernism as well. Modernist practice is most often discussed in relation to Eisenstein's theory and practice. Lev Manovich takes the core of classic cinematic montage to be dissonance: "Montage aims to create visual stylistic, semantic, and emotion dissonance between different elements," and this he contrasts to compositing, which is the blending of elements into a single, seamless whole (144). It is obvious that Manovich's "montage" is the temporal equivalent of what we have been calling collage." Hypertext as Rhizome, Montage and Collage

With hypertext new techniques are possible for composition. Hypertext can be composted of tree, collage, rhizome, spiral, circular, or chain structures.  However the flow of hypertext proceeds the human organism can only perceive information in a set number of ways. These are dependent upon the senses: sight (ophthalmoception), hearing (audioception), taste (gustaoception), smell (olfacoception or olfacception), and touch (tactioception), other senses include temperature (thermoception), kinesthetic sense (proprioception), pain (nociception), balance (equilibrioception) and acceleration (kinesthesioception), that we use to make sense of the world. 


So let us consider the limitations of the human sense system in relation to hypertext.


Patterns
The pattern of focal points says that people will first look at the most dominant element (the element or area with the greatest visual weight) on the page.
From there the eye will follow paths from the dominant element to other focal points in the design. The order will depend on the relative weights of these focal points as well as any visual cues indicating where to look next.


Several layout patterns are often recommended to take advantage of how people scan or read through a design. Three of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout.

"Consider the Gutenberg diagram is assist in layout and composition when the elements are evenly distributed and homogeneous, or the design contains heavy use of text. Otherwise, use the weight and composition of elements to lead the eye."
Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler

Reading gravity pulls the curious users’ eyes from the top-left to the bottom-right of a layout. It is a natural human habit to scan something quickly before focusing all of our attention on it. We want to read the blurb of a book before delving into its contents. We tend to watch film trailers before paying to see them at the cinema. Demos for games and software, singles from music albums—the list goes on. It’s common practice to want a taste of something before giving it full attention—it’s why all great stories start and end with action or drama to draw us in and keep us entertained throughout the full experience. We can apply this psychology to graphics and interface design and the Gutenberg Rule is all about just that. We know that we have a certain amount of time, wording, graphics and pixel-space to grab our user (returning or otherwise) and convince them into further reading, so designing an interface to accommodate for this is a science within itself.

This website is an excellent example of the Gutenberg Rule in use.

On the other hand Västerbottens Kuriren does not seem to be aware of the Gutenberg Rule with the headline half way down the left hand side of the page, no anchor in the left top corner and nothing stopping the readers eye in the bottom right. Each column operates independently of the others.

The z-pattern layout follows the shape of the letter z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right.

The z-pattern is sometimes called a reverse-s-pattern, which might indicate more of a curved path as opposed to the hard angled path. Otherwise they’re basically the same thing.
The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.

As with Gutenberg a designer would place the most important information along the pattern’s path.
The z-pattern is good for simple designs with a few key elements that need to be seen. Any storytelling aspect of the design would follow the path of the z.

We can extend this pattern a little by seeing it more as a series of z-movements instead of one big z-movement. Common sense would dictate this is more realistic as the reader will continue to move to the right and then a little down and back to the left before starting another horizontal movement to the right again. It’s how we naturally read large blocks of text. This series of z-movements is sometimes referred to as a zig-zag pattern. If we continue to add more zigs and zags to the pattern we ultimately end up with a series of near horizontal right and left movements as the diagonal portion of the z gets shallower and shallower.

The z-pattern also leads to what’s called a golden triangle pattern. If you take the first horizontal and first diagonal movement and then close the shape you end up with a right triangle whose right angle is the top/left corner. This triangular area at the top of the page will be the area most seen and the pattern suggests your most important information needs to placed inside of it.

The f-pattern gets mentioned on the web and as you would expect it follows the shape of the letter F.
I think Jacob Nielsen first suggested the pattern after eye-tracking studies his company performed. What often gets lost in the f-pattern is that these original studies were done on text heavy designs and search results.
As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.
Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs.
The f-pattern suggests that:

• Important information should be placed across the top of the design where it will generally be read.
• Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
• People don’t read online. They scan.

Unfortunately the pattern seems to get applied to everything online instead of only text-heavy content. When applying the f-pattern think scanners and place content these scanners would most likely be interested in along the F. Place important information at the top and information designed to pull someone further into the page down the side. However keep in mind that if someone scanning your page finds it interesting, they will read so you can place information in places outside the F for those people who will read.

Both z-pattern and Gutenberg end in the same place and move through the middle. The reason the f-pattern doesn’t reach the end can be explained by.

• Having content that doesn’t fully interest and engage the reader. Sadly true of most online content.
• Writing with an inverted pyramid style, which expects to lose readers as they move down the page.
• People scanning to determine if they want to read more.

Odds are any visitor who finds your content absorbing will want to read more and break out of the f-pattern reaching the terminal area.
One last point is that as these patterns are discussed more it leads to more designs emphasizing the pattern. If you’re convinced your readers will follow one of these patterns, you’ll likely create designs that enhance that pattern. It leads to a chicken and egg scenario.

More on patterning, reading and design here.

Linking
The link goes far beyond simply being a mechanical element of hypertext. The link is part of design and provides meaning in digital hypertext just as montage can in film. “Hypertext is text with links, or pointers, showing relationships between parts of the information. Hypermedia extends this concept - information with links - to collections including text, audio, video, photographs, or any multi-sensory combination” (Alessi & Trollop, 2001:138). If a link opens a new section for reading and navigation, whoever opens that link will relate it is some way to the previous section in the hypertext.

Harrison (2002) explores the semantic and rhetorical principles underlying link development of web sites and proposes a systematic, comprehensive classification of link types that could be of use to researchers and Web production teams:

• Authorizing: Describes an organization's legal, formal policies, contact information, etc. that authenticate the site and its content.
• Commenting: Provides opinion about the site and/or its content.
• Enhancing: Provides more factual information about site content by offering greater detail or painting the "bigger picture."
• Exemplifying: Provides a specific example of content within a broader category.
• Mode-Changing: Moves users from the reading mode to one that requires a different kind of activity.
• Referencing/Citing: Provides information that "informs" or supplements the site's content.
• Self-Selecting: Allows users to narrow a search by making choices based on their age, sex, geographical location, life situation, personal interests, and so on ([1], retrieved 18:47, 6 November 2006 (MET))

In the history of hypertext we can distinguish "minimal" technology such as HTML and systems that provide a richer set of link types. E.g. the XLink standard which did/does not have much success with industry defines a whole lot of linking attributes.

Simple links

• One element on the screen/document (e.g. a word or a button) points to another screen or other element within the loaded screen/document. After clicking the link, current content is replaced by target content. These are links that one can find in HTML (web contents).

Complex links

There are many, e.g.:

• Fat (multi-tailed) links: a fat link can open several windows simultaneously with one click of the mouse.
• Multiple-choice links: the user can choose among several options from a menu.
• Labelled links: A user can see what a link is good for (e.g. "example", "theory", "further reading", "reference", etc.)
• Aggregations: (include various smaller documents into a single text)
• Inclusions: A link that expands contents in place to include other contents.
• Transclusion: A text that is composed as an aggregation of other text. E.g. in a wiki one  can build pages out of other pages by using syntax
• Bilinks: See AboutUs:BiLinks

Alessi & Trollop (2001:155) suggest to pay attention to a few factors when creating hyperlinks of various forms, which we shortly outline here:

Object types of links

• Word links are easy to spot but decrease readability and influence on browsing behavior ()
• Links in pictures and videos may be less easy to spot depending on how they are made

Purpose of links

• Clearly, links should be used for a reason. Firstly, there should a general concept about the media type to be constructed (e.g. see the overview of genres below) and then there should a be a use case analysis (what it will be used for) in terms of one or several instructional design models.

Density of links

• For reference works, it's in principle a good a idea to include many links (e.g. like in this blog)
• However, in education one may limit links in texts that should be read in its entirety, or only show them after explicit request or some other control function (e.g. learner level). There is actually a lot of research on adaptive hypertext

Visibility of links

• Links should be clearly visible, however there is a trade off with readability.
• In general, one should not users require to move the mouse over an object that then will highlight in order to find available links. A compromise, might be a visibility of links turn on/off button. In a modern web browser this is very easy to implement.

Screen Location

• In particular menu links should be placed in standard locations (e.g. on top or to the left)

Confirmation

• The authors put several things into this category, e.g.
• Confirmation of link selection (not activation): E.g. display a mouse-over effect. Then the links can for example offer a preview, or let the user display contents in different locations. (In web browsers, the latter functionality is the right-click menu, and the further can be implement with Javascript.

Finally, one also may ask confirmation from the user to open or navigate to different sites.

Marking

• Recently selected links can be specially mark (e.g. by default, word links in web browsers change color from blue to violet)
• One also can implement user trails, i.e. display somewhere a list or the path of visited links. Typically, this is implemented in shopping applications like Amazon (also in a wiki, if you use a login).

Semantic Cueing

• A semantic cue identifies the relation to the link target or at least its kind (e.g. use a color code or little icons that characterize the links)
• Other options are to use a menu or to display links relationships in a separate window with a concept graph.

Distance

• This is partly same issue as above, partly the problem that in education it's a difficult decision whether you can rely on external links. For example if you teach about hypertext in education, would you trust a third party to keep a source online?
• Typically in web design, one tries to make a distinction between internal and external links (e.g. this is being done in this wiki). However the question whether we trust other people to keep their links online is a very difficult one.

Modifiability

• In earlier systems users were able to modify or at least to annotate a hypertext. Also they could add links.
• In more recent hypermedia (including most web pages) this is not usually the case. A wiki is the exception.
• There is a difference between hypermedia that can be changed, those that can be annotated and those where the changes are only seen by the user who made those changes (the latter version is the most difficult to implement). Annotation systems are successfully used in education, e.g. the Diplo Foundation uses annotation of online text as primary teaching medium.
 

 More goodness on Hypertext here.