While recently auditing the Industry Dive website to update its aesthetics and streamline the design, I saw the navigation and link design had room for improvement.
I used four strategies to create intuitive and consistent site navigation.
- Use sign postings to indicate where the user is on the site.
- Be intentional with when to use buttons versus links; they serve different purposes.
- Don’t surprise the user; navigation should let the user know where they are going.
- Let animation be additive to the user interface — not essential.
1. Use sign postings
A user should always know where they are on your site and how they got there. Common tools for defining where a user is include breadcrumbs and active page styling in the navigation.
When styling the active page in the navigation bar, it is important to consider the content of the page and what it already signals to the user. Because our page headers are large, graphic active page styling was unnecessary. The page headers were already helping users locate themselves on the site. To add one more sign posting, I incorporated a small black line motif to highlight the active page and as the hover styling.
2. Be intentional with buttons versus links
When to use a link compared to when to use a button has become a blurred line in web development. Often designers distort the initial intention of these HTML elements and configure them to work for any use case. Instead of haphazardly picking when to use each element, an easy rule to follow is: Buttons should be used for actions that submit content; links should be used for actions where the user navigates elsewhere.
We too were guilty of overusing buttons. I audited our site for all uses of buttons and found we were using them to:
- open and close cards.
- submit our contact form.
- open an email client.
- call a phone number.
- load articles.
- direct users down the page.
In these situations, the only proper use of the button was submitting the contact form. I kept the “Load more” and “Email us” actions as buttons as the user is not trying to navigate the site.
3. Don’t surprise the user
When a user clicks on a link, they should have an idea of what is about to happen. One problem with generic button styling is it is unclear what is about to happen.
After reverting most of our buttons to links, our primary links needed a design to call them out and indicate what they did. The arrows on our homepage were a good place to start.
Our homepage uses right-facing arrows with links to encourage users to navigate off the page to additional content. This is useful for the homepage as we want to guide the user to specific content on the site.
We would not have wanted to use this pattern if the goal were to keep the user on the page. Following this rule, the pattern was applied to primary links where we wanted the user to navigate elsewhere.
Another place I used arrows were our header CTAs. These links navigated to content below the fold. Adding arrows pushes users down the page and makes the result of the user’s action clear. I also added an outline around the arrow as it was independent of the link and made it stand out more with a larger click zone.
Finally, I applied the arrow pattern to the industry cards. While a button could be used, I decided to stay consistent with the link styling and include an up arrow.
4. Let animation be additive
The final touch to providing clear, intuitive navigation is animation. Animation should be used to further emphasize the purpose and result of an action. A clear improvement was updating our industry cards to open the same direction the arrow showed. The animation of the cards now opens from the bottom, as the upward hover animation on the arrow indicates, instead of the side.
The light hover animation on the arrow was globally applied to all arrow links. The arrow moves in the direction it is pointing, further emphasizing the user navigation pattern.
With these changes, the site navigation is consistent and presents a unified message to the user. In the future we hope to audit these navigational elements to make them more accessible through the code. We also plan to create a design system to better document UI components and make the development process more efficient.
