Hypermedia system design 1

HYPERMEDIA DESIGN
Gustavo Patow
IMA - UdG

Hypermedia system design 2

Definitions
Multimedia
Hypertext
Hypermedia (Ted Nelson, 1965)

Hypercard, 1987

1
 Hypermedia system design 3

Applicability (I)
Multimedia is not the solution for an easy
access to information:
Fun
Didactic
Depends on the user for its navigation
If we want something to be viewed, is the
designer duty (not the interface)

Hypermedia system design 4

Applicability (II)

MM Video + computers
New possibilities:
Hyperlinks
Automatic searches
The ability to connect the pieces of information in a
knowledge network
Hard for novel programmers

2
 Hypermedia system design 5

Storyboards (I)

Use easy to recognize images (even if you

have to add some clarifying text)
Many videos and images: draw separately to
locate easier
Structured knowledge organization

Screen
Piece of Info Info
info

Hypermedia system design 6

Storyboards (II)
Should be started in an early
development stage
It is a plan of what is going to be in the
document
You cannot waste time with details

3
 Hypermedia system design 7

Components: Modules (I)

It is the basic construction unit of a
document
It is an information block (text, graphics,
video, sound or a mixture)
It is self-contained with respect to the
integrity of its information
It is a part of the whole

Hypermedia system design 8

Components: Modules (II)

TEXT modules:
We should start with a sentence that clarifies the
main point of the paragraph
Should be followed by support sentences
Rule of thumb:
Should have 3 sentences as a minimum
If there are less, it may not be a module
If there are more, perhaps it may be two or more
modules

4
 Hypermedia system design 9

Components: Modules (III)

In general (video, audio):
Does it contain enough support information?
Does it introduce too many facts?
Does it do it too long (+ than 30 sec.)?
Does it fit in the storyboard?
Provides enough support to the main topic to be
a separate module?
Timing!

Hypermedia system design 10

Components: Links (I)

They are ways of redirecting the user from one

module to another one
Context: the concepts of next / previous do
not exist
Connections = importance then the information
itself

5
 Hypermedia system design 11

Components: Links (II)

For each link, we need 2 marks:
A place in the document to redirect the
reader (origin) Hot Spot
A place where we want the reader to keep
reading (destiny)
Two kinds:
Closed: user visits the destiny and comes
back(pop ups)
Open: The user is free to continue

Hypermedia system design 12

Componentes: Links (III)

The author must define::
Which part of the module needs a link?
Where does it go?
How does the user know there is a link?
Why put a link in place of the real
information?
There is no human capable of seeing
everything grouped

6
 Hypermedia system design 13

Navigation (I)
Navigate the network of modules and links.
There are many ways:
Main form
Links in the information
Menus
Next, previous, first:
The most basic form Secondary
It is a default navigation that should always exist
Forms
It is part of the background

Hypermedia system design 14

Navigation (II)
If there are too many connections:
Search system
Assumes the user knows what to look for!
Show list, menu or diagram of the available
modules at this level of the document
Index
Table of contents
Map
Bookmarks, History

7
 Hypermedia system design 15

Restrictions (I)
Human Factors:
In general, we can retain 5 2 pieces of
information together in short term memory
Short term memory only retains them from 15 to
30 seconds
Short term memory works better with visual or
textual info

Hypermedia system design 16

Restrictions (II)
Be consistent with names across pages
Be consistent with the verbs
Use the same word for the same action
Do not worry so much about repetitions
Keep physical proximity between text, graphics
and links (hot spots)
Static images: in the same screen
Video: it should be possible to replay

8
 Hypermedia system design 17

Structure (I)
Subsistems User Needs

Hypermedia system design 18

Structure (II)

These are probably good

candidates to be at the
menu

but navigation cannot be

based on menus: they only
provide high-level links.

9
 Hypermedia system design 19

Advices
Do not leave isolated nodes:
Is it possible they do not belong to the
hypermedia?
If they do, they should be worthwhile
Basically, one should be able to continue
navigating from everywhere
This is valid even for photo/video galleries
Design order:
Hypermedia goes first
Then menus

Hypermedia system design 20

WebML methodology
The Web Modelling Language

http://webml.org/

It is a visual notation for specifying the

content, composition, and navigation
features of hypertext applications, building
on E/R and UML

10
 Hypermedia system design 21

UWE methodology
UWE . UML-based Web Engineering

http://uwe.pst.ifi.lmu.de/

A software engineering approach for the

Web domain aiming to cover the whole life-
cycle of Web application development.
Key aspect: reliance on standards

Hypermedia system design 22

HYPERMEDIA DESIGN
Thanks!

11