Entelect Dev Day talk - Sci-Fi Interfaces
•Download as PPTX, PDF•
1 like•795 views
A talk I did on why we should pay attention to user interfaces in Science fiction.
Recommended
Recommended
More Related Content
Similar to Entelect Dev Day talk - Sci-Fi Interfaces
Similar to Entelect Dev Day talk - Sci-Fi Interfaces (20)
Recently uploaded
Recently uploaded (20)
Entelect Dev Day talk - Sci-Fi Interfaces
- 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
- 10. Interface Technology • Sonic Interfaces • Using sound for input or output • Star Trek red alert • Voice input
- 11. Interface Technology • Neural Interfaces • Still in it’s 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 • Ockham’s 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 • Ockham’s 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
- 53. Questions
Editor's Notes
- As you can see from the title – Sci-fi interfaces You should ask WHY? I’ll answer in two parts
- Dilbert has some input on this. We don’t want to trigger widespread despondency and self mutilation
- More practically: You don’t want to deliver something like this to a client While this is an extreme example, we get to this by making lots of small mistakes that add up to this kind of Dilbert experience.
- The first point here is obviously most important. Based in science, but also predicts and drives adoption of future tech. Will look at Minority report as an example in a moment.
- Important to discuss because it has a big influence on your design
- It hasn’t changed much since the 80’s. While we’ve gone optical and seen resolution improve, nothing has really changed too much.
- Minority Report – This was where gestural interfaces really started to become mainstream The movie used a prototype designed by the MIT media lab which was later developed into commercial products called G-Speak and Mezzanine (Now available) This is not the only kind of gestural interface. Touch screens are a gestural interface that is commonly used.
- This is a timeline of some important gestural interface events. What I want to highlight is the fact that apple released iPhone in 2007 and claimed to have invented multitouch. It actually happened at uni of toronto 25 years earlier. Touch screens had been around since 1965 and the Buick Riviera actually had a touch interface to control it’s radio and aircon in 86 already. You can see that it took a long time for these technologies to go mainstream. In 2002, Minority report made gestural interfaces popular and by early 2011 people were using the Xbox kinect to build some of these interfaces.
- Everybody is familiar with using sound for output – Star trek red alert is a good example. Voice input is marginally more interesting, but because systems only really understand keywords at this stage, your user basically has to learn a new language. We won’t get widespread adoption until systems start to understand conversational language.
- Emotiv EPOC is 8 channel EEG headset with accelorometers to track head movement and lots of other cool bits.
- You might wonder about a practical use of neural interfaces.. What could be more practical than a mind control skateboard. I’ll let these guys explain what they did. PLAY VIDEO There is a small problem: Headset will cost you $250 Then you need to pay at least $500 / year for dev SDK. At this “cheap” option, you can only sell anything you develop through the Emotiv online shop.
- If you want to play around with neural interfaces, the Neurosky mindwave is the device for you. Only single channel EEG headset, but $80 gets you everything you need to get started. Won’t go into detail, but link to a game called throw trucks with your mind in the references.
- Now that we know what technology we’ll have available, Lets look at some design principles through movie examples.
- Might be stretching the definition of Sci-Fi here, but I make the slides
- Don’t need to tell you what it is We’ve used storytelling as a way to communicate and learn for thousands of years. Reason you want to use it if possible is because it gets your user more emotionally involved and makes it easier to learn your interface.
- Another principle that needs no explanation. We’ve been using images to represent concepts and actions for years now, and the reason we do it is because It makes your interface simpler which makes it easier to learn It can conserve display space This is not necessarily a good thing as just cramming more items on a screen because there’s space is usually bad (as we’ll see later)
- Colour is used to attract attention, group elements and simply to make your interface prettier (Which is actually important as we’ll see later) Caution: If colour is used badly it can seriously harm the usability of your interface.
- You can see the iconic representation here. While you don’t see it in this clip, by using these icons consistently across the interface, you make it much more usable. If we play this clip, you can see that while it is a very simple interface, it tells the story of how each hero was matched up against a prototype The use of colour makes the outcome of each fight very clear.
- So moving on to some real sci-fi, we’ll look at …
- Signal to noise ratio is basically how much useful info you have on your interface in relation to irrelevant information. A high signal to noise ratio minimizes miscommunications and misunderstandings and makes it less likely that important information will be overlooked.
- Tools that can be used to highlight include: Bold, Italics and Underlining, colour (only in conjunction with other highlighting techniques), Blinking (should only be used to indicate highly critical information that requires an immediate response). Use a small number of highlighting techniques applied consistently throughout the design. Highlight no more than 10 percent of the visible design as highlighting effects are diluted as the percentage increases.
- There is no doubt as to what the important part of this interface is. Using a red background on the message also focuses your attention on that. We know that red is generally bad, so it suggests that bad things are about to happen.
- Unfortunately this is where the praise stops. Ignoring the fact that this is flipped horisontally on the movie You don’t need to know the current address, and you certainly don’t need those perspective lines. Anything that won’t help you to evade capture is noise and unfortunately in this case, that’s pretty much everything.
- Star Trek is interesting because it’s been going for so long and the interfaces has stayed consistent. Other than the first series where they used mechanical interfaces. You might think they changed it in the second series to make it look better or more technologically advanced. You’d be wrong. As is so often the case, they did it because of money. The mechanical interfaces was just too expensive to build, so they borrowed an idea from a 9 year old movie called Logan’s run. Simply print your interfaces on transparent plastic sheets and backlight them. Other than consistency we’ll look at … Which is all methods of grouping information.
- Layering is simply organising information in a way that reinforces relationships in the information and makes your interface simpler. The example should make that clearer.
- Proximity states that items that are located closer together are perceived as being more related. Proximity is interesting because it is one of the most powerful ways of showing relatedness will usually overwhelm any competing visual cues (like similarity). Elements in a design should be arranged so that their proximity corresponds to their relatedness and ensure that labels and supporting information are near the elements they describe. Unrelated or ambiguously related items should be placed relatively far apart.
- Good continuation just says that aligned information is more related. Obviously it could be aligned in rows or columns, but interestingly this also holds true for information aligned along curves.
- Consistency enables people to efficiently transfer knowledge to new contexts, learn new things quickly, and focus attention on the relevant aspects of a task. We care about 2 types of consistency: Internal and External Internal consistency simply means that everything in your interface needs to be done in similar ways. If you have a menu on the left, always have it on the left. This is important because it cultivates trust as there is less surprises for your user. External consistency basically states that your interface needs to be consistent with every other interface the user has previously used. Obviously this is impossible, but we should try to get as close to this as possible. Try to be consistent with interfaces in the same industry or with the OS your system will be running on.
- You can immediately see that this screen is broken down into 3 parts. This is a good example of layering. There’s the main detail display at the bottom, a list of items in the top left and actions in the top right. The buttons on the top right illustrates the power of proximity – While the labels give no clue about the function of these buttons and they are all different colors, We know they are related and that they will perform some action on the milky way. This is purely because of the proximity. You can also see colour being used effectively to highlight the third last row in the list on the left.
- This is supposed to be an interface that is several hundred years more advanced, but you can still see similarities with the previous design. Even though the colours are very different and there’s a lot more curves, you get the feeling that somebody that can use the previous interface will be able to find their way around this one. This highlights an important opportunity As long as your interface stays consistent with the basics, you can change the look pretty radically without alienating your users.
- Basically, prettier interfaces will be used more. Aesthetic designs look easier to use and have a higher probability of being used, whether or not they actually easier to use. More usable but less aesthetic designs may suffer a lack of acceptance that renders issues of usability moot.
- Visibility basically says that your interface is easier to use if It clearly displays the current status of the system Shows what actions are possible Gives some clue about the consequences of these actions
- Progressive disclosure involves hiding irrelevant information until it is needed and is mainly used to prevent information overload. It is also an effective method for leading people through complex procedures
- Aesthetic-Usability effect – This interface is beautiful, which makes you want to use it. It also makes it more likely that you will overlook any issues you do find. Visibility – This screen leaves no doubt that there is a problem and shows exactly what the problem is. Progressive Disclosure – Only the problem area is displayed. In this situation everything else is noise until you’ve dealt with the turbine failure.
- While I know it’s blasphemy, we get to an example of a bad interface in Iron man now.
- Human perception and cognition involve many different mental systems that parse and process information independently of one another. The outputs of these systems are communicated to working memory where they are interpreted. When the outputs are congruent, the process of interpretation occurs quickly and performance is optimal. When the outputs are incongruent, interference occurs and additional processing is needed to resolve the conflict The additional time required to resolve such conflicts has a negative impact on performance. Prevent interference by avoiding designs that create conflicting mental processes. Interference effects of perception (Stroop and Garner) generally result from conflicting coding combinations (e.g. red go button) or from an interaction between closely positioned elements that visually interact with one another (two icons group or blend because of their shape and proximity).
- Implicit in Ockham's razor is the idea that unnecessary elements decrease a design's efficiency, and increase the probability of unanticipated consequences.
- The one thing this interface has going for it is the aesthetic usability effect. It is an impressive looking display, but This interface is not simple at all. Occam’s razor suggests that simpler would be better. I’d agree. If you watch the movie, you can see that everything is moving all the time, which is an interference effect. Items should only move if they need your attention. This is so complex we’ll look at it in sections
- The image of the suit gives pretty good visibility as you can see the status of the system at a glance. The power and core temp bars are also quite good for that. We’ll get to the weapons in a moment, but everything else is noise. EEG and EKG graphs moving in your peripheral vision is an interference pattern – You only need to pay attention when they stop moving, and at that point, the graphs are useless in any case. Better would be a flashing warning highlighted in red if your heart rate or brainwaves are in dangerous territory.
- I can’t make heads or tails of this. About the only thing that makes sense is the weapons in the bottom section. It warns that the suit has dangerously few rockets in a red font. Of course you lose this warning because 3 quarters of the interface is highlighted. How do you decide what is the most critical issue to deal with? The environmentals section tells me nothing. It seems like some systems are working at some percentage of their capacity, but I have no idea which systems and whether it is a good or bad level. Finally, all the little rectangles arranged radially is supposed to be different suit systems and the connecting grey lines show whether specific sub-systems are communicating with each other. I know Stark is supposed to be very intelligent, but there’s no way that shows meaningful information at a glance.
- Something else to note is that you have some weapons status under the suit diagnostics and some under the main interface on the right. Bad Proximity – Related items should be grouped together.
- Unfortunately, I can’t say anything good about this flight mode section. One principal I didn’t cover is mapping. Essentially making your interface conform to (or map) whatever it physically represents. Here you have displays for left and right thrusters and ailerons, but they are displayed underneath each other. Then the bar at the bottom of the display is supposed to show if you are going up or down, but it is oriented left to right. The G-Meter is only there to look cool in the movie and probably serves no useful function in a real interface. Basically this whole interface could have been replaced with a simple horison indicator and it would have been more useful.
- Now, once again, this interface seems to be mainly an extension of the flight mode interface showing speed and heading, but it is completely separate from that interface. There are three icons which I would guess brings up more detail for certain functions. This is actually quite nice, even though everything is controlled through gestures or voice, it’s a reminder of what functions are available. Of course if Stark could use this interface he is probably clever enough not to need them, which just makes it more noise.
- While this interface has some nice elements, because the designer tried to do everything possible in the same interface, it becomes impossible to use.