Imagine that you enter a department store, ready to shop for a new t-shirt. You know the brand you want, the color you want, and you know you want 100% cotton, perfect for your sensitive skin.

Suddenly you realize the shop floor in front of you is a total mess.

Under a sign for jeans, you find piles of sweaters and cardigans. In a large display labeled ‘baseball caps’, socks of all sizes are muddled together, along with a winter scarf strewn across the top.

Bewildered, you glance at a map of the store, which turns out to be a little help in your t-shirt-finding mission, as it only contains directions to the Garden and Kitchenware sections.

Annoyed, you leave the store, vowing never to return.

An online customer can feel exactly the same type of frustration when a website’s navigation is confusing – not knowing where to go or being annoyed at the lack of information to help them do what they want.

However, all is not lost. In this article, you’ll learn about design practices, site maps, and the secrets to building the best navigation for your website.

Introducing information architecture (IA), user interface (UI), and user experience (UX) design

Before we start delving into best practices for website navigation, it’s a good idea to have a basic understanding of the following types of design:

• Information architecture (IA) – This type of design looks at the organization and structure of content. Once you understand the basics, you can help your customers find the information they need and complete the actions you would like them to take.

• User experience (UX) – This type of design is about (you guessed it) how the user experiences your product or service and strives to make the overall feel of your website a positive one.

  A UX designer will look at or conduct research to understand user needs and pain points. They will consider the user journey, look at IA to determine what a user may need, and draw wireframes that include page elements.

  UX designers may work closely with web developers and content strategists to truly understand and serve the user.

• User interface (UI) – This type of digital design is all about the touchpoints between a user and your product or service, such as icons, spacing, call-to-action buttons, and responsive design. The UI designer will look at how accessible a page is, whether the colors of the text are easy to read and if the page works across different screen sizes.

Each type of design is essential when it comes to creating your website — especially your website navigation.

A poorly executed user interface (IU) results in lousy navigation, resulting in a terrible user experience (UX). But a strong UI will make it easy for a user to figure out where to go to find what they want, producing a much better UX and therefore a much happier user. These happy users are more likely to buy something, subscribe to your newsletter, and share your products, services, and information with their friends.

Your main goal is to create easy-to-use navigation that will leave your users feeling positive about your site and what you’re offering so they leave your site feeling like they were able to accomplish what they wanted.

What is a sitemap – and why is it useful?

A sitemap is how search engine web crawlers understand your website. This includes information about the pages and files such as video and audio content. A sitemap also tells search engines the website’s hierarchy and which pages are important.

Once you’ve created your sitemap and submitted it to Google, you can use the Google Search Console to check everything is in order. It’s important to check that your links are correct to avoid disappointing visitors and web crawlers.

The sitemap will be handy when it comes to building your website navigation. After all, it will most likely have all the pages you include on your website. This means that you will be able to quickly identify the most important categories for your user and what you must include in your navigation.

The importance of website navigation

Like in the shopping example at the start of this article, if a website is challenging to navigate, users and search engines will find it hard to understand what it’s about.

Website navigation is seen as part of Information Architecture (IA) design. Here are three reasons why it is so important to get right:

1. It affects SEO

Your homepage is typically the page with the most authority on your website. Any pages linked from here are also seen as important. If you’re not directing your users to relevant pages from your homepage, the chance for those pages ranking highly decreases.

2. It affects traffic

The longer a person stays on your site, the more search engines will love you. If a visitor lands on your homepage and doesn’t click a link or interact with your page and heads back to the search engine results page, it shows that the user isn’t interested in your content. This ‘bounce rate’ is calculated as the percentage of people that land on a page and leave. You can find this rate in Google Analytics.

3. It affects your conversion rate

If visitors to your website don’t want to stay and engage with your content, they will leave because they can’t find what they want. You won’t drive any traffic to your product pages, you won’t make any sales, and none of those visitors will convert into customers.

Navigation types

Here are three of the most common navigation styles for websites:

