Interface%20Design

1
Interface Design

• SM2220 Writing Machines
• Justin Wong

2
Interface..what face???
3
Interface design
Interface design in various areas Software
design Product design Web design Machine
design Interactive art Writing
machine!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
4
Interface design
Relationships between human user and the system
5
Interface design
Relationships between human user and the system
6
Interface design
Why Interface needed to be Designed?
7
Interface design
Why Interface Design?

• Because it brings us
• pleasures
• Four models of pleasure
• Physio - pleasure
• Socio - pleasure
• Psycho - pleasure
• Ideo - pleasure

sometimes
8
Interface design
Why Interface Design?
Because it brings us frustrations
most of the time
A simple mini-HiFi remote control with 48 buttons
9
Interface design
Why Interface Design?
Till now, I still couldnt remember How to adjust
the analogue clock
10
Interface design
Why Interface Design?
Till now, I still couldnt remember how to listen
to the voice messages where is the flash
button?
11
Interface design
Why Interface Design?
Because it affects our behaviors
e.g. QWERT keyboard Chord keyboard
Hybrid keyboard
12
Interface design
Why Interface Design?
Which hand would you use to pick up the
phone? Left hand? Right hand? Both hand? and
how about Hands-free?
13
Interface design
Why Interface Design?
Invisible interface Voice recognition
software Gestural user interface Interactive
art
14
Interface design
Why Interface Design?
Because it tells us how contents are constructed
Structure of information was reflected by modes
of the interface
15
Interface design
Design Problem - Usability
Design Problem --- Usability?
16
Interface design
Design Problem - Usability
Design Problem --- Usability?
17
Interface design
Design Problem - Usability
18
Interface design
Design Problem - Usability
19
Interface design
Design Problem - Usability
20
Interface design
Design Problem - Usability
Donald Norman
The Design of Everyday things /
The Psychology of Everyday things
21
Interface design
Design Problem - Usability
Seven stages of action

1. Forming the goal
2. Forming the intention
3. Specifying an action
4. Executing the action
5. Perceiving the state of the world
6. Interpreting the state of the world
7. Evaluating the outcome

22
Interface design
Design Problem - Usability
Cognitive Psychology
23
Interface design
Design Problem - Usability
Conceptual Model
24
Interface design
Design Problem - Usability
25
Interface design
Design Problem - Usability
System Image
Design model Users model
Designers conceptual model
Users mental model developed through interaction
with the system
26
Interface design
Design Problem - Usability
Visibility
27
Interface design
Design Problem - Usability
Visibility
28
Interface design
Design Problem - Usability
One button control more than one function
29
Interface design
Design Problem - Usability
Mapping
Relationship between two things between the
controls and their movements and the results in
the world.
30
Interface design
Design Problem - Usability
Feedback
31
Interface design
Design Problem - Usability
32
Interface design
Ten Usability Heuristics

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from
   errors
10. Help and documentation

By Jakob Nielsen
33
Interface design
...some more methods

• Use of Dialogue
• Use of Metaphor
• Visual representation
• e.g. Icon
• Immediacy
• Generality
• Cohesiveness
• Characterization
• Communicability

34
Interface design
Use of metaphor
Use of Metaphor
Metaphor is an integral part of our language and
thought
35
Interface design
Use of metaphor
Metaphor in Interface

• - OS Windows System
• File / Folder system
• Text Editor NotePad
• Desktop
• OS Help system Character Agent
• Wizard
• Library (MacOSX)
• Trash Can / Recycle Bin
• Mouse Pointer
• Copy / Paste Clipboard

36
Interface design
Use of metaphor
Space Metaphor
37
Interface design
Use of metaphor
Web Examples
http//www.sofake.com http//www.agencynet.com
http//news.bbc.co.uk http//www.lessrain.co.uk h
ttp//www.8edge.com/main.html
38
Interface design
Use of metaphor
Hierarchical Structure
Organic Structure
Sequential Structure
Matrix Structure
39
Interface design
Use of metaphor
Cognitive Maps (Web site)
Cognitive Maps allows the graphical
representation of the information architecture
highlighting the hierarchies, the nodes the
physical (hypertextual) and conceptual
connections between (site) contents
40
Interface design
Use of metaphor
Neurophysiology
Views of neurophysiology confirm our intuitive
mapping of thought in physical space.
41
Interface design
Use of metaphor
Whatever our critical disputes about the nature
of writing, we seem to share a common recognition
that, in writing, a mental act becomes a thing,
that time, the most primordial of mental acts,
yields space, the most primitive of things.
Michael Joyce
42
Interface design
Use of metaphor
Mapping
Our technological age bears witness to a
widespread and growing exploration, in several
disciplines, of the possibility of mapping both
knowing and recalling. i.e. both the time of
experience and the space of memory. How we map
not our experience but also our collected
knowledge of it informs, and perhaps controls,
how we map the actual world of nature..it is
possible to fashion a fragile, albeit highly
articulated, consensus that writing process, as
we have come to understand it, becomes
geographic, and we, like Sauer, seek to describe
it in terms of meaningful associations.
43
Interface design
Use of metaphor
Space in HyperText
hypertext thinks itself to be structural rather
than serial thought thought in space rather
than thought for space
44
Interface design
Use of metaphor
Space in HyperText
every reading by every reader is thought to be
anticipated by the system of the exploratory
text. We might call this belief the myth of
emerging order. Within this mythic system of
emerging order the readers task is to make
meaning by perceiving order in space.
45
Interface design
Use of metaphor
Story Space
46
Narrative and the interface
Interface design
Narrative and the Interface
http//www.pixelpharmacy.com http//www.borgstrom.
com/
47
Narrative and the interface
Interface design
Narrative and the Interface
Abbe Don
Narrative includes both the story being told
(content) and the conditions of its telling
(structure and context). Similarly, creating a
multimedia knowledgebase involves selecting or
generating information as well as representing
the structure and the content to the user through
the interface
48
Narrative and the interface
Interface design
Oral Narrative
It requires the presence of a storyteller
addressing an audiencethe telling of each story
changed with each performance since for the
storyteller narrative originality lodges not in
making up news stories but in managing a
particular interaction with this audience at this
time
49
Narrative and the interface
Interface design
Oral Narrative
Where the storyteller has direct interaction with
the audience, the system designer and user must
interact via a representation in order to
generate and manipulate information as well as
provide feedback.
50
Narrative and the interface
Interface design
Oral Narrative
While the content of the story stays the same,
the meaning of the story shifts depending on the
structure and context of the users interaction
with the system
51
Narrative and the interface
Interface design
The Context Gear