Determining placement of standard components...

In designing placement of components of our app interface, we should first understand what is required of us and should be placed in a specific location without compromise in all situations. Apple has established their Human Interface Guidelines, which detail procedures and specifications that must be followed by all applications and our work could get rejected by their review team if we decide to disobey these recommendations.

The most important thing to keep in mind with touch is that we should follow Apple's recommendations on placement of common UI elements. Essential elements such as the Navigation Bar and Tab Bar are placed on the top and bottom of the screen respectively for a reason. The high placement of the Navigation Bar serves the purpose of giving title and context to the information that is directly below, allowing us to move throughout an expansive table of information easily, much like thumbing through a stack of papers on a desk would be much simpler if the top of each page had an accurate title.

The Navigation Bar's placement anchored to the bottom of the screen allows for easy movement throughout multiple modal views without ever obstructing important information on screen with our finger. With just a quick touch, we can quickly swap between two or three important pages of data.

Not to be confused with a misplacement of the Navigation Bar in the Tab Bar location, many apps such as Maps or Calendar place a Toolbar anchored to the bottom of the screen that looks nearly identical to the Navigation Bar. As shown in the next screenshot, the two look similar but serve different purposes:

Calendar - ? 2007-2011 Apple Inc.

The Navigation Bar allows the user to navigate through vast tables of information either forward or backwards quickly. Anchoring a similar Toolbar to the bottom of the screen for various settings, as we find in Safari, allows for users to quickly manipulate data on screen with clear buttons. We should be sure to follow these established conventions with regards to navigation.

Action sheets can often be implemented in an app upon pressing an item in the Toolbar. Action sheets offer quick and temporary choice between several different options. For an example of an action sheet, open Safari and tap the plus icon located in the center of the bottom Toolbar. As shown in the next screenshot, this option brings up three temporary choices that can be quickly chosen by the user:

Keyboard placement anchored to the bottom of the screen is also a necessity for interface development. Whereas the software keys are not physically responsive to the press like the keyboard on our Mac or PC, the placement of each button becomes a trained response much like a tactile device. Custom keyboards in general can be a detrimental decision for our application in nearly every situation. Their sizing will confuse our users and be unnatural in comparison to every other keyboard on the device, leading to an unnecessary learning curve that causes frustration.

Picker views for date or different selection options are sized to fit into the same size of the Keyboard and should mimic placement conventions of the Keyboard as well. Whenever we implement this option, it should be anchored to the bottom of the screen and only be displayed when necessary.

Clock - ? 2007-2011 Apple Inc.

As demonstrated about with the Clock application's alarm feature, Picker Views are expected to be anchored to the bottom of the screen and we should follow this guideline when implementing the control in our applications.

With regards to placing significant text and data on screen for our user, we should create conventional typography that preferably aligns flush left, at a size that is easily legible to the user. In creating labels or bodies of text, we'll often be using code similar to this:

cell.textLabel.font = [UIFontfontWithName:@"HelveticaNeue-Bold" size:17];

Correct text size is a subjective metric depending upon our audience and typeface, so it may often be helpful to provide multiple sizing options to our users when possible. If using a common font like Helvetica, we should try to make our text size 16 or larger if we want our work to be easily legible.

If we feel unsure about proper placement of a specific user interface element on screen, it is best to follow Apple's lead on whatever we're doing. Using Apple developed applications that come pre-installed on our iOS device is the best way to experience quality examples of how interface elements should be properly placed.

There's more...

If we're looking to create a mobile webpage for our business or personal website, there are several basic web principles that we should be cautious of during our development. Here are a few tips for producing exceptional mobile HTML.