1. Riaan Cornelius 02 August 2013 Sci-Fi Interfaces
2. Why should you care About interaction design?
3. Why should you care
4. Why should you care About Sci-fi Interfaces? Because you can
watch Sci-fi and call it research! Based in fact Predicts and
drives future technology
5. Agenda Why should you care About interaction design? About
Sci-Fi Interfaces? Quick discussion about types of interface
technology User interaction principles and sci-fi examples
6. Interface Technology Types of interfaces Indirect Gestural
Sonic Neural
7. Interface Technology Indirect Interfaces Indirect because we
need to use some indirect interface device like a keyboard or mouse
Established
8. Interface Technology Gestural Interfaces
9. Interface Technology
10. Interface Technology Sonic Interfaces Using sound for input
or output Star Trek red alert Voice input
11. Interface Technology Neural Interfaces Still in its infancy
Some promising research and tools available Emotiv EPOC
12. Interface Technology Neural Interfaces
13. Interface Technology Neural Interfaces Neurosky Mindwave
Single channel EEG sensor Full developer SDK 2 Models o Wireless
USB at $80 o Bluetooth mobile version at $120
14. Agenda Why should you care About interaction design? About
Sci-Fi Interfaces? Quick discussion about types of interface
technology User interaction principles and sci-fi examples
15. User Interaction Principles Movie examples illustrating
design principles The Incredibles The Fifth Element Star Trek The
Avengers Iron Man (How not to do it)
16. Movie The Incredibles Story Telling Iconic Representation
Colour
17. Movie The Incredibles Story Telling a method of creating
imagery, emotions and understanding of events through an
interaction between a storyteller and an audience
18. Movie The Incredibles Iconic Representation The use of
pictorial images to make actions, objects and concepts in a display
easier to find, recognize, learn and remember
19. Movie The Incredibles Colour Colour is used in design to
attract attention, group elements, indicate meaning and enhance
aesthetics
20. Movie The Incredibles
21. Movie The Fifth Element Signal To Noise Ratio
Highlighting
22. Movie The Fifth Element Signal To Noise Ratio The ratio of
relevant to irrelevant information in a display. The highest
possible signal-to-noise ratio is desirable in design
23. Movie The Fifth Element Highlighting Highlighting is a
technique that is used for bringing attention to specific elements
of a design
24. Movie The Fifth Element
25. Movie The Fifth Element
26. Movie / TV Star Trek Layering Proximity Good Continuation
Consistency
27. Movie / TV Star Trek Layering The process of organizing
information into related groups in order to manage complexity and
reinforce relationships in the information
28. Movie / TV Star Trek Proximity One of the Gestalt
Principles of Perception. The principle of proximity states that
elements that are close together are perceived as a single group or
chunk, and are interpreted as being more related than elements that
are farther apart.
29. Movie / TV Star Trek Good Continuation Another of the
Gestalt Principles of Perception. The principle of good
continuation asserts that aligned elements are perceived as a
single group or chunk, and are interpreted as being more related
than unaligned elements
30. Movie / TV Star Trek Consistency According to the principle
of consistency, systems are more usable and learnable when similar
parts are expressed in similar ways.
31. Movie / TV Star Trek
32. Movie / TV Star Trek
33. Movie The Avengers Aesthetic-Usability Effect Visibility
Progressive Disclosure
34. Movie The Avengers Aesthetic-Usability Effect Aesthetic
designs are perceived as easier to use than less- aesthetic
designs.
35. Movie The Avengers Visibility Systems are more usable when
they clearly indicate their status, the possible actions that can
be performed and the consequences of the actions once
performed.
36. Movie The Avengers Progressive Disclosure Progressive
disclosure involves separating information into multiple layers and
only presenting layers that are necessary or relevant.
37. Movie The Avengers
38. Movie Iron Man Interference Effects Ockhams Razor
39. Movie Iron Man Interference Effects Interference effects
occur when two or more perceptual or cognitive processes are in
conflict.
40. Movie Iron Man Ockhams Razor The principle of Ockham's
Razor means that given a choice between functionally equivalent
designs, the simplest design should be selected. (Ockham's razor
asserts that simplicity is preferred to complexity). Everything
should be made as simple as possible, but not simpler. Albert
Einstein
41. Movie Iron Man
42. Movie Iron Man
43. Movie Iron Man
44. Movie Iron Man
45. Movie Iron Man
46. Movie Iron Man
47. Movie Iron Man
48. Summary The Incredibles The Fifth Element Star Trek The
Avengers Iron Man Story telling Iconic Representation Colour Signal
to Noise Ratio Highlighting Layering Proximity Good Continuation
Consistency Aesthetic Usability Effect Visibility Progressive
Disclosure Interference Effects Ockham's Razor
49. References Design principles Universal Principles of Design
William Lidwell, Kritina Holden and Jill Butler (Great reference of
principles!) Killer UX Design Jodie Moule (Introduction to UX
design) About Face 3: The Essentials of Interaction Design Alan
Cooper, Robert Reimann and David Cronin (Very comprehensive book
about UX design) Designing Web Applications Nathan Barry (Good
practical book about making your web apps better)
50. References Movie Interfaces The fifth element (Lots of
interfaces discussed here):
http://scifiinterfaces.wordpress.com/category/the-fifth-element-
1997/ Iron Man HUD: http://jayse.tv/v2/?portfolio=hud Avengers
interfaces:
http://http://jayse.tv/v2/?portfolio=avengers-maria-hills-tri-up-
displays and
http://http://jayse.tv/v2/?portfolio=avengers-helicarrier-glass-
screens
51. References Gesture based interfaces Wikipedia: o
http://en.wikipedia.org/wiki/Touchscreen o
http://en.wikipedia.org/wiki/Gesture_recognition Make It So:
Interaction Design Lessons from Science Fiction - Nathan Shedroff
(The book that started the idea for this talk)
http://www.chromeexperiments.com/detail/gesture-based-
revealjs/
52. References Neural Interfaces Emotiv EPOC:
http://www.emotiv.com/epoc/ Board of Imagination (Mind controlled
skateboard!):
http://www.chaoticmoon.com/labs/chaotic-moon-labs-board-of-
imagination/ Neurosky Mindwave:
http://www.neurosky.com/Products/MindWaveMobile.aspx Throw trucks
with your mind Kickstarter:
http://www.kickstarter.com/projects/1544851629/throw-trucks-
with-your-mind