Don’t Clutter the Screen with Navigation Options - dummies

Don’t Clutter the Screen with Navigation Options

In the navigation options at most traditional websites, links to all the main pages are always visible. A typical website includes a row of links across the top or the upper left or right side of the screen with common links to the main sections, including the home page, the About Us page, and other important sections.

Keeping navigation links at the top of every page makes them easy find but clutters the design space. Add your logo and other branding elements, sub-navigation links, and possibly advertising and — yuck — what a mess.

No wonder newspaper sites are always described as “busy” and most blog designs are considered boring. Cramming too much information on every page before you even start adding the content makes it difficult to keep things interesting.

Now consider the approach that most designers have taken to creating iPad apps. In designing websites for the iPad and iPhone, you can benefit from the new breed of app designers that are out there.

A wide variety of iPad apps, including popular magazines Wired and Sports Illustrated, display two consistent areas where app designers are placing navigational elements:

  • In the upper left or right corner of the page: Unlike web pages, the navigational links in most apps are visible only when you tap an icon, such as the Home icon in the upper left, as shown in the Honeybee magazine.


  • At the bottom of the page: Again, an optional set of navigation links appears only when you tap the bottom of the screen, as shown in this figure.


This new design practice could be a useful new way to design web pages as well as apps. The design shown in the figures was originally created as an app for the iPad. It was designed using Adobe’s new digital publishing tools, which are ideal for creating interactive magazines and enhanced e-books.

But after the design was finished with Adobe’s digital publishing tools, which automatically create the navigation links shown, there was no reason not to do the same thing in a web page version.

So the same design was then recreated in HTML and CSS and tested it in the Safari web browser. Voilà! This approach to navigation works beautifully on the mobile web as well, and it leaves much more room for creating great-looking designs that fill the screen on the iPad.

Even in the web page version of this site, the drop-down menu shown appears only when you tap the Home icon. The menu disappears as soon as you tap a link from the list.