• Standard horizontal – This is the most common navigation style and displays a list horizontally.

• Drop-downs – If you have a lot of categories to cover, such as large department stores, drop-down navigation allows you to list your content easily. It expands to give the user more options. But be careful not to build in too many levels, as that can be difficult to use, especially for people who have disabilities.

• Vertical sidebar – Although somewhat dated now, a sidebar will keep your navigation in one place. If you haven’t got many categories, it’s still a valid option for your navigation.

When you’re designing your navigation, it’s essential to understand how many pages you will be linking to. If the number is high, then drop-downs are a perfect choice, but if it’s fewer than seven, standard horizontal is best. Most websites use standard horizontal, so it’s quick and easy for your web visitors to know what to do.

The 10 commandments to follow

Now that you have discovered why good navigation is so important, and the three most common navigation types, it’s time to give you the rules for getting it right.

1. You shall write for the user – As soon as your user lands on your website, they will see the navigation bar. Avoid using overcomplicated, confusing, or vague language – use popular words or phrases to tell them what you have to offer. On the Namecheap navigation bar, you’ll find words like Domains, Hostingand WordPress. You won’t find words like TLDs, Hosting servicesor open-source content management systems.

   Think of your audience. If the majority wouldn’t understand an industry-specific term, don’t use it. This is also important for search engine optimization (SEO). If your navigation is descriptive and well structured, it helps search engine crawlers identify which of your pages are important.

2. You shall try to minimize the number of items in your navigation – It’s very easy to overwhelm your visitors if you include too many options in your navigation. Less is more. The more succinct your categories and labels are, the better they are for search engine optimization (SEO) as well.

3. You shall try to minimize navigation levels – When you minimize the number of clicks it takes for a customer to reach specific information on the site, the more satisfied a customer will be. The Nielsen Norman Group confirms that “the deeper a hierarchy becomes, the more likely visitors are to become disoriented.”

   A flat hierarchy with easily recognized categories helps the user to find what they’re looking for quickly. However, if your website has a huge number of categories, which could overwhelm the customer, it may make sense to add another level ahead of these categories to make it simpler.

4. You shall update your navigation based on user flow – Google Analytics offers a report on user flow. If your homepage is the main page where your users interact with your website, you can view which of the navigation items are used and which are not.

   Make a point of checking this now and again to get a true idea of ​​which paths are most used. If many navigation items aren’t clicked on, just remove them, or rename items if you think it’s not clear enough to the user.

5. Your navigation shall not be hard to find – Don’t try to be inventive with your navigation bar. Place it horizontally across the top or vertically on the left-hand side. If it’s difficult to locate, your visitors will get frustrated and are more likely to bounce back to the search engine results page and find another website instead.

6. You shall consult the site map to decide positioning – By using the site map to create your navigation you will quickly know which pages are the most important, and therefore should be of the highest priority. There’s no point in burying the most important page deep within your menu. It needs to be front and center for the user to find.

7. You shall design for navigation for mobile too – Fingers are different sizes, so account for this when it comes to links. Make sure they’re big enough. Think about reducing the items in your navigation and displaying the important pages first.

8. You shall use hover-over effects – If a user has their mouse over some text, it’s a good idea to show them where they are so they can easily see what they are doing. It’s the equivalent of using your finger to point where you are on a map. You can also change the text color so it stands out. The clickable text needs to be obvious to the user so that they can interact with it.

9. You shall test your navigation on different screen sizes – Don’t forget that your website visitors will be on a number of different devices with different screen sizes. Make sure it’s easy to navigate if a user is on a tablet or desktop.

10. You shall be inclusive – Web users are not all the same. Some may be visually and hearing impaired or may have cognitive and learning disabilities, impacting website experience. Good navigation should be good for all users, so pay attention to contrasting colors, the ability to change font size, use descriptive labels for links and buttons, and offer keyboard access. You can find out more about guidelines and web accessibility standards at W3C.

