It can be tempting to create extensive submenus in the interest of giving information to readers, but tread lightly—users may get overwhelmed with too many categories. As we mentioned above, part of creating a great nav bar is creating an intuitive experience. Use navigational cues, such as including your primary brand logo in the top left corner of the page, and making the icon redirect users to your homepage.
You can alter your nav bar design to provide cues to readers as they browse. For example, highlight the active page in a different color or use subtle color gradients to indicate which pages the viewer has already visited. These are great final touches for helping readers orient themselves—regardless of where the nav bar lives. All Rights Reserved.
Services Work About Blog. A solid left-hand navigation design that stands out well on a black background The content on this site is also highly entertaining so enjoy the gifs!
This might seem obvious, however it's not uncommon to find sites that fail to implement this function. The common convention for logo placement is the top left hand corner or centred along the top and the logo is also known as a link back to the homepage. This is a convention that is best followed as it is so widely implemented.
Responsive design is considered to be one of the best ways to make your website look great on any device and part of this trend is using a compact navigation style called the 'hamburger menu'. This icon is made up of three slightly separated horizontal lines and has been likened to a hamburger because when you deconstruct the main elements, you're left with two slices of bun and the meat in the middle. Admittedly this is quite abstract symbolism so if you don't work in the digital space then you probably wouldn't be familiar with this term but you would be familiar with the icon itself.
The whole reason the hamburger menu came to be was because there needed to be a way to navigate on mobile without taking up too much space.
The hamburger icon became the solution thanks to its compact size and ability to be tucked away in the top right or left hand corner. The functionality of a hamburger menu can vary from site to site, but essentially it functions by sliding in, sliding down or popping up. As the hamburger icon has become a well-known convention you may start to notice some sites that don't bother to change this style on desktop.
You wouldn't find this on content heavy sites but you may start to notice this across boutique agencies or campaign sites. Below are some examples of sites that use the hamburger menu across all screen sizes:. When designing a hamburger menu it's important to design the menu levels clearly so that the user doesn't get confused on how to navigate.
This is not such an issue on desktop however once you're viewing a menu like this on mobile the navigation can become a little confusing. Our recommendation for a menu that drills down up to four levels is to use arrows that look like buttons so that the user can tap on the menu item or tap on the arrow button to expand.. Colour and indenting text can also be used to distinguish the level of navigation. Below are a few recent examples of menu navigation design for mobile that use this style:.
With the desktop site recently launched, the next phase of the project is an adaptive mobile design and here is a preview of how the navigation is coming along. Generally this space is reserved for privacy and legal links however it has also become quite standard to display email sign up fields, address details and social links.
Most people want to know whether having a full sitemap on display in the footer is a good idea or not. If the user has to scan through the footer links to find what they're looking for then perhaps the AI is not working the way that it should. That being said, the footer is typically the last port of call for many visitors.
Plenty of websites still use this method and in my humble opinion it tends to be used for sites that are quite content heavy or retail sites where displaying the security icons and methods of payment is quite crucial. Not only can a large footer serve up helpful links for those who like to navigate at the bottom but it can also work as a design element to frame your layout. Butterfly has designed a few sites that utilise large footers and this approach was appropriate mainly because of the amount of content and also the large footer complimented the design layout.
Here are some examples of larger footers below:. Sticky or fixed navigation is essentially a website menu that is locked into place so that it does not disappear when the user scrolls down the page. You can implement a sticky menu for any website, it just comes down to whether or not it's suitable for both the design and navigation purposes. Personally I quite like when sites with small sitemaps use sticky menus - however I'm also quite impressed with the way ING Direct integrated a sticky menu into their website design.
Below are some great examples of sticky menu designs to be inspired by:. They allow for more links, which means a better user experience. The Zappos fat footer is a good example:. Many websites also use breadcrumbs. These are hierarchical navigation links that appear on a specific page. They tell you how that page is nested within other pages.
You can see breadcrumbs on the Crazy Egg blog:. Above, the unlinked page name tells you where you are. Then you can see what category that page is assigned to conversion , the part of the site in which it exists blog , and the homepage Crazy Egg.
The rise of mobile has created a need for other types of website navigation. Consider, for instance, the hamburger menu. The following are three examples of excellent website navigation best practices in use. Here, we have a screenshot of the WE3 homepage. You see the typical navigation menu, but this one is special for a couple reasons. What should you do first? The reality is that website navigation builds on itself and keeps the visitor engaged in the site.
Missing just one website navigation best practice can result in a lost conversion. Follow each one closely to improve user experience. One of the most common problems is letting design get in the way of usability. The easiest way to make hypertext obvious is to make sure it differs from every other element on the page — and not just when the visitor rolls over the link. Format it in a different color, underline it, or make it bold. You can even turn your header navigation links into buttons if you wish.
Many websites have either too many or too few links in the header navigation bar. Think about what you want people to do on your site, but also consider what visitors might want. For instance, you might want your visitors to convert , but your visitors might want to know more about your company or learn about your philosophy.
If your navigation menu starts to look a little cluttered, consider organizing your site better. Use a main heading, then include a sub-menu with other links categorized below it. It should stand out. Many websites accomplish this with color.
The designer might format the sidebar with a different background color than the body copy. White space — or negative space, if you prefer — works well. Creativity is great, but not when it comes at the expense of user experience. Put navigation in places where people expect to find it. This includes the header navigation bar, sidebar, and footer.
Navigation bars with concise and clear categories allow people to rapidly and easily access information about your company. From the get-go, a visitor can tell by looking at the categories listed that Freshware specializes in baking and cooking tools.
There is a psychological concept called the Serial Position Effect , which describes how a person tends to pay more attention to and retain information to things that appear at the beginning and end Psychology Dictionary.
This means that people pay less attention to the body portion of a web page. Since navigation information is usually at the top and sometimes the bottom of a web page, it is very important to insert important links and information in these sections for a higher engagement rate.
0コメント