TÄKO: UX/UI Accessibility Alarm Clock App Design

Dasi Fletcher
Sep 9, 2018 · 8 min read

Many of us blessed with the gift of sight often don’t realize the struggles the visually impaired face with many every day products. I decided to reflect on the way that I interact with things visually in my life and I kept thinking of different solutions that I could implement if I were visually impaired.

Accessibility in design is not something many designers gravitate to, but I thought it would be a great topic to explore.

I have decided to design an alarm clock application for the blind or visually impaired.

Challenge

In a world where effects, typography and eye catching color dominates applications, the main challenge was to focus on accessibility rather than aesthetics.

Obviously a blind or visually impaired individual cannot see, so the other senses such as hearing and touch would be the main area of focus.

Design Process

Empathize

We live in a highly digital society. Most of us are on our phones, laptops, and tablets constantly. But, what if you’re blind? Are you able to take part in this screen facing society?

For this phase, I really wanted to empathize with the user. I wanted to understand their needs and pain points. I decided to perform secondary research and an ethnographic study.

Secondary Research

Most of these statistic were gathered from online publications and scholarly articles.

Facts

  • People who are blind or visually impaired can and do use electronic devices just as much as sighted people.
  • Blind or visually impaired people use assistive technology
  • Assistive technology can include screen readers, braille displays, and digital screen magnification. Screen readers give audio feedback. Braille displays are an electronic way of reading braille. It is connected to a device and can be read with a finger.
  • There are also many hand gestures that are performed to do various tasks on a phone or tablet. Apple iOS has a built-in software called VoiceOver.
  • Using VoiceOver, you can triple-click the home button to access it wherever you are in iOS. You hear a description of everything happening on your screen from battery level to which app your finger is on.
  • VoiceOver also allows you to tap the screen three times on the screen to let the device know you want an audible indication of where you are on a page. Tapping twice on the screen selects the link or item highlighted.
  • An interesting feature of VoiceOver that I will take into consideration for this app, is the text input. Each character on the keyboard is read aloud as you touch it. A flick up or down moves the cursor so you can edit text.

Ethnographic Study and Interview

I adjusted the accessibility settings on my phone and turned on the VoiceOver feature. I also went through my day as if I were blind and wrote down everything I tried to do and had difficulties with. Needless to say, vision is a privilege that we often forget to be grateful for.

I also decided to work with and use Google Assistant, the TechCrunch Chatbot on Facebook, and the bots on Slack.

Main Issues with Chatbots

  • Google Assistant: Items are hard to use. VoiceOver reads are confusing and not interpreted correctly.
  • Facebook Chatbot: VoiceOver cannot recognize many UI components. Some text messages were ignored since VoiceOver wasn’t able to read. Images were just seen as images, the user received no sort of description.
  • Slack: VoiceOver can’t recognize buttons. This blocks the interaction.

Accessibility Needs

  • Brightness and Color
  • Tracking
  • Perceiving
  • Spacing for Reading
  • Identifying Elements
  • Point of Regard and Proximity
  • Work with User Settings

Pain Points

  • Difficulties navigating outside accustomed spaces
  • Social Challenges
  • Blindness effects a persons ability to perform many job functions, limiting career options. This can affect their finances and self esteem.
  • Difficulties using the internet, relying on a screen reading software means having to listen to audio, meaning things can’t always be private.
  • Surfing the web can be slow and cumbersome.
  • The small touch screens and lack of buttons make it difficult to navigate a telephone.

Define

Persona

After reading and understanding blind and visually impaired user’s journeys with technology, I created a persona. By having this persona, it helped to create a product that would work for these individuals specific needs.

Defining the Problem

  1. How will the user know when the app has been successfully opened?
  2. How will the user be able to easily set an alarm and be confident it has been successfully set?
  3. The app is not just for the blind, but also for the visually impaired. A specific color scheme and font style will need to be set.
  4. How can the user easily performs tasks within the app?
  5. How will the user easily turn off the alarm?
  6. How would a blind person use a chatbot in conversational UI? How would he/she interact with it?

