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.
