Interaction
Structures
Mikael Kindborg
IDA, LiU
2007-03-26
mikki@ida.liu.se
www.ida.liu.se/~mikki/
Outline
●
Design levels
●
Visualization of part-whole
relations
●
Comics and context
●
Interaction structures
Design levels
●
Idea, intent, goals
●
Users and usability goals
●
System services
●
Conceptual model
●
Interaction structure
●
Interaction techniques
●
Presentation techniques
●
Physical form
Cf. PACT Fig. 24-5 p. 600
Context
Lexivisual presentation
●
The idea of lexivision was pioneered by Sven
Lidman, 1972.
●
Closely related to comics!
●
The technique is used in information graphics
and news graphics.
●
The power of lexivisual presentation comes
from the ability to provide totality and to
communicate structure.
●
The close integration of text and picture is a
key element.
Lexivisual principles
●
Focus on the primary message
(place the primary object in the
centre)
●
Present information in its context
●
Relate details to the whole
Comics – a dynamic medium
●
Panel strips represent time with space.
●
Panels contain characters and contextual
signs.
●
Voice bubbles are an example of contextual
signs.
●
Contextual signs turn the comic into
something that happens now.
●
A comic is something more than a sequence of
still images, it is a story that takes place
before the reader's eyes.
Contextual signs
●
Voice balloons
●
Onomatopoeic symbols (symbols
that imitate sound)
●
Motion signs (e.g. speed lines)
●
Emotion signs (e.g. pain stars)
●
And many others ...
Contextual signs in UIs
●
The mouse cursor
●
Handles
●
Window buttons
●
Contextual popup menus
●
Tool tips
●
Halos
●
Info bubbles
Interaction structures
●
Sequential
●
Hierarchical
●
Network
●
Zooming and panning
●
Flat with menus
●
Pop-up objects
●
3D-worlds
Interaction techniques
●
Typed commands
●
Menus (includes buttons, and links,
basically anything that is clickable)
„
Static menus
„
Dynamic menus
●
Forms (adds parameters to commands)
●
Direct manipulation (drag, drop, size,
move, etc.)
●
Natural language
Widgets
●
Widget = Window Gadget
●
Gadget = “an often small mechanical or
electronic device with a practical use but
often thought of as a novelty”
●
Examples include: windows, dialogue boxes,
buttons, radio button, check boxes, menus,
tool bars, list boxes, text fields, scroll bars, ...
●
Follow the User Interface Guidelines for your
OS!
Design experiment
●
Design alternative user interfaces for an
information system about a planet.
●
Try to come up with as many interaction
structures and visualisations as possible –
also use comic book techniques!
●
The planet has information about places.
●
Each place has a name, a picture and text that
provides information.
●
How is the usability for the different designs,
e.g. the sense of overview?