Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 12:19, 30 June 2009 by mayankkedia (Talk | contribs)

Mobile Web Design : Doormat Navigation

From Wiki
Jump to: navigation, search

This design pattern is part of the Mobile Web Design series.



The layout of the website should be such that it is easier to navigate to the desired, and with least possible clicks from a user. The most important features/offerings should be listed on the homepage in a manner which is attractive to the user and they can quickly figure out where they want to navigate to. One such navigation pattern which allows you to do precisely this is the doormat navigation pattern.

What is doormat navigation

This navigation pattern is used to direct users to the appropriate section of the site. This works well if in cases where the number of categories is less, with each having small number of sub-categories in turn. The typical use of this pattern is on the home page where you want to provide the user a broad level of choice. For instance on an electronics company webpage allowing user to chose from home/business/government categories or something, which in turn would bring up the sub-categories based on the choice made earlier.

Doormat navigation pattern usage
Doormat navigation 2.JPG

When to use

  • This navigation pattern should be used only when the main categories are limited, not more than 4, and also the sub-categories are limited. This is important from a space usage point of view.
  • When the offerings for each category are divergent from the others and would impact the overall navigation for the sub-components on the website.
  • This pattern should be used primarily on corporate websites or information seeking sites like news web pages for instance.

Doormat navigation on Cisco’s product page
Doormat navigation 1.jpg


Some of the key advantages of using this navigation approach are:-

  • It highlights the important aspects of the website on the homepage and is helpful in highlighting information to the user.

Doormat navigation on Symantec homepage
Doormat navigation 3.JPG

  • Allows quick and easy navigation to the user based on their primary level of choice from a single deck.
  • Minimizes the number of clicks the user has to make before getting to the information that they are seeking.


Some of the limitations of this navigation approach are:-

  • If the primary categories are more, this pattern would not work as it would clog the home page.
  • This pattern is not suited for non information seeking web pages like games/shopping etc, as it gives the website a very formal look.


Mobile Web Design : Mystery Meat Navigation

Mobile Web Design : Faceted Navigation

--- Added by Mayank on 30/06/2009 ---

71 page views in the last 30 days.