app design best practices 2016
No element affects usability as much as website navigation design. If visitors can't figure out what to do when they land on your page, they'll leave and find a more user-friendly alternative. On the contrary, when visitors have a clear, well-defined navigation that helps them find what they want and need, they are more likely to convert.
The structure and labels of your navigation can have a significant impact on results. In this article, I will review a few common navigation patterns for websites and provide practical tips on how to design excellent navigation.
Types of web navigation
Top menu
When people think of website navigation, most picture the menu located at the top of the page. This type of navigation is aligned with the way we scan web pages—from top to bottom, from left to right. This navigation is great for global navigation options such as global categories.
Drop-down menu design and sticky navigation are two of the most popular design techniques of top menu navigations. The first technique uses a principle of progressive disclosure—it shows only a limited number of options and discloses additional options on demand (when a user hovers the mouse over the top-level option).
The second technique allows you to keep the top-level navigation options always a visible area of the screen. The menu stays at the top of the screen, no matter how deep the user scrolled down.
Sidebar
The sidebar is a navigation pattern that usually supports for the top navigation. The sidebar is positioned to the left or right of the primary content. When the user navigates to the top-level category, they see a sidebar with subcategories. Sidebar can be a great choice for information-heavy website. It can contain subcategories or provide options for content filtering and sorting.
Footer
Footer navigation is commonly used on large websites with longer pages. Footers often contain links to the site's main pages. The key idea of using this pattern is to minimize the interaction cost—the number of actions required to use the product. When visitors reach the end of a page, they can navigate to other parts of the website in one click/tap. Footer is also good for information heavy websites such as news portals and eCommerce websites.
Breadcrumbs
Breadcrumbs are hierarchical navigation links that appear at the top of a page. Breadcrumbs are a typical element for eCommerce websites and large content hubs. They tell you how that page is nested within other pages.
What's the difference between a sitemap and navigation?
There is a common misunderstanding that a sitemap is website navigation. It's essential to understand the roles of navigation and a sitemap. A site map shows what pages your website consists of. The primary purpose of a sitemap is to categorize the content. It answers the question, "What pages do I have on the website?" Navigation, on the other hand, explains how to get to each page.
Essential design tips for creating great web navigation
It's important to understand that designing navigation comes only after establishing a clear information architecture (IA). IA will create a solid foundation for your navigation system and all you need to focus on is to make it more usable.
The tips mentioned below are strongly focused on creating familiar and predictable navigation. That's why they are applicable both for web navigation and app navigation.
Don't hide the navigation
When it comes to website navigation design, designers should always display the things that are most important to visitors prominently. This rule works both for the content and navigation options. In order to save space, some designers use patterns like the hamburger menu that hides navigation by default and makes it available on demand. It's better to avoid using the hamburger menu because some visitors won't click/tap on the hamburger icon to see the options. The Nielsen Norman Group warns us that hidden navigation increases task completion time for visitors. Remember the old saying, out of sight, out of mind. It still works today and can be applied to user experience.
The problem of saving screen real estate is less important for desktops and more important for mobile screens. But even for mobile devices, it's possible to use more usable patterns such as priority+. This pattern utilizes all available space for navigation options. Thus, the more space you have, the more options you can show.
Image by Guardian via Brad Frost
Put navigation in places where users expect to see it
When we design a sitemap using information architecture, we consider user expectations about the content. We distribute both the pages and the content on the page and create a hierarchy that is aligned with user expectations. The same rules work for other design decisions, like placing individual elements such as the menu on the page. Users should be able to predict a place where they can find navigation. Put navigation in places where people expect to see it – the page's header, sidebar, and footer.
Visually separate navigation from content
A navigation section shouldn't look like the rest of the content on the webpage. It should stand out. Use whitespace (negative space) to visually separate content and navigation options.
Avoid styling navigation options as buttons
Some websites use buttons for header navigation. This can introduce more visual clutter to the layout and make the page look heavy. It's recommended to use buttons only for the calls to action (Download, Sign Up, Vote, etc.). But doing that, you will emphasize this option.
Write descriptive labels
Any website navigation design should be predictable. The visitor should be able to predict the meaning of every option before interacting with it. Descriptive labels in your navigation are good for site visitors because they communicate meaning instantly. Descriptive labels also help search engines understand what your website is all about.
Avoid generic labels such as "Articles" or "Videos." Such labels aren't descriptive because they tell visitors the format of the content, but not the topic. People visit websites to get the answers to the questions they have, and they rarely care about what format the information will be delivered to them. So it's better to use the phrases that are relevant to the goals of your target audience. Google Keyword Planner is a very helpful tool for finding descriptive labels according to the site's domain.
Limit the number of top-level options to seven
Website navigation design should minimize interaction cost—the sum of effort (mental and physical) – that users must deploy in interacting with a site. Limiting the number of links in your top-level navigation is good for two reasons.
- Help users better comprehend UI. In the research The Magical Number Seven, Plus or Minus Two, George A. Miller states that short-term memory holds only seven items, plus or minus two. The more options you have in your navigation, the more difficult the information is to remember and process for your visitors.
- Help search engines analyze your website. Fewer items in your navigation are good for search engines. The more concise your navigation, the more 'weight' every option gets.
But what to do when you have dozens of pages? The answer is simple—you need to prioritize and group them into categories. Every group should have five to seven items. Don't forget to remove user options that are not valuable (rarely get clicked) and those that have low business value (not important for business).
Mind the order
Not only does the number of items matter but also the order of those items. When you work on website navigation design, you might want to sort the options by priority—start with top priority and end with the least important option. While it's a correct approach, it's also essential to consider the Serial-position effect. According to this effect, items at the beginning and the end are most effective, because our brain recalls them much easier than the items in the middle. For this reason, the options we put at the beginning or end of our navigation becomes more prominent.
If you design navigation for a website of a product, you might want to show a link to the product details page first, and "Contact us" or "Purchase" as the last option in the website navigation.
Add search to simplify web navigation
Search can act as a shortcut—visitors can rely on search to find what they are looking for without the need to navigate through categories. At the same time, search cannot be used as a replacement for a menu. Visitors who use search clearly know what they're looking for. Thus, it's less about exploration and more about finding a particular piece of content faster.
Avoid drop-down menus
Drop-down menus work equally bad in mobile and website navigation design. Drop-downs are problematic because they hide options (out of sight is out of mind works in this context), and they increase interaction cost (especially if you have 2+ levels of options). This pattern also doesn't work well for search engines—drop-down menus can be difficult for search engines to crawl.
Don't optimize web navigation design only for the homepage
Believing that the homepage is the first page visitors start their journey is a common mistake among product designers. The homepage may not be the entry point for many visitors since many of them come to a website directly from search engine results, or links from social media and other websites. That's why you must pay attention to website navigation and make sure it's intuitive on every page of the website.
To make it happen, you need to identify your target audience and design a navigation structure that matches their expectations. Also, identify the most popular places on your website using tools like Google Analytics and ensure that navigation design on those pages are crystal clear for your visitors.
Test your website navigation design on mobile
3.7 billion people access the internet from mobile devices. If your website navigation doesn't render properly on mobile, you're in trouble.
Make sure that your website navigation is 100% mobile-friendly.
- Navigation labels should be easy to read on a mobile screen. 16px (CSS pixels) font size is a good default for most cases
- Navigation options should be large enough to be easily tapped. A touch target of a physical size of about 9mm works well for most groups of users.
Analyze how people use your navigation system
The website navigation design process doesn't end with introducing changes in your website. It's also essential to see whether the visitors can navigate successfully using your menu. That's why you need to invest time in finding out how your audience is navigating on your website. You can rely on Analytics to track the visitor's behaviour by using tools like tree testing.
Check the "Behavior Flow" view in Google Analytics Behavior report. Google Analytics will show red boxes next to each of your navigation items, indicating the dropoff percentage. This report will provide ideas about general flows users follow when they navigate your website and what you need to do to optimize such flows.
Conclusion
Helping users navigate should be a high priority for every site. Website navigation design should work equally well for both human visitors and search engine robots. The navigation you crease should feel like an invisible hand that guides visitors along their journey. Learn more about optimize your website through various tools and tricks like sitemaps and card sorting.
Words by
Nick Babich
Nick Babich is UX architect and writer. Nick has spent the last 10 years working in the software industry with a specialized focus on research and development. He counts advertising, psychology, and cinema among his myriad interests.
app design best practices 2016
Source: https://xd.adobe.com/ideas/process/information-architecture/website-navigation-design-best-practices/
Posted by: karlsonopli1944.blogspot.com
0 Response to "app design best practices 2016"
Post a Comment