App ideas follow us around everywhere. I went to the salon last month and heard about my stylist’s “money maker” idea. At a friend’s house last week I heard yet another app idea. My neighbors have app ideas. Perfect strangers tell me their ideas as soon as my job description has left my lips. Heck, even I have an app idea or two.
Recently someone told me about their great idea to sell a product online. “It’s already being done,” I said, somewhat apologetically. “Well, there went another chance for me to make millions!” she replied.
If it were that easy, the world would have a lot more millionaires. The thing that stands between ideas and dollars is the execution, details, and hard work.
Much of that hard work is centered about business plans and practice, marketing, forecasting, team building, and investment. But the other side of careful execution is the details of the product itself. It’s these details that I want to address here.
The problem with iOS is that it is nearly boundless. It may be restricted by a small screen, but that’s about it. This open range of possibility creates a free-for-all that Apple’s Human Interface Guidelines (HIG) try to rein in. Similar to fine art, you have to know the rules before you can break them.
Let’s look at some of the common deviations and the iOS outlaws who boldly make them (and some with success!).
Tiny Taps
The recommended tappable region in iOS is 44 points. Remember, tappable region doesn’t mean the size of a graphic element. It refers to the area on and around the button (or other graphic element) that should be responsive to touch.
The CNN app features a very slim bar for its main subject headings that’s about 32 points. When using the app, though, you realize that the tappable region actually extends a good deal below the menu options. When an article title slips partially beneath the header, as shown, that article becomes inaccessible (in other words, the menu wins out).
The Muslim Pro app does not break the rule quite so well. You can see the tappable region for their font chooser (the “tT” icon) is quite small, about 21 points. The tappable region doesn’t appear to be larger than that, at least not by much, which makes this a difficult interaction.
Creative Navigation
Apple created the tab bar for the bottom of the iPhone screen so that there would be a consistent organization of subtasks, views, or modes. It’s created for a maximum of five tabs and is always connected to the bottom of the app when it’s visible. Things are more flexible on the iPad.
Below are two examples of apps that break convention from the tab bar.
In the Daily Burn app, the navigation features an assisted scroll button in hopes that you won’t miss the seven other items below the fold. Interestingly, Daily Burn used to use a tab bar but chose to replace it with this method.
Muslim Pro’s tab bar (shown above) is twice the height of a normal tab bar, but collapses itself when viewing a sub screen. Having the tab bar visible at all times is ideal, but isn’t usable when it’s twice the height! Once it’s expanded, you must tap into the content area of the page you’re on to close the navigation if you don’t want to leave the screen you’re on.
Both of these options exist to solve the problem of too many important tasks and tools. It is like adding top level links to a global web navigation instead of thinking through a content structure that would make content easier to find. It might be workable, but it’s not the most efficient or helpful for the user. If everything is at the top, nothing is!
Focused Modal Tasks
“Keep modal tasks fairly short and narrowly focused. You don’t want your users to experience a modal view as a mini application within your application. Be especially wary of creating a modal task that involves a hierarchy of views, because people can get lost and forget how to retrace their steps. If a modal task must contain subtasks in separate views, be sure to give users a single, clear path through the hierarchy, and avoid circularities.” -Apple’s HIG
It is tempting to burden modals and popovers with too many options, settings, and tasks in order to keep the main app navigation slim and tidy.
NightStand is an app that keeps its main screen extremely streamlined. Its basic functionality is quite helpful (an alarm clock that can wake you up to music). Setting up the app, however, turns out to be complicated. Let’s take a look at the steps needed to add music to your alarm.
This painstaking process becomes more frustrating because it’s on an iPad, where there is plenty of screen real estate that could be used. A modal popover like this one can be very helpful for small tasks, not the full functionality of an app.
Breaking from Standard Controls
There are two ways to go off the map here: make your own controls in place of Apple’s provided elements or misuse the Apple controls. Here we’ll focus on CraigsPro’s creation of custom controls:
CraigsPro offers something that is hard to find: browsing Craigslist by photo. It’s really useful! As you can see, though, they have left no interface element untouched. Apple makes it clear that if you are going to change their standard controls, your solutions need to be of the same quality:
“As much as possible, you should use the system-provided buttons and icons to represent standard tasks in your application. Before you create the art for your icon, you need to spend some time thinking about what it should convey. As you consider designs, aim for an icon that is:
- Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.
- Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.
- Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.”
-Apple HIG
There are other app veterans, like the TweetBot crew, who create custom controls boldly and successfully. TweetBot implements many custom icons and new types of interactions, but it also builds on a foundation of tried and true elements (like the tab bar).
I’d encourage anyone serious about turning their unique idea into a successful product to:
- Spend some time familiarizing themselves with the HIG before departing from its guidelines
- Download and use successful apps that are breaking the rules elegantly
- Get feedback from peers who are doing similar work
- Test your app with real people before launching it
If you take these steps, you’ll have built a really strong foundation for your new product. Good luck!
Emily SmithEmily Smith is an information architect and usability consultant for the web and Apple devices. She co-works with other web professionals in Greenville, SC and can be found online at emilysmith.cc.
