Of all the elements that go into a website’s design, navigation is among the most important features. In addition to providing aesthetic qualities, navigation is about the user interface, can effect calls to action and conversion rates, and can influence how users interact with the website. With each website being a portal to a final […]
Of all the elements that go into a website’s design, navigation is among the most important features. In addition to providing aesthetic qualities, navigation is about the user interface, can effect calls to action and conversion rates, and can influence how users interact with the website. With each website being a portal to a final goal, whether that goal be making more sales, providing information, or gaining clients, it’s easy to see how navigation plays a major role.
In web design, there are a number of ways a designer can go about planning and implementing website navigation. In modern design practices, there are also trends and best practices for navigation. How and where navigation is placed in an interface takes essential planning, and learning from best practices can make creating navigation a much easier process. In today’s post, we’ll look over some modern trends in navigation, and why the practices work so well.
The first trend we’ll take a look at is the use of menu subtitles. This has been a recent trend in web design for both aesthetic and functionality reasons. Subtitles can act as further description for the end user, making the navigation more usable and better understood. In Smashing Magazine’s example, the subtitles themselves are links to sub-categories. Depending on the organization of a website’s categories and sub-categories, this can be a great option, opposed to using traditional dropdowns.
The subtitles within this type of block navigation don’t only have to be sub-category links, but can also be more descriptive versions of the category in smaller text, or keywords for a more SEO friendly approach.
The best part about this trend is the increase in usability. It can be purely CSS based, and the core of the navigation is based off of plain text. This can make it ideal for those needing to use Screen Readers, or ideal for a search engine trying to organize the website’s content. The markup for such navigation would be relatively easy:
About Me, History
Work, Samples
Work, Quotes
Then, within CSS markup, classify each <li> element as a block with set width and height, style as necessary, and set fonts/styles for the small and h3 tags within the <li> element.
ul.nav li {
display: block;
width: 150px; height: 50px;
}
.nav h3{/* H3 Nav Styling */}
.nav small{/* Subtitle Styling */}
Finally, from a design standpoint, this type of navigation scheme works great with grid layouts, typographically heavy designs, or just designs that need good organization and communication with the user.
This trend is incredibly common in blog designs, but can be used with any sort of web design. While it may not be necessarily ‘trendy,’ it is by far common and also a best practice.
The idea is simply to place navigation directly below the header, logo, or place of first visual interest. In other words: “grab attention > gain interest.” The logo, header image, or main design focus grabs the attention, and the navigation is the first look into the website’s content, gaining interest. This best practice in web navigation is all about the placement, and while the example above is pretty standard, there can be other examples where navigation is placed in a different location, but uses the same technique: within proximity to the first attention-grabbing item.
To use this placement technique, it is also important to give enough prominence to the navigation. Note that there are other forms of navigation in the example above (pages, sidebar links, etc.), but the most important navigation (categories) is larger, contains more whitespace, has more contrast, and again, is the secondary focus right after the logo. It is also the type of content that will gain the user’s interest, and bring them back for more.
This idea may not be so new, but its trend is rising along with the rise of blogs. Separation between two major navigational categories can be very beneficial to the end users, and for having the users meet the goals of the website.
This technique works best for content-heavy sites, such as a blog (above), or otherwise. Usually there are two types of content per website: content of user interest, and essential content. Interest pieces of content are things such as learning materials, blog posts, how-to’s, news, etc. Basically, any content the user actually comes to see.
Then, there is essential information: the about page, contact page, terms of service, etc. — any content that is needed to find out more about the company or individuals behind the website. This type of content is not meant to gain the interest of the user, but is rather a credibility factor.
Both types of navigation should be easily found, although user interest content should be first noticeable as to grab the user’s interest permanently. Like above, interest categories/content could use bigger type, more contrast, excessive whitespace, etc. On the opposite side, it is likely that only returning visitors will be using the essential content, and so they’ll be actively seeking it.
By defining and dividing these two content types, navigation can become more user-friendly. This navigation practice is all about the user, user interface design, and how the user can best interact with the website for an optimal experience.
Using icons are definitely a more modern approach to navigation, and NASA does a wonderful job of doing it the correct way. Because NASA has a lot of navigation, and because this area shown above would be their ‘interest navigation,’ they used icons to grab attention towards it. Imagery can be the strongest force of attention, and because of this navigation’s untraditional placement, the icons were needed to gain attention.
This is a great example, but there are plenty of other instances where icons can be used along with navigation to grab attention, even when the navigation is in a more traditional location. Just check out the example below (under Pointers), or go to MacRabbit.com for an example like this. There is plenty of whitespace, contrast, and the location of the navigation is in the top left so it is sure to be seen. However, the designer has still used icons not only for more attention, but for visual interest. Many times, a design may just need more graphical elements, and navigation can be an excellent location for that.
Using pointers is a recent trend with a unique visual appeal, and from an interface standpoint, can bring attention and direction to navigation. It best works with simple navigation, like the example used above.
Pointers are often used on active and hover stages for navigation, and aren’t always necessarily arrows. Anything that brings an additional graphical element to a piece of navigation when the user interacts with it can be considered a pointer. Because of this added interaction, pointers can be a simple way to create more interaction and better understanding with the navigation for the user.
Last but not least, side tabs are the last trend we’ll be discussing today. Side tabs, shown above, have their debate when it comes to usability and interface design. However, used with certain types of design and on certain types of websites, this new trend can be an attractive twist to more traditional navigation. The ‘realism’ of the tabs mimic a portfolio, and can be great for portfolio like sites, or information-based websites otherwise.
One problem with this method is that obviously these cannot be created with pure CSS. It takes CSS and images, and that can cause SEO issues as well as usability issues. There is also the readability of the navigation to consider. Best practices when using this type of navigation would include the following:
These six methods above are by no means all of the navigation trends out there. There are perhaps thousands more trends, some commonly used and some purely unique. With navigation being such a huge part of web design, and it needing the most care, some trends will come and go, while others will be here to stay. Feel free to share links to examples or trends that could belong to either category.
What do you think are some other best practices in website navigation? What are some recent trends in navigation organization, usability, or layout? What are some trends purely from a design perspective?
Since day one of the invasion, the company’s top priority has been the safety of our people. Nobody can be fully prepared for war but our business continuity plan is activated and as always we will make sure that nothing falls through the cracks. Although there is a lot on our plate at the moment, we want our clients to know that P2H is fully operational as a company.
As blogs have grown in popularity over the past few years, so has blog design and development. Even if you are not a developer or WordPress theme expert, it is likely that at least at one point you’ve been contacted by a client for blog design. If not, with their growing popularity, it will soon […]