Optimal Navigation Position (Dissertation)

Grade - 1st

Research has found that a lot of mobile users cannot reach the top of their mobile without having to change their grip on their phone. This research suggested that by having navigation menus at the bottom on the screen, rather than the top, may make them more reachable.

This project proves this and finds the optimal navigation position on a touch screen mobile.

Please Note: The following project has been shortened for ease of reading.

Process

The term “Thumb-Zone” is the location of the easiest-to-reach places on a mobile screen when using thumbs. This Thumb Zone enables mobile users to navigate web-pages with minimal stretching and strain thus creating a more usable means of navigation.

Test 1 - Smudge Test

To prove what the above research suggests, I conducted a paper prototype ‘Smudge Test’. This test was conducted using two cardboard phones, (the size of an iPhone 6s) which both had a gap at the side to slot in a piece of card for the participants to smudge. One phone was designed for left handed participants and had the slot at the right hand side of the phone, while the other phone was designed for right handed participants, which had the slot at the left of the phone.

Cardboard Phones

This test consisted of 25 participants holding a cardboard phone with their dominant hand, and using their thumb, created an arc of the area they could easily reach best using black eyeshadow. These pieces of card were then scanned into a computer and were made somewhat transparent before being layered over each other to identify the most touched area on the phone. To make this raw data into a more understandable format, these layered smudges were transformed into a ‘thumb-zone’, where the area that the majority of the participants could reach was made green, the area where some participants were able to reach was made yellow, and the areas where none of the participants were able to reach was red.

Left Thumb Zone Right Thumb Zone

This test proves that an easier to reach location to have the navigation menu would be at the bottom of the screen, rather than the top.

Design

A series of navigation styles were developed this project, designed to be more practical as well as reachable and aimed to create a generally more mobile-friendly style of navigation. For the usability test conducted for this project, six versions of a woman's clothing website was created, each with a different type of navigation.

Women’s clothing websites usually have between six and ten navigation menu links, and on mobile, usually use a hamburger navigation at the top of the page which opens sideways. Links that are commonly used within these menus include Clothing, Shoes, Accessories, Beauty and Gifts. For this project, these 5 links will be used along with the page, Active Wear, and a link back to the home page.

As there were seven links in this navigation menu, a bottom bar navigation wasn’t an option as there were too many links to fit along the bottom of a phone screen, resulting in a hamburger navigation being used for all 6 of the websites. Considering the fact that different people use different styles of grips when using their phones, different navigation styles were developed, including the hamburger button being at either the left, middle or right bottom of the screen as all these places would be reachable, and then the menu either covering up half of the screen or the entire screen.

Paper drawn designs were first used to design these websites for a low-fidelity prototype. Navigation 1 shows the home screen of the website, with the hamburger navigation button at the bottom left of the page. Navigation 2 has the navigation button at the bottom middle of the page, and Navigation 3 has the navigation button at the bottom right of the page. When the navigation button is clicked, the navigation menu opens up to cover the entire page, and the hamburger button changes to a ‘X’. Navigation 4, 5 and 6 are the same as Navigation’s 1, 2 and 3, but rather than opening up to cover the entire page, it only covers half the page, allowing the rest of the website to still be used when the navigation is opened.

Navigation 1 Low-fidelity Prototype Navigation 2 Low-fidelity Prototype Navigation 3 Low-fidelity Prototype Navigation 4 Low-fidelity Prototype Navigation 5 Low-fidelity Prototype Navigation 6 Low-fidelity Prototype

After the paper designs were drawn up, next the high-fidelity designs were created using Photoshop, before the final websites were created using Atom.

Navigation 1 Navigation 2 Navigation 3 Navigation 4 Navigation 5 Navigation 6

Test 2 - Usability Test

To test which navigation style was the most optimal, each participant was required to find a total of three categories of items on each navigation, for example; tops, novelty gifts and makeup. A prepared chart was used, so that I could record the total number of clicks it took each participant to find the requested item, as well as the style of phone-grip the participants were using.

This prepared chart was used alongside an after test participant questionnaire to examine whether there was any disparity between participant’s opinions and their actual, observed behaviour.

For this questionnaire, participants were required to give a memorable word in the event they wanted to withdraw their data, their age, their highest completed education and their dominant hand. Information relating to participants age allowed me to examine whether there were any obvious differences between age groups and how they use and hold their mobile devices. The information about their education level was collected to examine whether there were any obvious differences in performance between these groups, and information on participants dominant hand was collected to examine differences in how participants held their phones during the test. Participants were then asked to choose a preferred navigation style and then state why this was their preferred choice, whether the menu hamburger button feature was too small or too large or whether it was an ideal size, and then asked which, out of all six, navigation styles they found easiest to use and were then asked why they made their choice.

Results

From these tests, Navigation 5 was identified as one of the most usable navigation styles as it had both the lowest number of clicks needed to navigate, as well as having the second highest number of participants selecting this navigation as their preferred style. Although the majority of the participants preferred Navigation 1, it had the highest grip readjustment rate out of all the navigation styles, showing a difference between options and observable behaviour.

Navigation 5