Lefty Mode
What does it take to design a new accessibility tool for a marginalized demographic? Addressing reachability with Lefty Mode.
Format: Mobile App
Research: Competitive Analysis, User Surveys, Cognitive Walkthrough, Usability Tests, Accessibility Audit, SME Interviews
Tools: Figma, Excel, Zoom, Google Slides
Group or Solo Project: Solo
Executive Summary
Problem-Space
Lefties have been left out in the mobile space. As mobile devices have continued to get bigger, physical buttons and UI elements have been pushed farther away from a person’s natural reachability, and left-handed people have been particularly affected. Nearly 80% of all UI elements on mobile websites are placed in areas more difficult to reach for lefties than righties. Most lefties aren’t even aware that their mobile devices are not designed for them.
Solution
After conducting user surveys, a cognitive walkthrough of mobile sites, and a competitive analysis of mobile apps and browser extensions, I designed a mobile browser extension called Lefty Mode that, when enabled, moves UI elements on mobile websites into the reachable areas of the screen for left-handed mobile device users. Lefty Mode is designed to be quickly enabled, easily reversible and customizable for the user.
How Did We Get Here?
Lefty Mode was conceived as a solution to the problem of reachability for lefties in the mobile space, and I was confident that the solution had merit. However, it was prudent to conduct some preliminary research before moving into a design phase. I elected to use the following research methods: User Surveys, Cognitive Walkthrough, Competitive Analysis, and SME interviews. Once design had begun, I then also conducted Usability Tests and an Accessibility Audit before final prototypes were completed.
Initial Research
I first performed User Surveys of left-handed individuals to gain insight into their mobile device habits, including how they usually hold their devices, whether they have reachability issues, and whether and how they adapt to problems with being left-handed. I found that over 60% of respondents had reachability issues with their mobile device, and two distinct mental models emerged: some lefties have resigned themselves to the fact that the world is not built for them and adapt to using right-handed tools, while other lefties actively search out solutions to improve their lives. I used those findings to build three proto-personas, based on the mental models gleaned from the survey responses as well as an accessibility-based persona of someone who has lost the use of their right hand.
Next, I did a Cognitive Walkthrough of nine mobile websites to determine where important UI elements (menus, login buttons, carts, etc) were placed on the screen. I found that while there is a general reachability issue with UI elements being placed at the top of the screen where they are hard to reach for everyone, nearly 80% of the most important UI elements are placed in the upper-right side of the screen, which is particularly difficult for lefties to reach.
I also performed a Competitive Analysis of mobile apps and browser extensions to see what the competitive landscape offers for lefties, and I found very little on offer. While there are some apps available for smaller widgets like calculators and keyboards, there exists no product on the market that I could find that improved reachability for lefties.
Finally, I consulted a software developer to determine what the technical difficulties and limitations would be in making Lefty Mode work. In brief, we determined that moving UI elements on a mobile website is feasible, but could crash the page if not done carefully. The developer suggested I restrict the movement of UI elements along the axis of the navigation bar they reside in.
Design and Features
Lefty Mode has been designed principally as a mobile app for the iOS platform that operates as a browser extension for Safari. It features three main modes:
Auto Mode
Automatically moves the most important UI elements to the left side of the screen
Yellow boxes highlight the UI elements that have been moved and disappear after a few seconds
The user can choose how long the yellow boxes remain persistent
Flip Mode
Flips the entire screen horizontally from left to right (except for image content and text)
A popup notifies the user that the screen has been flipped when it is first enabled
Custom Mode
Allows the user to move UI elements by tapping and dragging them
Elements are confined to rows of colored boxes, and can only be moved within those boxes
User is given a tutorial of Custom Mode upon first use
Lefty Mode also allows the user to save their settings on any page they visit, and provides some other customization options.
Lefty Mode can be accessed and enabled three ways:
Tap on the app icon to access, enable and customize Lefty Mode
2. Swipe down from the top of the screen to access the pulldown menu, then tap on the widget to enable or disable Lefty Mode. A long press will give the user access to the three modes as well as the save page button
3. Perform a long press of the app icon to quickly access the modes and save page button
Interactive Prototype
An interactive prototype of Lefty Mode, operating on the facebook web app, was designed in Figma for the purposes of user testing and presentation.
Further Research
An Accessibility Audit was conducted with an accessibility expert to establish the value of Lefty Mode as an accessibility tool in general, then examine the interface and ensure accessibility best practices were followed. The value of Lefty Mode was determined to be sound and recommendations were made for minor improvements to the interface.
Additionally, a series of Usability Tests were conducted using the interactive prototype to determine a) what pain points currently exist in Lefty Mode that need to be ironed out, b) how useful each of Lefty Mode’s features are, and c) if the users can identify any features that are missing that would be desirable or necessary.
The results showed that overall, Lefty Mode’s feature set and usability are robust. Users responded positively to the different modes and were pleased with the ease with which they could enable, customize and reverse Lefty Mode. The most glaring pain point was a lack of feedback for enabling modes and saving pages, particularly with complex web pages where the changes might not be immediately apparent.
Updates were made to Lefty Mode to improve feedback, including by adding popups after enabling Lefty Mode to briefly explain to the user what they had done, as well as a persistent badge in the browser’s search bar that appears when Lefty Mode is enabled.
Next Steps
Lefty Mode is, at heart, a passion project and my ultimate goal is to partner with a full-stack developer, turn Lefty Mode into a real product and release it into the world. I am adamant that Lefty Mode should be a free experience with no ads or paid premium content, and my long-term vision is for Lefty Mode to push the rest of the mobile industry into adapting it for their platforms, be it large third-party apps like Google Maps and Instagram or mobile device operating systems.
In the short term, I am planning on developing an onboarding experience for new users as well as a prototype for an Android-based platform. Then, I will begin looking for a developer to partner with.