APP
DESIGN
OF
BLINDNAVI

ProcessUI usability rulesUX design for key featuresRules of navigation messageDesign around scenario

4 FEATURES

To get prepared for outing, informations like address, phone number, complex route or transfer plan, bus information, and further details of destination are necessary. However, to the visually impaired users, the process to get all those scattered information means going through a lot of apps and websites that are not compatible with VoiceOver usage pattern. This makes the entire searching process time-consuming and frustrating.

The 4 features, 1.Find Address & Phone Number; 2.Route A to B; 3.Where Am I; 4.Route Record, are the steps you will be going through when visiting an unfamiliar place. It covers the entire experience of outing.

SEARCH

NAVIGATE

SHARE

STORYBOARD

Persona & user scenario develop from research findings.

USABILITY RULES for the BLIND

Base on the insights of the unique VoiceOver usage pattern, we listed some principles of designing the mobile app interface for visually impaired users.

READING FLOW

This is the common reading flow for sighted user we see in many apps.

Sighted user can skip irrelevant information at a glance, while VoiceOver user can not. The VoiceOver cursor moves along a certain path that causes visually impaired user has no choice but to go through everything on the screen.

So the best way to display information for visually impaired user is to conform with the VoiceOver reading flow, which should be straight and simple.

SCREEN LAYOUT

1. The area of each object on the screen should be big enough so it would easier for fingers to touch.

2. Do not stuff too many elements into a single block. And leave enought space between each block. This can prevent user from inadvertently trigger something unintended.

3. Every object should be attached to the edge of the screen in case the VoiceOver user who browse by dragging gesture miss any information.

4. Break a long-paragraph text content into smaller chunks can sharply enhance the browse efficiency for the visually impaired users. Instead of forceing them to wait for the intented messages showing up, let them decide wether to skip this piece of information or not while browsing.

Our interviewees also suggested that it’s better to place important buttons around the edge of the screen. Unlike feature phone, smartphone it doesn’t have any tactile feedbacks. So when you put the buttons around the edge, they can have a tangible reference to locate those virtual buttons.

APP LAYOUT

TABLE VIEW DESIGN

The visually impaireds are users who heavily rely on their old habits. So, the simplest design is always the best for them.

Those insights lead us to the Table View structure design. It is just like a scrolling list with a single column, which is flat and easy to navigate. Users can browse the entire screen with both swipe or drag gesture. It also makes the information more accessible to the visually impaired users.

PHONE & ADDRESS

LESS TYPING

Switching between apps and text input on mobile device are time-consuming. It has become the main reason why the visually impaired prefers to search information on PC.

Problems include: 1.Select each alphabet on keyboard is slow; 2.Speech input may occur errors that requires modification; 3.The VoiceOver gesture of copy paste is not always functional.

Obviously, what we can design here is to simplify the complex procedure. Reduce the chance they switching between different apps and series of screens.

We want to provide a seamless in app experience without interrupting the user flow. So here if he tap twice on the phone number, he should be able to make a direct call. If he tap twice on the address, he will go straightly to function 2: Route A to B.

ROUTE A TO B

MICRO LOCATION INFO

Some of the terms (like east, west, north, or south) used in current navigation instructions are too abstract to imagine for the visually impaireds. Here, BlindNavi provides the micro location info to our users. They are described in a way close to the orientation & mobility training experience.

DESIGN AROUND SCENARIO

Route A to B is the most complicated feature in BlindNavi. We’ve encountered with a lot of information display problems when designing the task flow. The search result of "transportation methods" contains a lot of informations at different levels of detail. So the question is, how to present all those information on the screen? After many rounds of interviews and comparison with other navigation apps, our final conclusion is to design around “time”. Provide the right information at the right timing and separate them to different screen.

TIME + VEHICLE

ITINERARY OUTLINE

ROUTE DETAILS

NAVIGATION MODE

BROWSE, CHOOSE

On the 1st layer, user’s intention is to choose 1 among all those options. So the design should be able to help them quickly browse between options.
At this point, the only thing they need to know is what kind of transportation vehicles are involved & the total time cost of each option.

PREVIEW DETAILS

Once the decision has been made, users will be lead to the next layer. To this point, they would like to know more about their decision. So it’s a good timing to provide the itinerary outline & the step by step route details they’ll be going through on this screen.

FOLLOW, BEING GUIDED

And when they’re walking on the streets, they can turn on the the navigation mode. This is when, users don’t want spend so much time on the screen. They just want to follow the instruction n being guided.
So, BlindNavi will only show the instruction of user’s current location, which basically is the description of surroundings that helps to locate the user and identifies which direction to go.

WHERE AM I

GESTURE SHORTCUT for IMMEDIACY

Simply shake the phone whenever you feel uncertain or get lost while walking. BlindNavi will tell you where you are, including the precise address and the nearest MRT or bus station.

“Current Position” is the most most frequent used function while navigating. So it's important that user can access this info in a very easy way.

ROUTE RECORD

CUSTOMIZED ROUTE RECORD TO SHARE

Each individual has their own way to memorize the route information. However,it’s hard to remember all the details on the road. Only fragmented memories left after going home. Not to mention review the route again or share those experience to help others.

We've discovered there’s huge need for information preserving and sharing.  BlindNavi saves the route you’ve walked automatically for you to review. 2 taps on the spot to add your own memo to the place. And of course, It can be shared to your friends!