Designing Solutions

  1. Noise Indicators: Once the application has been opened a brief ding or vibration of the phone will occur.
  2. Messaging and Conversations: The app can introduce itself and state it’s intentions. “I will be setting your alarm, would you like to set up a time now?” (The user can tap twice to indicate yes, according to VoiceOver)
  3. Accessibility Standards: Follow the Accessibility WCA-AAA standards for color contrast.
  4. Gestures: Gestures will be used to perform tasks. Ex. Press and hold screen to begin conversation with TAKO, double tap screen for yes, triple tap screen for settings…etc.
  5. Tapping of the screens or simply speaking with the app will allow for this to occur.

Ideate (UI Design)

The alarm product should feel friendly, reliable, and functional.

Style Guide

Before beginning to wireframe, I like to create a style guide to get the overall feel and sense of UI direction that I will be using for the prototype. I wanted to choose colors that reminded me of waking up and of happiness.

Wire Flow

In a wire flow, I combine a low fidelity wireframe with a user flow. The notes allow me to explain why I made certain decisions.

Conversational UI

The most important part of this app design is the Conversational UI. It’s less about the aesthetic design of the app and more about the design of the chatbot and it’s non-linear script. The following need to be considered for conversational UI’s.

  1. Outline: Outline all of the natural conversational flows to meet an end goal. The more flows you have the better the communication will be for your user.
  2. Main Flow: The main user flows to complete the goal of the chatbot. This should be about 1 to 3 main flows. (Ex. Setting an alarm, Changing the sound…etc)
  3. Hello’s and Goodbye’s: How the bot will make it’s first impression on the user and the user’s exit experience.
This is an example of a couple conversational outlines.

UI for visually disabled

The American Foundation for the Blind provides tips which I’ve added below to making print more readable. I have incorporated their tips into the design.

  • Print Size: Large print should be used, preferably 18 point, but at a minimum 16 point.
  • Font Type and Style: The goal in font selection is to use easily recognizable characters, either standard Roman or Sans Serif fonts. A good choice is Arial.
  • Avoid decorative fonts.
  • Use bold type.
  • Avoid using italics or all capital letters.
  • Use of Color: When using different colored lettering, dark blues and greens are most effective.
  • Contrast: Contrast is one of the most critical factors in enhancing visual functioning, for printed materials as well as in environmental design. Text should be printed with the best possible contrast. For many older people light lettering — either white or light yellow — on a dark background, usually black, is easier to read than black lettering on a white or light yellow background.
  • Leading: The recommended spacing between lines of text is 1.5, rather than single space. Many people who are visually impaired have difficulty finding the beginning of the next line when single spacing is used.
  • Tracking: Text with letters very close together makes reading difficult for many people who are visually impaired, particularly for those who have central visual field defects, such as older persons with macular degeneration. Spacing between letters should be wide — for example, a mono-spaced font such as Courier, which allocates an equal amount of space for each letter, is very readable.

Mid Fidelity Wireframe

As per the UI guidelines for the visually impaired from above. I made the Size: 16pt, Font: Roboto Medium, Leading:19, and Tracking:1.1.

Prototype

Once I was ready to create the hi-fidelity wireframes, I took my previous wireflow and mid-fidelity wireframes to develop hi-fi wireframes for my prototype.

I designed this much differently than I would most apps. Some of the main design choices are listed below:

  • The text is scaled to be around 30% larger.
  • The recommendations by The American Foundation for the Blind for leading and tracking were followed.
  • Fewer screens and no hamburger menu to reduce complication.
  • Everything can be accessed by chatting with TAKO, so the main emphasis is on the chatbot.
  • Added icons and highlighted the text that’s being read to make it easier for visually impaired users.
  • Blind users have the option to double tap to speak.
  • The color contrast passed the Contrast Ratio for Accessibility.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade