Website navigation is a small design element with an oversized responsibility. Navigation can determine whether website visitors successfully find the answers they need and whether those visitors become leads.
Because of its importance, your website's navigation should not be an afterthought. Rather, it should be the result of comprehensive organization and testing.
Website navigation is not the place for creativity or psychological experiments. It should be simple and straightforward.
Here are some tips for building your website's navigation in a way that puts your visitors first.
Organize from the outset
Defining your site's information architecture is the first step in creating effective website navigation. A site's information architecture describes how content is organized and labeled, and how visitors will move through it.
Instinct often pushes attorneys to structure a website in the same way their firm is structured. However, a typical website visitor, who is not familiar with your firm, may not easily understand this structure. Instead, try taking a client-centered approach to content organization and create a hierarchy according to your clients' needs. A good way to do this is to invite people who both are and are not involved with your firm to help sort your content.
The most common approach to organizing large amounts of information is card sorting. Give participants cards labeled with the content you need to organize and ask them to sort and categorize it. You can let participants sort entirely independently, or you can suggest categories into which content should be placed.
Once you have established your information architecture, see how it holds up with testing. Give people scenarios like, “You don't think that your employer is paying you everything you are owed. Where would you go to find out whether you have a case?” See where they look. Hopefully their thinking will match your chosen structure.
Design for cognitive biases
Humans have some well-known cognitive biases that affect the way they interact with navigation and content online. It is not in your best interest to try ignore these biases. You will be better served by understanding these common cognitive biases and designing around them.
1. The serial-position effect
The serial-position effect, also known as the primacy effect and the recency effect, states that people tend to remember the first and last things they see in a list. German psychologist Hermann Ebbinghaus coined the term after performing a series of memory studies on himself. Hermann found that his recall accuracy varied depending on an item's position within a list. Subsequent studies have also found that recall is effected by the length of the list and whether any intervening task is given between reading the list and being asked to recall items.
The serial-position effect suggest that visitors will be most likely to remember the first and last links in your menu. Therefore, your two most important items should be first and last. For attorneys, the first link in a menu may be to attorney profiles or to a particularly lucrative practice area. The last should almost always be a contact link or call to action.
2. Outcome primacy
Outcome primacy describes the psychological phenomenon of lasting effects on behavior that result from the first outcome of an experience with a task or decision. For example, if the first time a person clicked on a logo and was taken to the home page, that person will tend to expect the same outcome when visiting other sites.
Since attorney website navigation tends to follow similar patterns, outcome primacy says that you should stick to these patterns. If someone has visited other firms' websites before yours, they will expect your site to behave similarly.
This also means that if a visitor's first experience with your navigation is negative, they will anticipate negative outcomes from future interactions. For this reason, it is important that all navigation links are clearly labeled and lead visitors to expected information. Always check your links. Broken links can be a deal breaker for potential clients visiting your site.
3. The speak-easy effect
The phenomenon that things we recognize seem safe, while unknowns carry risk, also applies to language. The speak-easy effect is a bias toward the familiar as it relates to words. According to the speak-easy effect, people tend to believe that easy to pronounce words are more trustworthy and have more value than those that are difficult to pronounce.
The speak-easy effect is the strongest argument against the use of legalese or industry jargon in navigation — or in any part of a lawyer website. Legalese does not make you look smarter. It just turns clients off.
4. Authority bias
In the Milgram obedience experiment, participants famously administered large shocks to other people at the request of an authority figure, even when those people showed obvious and serious distress at the shock. The Milgram experiment is a quintessential example of authority bias.
According to this theory, people tend to trust authority figures and place more value in what people in power say and do. People will even believe information or perform tasks they feel are flawed because of the influence of authority bias.
Attorneys are authority figures by virtue of their profession, and your firm can use authority bias to keep people on your site — without performing any questionably ethical research. Simply tell visitors what to do next.
If you suggest additional reading or prompt visitors to look more deeply at an issue, they may be likely to trust you and comply. Use your authority to strategically suggest supplementary resources that keep visitors engaged with your pages.
Tips for the real world
While psychological phenomena are interesting, actionable advice in user-oriented website design is most useful. Here are eight tips for developing easy-to-use website navigation.
1. Keep it short
Pop-psychology says that humans can only retain seven items in their short-term memories. While memory is much more nuanced than this, the idea behind the commonly-cited theory is apt.
Everything on a web page is distracting, and every distraction erects a potential barrier to user action. Your website's main navigation should contain as few links as possible — only the minimum necessary to get visitors where they need to go. The necessity for shortening menus is one reason information architecture is so important. If you have appropriately categorized and named all of your content, choosing the top four to six items to place in the main navigation should be easy.
2. Use specific, descriptive language
Navigation language should clearly tell visitors what to expect and should be specific as possible. Terms like “videos” or “white papers” for example are overly vague. What type of videos? Why should the visitor want to read the white papers?
Instead, try describing the content by using phrases like “video testimonials” or “video FAQs” that more clearly tell users what to expect.
Emphasizing niche terms is another strategy for naming menu items. Rather than using the broad term “practice areas,” consider featuring specific areas in your top-level navigation, like “Car Accidents,” “DUI Defense” or “Estate Planning,” to which visitors can more easily relate. Less-lucrative practice areas can be linked to through an “all services” option.
When you can tell visitors what to expect, they will find your site easy to use.
3. Be consistent
Always keep the same main navigation across all pages of your site. You may have sub navigation that is specific to certain sections of a site, but the main navigation should never change.
Additionally, create navigation that is consistent with accepted patterns. For example, most logos sit on the far left-hand side of a menu and will link to the site's home page. Most main navigation menus are horizontal across the top of the page. Any highlighted menu item, like a contact link, is usually the last item in a menu. Always do what people expect for the best user experience.
4. Always offer a search
While ideally your navigation will be so well-designed that no one will need a search, reality rarely lives up to the ideal. Provide a robust search for people who may not immediately see how to find the information they need. A search will prevent frustration and keep potential clients on your site longer.
Consider using predictive search to help guide visitors who may not know what precise query to enter. Predictive search provides a list of suggested search terms as the user types. These suggestions make it easier for people who do not know legal terminology to find the information they need.
5. Leave a trail of breadcrumbs
Breadcrumb menus are the list of links, often directly above a page's main content, that tell visitors where they are within the page hierarchy. Breadcrumbs often look something like:
Home > About > Attorney Profiles > Jane Lawyer
Breadcrumbs allow visitors to easily follow their paths back up the page hierarchy without having to repeatedly hit the back button. As an SEO bonus, Google also likes breadcrumbs, which help its algorithm see and categorize content with respect to various search queries.
6. Pick a primary, global call-to-action
Choose the action you most want visitors to take, name it, and use the language you have chosen consistently across all pages. If your global call to action sits within a header, always leave it in the same place. If it sits as a menu item at the end of your main navigation, place it there on every page. Memory increases with familiarity, and you want visitors to remember your primary call to action.
7. Test, repeat
Online services like Crazy Egg offer tools such as heatmaps that provide you with valuable user behavior information. Heatmaps show where visitors are clicking on your page. If certain menu items are not receiving any clicks, you can consider removing them or changing the language of the link.
You can also use a service like Crazy Egg to record users' visits. This will show you whether the visitors went directly to a menu item or scrolled around aimlessly looking for the right link.
Testing and data analysis will give you the insight necessary to improve your navigation and increase your conversions.
8. Consider mobile and desktop users
Mobile and desktop users have different navigation needs. Mobile users cannot see hover effects in a menu, nor can they easily operate drop-down menus. Menus can also use a lot of space. Because of the decreased screen real estate on small devices, developers often use hamburger menus to indicate navigation on mobile devices. This works well for phones and even small tablets.
The hamburger menu icon, however, becomes less and less noticeable as screens get larger. Research has shown that some people who visit desktop sites that use a hamburger icon as the only menu item report that the site did not have any navigation.
Tailor your navigation to your users' screen size to make sure all visitors can see it and use it.
Drop-downs: the good and the bad
These tips did not include any discussion of drop-downs menus, which are a source of some controversy in the design world. A drop-down menu may be the best solution for your firm; however you should be familiar with the pros and cons.
The good: Drop-downs have been used for many years, and users are familiar with them. They can give visitors quick access to important sub pages, such as services in a practice area menu.
The bad: Data shows that users can become easily frustrated with drop-down menus. Long lists of links can be overwhelming. Visitors might try to navigate to a top-level page and either become distracted by drop-down links or not be able to access the top-level page at all, depending on how the menu is programmed.
Consider using mega-menus as a compromise solution if you have a lot of navigation items. Mega-menus are most commonly seen on large e-commerce sites like Amazon or Overstock, and they are good for organizing and presenting links on content-heavy websites.
If you choose to use drop-down menus, always provide a hint that the drop-down exists. This is most commonly done with a small chevron or arrow next to the link text. When you warn users that additional links are present, they are less likely to become distracted or annoyed.
There are no absolutes in web design
While navigation patterns can, and should, be identified and followed, the details of a design and the specific use of language will be different for each firm. Firms will distinguish themselves within the minutiae of their website navigation, not by trying something entirely new.
Practices become trends because they are popular. Sometimes, popularity coincides with good user experience, and sometimes it does not. Popularity is not the bar for whether a navigation trend is best for any law firm's website. Anyone who tells you to always or never employ any particular feature should not be trusted.
Sticky menus, for example, have been popular for the past several years, although they are beginning to see a decline in use. The sticky menu is a menu that is always present either at the top or side of a website. Often the sticky menu is a slightly minimized version of the main navigation menu.
In theory, these menus allow users to easily navigate to another page regardless of where they sit within the current page. And they can be helpful. However, there are downsides to sticky menus as well. If the menu is particularly large, it can obscure information the visitor is trying to read. For visitors to lawyer websites, who often come to research and learn, this can be frustrating or distracting.
And what if the sticky menu contains drop down menus? A visitor absently moving the mouse while reading might accidentally open the drop down causing further distraction.
Consider the consequences of every design decision, no matter how small they might seem. Only analysis of user behavior when interacting with your website, its conversion rates, and conversations with your visitors and clients can tell you whether any element will work for your site.