Tying It All Together
At the start of our lecture we discussed what we have previously went through in terms of illustration, icon design and other forms of research for this project in addition to covering what we need for our group critique in next weeks lesson. We also covered a number of other subjects that relate to user interface design for mobile applications like legibility, readability, basic UX laws and principles, colour and touch points for handheld devices.
Mobile UI Design
We briefly went over to different user interface designs as a quick reference to what we are aiming for with this project. I found this useful as referencing professional standard work allows me to stay focused on the project and the decisions that need to be made in term of the user experience, it also can give me inspiration for my design or sometimes a solution to a problem I am facing within the design. Looking at some of these user interfaces in a JPEG or PNG format gave us an idea on how we should be presenting our mobile applications when it comes to our group critique next week, some of these designs are displayed in a mockup style image while others are plain PNG images on a coloured background – this is commonly seen on social media platforms where designers display their work like Instagram, Dribbble and Behance.
We also took a look at some of the work previous students had completed for this module to give us an idea on what other students have created for the same project we have, I found this interesting as other students had some really good ideas in terms of what the application was about and the main function the application is used for.
I have included some examples of some user interfaces below and how they are presented.
Basic UX Laws
During our lecture we discussed some of the basic laws and principles in user-experience design, we have covered a few of these in our previous modules last semester and I have covered these laws during my study at Northern Regional College but it was good to get a refresher on what each individual law refers to and relate that to the project we are currently working on.
I have included a brief overview of some of the laws we covered in our lecture.
Jakob’s Law – Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. A good example of this would be loading time for websites and mobile applications, the longer your website takes to load the more likely the user will go to another website that loads faster.
Fitt’s Law – The time to acquire a target is a function of the distance to and size of the target. A good example of this would be different button sizes based on importance, Spotify is a good example of this where the play/pause button is larger than the back/forward buttons.
Law Of Pragnanz – People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
Hick’s Law – The time it takes to make a decision increases with the number and complexity of choices available. An example of this would be giving the user 3 options and 30 options, they will more than likely make a decision faster with 3 options than when choosing from 30 different options.
Von Restorff Effect – When multiple similar objects are present, the one that differs from the rest is most likely to be remembered. This can be achieved through shape, scale and/or colour, an example of this would be using an accent colour to draw the users attention to that specific elements in order for it to be remembered or have importance above the other elements.
Touch Points & Hit Targets
During our lecture we briefly covered target sizes for touch screen devices and how the sizing of elements can effect the user experience of a digital product, there are a number of different design systems that have researched into this area of design like Apple’s Human Interface Guidelines and Microsoft’s Material Design Guidelines but these all vary to fit the style of the brand they were developed for – although they are great for a starting point on any project. Apple consider the minimum touch size to be 44 pixels, Microsoft consider the minimum touch size to be 34 pixels while Nokia consider the minimum touch size to be 26 pixels but this may not suit everyones hand size as someone with larger hands and fingers may struggle to use a Nokia device due to its smaller touch size.
As humans we are all built differently to one another which means the sizes of our hands vary from person to person, while there is not “one size fits all” you can work out the average size of a hand to find the average touch point size that works for everyone. Another factor is that we all use our handheld devices differently, some use there thumb to interact with the device while others might use their index finger instead, this creates another issues as thumb sizes and the size of an index finger are completely different. The average width of an index finger is considered to be around 57 pixels and the average width of a thumb is considered to be around 72 pixels which gives us a good starting point as to what size our buttons and touch targets should be.
Another factor we looked at was the positioning and placement of elements on the screen of the device, elements placed at the top of the screen may be harder to reach in comparison to elements at the bottom of the screen. An example of this can be seen in the majority of applications that we use on a daily basis like Facebook and social media applications, banking applications and even games where they will often place the action button at the bottom of the screen as it is easier for the user to reach with their thumb while holding the device, this is the same with navigation bars in mobile applications as it allows the user to navigate through the application more efficiently.
Colour, Contrast & Accessibility
We covered some basic colour theory to refresh our knowledge on colour and how it should be used in design, we took a loot at some tools that are commonly used to create colour palettes like Adobe Color in addition to different colour palettes like monochromatic, analogous, complimentary and a few others. We have covered this previously in our modules last semester in addition to our IXD103 Exploring Identity module where I researched this in greater detail but it would good to have a recap of how colour can be used within design and how different colours work together to create a certain vibe or personality to a design.
Go check our my IXD103 Colour Psychology Research here.
Contrast is extremely important when it comes to typography as some people may be more visually impaired than others, we briefly looked at some different contrast testing tools that allow us to check the contrast ratio between 2 colours – this is usually represented on a scale of 1:1, being the lowest contrast ratio, to 21:1, being the highest contrast ratio. Ensuring the contrast between your colours is extremely important as having a low colour contrast may make certain elements harder to see, especially with typography, as typography varies in size and weight having a high contrast ratio between the text colour and the background colour is crucial to ensure your text is fully legible and the readability is not affected. A more more example of colour contrast and how this may make a design harder to use for people with visual impairment is the Neumorphism Glass style design which focuses on using layer blurs and opacities to create a glass effect, this may make it harder for the user to navigate the application as everything will appear flat and the majority of the design is shadows and effects.