A successful navigation

Carefully considered navigation is the key to a successful website. It’s a way of getting the important information in front of the user, making it easy, informative, and fast, resulting in a positive experience that will keep them coming back for more.

Hopefully, this blog post has provided some helpful guidance for planning your own website navigation.

We have received an increased number of phishing reports from our customers. They are receiving malicious emails which are impersonating our services and trying to steal sensitive information.

This is an example of a reported phishing email:

If you received this or a similar email, please do not click on any of the links, delete it, and report it to us.

How to spot a phishing attack?

Although we maintain controls to protect our networks and systems from cyber threats, we do not have control of what scammers are sending to personal customer mailboxes which are not hosted on our servers.

In an effort to protect our customers, we want to highlight a common cyber-attack that everyone should be aware of – phishing.

“Phishing” is the most common type of cyber attack that affects organizations and individuals worldwide. Phishing attacks can take many forms, but they all share a common goal – getting you to share sensitive information such as login credentials, credit card information, or bank account details.

Types of phishing attacks to watch out for

• Phishing: In this type of attack, hackers impersonate a real company to obtain your login credentials. You may receive an email asking you to verify your account details with a link that takes you to an imposter login screen that delivers your information directly to the attackers.
• Spear Phishing: Spear phishing is a more sophisticated phishing attack that includes customized information that makes the attacker seem like a legitimate source. They may use your name and phone number and refer to a specific company in the email to trick you into thinking they have a connection to you, making you more likely to click a link or attachment that they provide.
• Shared Document Phishing: You may receive an email that appears to come from file-sharing sites like Dropbox or Google Drive alerting you that a document has been shared with you. The link provided in these emails will take you to a fake login page that mimics the real login page and will steal your account credentials.

What You Can Do

To avoid these phishing schemes, please observe the following email best practices:

• Do not click on links or attachments from senders that you do not recognize. Be especially wary of .zip or other compressed or executable file types.
• Do not provide sensitive personal information (like usernames and passwords) over email.
• Watch for email senders that use suspicious or misleading domain names.
• Inspect URLs carefully to make sure they’re legitimate and not imposter sites.
• Do not try to open any shared document that you’re not expecting to receive.
• If you can’t tell if an email is legitimate or not, reach out to company support directly via chat or contacts provided on their website. Never use contacts provided in the email.
• Be especially cautious when opening attachments or clicking links if you receive an email containing a warning banner indicating that it originated from an external source.
• Enable 2FA authentication on your accounts where possible.

If you have opened an email but didn’t click on anything, don’t worry then.
Contact customer support via Live Chat if you have any questions.

Wireframing is your first chance to turn those web design ideas you’ve been thinking about into a living breathing blueprint – that’s where things start getting real. At first, the simplistic nature of these designs may prompt you to jump straight in and start sketching your visions. But while wireframing doesn’t have to be complicated, a well-thought-out design provides the foundation to which your team can build something truly special.

It’s an essential part of design planning and interaction design, so you’ll want to get to grips with how to create a winning wireframe. But what does it take to transform abstract ideas into something that will propel your project to the next stage of the development lifecycle?

In this article, we’ll be exploring the dos and don’ts of wireframing – providing you with practical tips on how to create a good wireframe for your website, and what pitfalls to avoid. But before we dive in, let’s answer a few commonly asked questions about this important part of the information architecture (IA).

When does wireframing take place?

Occurring early in the project lifecycle, and often at the beginning of the design phase, wireframing creates a perfect foundation on which to draw new ideas and test design layouts. A simple sketch can go a long way in understanding what your site will look like, even if it doesn’t include graphic elements, fonts, colors, and text.

What are the benefits of a good wireframe?

As wireframes don’t use high-fidelity components, they are quick and easy to assemble. Furthermore, the flexible nature of wireframes allows you to test assumptions and gain validation from stakeholders and peers to proceed to the next production phase.

