Content is king. But even with great content, everything falls flat if you’re NOT directing much of your attention to one of the most important aspects of a great web design and content marketing system – and that is site navigation.
In the world of marketing, site navigation has a major role to play. Of course, your site aesthetics matters. But what’s the benefit of having a really stunning website if a great majority of your potential customers can’t really trace you?
You also don’t want to see your site’s visitors leaving without even bothering to check out what products or services you’re offering.
Keep in mind that a good chunk of the visitors you attract to your site won’t just be landing on your homepage to find a bearing. Nearly half of the traffic you attract will be visiting your site via internal links and web pages.
Meaning, a good site navigation has to have all of this well-figured out. Failure of which, you’re likely to end up losing a good number of prospective buyers who find it hard to trace their way around your site.
This post looks at all the possible ways to make your navigation more effective and user-friendly.
Here they are:
#1 Use Descriptive Labels
Using terms such as ‘what we do’, ‘our products’, or ‘services’ doesn’t indicate what you do. With descriptive navigation, it’s important that you use key phrases that also aid with SEO and conversions.
Start by making sure the descriptive labels you use on your navigation bar appeal to search engines. Also,o remember that the navigation you use will still be appearing on every single page of your website. So by integrating appropriate search terms in the labels, you’ll also be helping Google find out what your website is all about.
Even more important, by being descriptive with your navigation, you’ll be helping the visitors get to find what it is they’re looking for on your website. What you want is for your visitors to just glance over your site and be able to figure out where to locate a certain product or web section.
Your site’s navigation is the first place you start informing visitors and search engines about your area of specialisation. The labels you choose must therefore be the top-of-the-mind phrases that online users key into search engines for relevant links and web results.
Top among the tools to use to find out about these search terms is the Google keyword tool. And while at it, it’s crucial that you avoid using empty labels such as ‘solutions’ and ‘services’.
Even more important is that you don’t make the common mistake of listing all your services under a single page. Most likely, that will never get the page ranked as it doesn’t focus on one topic. Search engines also get confused and may as such respond by ranking you unfairly.
It is simple logic – no one ever searches using the term ‘product’ or ‘service.’ They instead tend to be more specific with what they’re looking for. To extend the same courtesy to your business by being more specific with the kind of labels you use on your navigation bar.
Not just your navigation, but your overall site architecture plays a fundamental role in determining your search engine ranking. Start by designing individual pages for every single one of the products or services you’re offering.
#2 Steer Clear of Format Based Navigation
By labelling your content like videos, photos or white paper, what you’ll be doing is identifying the format of the content instead of labelling the topic. Online visitors don’t go to search engines to look for videos or photos. They instead look for answers or solutions to their problem. What they want is the information to guide them to what they want.
Labels that indicate content format also tend to be less descriptive, and may therefore NOT be that useful to the people visiting your site. After all the people searching the net don’t really care about the format their requested content will be served in, so long as it addresses their problems.
#3 Don’t Use a dropdown MenuDropdownn Menus
to enhance the visual appeal of your website. But using them has never been a good idea for two possible reasons:
-
- Search engines find it hard to crawl them. Depending on how they were programmed, just having them on your site could greatly harm your search engine ranking. The majority of online users have admitted to finding drop-down menus annoying. That’s because most of them decide on what they’re to look for the moment they glance over your site. But when presented with more options upon hovering over a menu item, just deciding on which sub-menu item is best suited for their needs is a tough task on its own.
- The majority of online visitors have been found to skip drop-down menus. The exact reason is yet to be known, but it could be because of analysis paralysis, where online visitors end up confused when presented with an overwhelming amount of options.
But if you really must use a drop-down menu, then look no further than the mega drop-down menu. And that’s because different research findings suggest they’re the best performing drop-down menu from the list of options you have.
Works for those with a diverse set of services or products to advertise. Instead of lumping them all in a drop-down menu, create a page for each one of them and run them as a mega drop-down menu, unless otherwise.
#4 Set Your Limit to a Maximum of Seven
Don’t fill up your homepage with menu items. While it’s advisable to create a separate web page for every product or service you provide on your site, don’t forcefully list all of them on your navigation bar.
Here are all the reasons anyone would want to limit the number of their menu items to seven:
-
- Again, the fewer amount of menu items appeals to search engines more. Here’s the thing: your homepage is the most ranked page on your website. And that’s because it has the most search engine authority, coming as a result of containing the highest number of links directing to the different pages on your site.
- By filling it with lots of links, you’ll be diluting the authority, thus reducing the odds of some of them being ranked favourably.
- Succinct navigation allows more authority to flow to every single one of the interiors pages it’s linking to, which goes on to ensure that they’re ranked high in the SERPs.
Here’s an example:
Suppose your homepage contains about 70 menu items. That, combined with all the links on your homepage, let’s assume amount to about 200 links in total. The authority the homepage passes to every single one of the interior pages it’s linking to will be divided by the total number of links you have on your homepage. In this case, it will be the homepage’s authority divided by 200.
By reducing the number of items, you’ll be increasing the amount of authority the homepage passes to interiors pages, thus increasing the chances of getting them ranked.
To calculate the number of links you have on your homepage or any other page, consider using Link Juice Calculator.
You can also use it to estimate your authority increase should you decide to cut the number of links you have on the page. Even though the platform uses PageRank, and NOT Domain Authority as it’s widely thought, the concept used is pretty much the same.
#5 Be Mindful of the Order of Your Site’s Navigation
Just as important as the number of items on your navigation bar is the order in which they appear.
Come to think of it, as with any list you make, the items you place at the very beginning and end matter the most, considering that’s where your visitors direct most of their attention while checking your site out.
Otherwise referred to as the serial position effect, the items that appear both at the beginning and end of your list contribute to what’s psychologically referred to as cognitive bias-ness.
First,t we have the primacy effect which makes the items placed at the beginning of your list easy to both memorise and remember. Second is the recency effect, which makes the items that appear at the end of your list also easy to remember; considering they’re the last thing visitors get to see when they look over your site.
Find out what’s the most important menu item on your list and make a point to find them a slot at the beginning or end of your site’s navigation.
The prominent spots on your navigation bar are better off reserved for the most relevant items to your site’s visitors. This also aligns with the core principles emphasised in both content marketing and web design.
If you can’t figure out the most relevant items from the list you have, then consider checking out your Google analytics. Which page enjoys the most visits? Well, this is the page to include among the first few items on your list, and corresponding so, with the least visited item appearing at the centre.
#6 Navigation on Mobile Devices
Ever since responsive web design was integrated as one of the ranking elements, the need to subscribe to the best navigation standards and practices with regards to navigation heightened tenfold. That way, the hamburger icon was born.
For what’s worth, a hamburger icon is basically a navigation icon made up of three simple horizontal lines that represent the menu you have on-site.
Designed to take the semblance of a sandwich, the icon appears at the top right corner of your mobile site. All that visitors ought to do is click on it for it to expand and reveal the list of your menu items arranged in a vertical position.
The hamburger menu has become the industry standard. But that’s NOT to say your visitors by default understand this. It’s for this reason that it’s widely recommended that you remember to include the word ‘menu’ alongside the icon to clue your visitors in on what the icon is all about.
Design your navigation is among the many things you should be doing to your site. Go ahead and design the site according to the mental picture you’ve created.
A few weeks in, head back to the site so some little bit of analysis and evaluation until you’re able to fully optimise the navigation for SEO and modify it as per the required industry standard.
There are reports to use in finding out which items on your navigation bar are mostly viewed by visitors. Examples include the ‘in-page’ and ‘navigation summary’ in your behaviour report in Google analytics. Others include User and Behaviour Flow report.
With in-page analytics, there will be a series of orange boxes displayed next to each navigation item, together with the number of visitors (in percentage) visiting the pages. The only problem is that the tool tends to be a tad bulky. The data provided is also NOT as accurate as expected.
An alternative should be the navigation summary. Just head to the home page section, and check out the list of page links and the number of views they’re getting in percentage. That should clue you in on how to rearrange your menu items for better results in the future.
Another option would be to click through your behaviour report and navigate to the behaviour flow report. The report presented here isn’t very much different from that of the Audience, except for events tracking.
Based on the results you get from analysing the reports, here is the possible course of action you should be thinking of undertaking:
- Check out the items that your visitors almost never click and do the obvious – remove them.
- You can also rename or relabel the items that are rarely clicked, but only if you deem them important. But you’re better off just getting rid of them.
- Move the items that register the highest number of clicks either at the beginning or end of your list.
Top 10 Website Design Trends for 2022
The web industry has advanced so much in the past decade and a half.
As we worked with more and more clients, they began to tell us what they wanted on their websites. We designed our sites to meet their needs. Nowadays, users are happier when websites are easier to use.
As a result, today’s designers are more comfortable taking risks and pushing themselves, creating bold conceptual designs that will hopefully have a lasting impact.
As our society becomes increasingly dependent on the Internet, it’s more important than ever to create interactive online experiences that engage and inspire people. Web designers, therefore, have the unique opportunity to tell meaningful stories online and spark conversations that matter.
We must therefore keep changing our web design techniques as technology advances. This year our world will be changed by new trends in web design, so let’s talk about what to expect.
Being inclusive is a central tenet of good design; the idea is that once grasped, feels quite obvious. In today’s global market, it is, in fact, very familiar to almost everyone.
So what does this mean for designers? It means you will have to consider your audience. As someone who makes things for the public eye — doing it for profit — it also means thinking about what will make your work more accessible and relatable to those you are trying to represent in your work.Â
This is what makes designing for accessibility so important — it is an effort to ensure that your site works for all users, no matter their needs or limitations.
Inclusive design is a process that accounts for all users’ needs, including their identities and experiences, to ensure the overall success of your website.
For example, illustrations of objects and actions can be used to create non-gender-specific images that are fun and playful.
Furthermore, the Internet’s growth will surely lead to a growing number of virtual identities this year as people consider alternative realities beyond this world.
In response to this phenomenon, web designers have been pushing the boundaries of what’s possible in terms of design, coming up with new ways to emphasize the use of images through animation and interactivity.
Immersive experiences like these have the potential to change how people interact with technology. As we move further into an era of mixed reality and avatars, this trend will only continue to grow.
For example, the model is shown above in the video by Ranboo Fashion is wearing gender-neutral clothing with an un-revealed face to conceal their gender identity.
-
Scrollytelling
Scrollytelling refers to websites that use scrolling to convey a story and engage users differently than static designs. It also refers to websites that use scrolling as a primary navigation method, which has become more prevalent over the last few years.
Scrolling up and down through long lists of data can be frustrating, so using a screen to scroll through a long list of text is like reading a long novel without any distractions.Â
Scrolling stories can be visually dynamic and interactive but can also include sound and animation effects, making them more engaging for your audience.
The scroll telling trend allows us to create personalized narratives by presenting our messaging on an interactive platform.
As with novels, websites now offer users the chance to explore and find their way through the content while recognizing how different users approach the same information.
For example, To make it easier to understand how far away Mars is, artist Josh Worth created If the Moon Were Only 1 Pixel, a website that uses a single pixel to represent the moon. The website makes it simple to understand just how vast our universe is. As shown in the image below.
Here we have a layout that moves the focus point to the left or right instead of up and down. It can be used for various purposes, from scrolling through an album or slideshow to presenting information in a linear list on a webpage.
Websites with horizontal scrolling are more engaging than sites with vertical scrolling since the former contains more information and is less predictable. But only when they’re done right.
For example, On SIRUP, a site where you can listen to music with videos, you can scroll down for an endless stream of videos while listening to music.
Moving design elements can create a sense of progression even when the viewer is not scrolling. This is illustrated in the image below.
The use of typography in web design has been on the rise for some time now. Its diversity and variety make it a great fit for websites that need a personality boost. It is also an excellent choice for sites that attract attention by using bold, expressive fonts.
Modern web design is typography that’s minimal, bright and cheerful. But Brutalist Typography is quite different, with huge lettering, dark colours, and readability concerns.  Â
Brutalist typography uses an intense and sometimes jarring style of lettering to create a metropolitan vibe on the user’s site or within an app.
An example of Brutalist typography is the design for a Brazilian technology hub called the Zona de Propulsão, which features a large typeface reminiscent of Brutalist architecture. This designer intended to convey that knowledge and innovation are everywhere and that anyone can access them if they try.
The image below illustrates brutalist typography showcased by Zona de Propulsão.
With the trend of typography having reached its peak, another type of typography has emerged. Kinetic typography is typography that includes animation and movement instead of drawings or photographs. It tells stories through purposeful animations.
Animated typography is animation to draw attention to content on your website. It is a trend that has been around for a long time and can make web pages more pleasing.
Web designers originally introduced this to enhance their sites, but now it’s used in various ways such as advertisements, film titles, and even with lyrics.
The best thing about typographic animation is that it can be used both as a text effect and as a full-fledged animated video, especially when applied to explainer videos.
If you are looking to create motion graphics, there are plenty of online options that offer you templates and tools to help you create engaging animations.
Kinetic typography can be used in different ways to communicate any message you want. The most common use for this type of visuals is in videos.Â
They work well with movie trailers, commercials, or YouTube videos where people tend to skip ads and move on to the actual content. You can use them for any visual content that needs quick delivery but doesn’t have time for a full-fledged animated video.
A good example of this trend is The Dillinger website, shown below, which features a menu that doubles as its own website’s design. This creates an immersive experience for viewers.
It is illustrated in the image below showcased by Dillinger.
People have always tended to romanticize things from the past. What’s new is that we now have more media as technology has advanced and become more readily available.Â
As time goes by and the pandemic continues, more people are looking for ways to escape their environment and seeking out ways to reduce stress.
These design trends create a classic look using retro fonts, blurred images, and textured backgrounds.
To build a more personal connection with the viewer, some designers are using analogue photography, soft lighting, and filters to create relatable experiences for the user.
An example of this trend is Bravenewlit, an interactive magazine that is a playful space. The curves of the curvy typeface and the earthy hues and grainy images make the text and images feel cosy to the reader.
This magazine feels like a playground for readers to engage with handwritten writing and gives the magazine an approachable feel.
The image below, courtesy of Bravenewlit, illustrates this example.
If you can’t resist the siren song of a neon website, there’s a good chance that you were born in the ’80s or ’90s. Colour is an essential part of any website design, as it helps you attract users’ attention and sparks their emotions.
The best part about neon collars is that they can be used on any website since there are so many shades to choose from. Neon combined with gradients gives websites a modern feel that captures users’ attention and boosts your brand awareness.
For a long time, the use of grunge fonts bore a stiff, contrived feel. Now designers are using grunge fonts in web design to communicate a sense of youth, underground attitude, and other elements of coolness.
An example of this trend is Superglow, a design studio for music. They have created a fun and easy-to-read website with big, attention-grabbing titles on yellow background.Â
Their menu list is accented with fuchsia when hovering over it, and it changes to the project’s photo with a fade-out animation of the mouse that appears on the hover.
It is illustrated in the below image from the Superglow website.
An invisible system that helps you organize the content on your page or website is called the grid. A grid system will help guide you through the tricky process of designing layouts and is, therefore, a very useful tool to have.
The best websites are built on a grid. It’s not just about how it looks, but also how it works. Grids help to organize information and make a website more user-friendly.
A grid keeps your designs on track. It gives your work a good structure and shape. Aligning content off-centre can draw attention to a certain element and make your design memorable.
What if I told you that web designers could get rid of the grid altogether? Imagine if each website was a unique layout that couldn’t be replicated by anyone else? That’s what going off-grid means in web design terms.Â
You get to break away from convention and take risks in your designs without fear of alienating your audience.Â
Nowadays, web designers don’t need intermediaries to turn their ideas into reality. The Internet allows the most spontaneous schemes you concoct in your sleep to become simple realities.
And the best part is that it has been coded already, so you don’t have to spend hours making sure your code is perfect.
An example is _Arrowww Space’s portfolio, _which uses the quote from one of its designers in the header. The quote shows his philosophy of embracing accidents by overlap text and linear structure backgrounds.
Showcased in by Arrowww Space in the image below.
Recently, the clean, minimalist style has become the norm in most design spaces. Its influence may be discouraging some designers from engaging in more visually rich projects.
Content multilayers can challenge the conventions that we often see on the Web. By creating immersive experiences, users are more likely to interact with a site and explore its different elements.
This technique also makes it easier to put a lot of content in a limited space, such as on mobile devices.
With an example of the General Condition, photos all share a common theme, and they combine with animation and a black background to create a cohesive experience.
Below is an image that shows a website that follows this website design trend.
Delights add a special touch to the user experience, and the good news is that both surface and deep delights can deliver that special touch.
Delight is the warm feeling you get when you find a product or service that gives you exactly what you want.
Delighters can be visual, tactile, and auditory. They can also include microcopy, animations, and sounds.Â
Deep delights provide functionality, reliability, and user experience. This makes users more likely to have a positive experience with the product and return as a customer.
Though surface delights will always be good, they are no longer effective design strategies for the Web. To be truly effective, you need to think in-depth about your users’ desires and habits and create a website that sparks sustained pleasure throughout the user experience.
A good example of delight Website design is Airbnb which offers experiences for the entire journey.Â
Marking the map tags you’ve already looked at not only helps you find what you’re looking for faster but also helps you see from a distance where you haven’t looked yet.
Showcased in the image below by Airbnb
We have looked at various websites that were influenced by trends like brutalist typography, soft muted palettes, building nostalgia and using high contrast themes for colours.
It is not a matter of if but when the Metaverse dominates headlines- web design found itself on a shift of changes brought by the new era.
The design industry seems to be in the process of rapid change similar to the time when the Internet was new, a time of massive shifts in technologies and interactions.Â
People in the design field need to keep up with these trends, but we also need to remember that many trends are fads that don’t last long.
Web designers need to evaluate their work by balancing what users expect critically and their aesthetic inclinations to create effective designs.
It’s a Wrap
This post is meant to give you a few menu ideas and inspiration. Feel free to implement these tips to both your design and content management system. And while at it, keep in mind that a good site ought to be flexible enough so you can play around with the labels and re-order your menu items for better results in the future.
As with any other rule out there, a few exceptions still hold. Just in case you’re NOT sure of what to do, why NOT contact an experienced web specialist to help you review both your site and analytics for the best way forward.
In brief, you should be striving to make your navigation work for both search engines crawlers and human visitors.
Any other questions? It could be about the home button or anything else. You are invited to contact MediaOne today for a free SEO and web design consultation.
