master thesis project

vacare

Differences in usability of mobile user interfaces
for left- vs. right-handed users

In the context of my master thesis at UAS St. Pölten I dealt with the design and usability of mobile user interfaces, especially with regard to the differences in the use with the left or right hand.

In the empirical part of this thesis, an A/B test was conducted with the goal of observing the position of smartphones in the hands of users. Furthermore similarities as well as differences between left- and right-handed participants have been observed. For the high fidelity prototype used for the usability tests, a mobile website was created for a fictitious spa called “vacare”. Below the design is presented, but also the results of the research that has been carried out and evaluated.

The brand

Unique mix of luxury and comfort

My master thesis did not focus on graphic or brand design, nevertheless, it was important to me that my test subjects hold a high-quality prototype in their hands. Vacare is a fictitious spa that offers its guests an exclusive wellness experience. A spa landscape inspired by nature invites to relaxation, time for mindfulness and inspiration.

The exclusive location and services are reflected in the modern branding and visual language. Secondary style elements were used to loosen up the website structure, as well as menus, price lists and other print products which can be found on site.

The problem

The bias towards lefties 🤚🏼

Computer interfaces and input devices are designed with right-handed users in mind. Most computer mice are ergonomically designed for right-handers, control keys (arrow keys, number pad, etc.) are located on the right side of keyboards so that they can be quickly operated with the right hand. Keyboard shortcuts are located on the left side of the keyboard, so that the right hand does not have to leave the mouse.

Software also tends to be designed for the right hand (e.g. right- click menu that follows the natural movement of the right wrist). These design characteristics make it difficult to learn to use a computer differently. Left-handed people therefore learn to do many things with their non-dominant hand, even in everyday life: using scissors, various sports, driving cars with manual gear shift.

Designing the prototypes

The goal of this thesis was to show, based on two tested prototypes, which differences in usability are perceived by left- and right-handed users, or to investigate whether there are differences.

Prototype A

For prototype A, the widely used hamburger menu was chosen, which makes the interface look uncluttered, as the menu structure is hidden at first glance, only becoming visible when the icon is tapped. It is an icon that has embedded itself in the consciousness over decades, as the button with which users can access the navigation. The hamburger icon, placed in a familiar position, is in the so-called thumb zone on the border between green (“easily accessible”) and yellow (an area that requires expansion; just low enough on the page that it still feels natural).

The two versions differ not only in the design of the menu, but also in the arrangement of other UI elements that are predominantly left-aligned (prototype A) or centered (prototype B).

Prototype B

In the second version a fixed navigation bar was designed at the bottom of the screen. This has the advantage that all menu elements are visible at the same time and users can save themselves an intermediate step. An indication (in this example the wavy line) can be used to orientate oneself on which page one is currently on. The icons used are mostly universal and unique icons (e.g. house for home page), but the flower for the packages may not be directly recognizable, or may not reveal all the content hidden behind it. So that the user flow does not come to a standstill, the best practice for icons was followed here and all icons were labeled with text. When designing the bar menu, care was taken to ensure that the minimum spacing between elements was maintained. In contrast to prototype A, the menu is located entirely in the green area of the thumb zone and is easily accessible regardless of handedness.

A/B Testing

The content that is presented in the two prototypes is the same, but certain elements are placed differently and thus influence the physical interaction with the smartphone. The tasks were deliberately chosen to have the participants use and interact with the navigation. In this way, the two different navigation types and layouts could be evaluated.

In addition to three tasks that the users had to master, the System Usability Scale was also used. Left-handed users who tested prototype A rated the usability the worst based on that questionnaire. Based on the SUS scores, a statistical significance between the average scores of Prototype A and Prototype B was found. In order to prove statistical significance in connection with handedness, a larger group of test subjects would have been necessary.

Furthermore, video recordings were used to evaluate in which hand, how and in which position the smartphone was held, but also whether this position changed during the interaction. Attention was paid to whether the test device was tilted from left to right (or vice versa, depending on the user’s handedness) or from top to bottom, towards the thumb joint, in order to better reach certain interaction elements. A change occurred especially when interacting with the menu. From the results of the research and conducted usability test, it can be concluded that the position of important interaction elements definitely has an influence on the posture of the smartphone, the need to change the position, and the user experience.

Left handed users

prototype A: 4 out of 5 users prototype B: 0 out of 5 users

prototype A: 3 out of 5 users
prototype B: 1 out of 5 users

Right handed users

prototype A: 4 out of 5 users prototype B: 0 out of 5 users

prototype A: 1 out of 5 users
prototype B: 2 out of 5 users

The conclusion

Design Guidelines

In the last section of my thesis, the knowledge gained from the research and the usability test has been summarized in guidelines. Primarily, this guide refers to the design patterns, however, a flawless user interface and user experience comprise more than that. The measures described are intended to help designers to create a mobile user interface that is comfortable to use regardless of handedness.

Characteristics of a good mobile menu

Navigation should be simple: Prioritizing content and navigation for mobile applications according to the tasks mobile users are most likely to perform plays a key role. The burden on users’ memory should be minimized by communicating actions and options visually. The navigation should be available at all times, not just when users are expected to need it. The functions must be self-explanatory: users should know at a glance how to get from point A to point B without having to seek external help. Lastly: The navigation system should be constant for all pages; if the position changes, users are quickly confused.
Design for the thumb

Place important elements at the bottom rather than at the top

Placing buttons at the very top goes against the natural flow of reading from top to bottom. Top-placed buttons are often smaller than bottom ones because they have to share space with the page title. Ideally, however, mobile interaction surfaces should occupy as much width as possible, as will be described later in this guide.

Navigation bars usually display menu items at the bottom of a screen. Each destination is represented by an icon and, in the best case, a text label. When users tap on a navigation icon, they are taken to the top-level navigation destination associated with that icon. Such a bottom navigation bar should be used for: top-level pages that need to be accessible from anywhere in the app; for three to five destinations; and for smartphones or tablets only. On desktop devices, web pages should not use this design pattern. Other menu types or laterally positioned bars are more common here and are also expected by users there.

Use the space

Ensure sufficient distance between interactive elements

Responsive design is all about the content. Assuming designers follow the recommended mobile-first approach, this means prioritizing important content for mobile devices and adding more content as the screen size increases. Button design is critical when it comes to responsive design. A button may be easy to click on a desktop, especially using a mouse, but if the click area is too small on a mobile device, users* can easily miss it. Likewise, if there is not enough space between elements, mistaken interactions can occur. The average required interaction area is 44 x 44 px: To improve usability, designers should ensure that buttons and clickable areas fit this average.
Focus on the center

Utilize column width and center content

Responsive design is not just about rearranging text and visual elements so that they are optimized for the device. It’s important to make sure that buttons are easy to see and easy to touch. For touch interaction, it’s important that the entire button is interactive, not just the text. When users* touch the edge of a button, they should be redirected to the relevant content. If possible, important interaction areas should occupy the entire column width in which the content is placed. This ensures a strong visual presence and attracts users’ attention.
Usability Testing

Finally, it is important to acquire a diverse group of participants for usability tests. Diversity usually refers to age, gender and origin as well as other demographic data. In terms of usability, however, it is important to include users with different previous knowledge, impairments, and even habits (such as the posture in one hand or the other).

Client/Context

Master thesis at UAS St. Pölten
Master Digital Design

The thesis project won the 2nd place in the Golden Wire competition 2021 in the category of Graphic Design.

Time

Spring/Summer 2021