interface design sm2220 writing machines justin wong
TRANSCRIPT
Interface DesignSM2220 Writing Machines
Justin Wong
Interface…..what face???
Interface design in various areas
Software designProduct designWeb designMachine designInteractive art…
Writing machine!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Interface design
Relationships between human userand the system
Interface design
Relationships between human userand the system
Interface design
Why Interface needed to be Designed?
Interface design
Because it brings us pleasures
Four models of pleasure1) Physio - pleasure2) Socio - pleasure3) Psycho - pleasure4) Ideo - pleasure
Interface design Why Interface Design?
…sometimes
Because it brings usfrustrations
Interface design
A simple mini-HiFi remote control with48 buttons
Why Interface Design?
…most of the time
Interface design
Till now, I still couldn’t rememberHow to adjust the analogue clock…
Why Interface Design?
Interface design
Till now, I still couldn’t remember how to listen to the voice messages…
…where is the flash button?
Why Interface Design?
Because itaffects ourbehaviors
Interface design
e.g. QWERT keyboard Chord keyboard Hybrid keyboard
Why Interface Design?
Interface design
Which hand would you use to pick up the phone?
Left hand?Right hand?Both hand?
…and how about Hands-free?
Why Interface Design?
Interface design Why Interface Design?
Invisible interface
Voice – recognition software
Gestural user interface
Interactive art…
Interface design
Structure of information was reflected by modes of the interface
Because it tells us how contents are constructed
Why Interface Design?
Interface design Design Problem - Usability
Design Problem--- Usability?
Interface design Design Problem - Usability
Design Problem--- Usability?
Interface design Design Problem - Usability
Interface design Design Problem - Usability
Interface design Design Problem - Usability
Interface design Design Problem - Usability
Donald Norman
The Design of Everyday things / The Psychology of Everyday things
Interface design
1. Forming the goal2. Forming the intention3. Specifying an action4. Executing the action5. Perceiving the state of the world6. Interpreting the state of the world7. Evaluating the outcome
Seven stages of action
Design Problem - Usability
Interface design
Cognitive Psychology
Design Problem - Usability
Interface design Design Problem - Usability
Conceptual Model
Interface design Design Problem - Usability
Interface design Design Problem - Usability
System Image
Design model User’s model
Designer’s conceptual model
User’s mental model developed through interaction with the system
Interface design Design Problem - Usability
Visibility
Interface design Design Problem - Usability
Visibility
Interface design Design Problem - Usability
One button control more than one function…
Interface design Design Problem - Usability
Mapping
Relationship between two things – between the controls and their movements and the results in the world.
Interface design Design Problem - Usability
Feedback
Interface design Design Problem - Usability
1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentation
Interface design
Ten Usability Heuristics
By Jakob Nielsen
Interface design
...some more methods
-Use of Dialogue-Use of Metaphor-Visual representation
e.g. Icon-Immediacy-Generality-Cohesiveness-Characterization-Communicability
Interface design
Use of MetaphorMetaphor is an integral part of our language and thought
Use of metaphor
Interface design
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
Use of metaphor
Interface design
Space Metaphor
Use of metaphor
Interface design
Web Examples
Use of metaphor
http://www.sofake.comhttp://www.agencynet.com http://news.bbc.co.ukhttp://www.lessrain.co.ukhttp://www.8edge.com/main.html
Interface design Use of metaphor
Hierarchical Structure
Matrix Structure
Sequential Structure
Organic Structure
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
Interface design
Neurophysiology
Use of metaphor
Views of neurophysiology confirm our intuitive mapping of thought in physical space.
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
Interface design Use of metaphor
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.
Mapping
Interface design Use of metaphor
…hypertext thinks itself to be structural rather than serial thought – thought in space rather than thought for space
Space in HyperText
Interface design Use of metaphor
…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 reader’s task is to make meaning by perceiving order in space.
Space in HyperText
Interface design Use of metaphor
Story Space
Interface design Narrative and the interface
Narrative and the Interfacehttp://www.pixelpharmacy.comhttp://www.borgstrom.com/
Interface design Narrative and the interface
Narrative and the Interface
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
Abbe Don
Interface design Narrative and the interface
Oral Narrative
It requires the presence of a storyteller addressing an audience…the 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…”
Interface design Narrative and the interface
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.
Interface design Narrative and the interface
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 user’s interaction with the system
Interface design Narrative and the interface
The Context Gear