In chapter 7: The Surface Plane, from the book The Elements of User Experience by Garrett, the author talks about sensory design, and how a great design when it comes in contact with people it is capable of achieving previously stated goals by combining content, functionality and aesthetics. To fulfill this, it is important to take into consideration 2 key elements:
- Navigation: This is what enables the user to interact with the design and to smoothly flow across all the information
- Information Design: This holds the content that communicates the information and it is the core of the design.
It is no surprise that humans perceive the world through 5 senses, which is why design should focus on them (hearing, smell, touch, taste and sight). With regards to sight, or how the visual aspect supports the user experience design, it is crucial to state that design isn’t about something being aesthetically pleasant, because this could end up being subjective as everyone has different taste and preferences. Design is about what works and how efficiently it supports objectives. In design, everything should have a purpose; every design decision needs a meaning because it all communicates something.
Garret mentions that a successful design should take into consideration the following principles:
- Contrast: This is used to attract attention and to divide the information in groups for a better communication. I will use this element for my design to ensure my user looks at the most important thing first, I will apply contrast to make some elements stand out.
For my MusePad App, I am going to use contrast when interacting with the round menu of the “build your spacecraft” section of the App. This will help the user know what he is doing and what part of the spacecraft he is building, as shown in the images below. (The different colours indicate different categories that will be highlighted in my App). Also, for the mix and match section it is important to use contrast to allow the user to know what he has selected and to indicate the correct answer.
- Uniformity: It is all about consistency. It is important to ensure that the design communicates effectively and it does not confuse the users. This applies for all: the visual elements and the navigation, transition and interaction. People learn while interacting with the App so it should be kept consistent to avoid frustration and dissapointment.
This will be shown in my design by a visual style. I intend to use a very childish cartoonish style with a set colour palette that would be kept constant through the app. The buttons and the style will be organic and rounded to allow the user to relate to it and perceive it more informally and friendly.
- Grid-based layout: Having a grid is crucial to ensure uniformity and consistency through the different layout variations.
- Colour palette: Colours have meaning, and they also create identity. It is important to choose an adequate colour palette that works well together and complement each other so that it helps support the intended message.
My colour palette has to appeal to children. I am going to use a contrast between dark blue/purple colours that simulate the space with bright yellow and orange tones that help set up a playful and cheerful mood.
- Typography: Typefaces help create a particular visual style, they help set up a mood and they provide identity. It is important to choose type wisely because different styles indicate different information and thus it communicates meaning.
I will only use one typeface that works well digitally and supports the design style once it is completely clear. Also, I will use difference in thickness to emphasize in certain words and titles by applying boldness.
Moreover, something I found very intriguing about the reading is the idea that the movement of the eye can evaluate the visual design. This eye movement is a “result of a complex set of deeply ingrained instinctive responses to visual stimuli” (Garrett, 2011) and it helps identify the hierarchy of the design and whether the eye follows a smooth pattern or not. This could particularly be very useful for the MusePad App. By observing the eye movements I could ensure my user navigates through my App the way it is supposed to be. The images below show wireframes of my MusePad App and the arrows show the movement of the eye.
While observing the image on the right, I realised the eye movement was quite confusing which meant the hierarchy wasn’t quite right so I decided to re-arrange it so that the eye runs through the interface smoothly as shown in the image below