By Adam Houghton, Principal Developer
Mobile applications are powerful because they are so portable. Devoted iPhone and Blackberry owners carry their devices everywhere. I’ve been known to forget my keys and I accidentally drove most of September without a license, but I never leave home without my iPhone. The emergence of location-aware, carry-everywhere mobile devices is ushering in the next great computing platform. The Internet on my desk is occasionally useful; the Internet in my pocket is always useful.
But for a mobile software developer, portability brings a new set of challenges. Traditional desktop applications like Quicken or iPhoto are run on big screens in homes and offices with a user’s undivided attention. iPhone users don’t sit at desks – they’re more likely to launch apps while waiting for a taxi on a rainy street corner. And whether it’s powered by RIM, Apple, or Android, a phone’s screen is highly reflective and usually smaller than a deck of cards.
Case Study: ForeFlight Checklist
At ForeFlight, we develop iPhone aviation apps. Pilots use ForeFlight Mobile, our flagship app, to check the weather report for the day’s flight during breakfast or file a flight plan from the airport terminal. In September, we introduced our second iPhone application: ForeFlight Checklist – Intelligent Aviation Checklists for Pilots.
Before releasing Checklist, we took it on quite a few test runs, constantly redesigning and tweaking the user interface to make it a natural fit in a pilot’s workflow. ForeFlight Checklist 1.0 received a fantastic reception, and as pilots have started using it out in the field, we’ve heard some great suggestions for new features. Two items in particular kept coming up, and illustrate the wide variety of environments and usage scenarios for mobile applications.
Scenario 1: Sunny Runways
The common use case for ForeFlight Checklist is running through a preflight checklist out on the runway. Each aircraft type has a customized list with dozens of items to check, such as verifying the tires are inflated and the fuel vent is unobstructed. Here is a preflight checklist for a Cessna 152 as seen in ForeFlight Checklist 1.0:
You can check an item by tapping it directly, or by tapping the green ‘Check’ button on the bottom. Pilots can consciously skip an item by tapping the yellow ‘Skip’ button. The table automatically scrolls the active item to the center and highlights it with a yellow background (“Fuel shutoff valve”). This, along with clearly defined indicators once a list is complete, keeps you from accidentally missing an item on the list.
After using Checklist out on the runway, a few pilots emailed us with an observation: the selected item was hard to see on a sunny day because the yellow background got drowned out. If you were wearing polarized sunglasses (a common scenario for pilots), it was even harder to see.
The solution for this was easy: change the background of the selected item to provide better contrast. We already had written code to special-case the background color, so we changed the color to blue (the standard iPhone color for indicating selections) and lightened the text color. Here is the same screen in ForeFlight Checklist 1.1, with a better contrasting background on the selected item, “Fuel shutoff valve”:
Scenario 2: Night Flight
Another handful of pilots emailed us with feedback on an opposite problem: when using Checklist in the evening, the app’s white background shone super brightly and was hard on the eyes. Even with the iPhone’s brightness setting turned all the way down, it was too bright.
To help out these pilots, we created “night mode“, a new color scheme available in ForeFlight Checklist 1.1. Inspired by the excellent Bloomberg iPhone app, night mode uses a black background with orange, gray, and white text. To ensure it’s easy on the eyes, while writing the code for this feature we actually turned off all the lights in the office and worked in the dark! Here’s a screenshot of the same Cessna 152 preflight checklist under night mode:
To toggle between night mode and the classic look (now called “day mode”), we added a new sun/moon icon on the bottom-right of the main screen:
If a checklist item has additional notes, a right arrow indicator is shown (e.g. “Rudder gust lock” and “Control surfaces” in the screenshots above). Tapping the arrow brings up the item detail screen, as shown below. Unfortunately, when creating night mode, this screen presented a challenge. Under day mode, the screen uses the iPhone’s “Grouped Table View” style, with floating white cells on a blue background. (This is familiar to anyone who has used the iPhone’s Contact app.) Unfortunately, this can’t be styled with a black background – it has to be white on blue. Instead, we created a new screen using the iPhone’s “Plain Table View” style, which doesn’t have floating cells and allows for a great deal more customization. (This style is used by Apple’s Mail app and Phone app, and is also the primary table view used elsewhere in Checklist.)
Here is the detail view under day and night mode for checking the Cessna’s RPM lever:
Creating night mode took quite a bit of work, but we’re very pleased with the outcome. Everyone on the ForeFlight team now uses it as their primary interface for Checklist – even during the day!
Know the Environment
When creating mobile applications, it is important to know your users. Whether it’s a sunny runway or a foggy afternoon, an iPhone app should feel at home in any environment.