Since setting up Epix from the living room in my then small rented home in the centre of Lincoln, I’ve believed in one thing – creating a good-looking website is easy, the hard part is making it work.
Over the last 10 years, we’ve refined, reviewed, refined, reviewed, and I now want to share with you some of the key components that help us create those hard-working websites.
Don’t get me wrong, our websites do look beautiful, they reflect the brand and communicate an essential first impression, but there are so many elements that help to achieve this and more.
Each one is packed with multiple implementation options and examples to get you started.
1) Planning navigation to reduce decision making
How users move around your website is a crucial piece of the puzzle to get right. If users can’t find what they are looking for (even if they don’t know what they’re looking for), they will very quickly leave.
Commonly, for non-ecommerce websites there are two types of users:
- Those who know what they are looking for
- Those who don’t, or are on a journey to seek out your credentials
Those who know what they are looking for will undoubtedly use your main navigation bar (also called a “menu bar”, typically found at the top of your website).
We see this across all websites we heat map – these show a navigation bar as the hottest, most clicked part of any website. Navigation bars can quickly and succinctly communicate what a business offers – they do a very important job.
Here are some common navigation bar formats that help achieve this:
Using utility navigation allows you to dedicate your website’s main navigation bar to the most important pages, but still keep other content in a prominent location.
Commonly these are smaller and sit just above the main navigation bar.
The Conica website is a great example – the main navigation clearly communicates the types of surfaces they specialise in. Meanwhile, their utility navigation allows them to build credibility as users can easily check out their company credentials and case studies.
“More…” or “Discover more…”
This is a brilliant tool if you have a LOT on offer. It allows you to prioritise the most important elements, and tidy everything else into a drop-down box to still keep them super easy to access.
This website is a great example; there are 4 key areas, but a number of other pages of interest that a high portion of users will seek out.
The pages are accessible, but not detracting from the main purpose and most essential pages.
This or that
Sometimes you might have an audience of two halves, in that they might approach buying from you with two completely different mindsets.
For example, half of your audience might know why they want to buy but not what they want to buy, and the other half might know exactly what they want and just need a little extra information before purchasing.
Splitting these mindsets into two clearly defined headings can help people explore in a way that works for them. Let’s jump straight into an example to help explain this!
Newark Showground has a variety of outdoor and indoor spaces that event organisers can hire to hold events.
Newark Showground has three mindsets to accommodate.
- Their customer’s customers: the people who visit the events being held at the Showground.
- Event organisers who have a particular type of event to hold, such as a conference or a large outdoor event. These people are looking to see whether Newark Showground is a good fit for them.
- Event organisers who are familiar with the Showground, know that its location is right for them but need more detail on particular spaces, such as room sizes or layouts, and AV options.
We help the first group (their customers’ customers) by making the very first item in the navigation bar “What’s on”. This is important, as it quickly gives the information they need, allowing the rest of the website experience to cater to the event organisers.
“Plan your event” then helps the second group, and “Venues” helps the third quickly find the detail they need.
This creates a real focus on core products or services. Hamburger menus are a common and well-established design feature, most often used on mobile devices.
This menu type can become even more powerful when combined with a short, succinct main navigation bar.
We use this on our very own website!
The main navigation bar focuses the user’s attention on the core services, then everything else on offer is easily accessed via the hamburger menu icon which opens full-screen navigation, complete with contact details.
2) Breaking things up
Of course, there is a lot you want to tell people and as humans, we naturally revert to writing large, long paragraphs.
The reality is, people don’t read websites, they scan them.
Because of this, a page layout needs to be created that allows text and other elements to be split into clearly defined sections that help a user skip from section to section.
This enables the user to quickly scan the page, find the things that resonate with them, and then read!
It’s important to allow your users to scan read. If you force them to read everything, they just won’t, and will leave having achieved nothing.
So where do you start?
Here are the 3 most common techniques used to break up content:
Unique Selling Points (USPs) differentiate you from the competition and these need to stand out.
USPs should be written in a way that appeals to the customer and is benefit-driven, rather than about you.
The Stadia website does this perfectly in a number of ways. On the homepage, there are a set of tiles that clearly define the benefits of working with Stadia. This is then reiterated and customised on every services page across the website.
These tabs allow the information to be presented and easily accessed, but also allow the user to skip down the section titles and choose to explore only the areas that are important to them.
Great for communicating both benefits AND features (because sometimes features are important to your audience!).
Grouping is a great technique for breaking up long lists of items.
This principle is backed by both Miller’s and Hick’s law – you can read more about the psychology behind it in our article all about boosting web performance with grouping.
Let’s jump into an example so you can see how it works!
The Tipi Tribe website uses this in multiple places to break down key elements that would be important to their audience. In this example. we use it to break up the features of each hire package and not only make the information easy to understand, but also allow for quick comparison.
Good ol’ subtitles
If other techniques just don’t work for your content you can still break it down, and using subtitles mixed with coloured boxes to show a clear separation between sections is still acceptable.
It’s worth also considering breaking things up with images and changing the formatting of content with simple bullet-point lists.
The Griffin House Consultancy website does this on sections of the homepage and on many of the “inner” information pages (which is where we most commonly implement this technique).
The homepage uses underline to draw attention to specific words and uses colours to break up different areas. It also uses “eyebrow” headlines as a way to label the “topic” for that specific section.
On the inner pages, subtitles, boxes, images and bullet-point lists are used to separate, draw attention to, and break up information.
3) Take them on a journey
Websites are all about user journeys, and user journeys involve leading a visitor through certain information that then prompts them to take action.
After all, if a user lands on a page and isn’t offered useful information relevant to them, they won’t do anything else.
They will just leave.
A user only needs to find out X, Y and Z – once they have that information, they are almost ready to enquire.
But you force them to read (or scan past) A, B, C, D, E AND F before you finally offer them supplementary information (such as reviews) or a way to get in touch.
They might never get there and like we just said, if they can’t find an easy route to what they need…
You guessed it! They’ll leave.
So, how can we take our users on a better journey?
Let’s look at how we can lead them to related information.
There are a number of methods you can implement to encourage that journey of discovery, keep users on your website, make a positive impression and be remembered.
These shouldn’t just be implemented on your homepage. Any page on your website can be an entry point, so be sure to shape positive user experience and lead your customers on a journey on every key page.
Frequently Asked Questions (FAQs)
Perfect for almost any business. Whether you are selling a product or a service, customers always have questions.
We usually recommend building FAQ sections into key pages, rather than forcing a user to find them on their own page.
Not only are FAQs great for your SEO, but they can also influence key decision-making points.
FAQs are a key feature on every service page on the Stadia Utilities website. This allows them to present information to the user in a way that resonates with them.
Articles & blog posts
Help your customers out – teach them something useful! It could just convince them to buy.
Many purchasing processes require several journeys of discovery before converting. Have a positive impact on their discovery experience by educating them about the product or service they are interested in.
The more information they can get from you, the more likely they are to come back.
This could be how-to pieces, buying guides, white papers, infographics, top tips – the possibilities are endless.
Griffin House Consultancy operates in a knowledge-centric sector and are constantly writing articles on their expertise, compliance changes and current information governance issues.
These are shared on every single page of their website, and in many places articles specific to the page you are on are select to ensure users get the most relevant information.
Related or similar pages
Users don’t always land in the right place and there could be more to discover – other relevant products or services that better fit their needs.
Make these easy to find and contribute to pleasant customer experience, even on your website.
The Newark Showground website does this well, and it supports their “this or that” menu system too.
On every event type (Plan your event) and Venue page, you are shown the relevant pages in the opposite section.
Take their Conferences page, for example, you’ll find below the main content, all of the venues that are perfect for a conference.
This allows the user to take the logical next step to explore what space they might like!
Case studies/projects or client logos
The proof is in the pudding after all.
Demonstrate your expertise by showing and discussing previous projects. If you can’t, use client logos and testimonials to build trust and prove that others believe in you.
These are just 3 of the building blocks that are integral to every single website we design, and that I personally use with our team when planning a new website project.
If you can…:
- Plan your navigation so users can easily move around your website
- Break content up so your visitors can scan read
- and lead them on a journey of discovery
…you’ll have the start of a solid foundation to build your website upon.
I hope they’ve given you some food for thought – if you’re stuck for ideas get in touch, we’d be delighted to help.