Step by Step Tutorial
This tutorial describes the problem, the proposed solution and the resulting prototype for people who are blind or have low vision to be able to track their fitness metrics using an iPhone app.
There are no iPhone applications that are truly accessible for a user who relies on VoiceOver. This application was built for a person who requires the use of VoiceOver, maintains a very active lifestyle and wants to have access to more information about his workouts, both during and after exercising.
Our approach was to create an iPhone app which connects to a Wahoo Blue Heart Rate Monitor to track time, heart rate, and calories burned for workouts. It provides access to these metrics in the following ways:
- on demand during the workout (accessed by using a two finger swipe method)
- at configurable intervals during the workout
- after the workout with the following options:
- browse all workouts - view a list of all workouts, starting with the most recent, and double-tap for complete information on the workout
- browse by date - locate the workout of a specific date
- browse by metric - view a list of the workout date and only the value of the chosen metric for a quick summary of the recent progression of a metric
- browse by average - view the averages for a chosen metric over several times periods, such as the last month, year, etc...
Notably, the entire app was designed to fit the mental model of a person who is using VoiceOver as well as integrate with iOS's accessibility features.
This tutorial shows how to access and run our iOS app. It requires the following:
- iPhone with iOS 7 or later
- Wahoo Blue Heart Rate Monitor (Bluetooth 4.0)
- a Mac with Xcode 5.0 or later.
- Apple developer account
Here are three videos which show our final prototype being used for each of three options presented in the home screen.
To add some clarity, each of these three workflows in the application are presented here and explained in more detail.
From this screen, the user can select through which workflow to proceed. At the end of each of these workflows, the user is returned to this home screen.
Here are the three different workflows, which each proceed linearly from one screen to the next.
This screen allows the user to choose which metrics are read aloud during the workout. Choosing "Next" proceeds to the following screen.
The "Next" button is placed in the bottom right so when a VoiceOver user progresses through the page, it is read as the last item. If it were placed in the top right, the user would have to scroll through the entire page, adjusting their settings, then scroll all the way back to the top to access the "Next" button.
This screen allows the user to choose how often the metrics are read aloud during the workout. Selecting "Start Workout" then begins a new workout and brings the user to the next screen.
This is the screen which is shown during a workout.
It states the heart rate monitor is not connected because these pictures are taken in the iOS simulator through which the heart rate monitor cannot connect. To see an example of the screen with a working connection, see the videos above.
Pressing "Pause Workout" stops the timer and changes its text to "Resume Workout". Tapping this again similarly starts the timer again and changes back to "Pause Workout"
Pressing "End Workout" causes a confirmation dialog to appear to avoid accidental endings of workouts.
If "Definitely End Workout" is selected, it proceeds to the next screen.
This screen allows the user to see a summary of their workout and choose to discard it or save it permanently.
Again, please refer to the aforementioned videos to see realistic values for the metrics.
Pressing "Delete Workout" results in a similar confirmation dialog to end workout, again implemented for safety reasons.
Pressing "Save Workout" simply saves the workout.
When either button is pressed and confirmed, the app then proceeds back to the home screen, completing this workflow.
If "Use Last Workout Configuration" is selected from the home screen, the following screen is shown.
This app stores the most recently used workout configurations and summarizes them on this screen.
The user can then choose to go back to the home page, edit his/her configuration settings or start his/her workout using this configuration, which leads to the workout screen as described above.
If "Review Previous Workouts" is chosen from the home screen, the following screen is shown.
It provides four different ways for the user to review previous workouts they have done. We now explain each one in turn.
This screen simply shows all the workouts completed, most recent first.
Selecting any of these workouts proceeds to the following screen.
This simply shows the summary statistics for that workout.
This option first brings the user to the following screen:
The user may then select a date and proceed to the next screen, which is exactly the same as the "Browse All Workouts" screen, except only the workouts performed on that date are shown.
This allows quick access to the value of a chosen metric for recent workouts.
First it allows the user to select a metric.
Then, the user is presented with a list of workouts, most recent first, which includes the date and value of that metric for each date.
This allows quick access to the average value of a chosen metric over several different time frames.
The user is prompted in the same way as "Browse By Metric" to choose a particular metric.
Then, a list of time frames and the average for that time frame is presented in the following screen.
This concludes the description of this app.
The app was designed with accessibility in mind to ensure that VoiceOver could properly read the labels. Accessibility labels were modified to make the behavior of UI elements clear to the user. The buttons and other texts were specifically edited to include accessibility labels so the text read by VoiceOver would match what was visually presented on the screen.
Buttons were relatively straight forward in terms of what accessibility labels should be added. The app also accounts for the changing components such as when the timer increments, the on-demand reading would match what the screen displays. The timer also reads the time in the appropriate minute and second units so instead of saying "0:45:31", the app is designed so that VoiceOver will read out "45 minutes and 31 seconds."
After a bit more polishing and clean-up, Team Jonathan hopes to make this app available in the App Store. In the meantime, here are instructions on how gain access to the iPhone app yourself.
First, clone this repository.
git clone https://github.com/jdhenke/ppat.gitThen in Xcode, choose File, Open, navigate to the ppat directory you just created, select the ppat directory itself and select Open.
This will open this project in Xcode.
To run this app in a simulator, you must first comment out this line. The simulator is unable to connect to remote Bluetooth devices.
To run it on your iPhone, you need an Apple Developer account. Then follow these instructions for testing your app on physical iOS devices. (official instructions from Apple [here] (https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW1)).
After you have installed the app on your phone via Xcode, the app will be available on your phone for the next 30 days.
Now, strap on the heart rate monitor and begin tracking your fitness!