1. 1. Riaan Cornelius 02 August 2013 Sci-Fi Interfaces
2. 2. Why should you care About interaction design?
3. 3. Why should you care
4. 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. 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. 6. Interface Technology Types of interfaces Indirect Gestural Sonic Neural
7. 7. Interface Technology Indirect Interfaces Indirect because we need to use some indirect interface device like a keyboard or mouse Established
8. 8. Interface Technology Gestural Interfaces
9. 9. Interface Technology
10. 10. Interface Technology Sonic Interfaces Using sound for input or output Star Trek red alert Voice input
11. 11. Interface Technology Neural Interfaces Still in its infancy Some promising research and tools available Emotiv EPOC
12. 12. Interface Technology Neural Interfaces
13. 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. 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. 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. 16. Movie The Incredibles Story Telling Iconic Representation Colour
17. 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. 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. 19. Movie The Incredibles Colour Colour is used in design to attract attention, group elements, indicate meaning and enhance aesthetics
20. 20. Movie The Incredibles
21. 21. Movie The Fifth Element Signal To Noise Ratio Highlighting
22. 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. 23. Movie The Fifth Element Highlighting Highlighting is a technique that is used for bringing attention to specific elements of a design
24. 24. Movie The Fifth Element
25. 25. Movie The Fifth Element
26. 26. Movie / TV Star Trek Layering Proximity Good Continuation Consistency
27. 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. 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. 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. 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. 31. Movie / TV Star Trek
32. 32. Movie / TV Star Trek
33. 33. Movie The Avengers Aesthetic-Usability Effect Visibility Progressive Disclosure
34. 34. Movie The Avengers Aesthetic-Usability Effect Aesthetic designs are perceived as easier to use than less- aesthetic designs.
35. 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. 36. Movie The Avengers Progressive Disclosure Progressive disclosure involves separating information into multiple layers and only presenting layers that are necessary or relevant.
37. 37. Movie The Avengers
38. 38. Movie Iron Man Interference Effects Ockhams Razor
39. 39. Movie Iron Man Interference Effects Interference effects occur when two or more perceptual or cognitive processes are in conflict.
40. 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. 41. Movie Iron Man
42. 42. Movie Iron Man
43. 43. Movie Iron Man
44. 44. Movie Iron Man
45. 45. Movie Iron Man
46. 46. Movie Iron Man
47. 47. Movie Iron Man
48. 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. 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. 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. 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. 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
53. 53. Questions