Navigation! Navigation! Navigation!

Posted on Sep 04, 2012 by Forte Group in Technology News, Mobile Development, Forte News

Not too long ago, when a business owner would set up shop, the mantra was “Location! Location! Location!”  In the ever expanding online world of today, location is relative and navigation is everything. Like most Americans, if you own a smartphone, you can buy stilettos on the train or purchase a new tennis racquet while waiting in the bank line. No longer limited by physical space, location has become supplanted by navigation and accessibility. Mobile app popularity is highly dependent on consumers. In a recent interview with Wired magazine, Android Design Chief, Matias Duarte, stated in regards to Android’s new platform Android 4.0: Ice Cream Sandwich, “In computer ecosystems, the public decides how successful applications will be after they hit the market.” Responsive web design dictates a mobile app’s success rate. Because smartphone users are as varied as the smartphones themselves, it is important to create apps that are flexible and respond successfully to all platforms and users. The most important factors attributed to an app’s success are comprehensible navigation and usability.

Navigation Improvement Tips: In order to create a successful and responsive mobile app, developers should keep the following guidelines in mind:

Cell Phone Specs & Physical Limitations

Phones vary in their resolutions: the resolutions range from 128x160 pixels in less advanced phones to 480x800 pixels in higher end models. In addition to resolution variance, phones vary in width (which can be accounted for easily in the html code).

The Windows Phone UI and Interaction Guide identified 8 pixels as the standard size between selectable elements in mobile apps. White space is a great way to create space between selectable elements in addition to increasing readability.

Apple identified 44 pixels (44x30) as the minimum acceptable size for finger-selectable elements on touchscreen smartphones. It is recommended that icons replace traditional links on mobile apps due to limitations in finger dexterity and size.


A single column layout that fills the entire screen width is best so that the user doesn’t need to zoom in/out to read the text.

Keep phone width in mind. Ensure that your user is not required to scroll horizontally to read more information or access navigation bars. Here are some tips for creating an effective navigation bar:

-Navigation bars should have no more than 5 options. Create sub-navigation if necessary.

-Only place navigation bars and site searches on the homepage and leave content for others.

-Navigation bars at the bottom of the page are effective if there is an anchor link at the top of the page for quick access.

-Navigation bars displayed in a drop down link format are also favorable.

Place “Back” buttons on all pages for quick access to the homepage.

Use button-style icons rather than standard links.

In order to keep vertical scrolling to a minimum, break content up into sections and use accordions.


Reduce amount of content. Mobile websites should be focused in order to improve readability.

Minimize text entry:

-Allow for pre-stored details at purchase checkout (such as a previously entered address). 

-Use PINs instead of passwords.


If loading time for an app is unavoidably long, be sure to include “loading” notification bars so user is aware of wait time.

Create a home screen icon so app icon is easily identifiable on mobile device. This increases clickability.

Be aware of mobile device ability to swap from horizontal screen display to vertical screen display and respond accordingly.

Take advantage of built-in technology, such as mobile device GPS, QR code scanning, phone number click-and-call options, and map click-and-find capabilities.

[Resources: W3C, engadget, techwiss]