The “Focal Button”: A Pattern for Emphasizing Key Features in an iPhone App

As iPhone apps mature, designers are exploring new navigation structures that can support an increasing breadth of content while keeping simple tasks accessible.  There are now many examples of custom navigation, such as TweetBot’s flyout menus and Twitter’s label-less, contextual tab bar.

A budding navigational design pattern that is growing in use is the custom center tab button.  In this approach, app designers centralize their app’s primary tasks or content under the middle-most button of a standard 3- or 5-button iPhone tab bar.  This “focal button” provides a way to indicate and drive users to the primary functionality of the app, allows for top-level awareness of secondary content sections, and doesn’t require as much re-learning as a completely custom navigation design.

To differentiate the focal button from the other tabs, it is typically given a special visual treatment and an action label (ie, “Check In” or “Scan” vs. “News” or “Featured”).  Its visual emphasis helps users quickly recognize the core action they need to take, while its location, directly above the iPhone’s hardware home button, gives it a natural physical reference point.

The technique may have evolved from referencing the iPhone’s built-in camera app, within which the core photo-taking functionality is tied to an oversized, bottom-center camera button. Apple designers selected a very intuitive position for this primary control—right above the physical home button—assuming that users would be very time-constrained and might be looking at the subject matter instead of the screen.

Many apps use a focal button, including Evernote, Instagram and foursquare. In the majority of the apps I reviewed, tapping the focal button pushes the user into a modal path to complete a single task, such as scanning, creating a note, or checking in.  Once the task is completed, some apps return users back to the primary navigation screen, which has been updated with the task’s results.  Other apps continue to keep users in a modal view, encouraging them to explore other standalone paths.  There are also are apps that use a focal button just as another tab content section, so that the tab bar remains persistent and the focal button has an active state.

Below are a few examples of apps that use a focal button, including screenshots of the task or content it leads to.

Interested in creating a custom center button for your app?  Here’s a link to a short tutorial, with code (read the comments for some useful details):  http://idevrecipes.com/2010/12/16/raised-center-tab-bar-button/

Modal: Single Task or Flow

Instagram

Instagram has a simple premise: take a photo and share it with friends.  The focal button is used to activate the camera and photo filters.  Once the photo has been taken, you are asked to add filters and notes, then choose how to share it.  Once that is complete, you are returned to the main screen and can can begin enjoying the other features of the app.

Orchestra

Orchestra is a relatively new app that provides to-do list collaboration, so its focal button encourages you to create a task.  You create a task within one modal screen, including any supplementary information,  and are prompted to return to the main task list when you are done.

Orchestra’s focal button is particularly unique because it offers dual functionality. Tap and release the button to create a task from text entry, or tap and hold it to create a task from voice recognition.

Evernote

Evernote’s content and features are only powerful when content has been added to your notebook, so the “Add” focal button is made clearly visible in the center of the tab bar.  When tapped, a sheet slides up with options for creating a note.  Once the note is saved, you are returned to the main screen.

GroupMe

GroupMe, a chat app, has a multifunctional focal button similar to Orchestra’s button.  Tapping the “+” button will bring up a bubble menu with three options.  You are not moved to a modal, single task flow until you select one of those options.

Socialcam

Socialcam, built by the folks from Justin.tv, is a platform for sharing video content.  With video being the building block of their community, the Socialcam folks created a focal button that drives people to their camera functionality.  After making a recording, you are taken through a few steps for uploading, commenting on, and sharing the video, before being prompted to return to the primary navigation screens.

RedLaser

RedLaser is a barcode scanning and product comparison app.  The focal button opens up a modal camera view. Once an item is successfully scanned, the app returns you to a list of product results within the main view stack.

ShopSavvy

ShopSavvy is another barcode scanning application.  The focal “Scan” button opens the camera, but within this view you can choose other methods to look up your product.  Once a product is recognized, you are automatically delivered to main view.

Pinterest

Pinterest makes it easy to share interesting things, in interesting locations, with your friends.  The focal button delivers you into a short, modal photo-taking flow so that you can quickly capture that unique find and show it to others.

Modal: Multiple Standalone Flows

IntoNow

With IntoNow people organize around TV shows by discussing them, rating them, and finding other fans.  The app also uses your TV viewing history to recommend other shows you might be interested in.

Because the content is so dependent on logging what you watch, the focal button activates a listener to detect what’s on your TV.  Once it recognizes the show, you are automatically checked in as a viewer and taken to the show’s profile in a focused, modal view. The app encourages you to explore within this standalone flow by offering entry points to the show’s discussion and fan profiles.

foursquare

Similarly, foursquare’s check in button provides a quick way to check in at a venue, especially if you’re in a rush to retrieve a coupon or discount.  When the check in is complete, users have multiple paths they can travel within the venue’s profile screen, including user tips and location information.

Tab Section

Tumblr

Tumblr offers several methods for posting to a blog, and it’s not uncommon for members to have more than one blog at a time.  Instead of forcing a bunch of selections to be made within a modal “create post” view, the app designers treat the “Post” area as a standard tab section that can easily be moved in and out of.  But by giving it a little visual oomph and an action-oriented label, they’ve made sure you can easily find it in a pinch.

Mightybell

Mightybell is an activity app that encourages people to get involved with things happening in their community.  While the other four tabs provide ways to find new experiences, the “Act” focal button is where you make and save personalized commitments.