1. Interface Design SM2220 Writing Machines Justin Wong

2. Interface…..what face???

3. Interface design in various areas Software design Product design Web design Machine design Interactive art … Writing machine!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Interface design

4. Relationships between human user and the system Interface design

5. Relationships between human user and the system Interface design

6. Why Interface needed to be Designed? Interface design

7. Because it brings us pleasures Four models of pleasure 1)Physio - pleasure 2)Socio - pleasure 3)Psycho - pleasure 4)Ideo - pleasure Interface design Why Interface Design? …sometimes

8. Because it brings us frustrations Interface design A simple mini-HiFi remote control with 48 buttons Why Interface Design? …most of the time

9. Interface design Till now, I still couldn’t remember How to adjust the analogue clock… Why Interface Design?

10. Interface design Till now, I still couldn’t remember how to listen to the voice messages… …where is the flash button? Why Interface Design?

11. Because it affects our behaviors Interface design e.g. QWERT keyboard Chord keyboard Hybrid keyboard Why Interface Design?

12. 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?

13. Interface design Why Interface Design? Invisible interface Voice – recognition software Gestural user interface Interactive art …

14. Interface design Structure of information was reflected by modes of the interface Because it tells us how contents are constructed Why Interface Design?

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 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 Seven stages of action Design Problem - Usability

22. Interface design Cognitive Psychology Design Problem - Usability

23. Interface design Design Problem - Usability Conceptual Model

24. Interface design Design Problem - Usability

25. 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

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. 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 Interface design Ten Usability Heuristics 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 Metaphor is an integral part of our language and thought Use of metaphor

35. 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

36. Interface design Space Metaphor Use of metaphor

37. Interface design Web Examples Use of metaphor http://www.sofake.com http://www.agencynet.com http://news.bbc.co.uk http://www.lessrain.co.uk http://www.8edge.com/main.html

38. Interface design Use of metaphor Hierarchical Structure Matrix Structure Sequential Structure Organic 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 Neurophysiology Use of metaphor 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 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

43. 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

44. 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

45. Interface design Use of metaphor Story Space

46. Interface design Narrative and the interface Narrative and the Interface http://www.pixelpharmacy.com http://www.borgstrom.com/

47. 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

48. 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…”

49. 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.

50. 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

51. Interface design Narrative and the interface The Context Gear