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