CONTENT
2
01 Introduction
02 Thesis Question
03 Research
04 Design Guidelines
05 Mentors
06 Process
07 Deliverables
08 Thanks
09 Bibliography
3
INTRODUCTION
4
5
IN T RO DUCT I O N
What is the first thing that comes to mind when you think of a heads up display (HUD)? For me, the first thing that came to mind was Iron Man. Tony Stark, accessing massive amounts of information all while flying around fighting crime. Just conduct a quick image search on Google for heads up displays and the search results will become flooded with beautifully rendered UI interfaces that are nice to look at and achieve their goal within their respective environment. Given the way in which they are designed, are HUDs actually practical for implementation in a motorcycle helmet? 6
In addition, during early military HUD development, it was found that pilots using them could operate their aircraft with greater precision and accuracy than they could have with conventional flight instrument systems. My hypothesis is that a heads up display does have the right to exist and should exist within a motorcycle helmet. It would help in creating an enhanced user experience for the rider by understanding and applying the principles of cognitive science, microinteractions, gestalt theory, usability heuristics, and context to the design of the interface.
Credit: Jayse Hansen 7
THESIS QUESTION
8
?
How can cognitive science and microinteractions be applied to interface design in a motorcycle helmet that provides riders with an enhanced experience of their environment?
9
RESEARCH
10
11
IN ITIAL
When I first started this project, I wanted to create a HUD interface similar to the style of Iron Man, which is common in movies and modern day video games. This style is reflected in my early stages of wireframes; However, through research it became clear to me that a different approach was needed when designing an effective user centric HUD interface for a motorcycle helmet. Good design is making something intelligible and memorable. Great design is making something memorable and meaningful. - Dieter Rams
12
13
W EARABL E CO M PU T I N G
Wearable computing, specifically devices that are meant to be worn on your head or face for consumer use, is still a relatively new territory and designing effectively for it can be challenging. Google however, proved itself to be an invaluable resource when it came to secondary research on the topic of wearable technology and how to design for it. I learned that the technology in wearable computing must be glanceable and designed for the periphery. It has been proven that people are able to detect an object in motion faster when it is located in our periphery as opposed to directly in front of us. 14
On average it is a 170ms frontal reaction time versus the 80ms peripheral reaction time. Also, technology should not inhibit people from interacting with the world, but rather aid them in exploring how wonderful it is to live in it. Technology should do the hard work, and you should have a chance to live, have a good life, and get on with it. - Sergey Brin
“
Computing should be ephemeral, not the foreground of our attention. - Hayes Raffle
15
THE WORLD IS THE EXPERIENCE 16
17
COGNITI VE SC I E N C E
Having knowledge of how the brain functions and processes different types of information has helped me in my creative development. It has given me more insight into the structure of the HUD interface design. The idea that logical inference can be carried out by a process of examining meaningless symbols, leads directly to the foundational assumption of cognitive science, which is that thought is a species of computing. - Zenon W. Pylyshyn
The research that I conducted in cognitive science principles within visual design has contributed to my goal of creating an enhanced user centric experience for motorcycle riders. For example, the brain can process color, simple shapes and faces faster than text. 18
Operating a motorcycle takes a lot of concentration and focus. We have to be extra conscientious and aware of our environment. With this in mind, the HUD interface design must reflect the context in which it will be used. Disorientation is a common problem in displays of complex data. - Mary Hegarty
A common trend that I realized when conducting research into current HUD systems was that there was an overload of information in the interface and that only a couple were geared toward motorcycle riders. These systems presented every single bit of content with no relation to relevance. In return, this would confuse riders and overwhelm them with too much information.
19
20
“
Success is measured not in how long users engage with technology, but instead how quickly we can get them what they need. - Timothy Jordan
21
CONTE XT & M I C RO I N T E R AC T I O N S
The overwhelming amount of information that is fed into current HUD systems has influenced me to improve the interface by simplifying and implementing functional microinteractions. Thus, understanding the context in which the information will live is important in order for the HUD to be a successful design for motorcyclists during their riding experience. The implementation of contextual user centric microinteractions help achieve a positive user experience. Microinteractions help the user to be more present and engaged in the real world, by being more connected virtually because you have more check ins but engagement with the technology is shorter. - Alex Faaborg
22
Microinteractions begin with a trigger, either user or system initiated. This is followed by a rule or set of rules that dictate how the microinteraction works and ends with feedback as the result. It is these microinteractions that assure that only the most important information is presented to the rider when it is needed only. I first started by asking myself what information I would like to be aware of when riding my motorcycle, so that I could implement microinteractions for them. Genius design is when the designer relies on his or her own experience and skill to design, without any input from users. - Dan Saffer
This practice of ‘Genius Design’ proved extremely helpful during this project, when for instance, further user input was unavailable at the time. After taking some time to reflect on all of the features that I personally would like to implement a microinteraction for, I condensed the list to my top 7. They are: fuel alert, speed alerts, blind spot detection, traction, weather alerts, who is calling me, and my current gear. This list then served as a basis for several card sorting exercises that I performed with riders during my user testing phase.
23
M ICROI NT E RA C T I O N S
One example of a microinteraction is notifying the rider when their motorcycle is running low on fuel. The system initiates a trigger of the bike being low on fuel, which begins the microinteraction. The rule dictates that the rider will be notified of the issue with a visual and voice alert. The visual alert will animate onto the visor from their right side peripheral. Then, the voice prompt will provide the rider with information of how long they have until empty and where the nearest gas station is. The feedback is the rider being aware of the issue and having the option to respond with a “yes,� which will initiate the next microinteraction, navigation. Or, they can just ignore it and continue on with their ride. 24
The HUD will SENSE what information should be present even before the rider does.
LOW F UEL
+
TRIGGER (System initiated) Low on fuel i.e. 50 miles remaining.
RULE Visual alert is presented, then disappears after a set amount of time. Voice prompt follows to aid the visual alert.
FEEDBACK The rider is now aware that they are low on fuel and has the ability to take action or not.
25
RE AR VI E W CA M E R A
TRIGGER (User initiated) Rider wishes to see what is behind them, therefore glances toward the top center of the helmet.
26
RULE Rear view camera displays screen and animates in and stays there until the rider glances away.
FEEDBACK The rider was able to see what was behind them without turning their head, allowing them to keep their focus on what is in front of them.
BLIN D SPOT DE T E C T I ON
TRIGGER (System initiated) A vehicle has entered the rider’s blind spot.
RULE Visual alert with lights that are presented within the rider’s peripheral. They are to remain there until the vehicle is gone.
FEEDBACK The rider has been alerted that there is a vehicle in their blind spot. Thus, assists the rider to become more aware of their surroundings and leads to the prevention of road accidents.
27
28
29
US ER TE ST I N G
To get a general sense of what information riders viewed as important to them while riding, I sent out a survey to multiple motorcycle forums. To my surprise, I received almost 100 participants. According to the survey, what this set of riders valued as important was: Fuel (70.4%), Speed (70.1%), RPM (65.9), Tire Pressure (62.6%), Current Gear (56.6%), Navigation (50.1%), Time (45.9%), Music (45%), Wind Speed (48%) and lastly Calls (27.3%). With these results serving as a starting point of what information to display in the HUD, I then interviewed other motorcycle riders in Colorado. 30
Card sorting was one of my favorite exercises to perform with the riders and proved an easy way to find out what information was valuable to them. They were given a list of common features riders would like to see in the HUD, along with the chance to add new cards. I then had them select their top five, then top three. Blind spot detection, rear view access and weather alerts were almost always in the riders top five. Also the ability to receive and make calls quickly gained more popularity once they were shown through a simple demo I created within After Effects of how the HUD would alert them if a call came through.
31
“
User centered design means working with your user all throughout the project.
32
- Donald Norman
TA RGET M A R KE T
Initially, I had preconceived notions that the HUD system I would like to implement would span across all, if not most motorcycle riders. The data revealed that sport bike riders were more receptive to the idea of technology within their helmet because many of them were already incorporating some kind of technology into their daily rides such as earphones to listen to music, receive calls or a video recording devices like the GoPro. However, because the design of my proposed interface is to be ephemeral through the use of microinteractions, it would present information only when it is needed. With the data I received, my target market is geared toward sport bike riders. However, with the use of ephemeral design, it makes it easy for other riders to adapt to the HUD system.
It is a proven concept that when a secondary target group is presented with a new idea, they are more resistant. The riders who were initially skeptical about the technology may, after using the HUD, realize that it deems necessary during their everyday rides. A prime example of this situation was the Swiffer Sweeper that caused a commotion for American consumers. At first, they disliked the idea and believed that an ordinary broom would get the job done well. After using the product, consumers quickly averted their preference toward the Swiffer, which became a highcommodity product in households today. Once skeptical riders have been introduced and test my proposed HUD system, it would allow them to understand how vital the information it presents is significant to their everyday riding.
33
DA N H E M I N G WAY
Age: 30 Occupation: Sales Years Riding: 6 What I Ride: Yamaha R6 34
Bio Dan enjoys taking his sport bike up into the mountains on the weekends. Nothing is more satisfying to him than hearing his bike roar down the winding roads. Although, he sometimes loses track of time and forgets that he is running low on gas.
J O N AT H A N C A O
Age: 24 Occupation: Design Years Riding: 2 What I Ride: Honda CBR 600
Bio Jonathan is a technology geek, always keeping up to date with the latest and greatest in technology. He currently owns a bluetooth headset so that he can listen to music while riding as he finds it a more enjoyable experience. 35
DESIGN GUIDELINES
36
37
TY PO GRAPHY
Typography is kept to a minimum within the HUD display, although at times it is necessary to use. For this reason I chose Roboto, a Humanist typeface, because Humanist typefaces are easier for the mind to recognize and process according to a study conducted by MIT Age Labs. Roboto is also Google’s choice typeface for their Google Glass. 38
Fo n t S i z e 24px - 64px Light AaBbCc0123 Regular AaBbCc0123
THE H UD
The orange sections mark the HUD hot spots. This is where any information being displayed will live. Having the information animate into their peripheral and then live slightly offcenter allows the rider to quickly recognize the information being displayed without it blocking their view. Also, the iconography used is simple and recognizable at a glance. 39
MENTORS
40
A very big thank you to my subject matter experts who agreed to help me with my project, I could not have done it without your help and guidance. THANKS! 41
Jason Bowers
Senior UI/UX Designer at Jump Cloud Jason was extremely helpful throughout the my whole thesis project. He encouraged me to explore all options and to leave no idea unturned. As a fellow motorcycle rider I was able to bounce ideas off him, no matter how crazy they seemed, and together we explored how they could better my thesis presentation.
Sally Peang
Jr. Production Artist at Grenadier Sally, having just graduated from the UCD Digital Design program, knew what was expected and how to organize my design process. She helped me to prepare my presentations throughout the program, surveying and research by stressing the importance of analyzing disciplines outside of design.
42
Skye Sant & Shawn Jenkins Skye Sant, UX Strategy Director Shawn Jenkins UX Architect at enVision
They were very influential near the end of my thesis when I was unsure of how to proceed. Their UX experience and knowledge in cognitive science helped craft my thesis problem into a viable design solution. Together, they pushed my creative thinking further into a logical and functional strategy.
43
DELIVERABLES
44
45
VISI O N DE M O
46
IN V I TE S
47
THANKS
48
I would just like to thank everyone who helped contribute to my project thus far: my subject matter experts, professors, friends, and most importantly loved ones and my family. I could have not done it without the support of all of you. Thank you so much for your time and constant encouragement.
Alex David alxdavid.com 49
BIBLIOGRAPHY
50
Badger, Emily. “HOW BETTER TYPOGRAPHY COULD REDUCE CAR CRASHES.” September 25, 2012. Accessed April 22, 2015. Buxton, William. “Sketching User Experiences Getting the Design Right and the Right Design.” Amsterdam: Elsevier/Morgan Kaufmann, 2007. Danzico, Elizabeth. “Designing for Interaction: An Interview with Dan Saffer.” AIGA. July 26, 2006. Accessed April 22, 2015. “Google I/O 2013 - Agile UX Research Practice in Android.” YouTube. Accessed April 22, 2015. “Google I/O 2014 - Designing for Wearables.” YouTube. Accessed April 22, 2015. “Google I/O 2013 - Cognitive Science and Design.” YouTube. Accessed April 22, 2015. Hegarty, Mary. “The Cognitive Science of Visual-Spatial Displays: Implications for Design.” Topics in Cognitive Science: 446-74.
Naish, Michael. Applications of the Head-Up Display (HUD) to a Commercial Jet Transport, 1972, 530-36. Naish, Michael. Combination of Information in Superimposed Visual Fields, 1964, 530-36. Nirmalan, Niro. 2010. “Dieter Rams: Ten Commandments for Good Design.” Niroism. January 30, 2010. Accessed April 22, 2015. Pylyshyn, Zenon. “What Is Cognitive Science.” Accessed April 22, 2015. http://ruccs.rutgers.edu/ftp/pub/papers/ ruccsbook.PDF. Saffer, Dan. “Microinteractions.” Beijing: O’Reilly, 2013. “Sketching and Experience Design.” YouTube. Accessed April 22, 2015. Thagard, Paul. 1996 “Cognitive Science.” Stanford University. September 23, 1996. Accessed April 22, 2015.
51
52