Website navigation bar tips

Imagine that you are looking for a specific product or service that you market. Now take a look at your website. Does your navigation make it easy to find the relevant item? Is it easy to understand? Is everything in the right order?

Here is a simple navigation bar:

Home
About
Services (or Products)
Blog
Contact

Notice that there are only 5 options.

in general terms, fewer is better.

An upper limit would be 9 items.

Use drop downs to reveal other options.

Ensure that the menu works well on smartphones and other mobile devices.

If the customer hasn’t visited your site before, they will be looking for something. If they can’t find it quickly, they will disappear.

Visitors will spend a few seconds looking for what they’re after. If it is buried or difficult to find, you’re making them work too hard and they will go elsewhere.

My first book was about writing words for websites. During the research for this book, I looked at hundreds of website navigation bars.

By the way, there is a trend away from navigation bars altogether. Here an example: www.marketingrobot.co.uk

Website development

Website navigation bars – desktop and mobile

There are many ways in which a website page can be designed. A key issue has become the number of website visitors that are using smartphones to browse websites. Across the board, this is now typically 60%. For consumer brands this can be much higher.

A key design element is the navigation bar. When I am asked about my website writing services, the nav bar forms an early part of the conversation. Here are some tips for you:

Navigation bars
Aim for between 7 and 9 items in your website nav bar
It is fine to use drop down menu items
Many successful / larger websites use secondary nav bar menus
Check to see how the nav bar looks on different devices
(mobile phones, tablets and desktop computers)
Within mobile phones, a standard menu can take up a lot of space at the top of the small screen; you can use a ‘hamburger icon’ or hamburger menu (AKA pancake or hotdog) which comprises three parallel horizontal lines ☰ which is usually positioned in the top left hand or top right hand corner of a mobile phone screen
A breadcrumb trail helps users to understand where they are in your website
Ideally, use only one word for each nav bar item.
For example, ‘About’ is better than ‘About us’

Lower case is easier to read than upper case. On this basis, it is better to have
Home About Services Contact …than HOME ABOUT SERVICES CONTACT

Within WordPress, by the way, it is easy to change your website’s menu structure as they have a drag and drop system.

My services include webcopy writing training:

Copywriting training for digital marketing communication

Marketing Software Map

Here is a Marketing Software Map:

Marketing Software Map by Nigel Temple

The central red circle is your CRM (Customer Relationship Management system). There are thousands of CRM systems available to you. Key issues to consider include: 1). Is the CRM easy to use? 2) Will your customer facing team actually use it? 3) Does it integrate with your newsletter system, i.e. MailChimp?

To what extent does information flow between your website, your CRM and your email marketing campaigns? Within the above diagram, the dark arrows represent software connections where information flows automatically, without the need for re-keying.

The objective is to have a single, integrated system that helps you to increase brand awareness, attract new customers and learn about them and their preferences. The software within the Marketing Software Map is either free or inexpensive. The tricky bit is making it all sing in tune and appealing to customers.

The skills required to build your Map include a knowledge of marketing strategy, software, copywriting and creative thinking.

I help enterprises of all sizes to build their own Marketing Software Map.

If you would like to find out more, email me or ask via The Marketing Compass.

I train and give talks on The Marketing Software Map. Email Joanna if you are interested in this.