Here it is, part four of our series on common UI design patterns. This one will be all about the navigation pattern called “doormat”. You can find the previous parts of the series here:
The doormat is a navigation element that consists of two parts: a navigation bar displaying the main categories and a collapsible menu, the so-called “doormat”, which lists the sub-items. The horizontally aligned navigation bar usually consists of up to four main entries that serve as the labels of the sub-entries, too. The doormat only shows up, if the user hovers the mouse over one of the categories or the entire navigation bar. The doormat typically contains up to 8 items arranged in columns and references the main categories.
The doormat navigation pattern is best used on information rich websites to display complex content and to guide the user to the right section of the site. The doormat provides a clean, easy-to-understand and informative structure and provides quick access to each section of the website. This is a convenient way to welcome users by literally rolling out details on a red carpet (or the doormat), without overwhelming them with too many details upfront.
Typical characteristics of the doormat are:
- usually located at the top of the page below or next to the site branding and header,
- one horizontal row with up to 4 main categories (navigation bar),
- vertically collapsible panel (doormat) with columns of up to 8 sub-items,
- every sub-item belongs to one main category,
- doormat only appears upon hovering over a category or the entire navigation bar,
- doormat usually spans the entire width of the page,
- first category is reserved for “Home” (unless it is offered as separate option).
Now that we have a good understanding of the doormat navigation, let’s create one. Here is how it goes …
1. Setting up the project
To build the doormat navigation we will use several layers – two for the doormat itself plus one layer for each sub-item on the doormat. To save some time, I recommend creating at least the two layers for the doormat in advance by clicking the “New layer” button in the layers panel. We will add the respective content later. I will use a news website as example in this post, and will call the two layers used for the doormat “Navigation bar” and “Doormat”.
Preview of the finished doormat navigation
2. Building the doormat navigation
Our doormat navigation consists of two parts on separate layers: the upper part is a navigation bar that represents the main categories and will be built on the “Navigation bar” layer. The lower part forms the actual doormat containing the sub-items and will be built on the “Doormat” layer. The actual doormat with all its sub-items will only be visible upon hovering over the main navigation bar.
2.1. Creating the navigation bar
Since the navigation bar will stay the same across the entire project, let’s put it on the “Navigation bar” layer. To do so select the layer in the layer panel. Then add a rectangle as background for the navigation bar and place several text stencils on top for the main categories, in my example “World”, “National” and “Local”. Leave some space at the top of the page so we can add some branding above the navigation bar, e.g. an image stencil as logo that links back to the “Home” destination and a headline.
Creating the main navigation bar in a layer
To make the doormat appear when the user hovers over the navigation bar, we will use an action area stencil that will react to a hovering mouse. Place it on top of the navigation bar and make sure it spans the entire width, so it can register the mouse anywhere above the navigation bar.
Now set the action area to display the second layer by going to the context menu and adding a new interaction in the “Interactions” tab. In the interaction dialog, select the hover interaction and set the reaction to “change layer visibility” for the “Doormat” layer. Choose “Toggle” for the visibility.
Linking the layer wit main navigation bar with the layer containing the doormat
2.2. Creating the doormat
The second part of the doormat navigation, our actual doormat, will be built on the “Doormat” layer. For this one, add a rectangle as background and place the sub-items on top, e.g. a text stencil for each entry. Here I created six sub-items, two for each main category.
Creating the doormat on a new layer
The sub-items will link to different content layers which will contain the actual content of the website. If you haven’t already done so, this is the time to add the content layers – one for each sub-item. (Hint: Don’t forget to include one for the “Home” destination.) To allow the respective layer to be shown when the user clicks on the corresponding sub-item we will use action areas again (one for each entry) and attach an interaction to each (s. above). Since only the one layer with the respective content should be displayed and all the other layers should be hidden, add as many reactions as necessary and set the layer visibility in the interaction dialog accordingly (the content layer to show should be set to “show”, while all other content layers should be set to “hide”). Here, for instance I added a click interaction that displays the layer “World – Politics” and hides all the rest.
Linking sub-items of the doormat to the content layers
2.3. Making the doormat disappear
Since the doormat should disappear again, when you hover anywhere outside the actual doormat or the navigation bar, we will place action areas above the navigation bar and below the doormat on the “Doormat” layer. Now we simply need to add the following interaction to these two action areas: “When the user hovers then change layer visibility of the layer ‘Doormat’ to hide”.
Adding action areas to the main layer to make the doormat disappear
Note: To work properly, the “Doormat” layer must be on top of all other layers. If it is not, go to the layer panel and simply drag it to the top of the stack.
3. Adding content to the content layers
Finally, all we have to do is adding content to our layers. Hint: Don’t forget to switch to the right layer when adding the content.
Switching layers in the layer panel to add content to each one
By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.
That’s it! You have successfully created a doormat navigation! Do you need help building a doormat navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!