One place for hosting & domains


      12 Navigation Menu Design Tips for a Better User Experience

      While creating attractive and valuable web pages is important, your efforts can be wasted if they are unorganized. This could make it difficult for users to view and interact with your content, leading to bounces (page exits) and potentially lower search engine rankings.

      Fortunately, you can design the perfect navigation menu to help users quickly find the pages they’re looking for. With many styles and formats to choose from, you’re able to create menus that impress visitors and deliver an excellent User Experience (UX).

      In this post, we’ll introduce you to navigation menus. Then, we’ll explore twelve useful tips for designing your menus as well as share some examples to inspire you.

      Ready? Let’s get started!

      An Introduction to Navigation Menus

      Navigation menus display an organized list of all your web pages from one dedicated area. Typically, they appear across headers or sidebars, so that they’re clearly visible and accessible for your website visitors.

      Menus enable users to navigate around your site more easily, but they also help them to make sense of your content. For instance, by viewing your menu, users can better understand the relationships between your web pages:

      mega menu dropdown example

      When setting up your navigation menu, you might consider featuring submenus or local navigation menus within your overarching main menu. Then, you can add lower levels of categories to your navigation if you have lots of content on your site.

      12 Tips for Designing the Perfect Navigation Menu

      Now that you know how helpful navigation menus can be, let’s take a look at twelve useful tips for designing one.

      1. Prioritize Accessibility

      A well–designed website is one where users don’t have to work hard to find what they’re looking for. Meaning, when a visitor lands on your page, they should be able to quickly locate your menu and understand how to use it:

      stylized dropdown navigation menu

      Although you can be creative, it’s important to prioritize designing an accessible website. Therefore, try to avoid vague or complex labels that might confuse readers. Instead, opt for clear fonts, high-contrast colors, and direct language.


      2. Optimize the User Experience (UX) 

      Providing a quality UX can boost your conversions and reduce bounce rate. To optimize your UX, aim to keep your menu simple so users don’t have to get to grips with complex systems. There’s a lot to be said for neat, clean designs that allow visitors to breeze through your website.

      It’s a general rule of thumb that in three clicks or less, people should be able to land where they want to be on your site. That’s why websites with lots of content areas often choose mega menus:

      mega menu navigation menu design

      These mega menus are frequently used by large e-commerce stores since they make all pages accessible from one space.

      Another factor that can impact your UX is your hosting provider. DreamHost provides quality shared hosting that can set you up with customizable themes and must-have plugins for all types of websites. We also offer user-friendly interfaces plus regular updates and around-the-clock support.

      3. Stick with Straightforward Designs

      You might be tempted to fill your menus with lots of effects to impress your visitors. However, consider saving the flashy features for your overall web design. Still, you might like to include images if it assists with your navigation goals:

      navigation menu active and hover state design example

      Another option is to utilize relevant, helpful icons such as directional arrows to guide users through your sections.

      4. Appeal to Your Audience     

      You can’t design the perfect navigation menu without considering your unique target audience. With this in mind, you can choose color schemes, typefaces, and call-to-actions (CTAs) that are more likely to appeal to your market. This can make your links appear more clickable.

      For example, a hard news website is unlikely to use the same font and messaging as a quirky baking blog:

      split navigation menu design with logo at center

      When choosing headings or CTAs to feature in your menu, you’ll want to inspire users to act. Essentially, visitors need to be incentivized to read further or discover more of your content.

      5. Be Consistent

      It’s important that the format and design of your menu meets your visitors’ expectations. So, consider using the same styling options to highlight menu items. This way, users know when a link will take them to a new page or expand into a dropdown menu.

      For example, Benefit’s website uses directional arrows beside links that expand into dropdown menus:

      simple mega menu with call-to-action

      Additionally, it can be helpful to distinguish between primary and secondary headings. You might want to do this by making top-level menu items slightly larger, or applying a bold style to indicate more significance.

      6. Organize Appropriately 

      A navigation menu is an ideal way to organize your web pages. Plus, it enables users to view your content in a way that makes sense. For instance, blogs can organize posts by topics while an e-commerce website might group products by categories:

      multi-level dropdown menu design example

      Once you’ve identified the main categories of your content, you can build your navigation menu around this. It’s also useful to choose relevant headings that properly describe the page.

      7. Establish a Clear Hierarchy

      Implementing a hierarchy within your menu enables you to break content up into smaller chunks. This makes it more digestible for users. As such, try to group relevant information together.

      For some websites, it can be useful to organize information according to what is most popular or important to visitors. Then, you can make these headings stand out within your menu. Strive to achieve a balance between showing users pages of interest while also leading them towards pages that best serve your business goals.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      8. Consider the Mobile Experience

      A responsive menu will display attractively across different size screens such as smartphones and tablets. This is important since nearly 60% of total global traffic comes from mobile phones.

      Most websites tend to opt for hamburger menus for mobile devices:

      mobile nav menu design

      Failing to build a responsive website is arguably one of the biggest mistakes you can make when it comes to web design. Therefore, as you are creating your menu, consider which links are most important to include in your primary menu as this is what will be seen on smaller screens.

      9. Use Familiar Web Conventions

      Designing your menu with unfamiliar conventions might require users to learn new practices, which can be inconvenient and annoying, so you’ll want to avoid this. For instance, most users are accustomed to clicking on the website logo to return to the homepage.

      If your logo leads to a signup or product page, this may confuse your visitors. Another common convention is ‘visited’ links changing color. Including these well-known practices on your website enables users to intuitively navigate your pages.

      10. Optimize for Search Engines

      In order to drive more organic traffic to your website, you can optimize your navigation headings with popular keywords. Google Analytics and Google Keyword Planner are excellent tools that enable you to identify which words and phrases users are searching:

      getting keyword ideas in Google Keyword Planner

      Then, you can include these key terms within your menu. As a result, your website may just rank higher in search engines.

      11. Choose the Right Type of Menu

      There are many types of navigation menus to consider. Dropdown menus often display when you hover or click primary categories. Then, you’re presented with a list of secondary items.

      These menus look stylish and modern. Plus, they’re a great way to conserve space:

      simple dropdown navigation menu design

      You can go a step further and design a complete mega menu. These are best used for content-rich sites, since they can present all your pages without appearing too clunky:

      menu menu navigation design example

      Horizontal menus, which list major pages in a row format, are also quite common. Alternatively, a vertical menu, listed in a column at the side of the page, assists readers with scanning, since eyes naturally move down (not across):

      stylized sidebar navigation menu design

      Vertical menus tend to be a good match for websites with longer menu labels since they offer more space. However, they can also be eye-catching, which makes them a good choice for creative service sites.

      12. Add Breadcrumbs

      Breadcrumbs enable users to see where they are within your site’s structure. Plus, they make it easy for visitors to return to high-tier pages that led them to their current location:

      sidebar navigation menu design example

      Adding breadcrumbs to your menu avoids users needing to navigate all the way back to the beginning. Instead, they can easily jump back a step or two to find what they need.

      Excellent Examples of Navigation Menus 

      Now that you know how to design the perfect menu for your site, let’s take a look at some examples.

      Mostly Serious

      Mostly Serious features a clear hamburger icon to make room for a fun animation:

      off canvas menu design default state

      When you click on the icon, it opens a vertical sidebar menu with only the primary headings displayed:

      off canvas menu design expanded active state

      Once you start scrolling past the animation, you’ll see a sticky horizontal menu that’s neat and accessible, without distracting from the experience of reading the page:

      fixed nav bar example

      In this example, each type of menu is used appropriately. On top of that, when you hover over menu items, all navigational links are highlighted in bright blue and underlined for consistency.

      Bobbi Brown

      The Bobbi Brown website features a primary horizontal menu nestled beneath the heading. This makes it one of the first things you see when you land on the page.

      Each of the main menu items features its own dropdown menu that includes text links among high-quality images, which make the menu more engaging:

      simple mega menu with images

      Additionally, the menu is organized effectively, with the most important categories appearing first such as New and Bestsellers. Even within the dropdown menus, image links prioritize the most useful customer pages, while other areas of the site are stacked vertically at the side.

      This is Amber

      This is Amber features a quirky off-canvas flyout menu in the form of tabs that expand when clicked. Then, the selected page slides across, replacing the existing page you’re viewing:

      horizontal navigation menu design

      It’s an incredibly unique way of displaying menu items. Plus, it does a great job of building a brand identity. Visitors can also access the primary links through a horizontal header menu at the top of the page.

      Blackbird Cigar

      Blackbird Cigar uses a hamburger menu, which opens a vertical menu when clicked. This is styled like a dropdown menu although links open across instead of down:

      nested sidebar navigation menu design

      Moreover, the menu features a stylish design that conveys a clear hierarchy, enabling visitors to understand the relationship between pages. For example, when visitors hover over primary links, they turn transparent, while secondary links are distinguished from top-tier pages using contrasting colors.

      French but Nice

      French but Nice is a portfolio website that uses a captivating vertical sidebar menu that organizes projects chronologically:

      brutalist sidebar navigation design

      When a user hovers over one of the links, a preview of the page appears in a lightbox. This is particularly useful for a website of this kind, since visitors can view multiple projects without leaving the menu.

      Create the Perfect Navigation Menu

      A navigation menu is a necessary part of any website, so it’s important to make sure that yours is user-friendly and effective. Otherwise, your content can be difficult to find and hard to make sense of.

      However, when you follow a few (or all) of our top tips, you’ll be able to more easily design the perfect navigation menu. For instance, you might choose a hamburger menu so that your pages can be viewed on mobile devices. Or, you could utilize strong colors, fonts, and images to make your links more clickable.

      At DreamHost, we understand the importance of getting your content online quickly. That’s why we offer Shared Hosting with SSL certificates, a domain, and privacy protection to get you set up in no time. Choose a plan today to get started!

      Great Design, Powered by DreamHost

      We make sure your website is fast, secure and always up so your visitors trust you. Plans start at $1.99/mo.

      shared hosting

      Source link

      Improving the Kubernetes Experience: Eliminating Toil and Tribal Knowledge

      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      September 29, 202111 a.m.–12 p.m. ET / 3–4 p.m. GMT

      About the Talk

      Let’s create a mutating Kubernetes admission controller using controller runtime, a set of go libraries for building controllers. Controller-runtime will wire up additional configuration into a pod so that cluster users can depend on their applications having certain environment variables and/or sockets available at runtime, without having to understand the details.

      What You’ll Learn

      • How to use controller-runtime
      • How to configure and use mutating admission webhooks
      • How to provide a more consistent experience for users of a cluster

      This Talk Is Designed For

      Developers that want to improve the experience of running applications in a Kubernetes cluster and reduce the burden on users by eliminating toil and tribal knowledge.


      Go programming, Kubernetes webhooks, client-go, and the Kubernetes API

      To join the live Tech Talk, register here.

      Source link

      What Is User Experience (And How Can You Use It to Build a Site That Suits Your Audience)?

      What a time to be alive!

      Beginners with no coding experience can now build a website with minimal effort and expense. Even better, the options are limitless: You’ve got an entire arsenal of colors, fonts, images, and buttons at your disposal. But with so many design elements to play with, it can be tempting to go a bit wild.

      “A sprinkle of animation here! A dash of cheetah print there!”

      But, as is often the case with things that glitter, it’s easy to go overboard — especially if your creativity is reducing the functionality of your site.

      Whether you want to sell a product or share some blog posts, you’re not really building the website for you. It’s your site’s visitors that need to be happy with the design and user interface. That’s where User Experience (UX) comes into play. Keeping a strong focus on UX while building your site should pay off in higher conversions and lower bounce rates.

      In this article, I’ll give you a crash course in UX and explain what a UX designer does. Then we’ll go over some tips on recognizing good UX design when you encounter it. Finally, I’ll show you how to use UX to create a better website for your audience. Feel free to jump ahead to the section that’s most beneficial to you!

      Ready to talk UX strategy? Let’s get started!

      An Introduction to User Experience (UX) and Why It Matters

      Simply put, User Experience (UX) is how interacting with technology makes a user feel. UX applies to any technology, from an app to a game console.

      When it comes to websites, UX design is about optimizing the interaction between the human user and the page. A site built with solid UX principles should leave the user feeling like they accomplished what they came to do without frustration.

      That may make you think of going all out with the website’s visual design. That might include flashy animations and gigantic image carousels. If you remember MySpace, you probably still have nightmares about animated glitter and MIDI versions of Blink-182 songs . . . yikes.

      A MySpace profile using lots of bright colors and glitter.

      But UX design has a lot less to do with how a site looks than how it’s used. To be effective, your website should be a complete experience — not just words and images on a page.

      Users will forget data, such as how much they paid for the products they ordered. However, the experience of ordering should be pleasant and effortless. That experience will stay with them, increasing the odds that they’ll buy from you time and again.

      If your site delivers a poor UX, you may see the opposite result. Users who become stressed out or angry when using your site will likely head to one of your competitors’ sites. They have many options and no reason to return to a website that’s difficult to use.

      If you’re still not convinced that UX matters to your website, here are a few key statistics:

      All of this serves to illustrate the importance of good UX design when building a website.

      The Role of the UX Designer

      UX is so vital there’s an entire profession dedicated to optimizing it. A UX designer’s day-to-day tasks will vary based on what kinds of projects they’re tackling. However, the goal is usually the same. The UX designer’s job is to optimize the user’s experience when interacting with digital technology while also keeping in mind the well-being of the business.

      To achieve this balancing act, the UX designer follows a process that results in multiple deliverables.

      Before any actual designing starts, there’s a lot of UX research to do. Therefore, the designer may first create one or more audience personas. This enables the designer to understand the user’s needs.

      Next, the UX designer may present a potential user flow diagram to help explore possible ways that a user may interact with the website. They can then translate that information into a prototype. Prototypes may be as basic as a wireframe, a rough blueprint for what a final web page could look like. The designer may also create a more visually-robust prototype or even one that can be interacted with.

      A basic wireframe for designing a website.
      A basic wireframe.

      The UX designer’s responsibilities don’t end with the final design. Once the site is launched, they may conduct usability testing or look into usage analytics to identify and fix potential problems.

      In other words, they’re involved with all stages of a website’s creation and launch.

      How to Recognize Good UX Design

      If you’re handling your own UX design, it’s your responsibility to advocate for your audience while ensuring that you’re still getting what you want from your site. To do that, the first step is to learn how to recognize robust UX design.

      With that in mind, let’s look at some examples of UX in the wild. There are four key elements you’ll want to pay close attention to.

      1. Navigation

      Poor navigational design can render any website useless. Moving through a site should be smooth and intuitive. The navigation menu should also be accessible no matter what device a visitor is using.

      Breadcrumb navigation is one way designers prevent users from getting lost, especially if a website has many pages.

      H-E-B’s website, using a navigation bar and breadcrumbs.

      It’s also important to pay attention to links. Web designers who employ strong UX make sure you can identify links when you see them. This often means underlining them and using a different text color. They’ll also use meaningful anchor text, so you know where the link is taking you before clicking on it.

      2. Content

      A significant part of successful UX is understanding how people interact with different parts of a website. For example, most people don’t read web page content normally. They scan it and then stop to read if they’ve found something interesting.

      Content is scannable if a user can quickly browse through a blog post or sales page and come away with a clear idea of what it’s communicating.

      Content made scannable using headings, short paragraphs, and a bulleted list.

      Keeping paragraphs short is one way to create scan-friendly content. Those paragraphs should be broken up frequently with headings, lists, and images. Designers may also make use of pull-quotes, bolded text, and similar elements.

      3. Animation

      Animation is an effective way to stand out from a sea of websites and grab a user’s attention. It adds an element of fun and can contribute to creating a memorable experience for the user.

      However, there’s a right and a wrong way to go about implementing it.

      Subtle animation can provide feedback while you wait for a transaction to complete. An animation can also loop endlessly while you struggle to focus on reading a product description. These approaches create two very different experiences. The overuse of animation can also affect UX on mobile devices.

      4. Responsiveness

      Optimizing a website for mobile users is a must. If you’re like most people, you usually use your phone to access the internet. If you come across a site that you have to struggle to use on your device, you’re likely to simply abandon it.

      Beyond choosing a responsive theme, you can take additional steps to ensure that your site works well on all screens. For example, you can run your website through Google’s Mobile-Friendly Test Tool.

      Sample results of Google’s Mobile-Friendly Test Tool.

      This tool will alert you to issues that are keeping your site from being mobile-friendly. You may find that a particular font is too difficult to read on a tiny screen, for instance, or that buttons are too small to tap easily.

      How to Use UX to Design a Site for Your Audience

      Now that you know what good UX is, how do you apply it to your site?

      You probably won’t be doing intensive market research or prototyping with high-fidelity wireframes. Still, putting on your UX designer hat can help you create a site that both you and your audience will love.

      First, it’s important to be clear about why you have a website and what you want it to do. For example, are you:

      Next, get to know your ideal user or potential customer. Creating a user persona will help you imagine how your target audience may interact with your website. This persona can be as simple as who the person is, what they want, and what keeps them from getting it. Crucially, you must identify what the user needs to be successful on your site.

      Remember that accessibility is an integral part of UX. You may have visitors who use assistive technology, so consider making accessibility a priority when building your site.

      You can also check out your competitors’ sites to see what’s working for them. Is the shopping cart icon always in the upper-right corner? Maybe yours should be, too. You can be creative without reinventing the wheel; users shouldn’t have to figure out how your site works to accomplish their goals.

      Sample results from Google’s PageSpeed Insights.

      Finally, website performance matters for UX. Slow pages will cause visitors to leave before the site has a chance to load. There are many ways to speed up your site, although your best bet is to start with quality hosting.

      Building a Better User Experience?

      Partner with DreamHost. We’ll make sure your website is fast, secure, and always up so your visitors trust you. Plans start at $2.59/mo.

      UX Resources

      At this point, you’ve likely figured out that UX design isn’t something you optimize in one shot. There’s a lot more to this field than we can cover in one article.

      UX Matters’ home page, which uses an infographic for navigation.

      Fortunately, there are many quality UX resources you can refer to as you continue to improve your website:

      • Awwwards is where you can find inspiration. Grab some coffee; you’ll probably be scrolling for a while.
      • UXmatters covers just about everything related to design. There’s content for everyone — from the seasoned UX strategist, UX researcher, UI designer, or graphic designer to brand-new UX enthusiasts.
      • UX Magazine publishes the latest news, timely insights, and UX research for anyone interested in improving their visitors’ digital experience.
      • Stack Overflow is the place for all your burning questions. It’s an open community of helpful, knowledgeable people.
      • Website and Digital Marketing Help is a Facebook group powered by DreamHost where website owners of all levels can share best practices and ideas.

      If you combine these resources with research and practice, you should find yourself implementing good user experience practices in no time.

      Design a Great User Experience

      You don’t need to be a professional UX designer to build a website your audience will love interacting with. All it takes is some understanding of what will make life easier for your visitors and a willingness to build a site that provides that experience.

      UX describes what the experience of interacting with your website is like for users. Optimizing your site’s UX means ensuring that it has clear navigation, creating content that’s easy to scan, testing it for responsiveness, and more. There’s a lot to learn, but there are also plenty of useful resources and knowledgeable designers who can help.

      After that, you’ll be ready to conquer the internet with your UX-optimized website! You can check some of the performance-related tasks off your list early with our high-quality shared website hosting plans.

      Source link