You can create a wireframe at a basic level using nothing more than pen and paper – or even Post-It notes. While this simple method can get you started quickly, you might need something more substantial to evolve your designs. Additionally, if you plan to present your wireframes to a client or stakeholder, you may want to produce something more professional.

Many design tools can help you create a wireframe. Sketch, which is exclusively made for Apple computers, has long been a choice for designers. However, other popular tools such as Figma are available for both Mac and Windows. It’s worth researching what tool best suits your needs, such as pricing, features, and scope.

Now that you’ve got an idea of ​​some of the questions relating to wireframing, let’s look at the dos and don’ts. What are the benefits of creating a good wireframe and the consequences of poor design?

1. Do research user requirements

Creating a winning wireframe is a combination of research and instinct. You will need to gather both qualitative and quantitative data from users and then use your skills as a designer to decide how to detail the user interface.

2. Don’t try and cut corners

Although creating wireframes for every part of your application may seem tedious, it’s not a good idea to skip what might seem like obvious design choices. For example, one page of your website may look very similar to another page. However, it’s easy to overlook certain user interactions that may become apparent later.

3. Do keep things simple

Wireframes, by nature, should be kept simplistic. But it’s easy to get carried away with too much detail. Remember: the key benefits of wireframing are speed and simplicity, so it’s important to save detailed design elements for later development life cycle stages. How much detail you often include comes down to whether you’re creating a low fidelity (Lo-Fi) or high fidelity (Hi-Fi) wireframe.

• Lo-Fi wireframes are very simple and can be easily achieved with pen and paper. They’re usually for showing navigation, layout, and how page elements flow.
• Hi-Fi wireframes add further details not included in the Lo-Fi design and detail the visual hierarchy of the page, interaction elements, and more.

4. Don’t jump straight to software

In today’s digital world, using pen and paper to create a design for an application may feel unnecessary. However, it’s less time-consuming to sketch your ideas on paper first in most cases. When you’re happy, you can move to a digital tool where you can create a more professional wireframe to present to stakeholders.

5. Do experiment with ideas

With wireframing likely to be the first real process in your project, it provides the perfect opportunity for you to experiment with as many ideas as possible. Consequently, you’ll better understand the advantages and disadvantages of each design, allowing you to find the best solution for your project.

6. Don’t treat each screen separately

If you focus on each screen as an individual entity, you’ll lose sight of the overall user journey. Instead, think about what you want your user to experience. Consideration should be given to the most important areas of the screen, how users engage with the elements, and what they expect to see next.

7. Do aim for uniformity

Being consistent with your user interface elements such as buttons, tabs and labels mean you and your stakeholders will be able to follow your wireframes more easily. To help achieve this, you can create reusable symbols and styles – which saves time by speeding up the process.

8. Don’t use colors

It may be tempting to add color to your wireframe, especially if you want to impress stakeholders with your design ideas. But rarely is this a good idea. The addition of color only takes away from the primary purpose of a wireframe – to demonstrate the app’s functionality and layout content. If you decide to use color, use it with the intent to highlight specific objects.

9. Do get feedback

There is no harm in asking for some constructive feedback about your wireframe designs. You could, for example, ask colleagues, other UX professionals, or gain a different perspective from the online UX community. As wireframing is based on agile methodology, you can continue going back and building on your designs without the fear of failure.

10. Don’t rely on lorem ipsum

It might be a go-to for designers, but dummy text such as lorem ipsum should be replaced as quickly as possible for wireframes. Real content will not only indicate how well it compliments your layout, but stakeholders will appreciate the extra effort, which will result in more valuable feedback.

Design a wireframe you’ll be proud of

Creating a wireframe is not difficult, but designing a good wireframe that will visualize your intended structure to stakeholders requires some planning and knowledge. You may have to go back to your designs a few times to hit the mark, but in the end, the investment you’ve made will result in a wireframe you’ll be proud to show off.

If you want to discover more about the planning step of website creation, check out our Guru Guide on the basics of site architecture.