interface design sm2220 writing machines justin wong
TRANSCRIPT
![Page 1: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/1.jpg)
Interface DesignSM2220 Writing Machines
Justin Wong
![Page 2: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/2.jpg)
Interface…..what face???
![Page 3: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/3.jpg)
Interface design in various areas
Software designProduct designWeb designMachine designInteractive art…
Writing machine!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Interface design
![Page 4: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/4.jpg)
Relationships between human userand the system
Interface design
![Page 5: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/5.jpg)
Relationships between human userand the system
Interface design
![Page 6: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/6.jpg)
Why Interface needed to be Designed?
Interface design
![Page 7: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/7.jpg)
Because it brings us pleasures
Four models of pleasure1) Physio - pleasure2) Socio - pleasure3) Psycho - pleasure4) Ideo - pleasure
Interface design Why Interface Design?
…sometimes
![Page 8: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/8.jpg)
Because it brings usfrustrations
Interface design
A simple mini-HiFi remote control with48 buttons
Why Interface Design?
…most of the time
![Page 9: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/9.jpg)
Interface design
Till now, I still couldn’t rememberHow to adjust the analogue clock…
Why Interface Design?
![Page 10: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/10.jpg)
Interface design
Till now, I still couldn’t remember how to listen to the voice messages…
…where is the flash button?
Why Interface Design?
![Page 11: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/11.jpg)
Because itaffects ourbehaviors
Interface design
e.g. QWERT keyboard Chord keyboard Hybrid keyboard
Why Interface Design?
![Page 12: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/12.jpg)
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?
![Page 13: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/13.jpg)
Interface design Why Interface Design?
Invisible interface
Voice – recognition software
Gestural user interface
Interactive art…
![Page 14: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/14.jpg)
Interface design
Structure of information was reflected by modes of the interface
Because it tells us how contents are constructed
Why Interface Design?
![Page 15: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/15.jpg)
Interface design Design Problem - Usability
Design Problem--- Usability?
![Page 16: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/16.jpg)
Interface design Design Problem - Usability
Design Problem--- Usability?
![Page 17: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/17.jpg)
Interface design Design Problem - Usability
![Page 18: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/18.jpg)
Interface design Design Problem - Usability
![Page 19: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/19.jpg)
Interface design Design Problem - Usability
![Page 20: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/20.jpg)
Interface design Design Problem - Usability
Donald Norman
The Design of Everyday things / The Psychology of Everyday things
![Page 21: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/21.jpg)
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
![Page 22: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/22.jpg)
Interface design
Cognitive Psychology
Design Problem - Usability
![Page 23: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/23.jpg)
Interface design Design Problem - Usability
Conceptual Model
![Page 24: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/24.jpg)
Interface design Design Problem - Usability
![Page 25: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/25.jpg)
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
![Page 26: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/26.jpg)
Interface design Design Problem - Usability
Visibility
![Page 27: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/27.jpg)
Interface design Design Problem - Usability
Visibility
![Page 28: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/28.jpg)
Interface design Design Problem - Usability
One button control more than one function…
![Page 29: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/29.jpg)
Interface design Design Problem - Usability
Mapping
Relationship between two things – between the controls and their movements and the results in the world.
![Page 30: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/30.jpg)
Interface design Design Problem - Usability
Feedback
![Page 31: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/31.jpg)
Interface design Design Problem - Usability
![Page 32: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/32.jpg)
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
![Page 33: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/33.jpg)
Interface design
...some more methods
-Use of Dialogue-Use of Metaphor-Visual representation
e.g. Icon-Immediacy-Generality-Cohesiveness-Characterization-Communicability
![Page 34: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/34.jpg)
Interface design
Use of MetaphorMetaphor is an integral part of our language and thought
Use of metaphor
![Page 35: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/35.jpg)
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
![Page 36: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/36.jpg)
Interface design
Space Metaphor
Use of metaphor
![Page 37: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/37.jpg)
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
![Page 38: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/38.jpg)
Interface design Use of metaphor
Hierarchical Structure
Matrix Structure
Sequential Structure
Organic Structure
![Page 39: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/39.jpg)
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
![Page 40: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/40.jpg)
Interface design
Neurophysiology
Use of metaphor
Views of neurophysiology confirm our intuitive mapping of thought in physical space.
![Page 41: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/41.jpg)
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
![Page 42: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/42.jpg)
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
![Page 43: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/43.jpg)
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
![Page 44: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/44.jpg)
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
![Page 45: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/45.jpg)
Interface design Use of metaphor
Story Space
![Page 46: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/46.jpg)
Interface design Narrative and the interface
Narrative and the Interfacehttp://www.pixelpharmacy.comhttp://www.borgstrom.com/
![Page 47: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/47.jpg)
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
![Page 48: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/48.jpg)
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…”
![Page 49: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/49.jpg)
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.
![Page 50: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/50.jpg)
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
![Page 51: Interface Design SM2220 Writing Machines Justin Wong](https://reader036.vdocument.in/reader036/viewer/2022062407/56649d9e5503460f94a88227/html5/thumbnails/51.jpg)
Interface design Narrative and the interface
The Context Gear