Paul Boag

Breaking conventions

Published:
07 April 2014
Reading time:
2 minutes

Working with the Broads Authority has shown that it’s okay to break convention, as long as it is done with care and attention to detail.

Designing Websites That Convert

Join a 4-hour live masterclass with Paul Boag and learn how to turn landing pages into conversions using design, copywriting, psychology and marketing — plus a live review of your own site.

Register and join me →

Have you noticed how much real estate is dedicated to navigation on many sites? Search boxes, main navigation, sub navigation, quick links… the list goes on.

This doesn’t make a lot of sense when you think about it. Users come in search of content. Navigation should get them where they need to go and then get out of the way.

That was in the forefront of our minds when we were working on the Broads Authority website. This was a client dedicated to providing a clean, simple, elegant site and we didn’t want to clutter things up with navigation.

We therefore decided to hide the main navigation under a tab at the top of the page. The question was: would users spot it? People expect to see a navigation bar, so would they adapt to us breaking with convention?

In order to ensure users could not miss the navigation we introduced a number of small details into the design. These include:

Iconography

We used the same icon for the navigation that has become a standard on mobile sites. Our hope was that users would have experienced enough mobile sites to recognise its meaning.

Broads navigational iconography
Using the mobile navigational icon helps users identify the menu bar.

Tooltips

We displayed an animated ‘menu’ tooltip on page load. This was designed to draw the eye to the navigation icon and clearly label what the icon does.

Broads menu tooltip
A menu tooltip fades in when a page first loads.

Serendipitous navigation

We wanted to ensure that even if the user missed the initial visual cues they could still discover the navigation. This was achieved by displaying the navigation when the user scrolls to the very top of a page.

Fallback footer

Finally, we added a ‘fat footer’ that contains a site map for those users who missed all the other cues.

The result of this approach is a clean, simple design, free from navigational clutter and yet still provides easy routes to content.

Perhaps your site could do with a cleaner visual interface, if so we are here to help!

  • Free access to 3 books including Click! that teaches you how to encourage clicks without shady tricks.
  • Choose between multiple email courses.
  • Choose between in-house or freelancers and agencies content.
  • Learn from an expert with over 30 years experience.

About me

I’m a UX consultant and conversion optimization specialist with 32 years in digital. I help teams create user experiences that work; winning support, improving results, and making change stick.

Contact me

Email: paul@boagworld.com
UK Based – Clients in North America, Europe, Asia, Australia.

how I help

  • UX Strategy – Spot what’s blocking a great experience and get a clear plan to fix it.
  • Improving Conversion – Simple, evidence-based changes that make every click count.
  • Coaching & Leadership – A sounding board to help you lead with clarity and confidence.
  • Training & Workshops – Hands-on sessions, playbooks, and self-learning so your team keeps improving.