Website design best practices from a brand-led digital agency
Don’t have time - jump to the summary
The World Wide Web has been around for over 30 years. During that time we’ve seen explosive evolution in technology, trends, computer power and website design and development processes. WWW evolution has slowed in recent years. Today we understand a lot about what works and what doesn’t. This article discusses effective website design. When assessing a digital agency’s competency look for these features in their work.
The website is the most valuable communications channel for many organisations. So why do so many websites offer such a poor experience and underperform?
Since 1994 our team has developed over a hundred successful branded websites and some failures. We have rescued failed website projects by others. We’ve learned a lot.
Effective website building requires clear objectives, visitor empathy, and a balance of flexibility and rigour in the development process. Teamwork between people who understand brands and websites is crucial.
Great websites start at the top
Digital agencies are more likely to produce successful websites for clients who understand basic principles in web design effectiveness.
Crucially, C-suite decision makers approving website projects need a little technical knowledge. Familiarity with a few core concepts will help you identify competent collaborators and make better decisions.
It begins by understanding how a typical web page works to influence, persuade and guide the visitor journey.
Familiarity with a few core concepts will help you identify competent collaborators and make better decisions.
It’s all about the visitor
Website visitors are super impatient. They need instant value. Your site must deliver it fast. You need to persuade visitors to act on the value your organisation, product or brand offers. Or they will quickly exit your website feeling disappointed.
Beautiful design, readable typography and on-brand aesthetics are important of course, but effectiveness goes much deeper.
Success is the point where your needs align with your visitors’ needs – resulting in measurable action.
Every web page is a visitor doorway
Nobody knows where a visitor’s journey on your website will begin. They can enter and exit on any page.
So every page must express your brand aesthetic and instantly convey consistent, clear perceptions of who you are and what you do.
We partially achieve this with an informative/emotional brand name and positioning phrase (tagline), and effective design.
Let’s look at a webpage structure for a “widget” company and see what will work for it.
a. The value of a web page clusters at the top with your brand name and concise description of your offering. Visitors who find you on search engines will see this first so it’s crucial to get it right for customers who find you online.
b. How’s your domain name? Domain names pack a lot of information in a few characters. Your organisation’s location, type, size and more are all reflected in your domain name. It has a big impact on visitors and worth investing in to get it right.
c. The main menu ideally signposts clear navigation while conveying aspects of value. The wording makes a big difference to effectiveness.
d. Everything above this line is the header. It appears on every page.
e. Grab visitor attention with content of interest to them.
f. Divide content into screen sized info-chunks unless it’s a long read or presenting image or video tiles.
g. Calls to action (CTA) need to be easily seen with meaningful labels that offer value.
h. At the bottom of every page is the footer section.
i. A summary of your offering here helps visitors understand your core value proposition.
j. A full navigation menu here helps your visitor find information that is of value to them, and to you.
Effective web pages look like this
Website effectiveness is driven by web page design. Content is ideally delivered in screen-sized chunks (with some exceptions, like the long-text page you’re reading now).
Aesthetics reveal when your website design was last updated. The websites of 2010 look quite different to those designed today.
Success is the point where your needs align with your visitors’ needs – resulting in measurable action.
Don’t get screened out
As you have experienced, browsing websites on a handheld device can be painful. Competent digital agencies eliminate this frustration by developing mobile and desktop versions of the website simultaneously.
A relevant, distinctive, emotional brand experience that’s strong on a tiny mobile screen can be amplified across any screen size, in any channel.
Effective brand building requires disciplined simplicity and consistency. What looks great in your hand will blow minds when huge.
.jpg)
Place important content in an F-shape, which is how visitors’ eyes travel down a web page
The Stepworks lucid menu
Website designers tend to overlook the value that superior navigation can deliver. Menu items and links are the signposts on your web page that guide your visitor to mutual success.
Almost every web page begins with a menu. The idea of a lucid menu emerged from our Wholehearted Brand Building methodology. Few digital agencies are aware of this opportunity.
A lucid menu combines navigation with expressions of value. It informs visitors (including robots) about key aspects of your organisation or brand and helps them find their way.
For example, the main menu of a widget website would typically present options like: “About | Products | Services | Case studies | Jobs”. This is a non-lucid menu.
A lucid menu might say instead: “Understanding widgets | Buy | Support | Success stories | Careers”.
Just a few words add so much more clarity and value.
For effectiveness, a lucid menu must be coded in a way that makes sense to SEO robots as well as human visitors.
Visitor empathy drives effectiveness
Generally speaking, the more time a visitor spends on your website (its stickiness), the greater its value. This can be accurately measured.
Increasing stickiness requires attention to the user experience (UX). To do this we develop empathy with each type of visitor.
Empathy is the ability to understand and share the feelings of another.
By experiencing the website as a visitor we can develop a user interface (UI) that is useful, fast and engaging.
Achieving visitor empathy is among the skillset of an experienced copywriter – a key member of a website development team. Effective digital storytelling combines text, navigation, video, infographics, audio... whatever quickly engages, informs, persuades and inspires action. Many website design agencies outsource this role because good digital storytellers are scarce.
Strong UX and UI is an ongoing effort subject to feedback, constant testing and tweaking based on data.
Where will my visitor go next?
Irrelevant, unclear and poor usability web pages leak visitors. Tech issues, annoying distractions and user confusion cause visitors to evaporate.
A brand-led website designer aims to plug leaks in every web page by making the target action desirable and maintaining visitor interest.
Web page content must be relevant, clear and easily digested. The visitor is motivated to act with curiosity, storytelling and promise of value to come. Web design requires simplicity and omission of clutter and distractions from achieving objectives, theirs and ours.
SEO robots are visitors too. The website coding team needs guidance to ensure search engines find your web pages and send the right messages to searchers.
Effective CTAs pack promise, persuasion, navigation, curiosity and hope into a few well-chosen words.
The nosecone – call to action
Somewhere on every web page we invite our visitor to engage further with us. To take the next step. This is the success point where our needs and our visitor’s align.
We call it the CTA – call to action
If we view a web page like a rocket, the CTA is the payload – the tiny nose cone delivered by a giant engine.
Effective CTAs pack promise, persuasion, navigation, curiosity and hope into a few well-chosen words.
Or a CTA might simply prompt Get it. It’s all about making it easy for our visitors to choose to move forward.
WWW – which ways work?
Effective websites balance what your audiences want and what you want from them. Here are a few things to remember:
- Respect your visitors. It’s all about them.
- Design each screen for its most important visitor.
- Everyone loves a nice surprise.
- Avoid automatic slideshows and similar devices, instead give your visitor simple navigation so they control the pace.
- Success is the point where your needs align with your visitor’s.
- Give your visitor easy, clear paths to that success.
- Sprinkle the path with delight.
- Don’t distract them from the path.
- Don’t under-signpost the path.
- Don’t over-signpost the path.
- Use your data to keep making the path faster and easier.
- Emphasise security and privacy to make visitors feel safe.
