FROM IDEA TO EXPERIMENT TO APPLICATION

16.4 Speech Synthesis Augmented Reality Computer Vision 23.4 Graphical Interfaces Gestural Interfaces Tangible Interfaces

HCI HUMAN COMPUTER INTERACTION

GRAPHICAL USER INTERFACE

Computer

Graphical Representation: Screen Projection etc.

The best thing I could think of doing was to try and help boost mankinds capability for dealing with complex problems. Doug Engelbart, 1951

As we may think, Vannevar Bush, In: The Atantic Monthly, 1945 http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/3881/

Command Line Interface, Apple SOS, 1980

GUI

Apple, System 1, 1984

Icons

Through the Looking Glass, First Game

Fonts

GUI

Apple Lisa GUI, 1984

Apple Lisa, 1983

Bill Atkinson, Apple Lisa, In: Designing Interactions, Bill Moggridge, 2007

GUI

Apple, System 7.6.1, 1997

GUI

Apple, Mac OS 8.5, 1998

GUI

Apple, Mac OSX 10.8 Mountain Lion, 2012

Related Fields Cognitive Science Information Science Gestalt Theory Programming Semiotics Visual Design et al.

Visual Design

default color

screen GE Annual Reports, 2011

screen MTV VMA, Stamen Design, 2009

print GE Annual Reports, 2011

print Independent Ideas, 2011

Visual Design

icons Otl Aicher, Olympic Games, 1972

Icons guardian.co.uk, facebook.com, google.com, Apple iphone OS

Icons Human Machine Interface, Projekttriangle, 2010

Icons GE, Pentagram, 2011

peoplemov.in

Information Graphics New York Times, 2009

Information Graphics New York Times, 2008

Information Graphics flickr.com, 2011

Information Graphics Newsmap.jp, 2008

Information Graphics Map your Moves, 2010

Information Graphics We feel fine, 2008

http:// www.apc.fr/ wwuk/ looks_lk41.ht ml

Museum of Arts and Design, Pentagram. 2010

Museum of Arts and Design, Pentagram. 2010

User Person

User ((c)Tom Igoe, 2008)

Person: Valerie, 25, Female Canadian Musician Likes New Wave, nu metal, pop punk, dubstep

Methods
1. Inquiry - finding out about the characteristics of the situation 2. Why-Chains - Ask why questions! 3. Exploration - what is possible? 3.1 Future Workshops 3.1.1 Now, review current problems relating a certain field 3.1.2 Vision, what could the desired situation be like 3.1.3 Implementation, what needs to be changed to realize the vision 3.2 Brainstorming 4. Compositions 4.1 Functional Analysis 4.2 Techniques for detailed Shaping

Thoughtful Interaction Design (Chapter IV), Jonas Lwgren and Erik Stolterman, 2004, MIT Press

Example design-brief

Design a website for a national train company!

1. Inquiry

trenitalia.it

1. Inquiry

bahn.de

1. Inquiry

sbb.ch

2. Why-Chains - Ask why questions!

I am not happy with the online train-ticket service. Why? It always takes very long to buy a ticket. Why? I always need to enter all the information over and over again. Why? It doesnt remember important information.

...

3.1 Future Workshops

3.1.1 Now, review current problems relating a certain field 3.1.2 Vision, what could the desired situation be like 3.1.3 Implementation, what needs to be changed to realize the vision 3.2 Brainstorming

Now: - Ticket buying takes up too much time Vision: - System remembers all necessary information and I can buy a ticket with a single click Implementation: - System to learn patterns, etc.

Brainstorming: - ideas!

4.1 Functional Analysis

E D U ? = = = = essential desirable undesirable unknown Classification
E E E E U D

Function
Train-connections search Realtime Information about train connectiona Languages spoken in italy Languages spoken by major tourist groups Entertainment Hotel & Car Rental ....

Comment
Core idea Traveller need feedback on connections & transfers default Italy = Many tourists Radio & WebTv on the Site Additional Service for Travelers

4.2 Techniques for detailed Shaping

Written Scenario Peter is on the way to the train station in Milan. The taxi hi is sitting in is stuck in traffic and he probably wont be able to make it on time to the train he book. Now he wants to reschedule his trip and move his booking to a later train. He uses his phone to visit the train companies website. On the website he easily immediately sees the recent train activities which tell him that his train is about to leave. To reschedule he visits the section Reschedule where he enters his username/code/train times so the system can pick his recent bookings...

4.2 Techniques for detailed Shaping

Interface Sketch

4.2 Techniques for detailed Shaping

Storyboard (Scenarios + Sketches)

4.2 Techniques for detailed Shaping

Role-Playing

4.2 Techniques for detailed Shaping

Paper Prototype

4.2 Techniques for detailed Shaping

Digital Prototype

As we may think, Vannevar Bush, In: The Atantic Monthly, 1945 http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/3881/ Augmenting the human Intellect: A conceptual Framework, Doug Engelbart, 1962, Summary Report AFOSR-3233, Stanford Research Institute Sketchpad: A man machine graphical communication System,Ivan Sutherland, 1963 http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf Dealers of Lightning: Xerox PARC and the Dawn of the Computer Age, 1999, HarperBusiness Press A History of Modern Computing, Paul E. Ceruzzi, 1998, MIT Press Thoughtful Interaction Design, Jonas Lwgren and Erik Stolterman, 2004, MIT Press Aesthetic Computing (Chapter IV: Interface and Interaction), Paul A. Fishwick, 2006 The Human Interface, Jeff Raskin, 2000 Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency, J. David Bolter and Diana Gromala, 2000 Designing Programmes, Karl Gerstner, 1960 Entwerfen und Darstellen, Roland Knauer, 2002 Point and Line to Plane, Wasily Kandinsky, 1926

GESTURAL USER INTERFACE

Computer

Sensing Device

Minority Report, 2002

Jeff Han, Multouch Demo, 2006

MIT Media Lab, g-stalt, 2009

Julian Koschwitz, Ambient Multitouch Wall, 2008

Julian Koschwitz, Ambient Multitouch Wall, 2008

Nintendo WII, 2006

XBox Kinect, 2010

Kinect & Processing, Daniel Shiffman, 2010

flight 404

Emily Emily Gobeille

Graffiti, Processing & Kinect, 2010

Graffiti, Processing & Kinect, 2010

Myron Krueger, Videoplace, 1989

Henry Dreyfuss, Designing for People, 1955

TANGIBLE USER INTERFACE

Object Computer Output Visual Audio Tactile

Art&Com

reactable demo, 2011

Patrick Meister, Pollock in Action, 2008

Maeve Installation, Biennale Venezia 2009

Maeve Installation, Biennale Venezia 2009

Musical Bottles, Hiroshi Ishii, 2000

OnObjects, MIT Tagible Media Lab, 2010

OnObjects, MIT Tagible Media Lab, 2010

RADICAL ATOMS

(c) Hiroshi Ishii, MIT Tangible Media Group