When designing the long list with categories, actions or whatever, ensure you put the most important and the most frequently used at the top of the list. It’s a simple tip that seems very obvious, but many designers forget about it in reality.
Mobile Navigation Design: Examples and Patterns
It has been previously established that a good design is responsive, outstanding in style, while still remaining fully functional. The interface should appear smooth, which can be further improved with custom icons, well-used animation, and readable content. Also, it should cater to different platforms, such as Android and iOS.
You might think that it is a good idea to utilize all elements to meet all criteria, but you have to be careful. Using them all does not guarantee a great result, so it is important to consider how you can make everything work together. To implement all this, you may need to see the best navigation examples first.
Here is some mobile navigation inspiration that you can keep in mind for startup projects. The following mobile app menu examples are picked based on how they organize different elements into collaborating flawlessly. All the best mobile navigation design 2021 is collected for you here.
Trends in navigation bar design.
Horizontal vs. Vertical
A number of factors influence the decision to choose horizontal or vertical navigation, including design, usability and intention of content. Small websites often prefer horizontal type at the top of the site, while large corporate websites often use both horizontal and vertical type.
Mega Drop-Downs
Mega drop-downs are large menu panels that typically drop down or fly out from a global nav bar. You can’t use a mega drop-down for every site. The main benefit of a mega drop-down is that they facilitate the display of many options at once. So when are they useful? Mega drop-downs work well for e-commerce sites where the category lists are quite large and would not look great in a standard navigation menu. They also work well for sites that have a large list of services
Sticky/ Fixed
Fat footers
We used to see in footer space privacy and legal links, email sign up fields, address details and social links. Plenty of websites use fat footers, but it tends to be used for sites that are quite content heavy or e-commerce sites where displaying the security icons and methods of payment is quite crucial.
Responsive design navigation
Responsive navigation makes your website look good on different devices. The bar usually turns to a “hamburger menu” on mobile devices. This icon is made up of three slightly separated horizontal lines, when you deconstruct the main elements, they stay one under another and create a so-called “hamburger menu.” The reason the hamburger menu is used is because there needed to be a way to navigate on mobile without taking up too much space.
Link the logo to the home page
Primary / secondary
The most common primary navigation consists of the main items, which is consistent throughout the site. Typically, in user-focused design examples, the main menu is placed on the top of the page in the center or aligned to the left or right of the page. Secondary navigation consists of additional items and is typically situated in the middle of a webpage without an expressed design.
Let me introduce 10 great examples of website navigation design
1. Atterley
2. ANGELIA AMI
3. WE3
4. Fairchild
5. Kennedy Center
6. Novotel
7. Adriatic Luxury Hotels
8. Kalios
9. Okeanelzy
10. Australian Ballet
What is bad navigation? What to avoid when designing a site’s navigation?
Generic anchor text
Remember when we were saying that one most important things your navigation elements should be is descriptive? Well, one of the most common sins committed by website owners is to use overly generic text for links.
Overcrowded navigation bars
Sprawling drop down menus
Broken or mislabeled links
These occur when the person creating a website is does not take enough care to ensure that the links they are adding take users where they’re intended to, or else move pages around or delete them without removing links.
Unnecessary links
Inconsistency
Foremost among the issues here is the tendency to change which links are available in the top navigation bar from one page to another. This may lead to users clicking links they did not mean to follow, or being unable to find the page they’re looking for.
Sources:
https://fireart.studio/blog/10-best-examples-of-designing-mobile-navigation/
https://agentestudio.com/blog/website-navigation-design
https://zyro.com/blog/website-navigation-design/
Navigation design
Some menus, on the other hand, include so few items that users find it difficult to understand which features can be found where. While it is often wise to strive for minimalism in UX design, especially for mobile’s small screens, there is a hidden catch. If you try to loop in too many options under each category just for the sake of having three icons on a menu, users will have to guess where to go first.
Literature on Global Navigation
When you’re designing a new website, application, or other product, you always start with the global idea and structure before addressing more detailed issues. Designing the navigation on a website is no different. Getting the global navigation right is the first step in designing a great user experience. Get to know all about the Global Navigation design pattern: when to use it, how to implement it, and what problems to watch out for. Think of it as the website’s steering wheel, central nervous system, GPS, and map all rolled into one – it’s that important to get it done right.
Hamburger Navigation (and Variants)
According to the thumb zone design, the hamburger button is more comfortable for the user compared to the top and side bar menu. A bonus point is that the hamburger menu is available for both left-handed and right-handed users.
1. New entry animation
At the end of 2019, Neumorphism, a new quasi-physical design style became a thing. By playing with light and shadow to highlight a content area or module, the overall feeling becomes more immersive than a flat design. The hamburger menu below is designed by Alex Zubenko, who combines vertical icons layout and Neumorphism.
2. Book hunter app design
This design is a book store app using the outline of a white fox on a bright red background as a logo. Created by Taras Migulko, it uses both a bottom menu bar and a hamburger menu as a sub-navigation. The lively mood and the smoothness of the animations are great eye candy. This combination increases the usability and yet keeps the UI clean.
3. Payback money
Radial Menu (Pie Menu)
The radial menu or pie menu is a variation of the hamburger navigation. Usually, the sub-menu options pop out from the hamburger menu icon. However, this radial menu design is more suitable for touch screen devices and it seems a bit old-fashioned when applied to today’s mobile menu design.
4. Simple radial menu
Here’s a concept of the radial menu idea by Howard Moen. Though this menu design is trying to simplify the scrolling process by putting all the menu categories in a circle, it actually has a higher interaction cost and users might get confused when using the menu.
5. Element picker using radial menu
Nico Salomone designed the radial menu for picking elements in a VR project. As I mentioned above, the radial menu is more suitable for a bigger screen as this work is mainly for a touch pad instead of mobile screen. Overall, considering the layout and the color scheme, this concept is a simple yet bright menu design.
3 Apps That Get Their Navigation And Menus Right
1. Tastemade
The foodie video network, gives us a great example of the bottom navigation bar. The icons are all easily recognisable: a house-like home button, a search button shaped like a magnifying glass, and a classic bookmark and personal profile button. With the recommended number being 2-5 icons, four is a perfect balance. These familiar symbols provide an easy and quick onboarding and ensure that returning users can merely immerse themselves in the app’s primary features.
2. Duolingo
As an education app, has to make all of its content and categories easy to discover and digest. Despite the significant amount of content that language learning apps contain, Duolingo manages to get along just fine without hiding menus to the left or right of the screen. Instead, it features a bottom navigation menu with five icons in greyscale. When an icon is selected, it is coloured in blue, and the name of the screen appears below it. Showing the name of only the highlighted icon keeps the screen minimalistic and lightweight, while still giving a helping hand to users just getting to know the app. [ Bonus: See our UX Case Study of the Duolingo Mobile App! ]
3. Airbnb
Airbnb’s app has used a small smartphone screen to facilitate a task usually done with dozens of open browser tabs and much frustration: choosing lodgings in a foreign city. The smartest aspect of Airbnb’s navigation design is the choice to separate the entire user journey into five separate screens, and then to display the icons for each screen visibly and in the right order. Users can toggle between the homes in their search results, the ones they have saved, the ones they have already booked, and the hosts they are communicating with. This makes browsing and deciding on a place to stay easy and intuitive.
Closing Remarks
Apps may be little, but they are fierce. To make an app that packs a punch but is also onboarding-friendly and fun to use, it is important to make sure you are making it easy for your users to tap and swipe their way through the mobile universe you have created for them. To understand how a user experiences your app’s navigation, you must first walk a mile in their shoes – by using mobile app analytics, reviewers and testers, and a little sprinkling of empathy and common sense.
Want to learn more?
About Lior Levy
Lior is an Inbound Marketing Manager at Appsee. She’s a committed app junkie, loves following new trends in UX design and enjoys talking about her newest favorite app and what makes it work. When she’s not browsing through the App Store, she spends hours looking up new recipes on Pinterest, and sometimes even making them.
Sources:
https://www.interaction-design.org/literature/topics/global-navigation
https://www.mockplus.com/blog/post/mobile-navigation-menu-design
https://usabilitygeek.com/app-navigation-design-mistakes/
Navigation design
Web sites very often have a logo at the top of each page. It is customary to link the entire image itself to the home page. People may or may not know of this behavior, so some sites add an explicit label underneath or to the side of the logo. In general, linking the logo provides a predictable way to return to a familiar starting point. In some ways it is like an “undo” option within for the navigation process.
Mobile Navigation Design: Examples and Patterns
It has been previously established that a good design is responsive, outstanding in style, while still remaining fully functional. The interface should appear smooth, which can be further improved with custom icons, well-used animation, and readable content. Also, it should cater to different platforms, such as Android and iOS.
You might think that it is a good idea to utilize all elements to meet all criteria, but you have to be careful. Using them all does not guarantee a great result, so it is important to consider how you can make everything work together. To implement all this, you may need to see the best navigation examples first.
Here is some mobile navigation inspiration that you can keep in mind for startup projects. The following mobile app menu examples are picked based on how they organize different elements into collaborating flawlessly. All the best mobile navigation design 2021 is collected for you here.
CATEGORIES OF NAVIGATION
As its name implies, structural navigation follows the structure of a web site. It allows people to move up and down the different points of a site’s hierarchy. Structural navigation can be further subdivided into two types: main navigation and local navigation.
MAIN NAVIGATION
The main navigation generally represents the top-level pages of a site’s structure—or the pages just below the home page. The links in the main navigation are expected to lead to pages within the site and behave in a very consistent way. Users don’t expect to land somewhere completely unrelated when using main navigation links. Changes in navigation from page to page are usually small when using the main navigation.
Overall, a main navigation supports a variety of user tasks and modes of information seeking, including known-item seeking, exploration, and even re-finding. From a user’s standpoint, the main navigation plays a critical role in using the site:
The main navigation is often presented in a global navigation area, which generally includes the site logo and utility navigation. (See the following section for more on utility navigation). As the name “global” implies, these controls generally appear in an unchanged, consistent position on all or nearly all pages of a site.
Consider the global navigation area of the University of Valencia (www.uv.es, Figure 4-2), for example. The six main navigation options are on the left below the logo. Some utility links are included to the right, such as a site map and link to site search. It’s also typical to include a design element, such as a picture or graphic, to help create a brand image.
Critics of an ever-present global navigation point to its intrusion on valuable screen real estate. These concerns are entirely valid. The global navigation area in Figure 4-2 occupies a fair amount of the page, and the designers might have done a better job reducing it, particularly on content pages further down in the site. But it’s not a question of including or excluding a global navigation: a global navigation area is usually a valuable navigational device. The question is how prominent and persistent it should be. The answer depends on several factors:
There are times when global navigation shouldn’t be shown, or can vary its form. For instance, some task flows, such as a checkout process or online bank transfer, should restrain people from jumping out in the middle of a process.
Compare Figure 4-3, which shows the home page of the Opodo travel site (www.opodo.co.uk), to Figure 4-4, which shows first step of the site’s checkout process. For checkout, the main navigation tabs were removed to provide focus during the process and avoid errors.
LOCAL NAVIGATION
Local navigation is used to access lower levels in a structure, below the main navigation pages. The term “local” implies “within a given category.” On a given page, local navigation generally shows other options at the same level of a hierarchy, as well as the options below the current page.
Local navigation often works in conjunction with a global navigation system and is really an extension of the main navigation. Because local navigation varies more often than main navigation, it is often treated differently.
Generally transitions from page to page with a local navigation are smooth and consistent. There’s likely no expectation that links in local navigation will cause the user to leave the site, or even the site category. But local navigation can be more volatile than global navigation in some instances. It may be used to link to other page types, content formats.
Overall, local navigation provides a great deal of context, such as which topics belong together, related content, and so forth. In this sense, local navigation plays a key role in indicating the “aboutness” of the site. It also gives a sense of granularity of a topic. For this reason, local navigation supports general exploration, as well as known-item seeking and re-finding. It also points to content a visitor might not have known existed.
ASSOCIATIVE NAVIGATION
Associative navigation makes important connections across levels of a hierarchy or site structure. While reading about one topic, the user can access to other topics. This is a key aspect of hypertext in general, but is also at the heart of the embedded digression problem mentioned in Chapter 2.
CONTEXTUAL NAVIGATION
As the name implies, contextual navigation can vary. It’s situational. Though links may transition to similar pages at the same level within the site, they quite frequently lead to new content areas, different page types, or even a new site.
Generally, contextual navigation is placed close to the content of a page. This creates a strong connection between the meaning of a text and the linked related pages. There are two typical arrangements of contextual navigation on the page (Figure 4-8):
If the navigation is embedded within text, there may be an explicit indication to prepare users for more disjointed interaction, such as linking to a different content format or another site. For instance, an embedded link may be preceded or succeeded by text indicating that the linked material is on a different site or in a different format. Figure 4-9 shows the Education page on the web site of the Information Architecture Institute (www.iainstitute.org). Links in the text lead to other pages in the site on various levels of the structure. The first link in the last paragraph opens a PDF document, as noted in the text. The second link goes to Amazon.com.
Contextual navigation doesn’t support known-item seeking well. Instead, it supports exploration and may point people to new information. From a business standpoint, contextual navigation provides opportunities for upsell. Product pages in e-commerce sites, for instance, often have links to related products and services. This is a common use of contextual navigation in e-commerce.
Accessibility
Embedded links or associative navigation must make sense when read out of context. It’s common to label associative links “For more information, click here,” for example, with “click here” the only linked words. When skipping from link to link on a page, a screen reader user would just hear the link text and not the preceding phrases: “click here,” “click here,” “click here,” and so on. It’s better to link the entire sentence, or at least enough so that the linked portion is understandable on its own.
Related links are also used effectively on news sites. From one article, readers can get to other related articles. For example, each story on the web site for The Washington Post (www.washingtonpost.com) ends with related links (Figure 4-10). There are two main parts:
ADAPTIVE NAVIGATION
Look again at the links in the contextual navigation area of Figure 4-10, and you’ll notice the Sports Articles links change based on which stories readers visit most. By observing what all site visitors do, a new type of navigation link arises: adaptive navigation.
Adaptive navigation is a special kind of a contextual navigation. Its links are generated from a process referred to as collaborative or social filtering. The process relies on an algorithmic ranking of some kind, based on user behavior. The principle is similar to a traditional best-seller list: if many people read something, it must be good. In this case, link relevance turns out to be a socially constructed phenomenon.
Adaptive navigation has been most prominently used to make recommendations on e-commerce sites. The classic example of this is the “Customers who bought this item also bought. ” feature on Amazon.com. Figure 4-11 shows an example of this feature, using Jeffrey Zeldman’s book Designing with Web Standards . [52]
This is an example of passive collaborative filtering: the site automatically collects user behavior to generate the list. With active filtering, participants in the site must explicitly rate a product, person, or service. You may have seen this on web journals and other sites that have a Highest Rated Articles list or similar. Boxes and Arrows (www.boxesandarrows.com), for instance, allows readers to rate each story at the bottom of the text (Figure 4-12). Based on all ratings for all articles, visitors are then able to view the site’s top-rated stories in the navigation.
10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
If content is the heart of every website publication, then navigation is its brain and a fundamental pillar of information architecture design. When dealing with large quantities of content, the critical importance of navigation cannot be overestimated. Content that can’t be found can’t be read. If content can’t be found and read, this means that there’s a lot of cost but zero value.
Navigation is the website’s “table of contents”. In traditional publication, you have page numbering to help you navigate. You can hold the publication in your hands and flick through it. If it’s a large publication, there is usually an index at the back that can be used. However, you can’t hold a website in your hands.
You can’t get an immediate sense of its size or complexity. You navigate a website one screen at a time. That can be very disorientating. It’s very easy to get confused and get lost. A reader who gets lost or confused in this attention-deficit age is likely to hit the “Back” button. Therefore, creating a navigation system that makes the reader feel comfortable, and allows them to find the content they want quickly, is critical to the success of any website.
Designing navigation is like designing a road-sign system. The over-riding design principle is functionality, not style. A reader on the Web, like a driver in a car, moves quickly. Navigation is never the end objective for the reader. It is there to help them get somewhere. (Most people don’t stand around admiring road signs.) Navigation works best when the reader hardly notices it’s there. Therefore navigation design should always be simple, direct, unadorned, with the overriding objective of helping reader get to where they want to go.
Navigation and search are intertwined. Search is a form of navigation. In many situations, the reader will use a combination of the “content gatherers”. They will use search to bring them to the subject area or product type they are interested in. Then the navigation should kick in, giving them the context for their search.
Navigation design requires detailed planning. Once launched, it is not something that should be chipped and changed at every whim. You should treat your navigation as if they are “written in stone” because you risk confusing your regular readers (customers), and these are the people you should avoid confusing at all cost. People are by nature, habitual and conservative. If every few months you change the structure and navigation of your website, you will risk alienating regular visitors who have gotten used to your previous formula.
THE 10 PRINCIPLES OF NAVIGATION DESIGN
1. Design for the reader
The fundamental principle of navigation design is that you should design for the reader – the person who uses the website. Avoid designing navigation simply for it to look good. Also, avoid designing navigation from the point of view of the organization, like using internal, obscure classification names that aren’t commonly understood.
2. Provide a variety of navigation options
If everyone were to navigate through content in the same way, the job of the navigation designer would be a lot easier. Unfortunately, different readers have different preferences on how they like to navigate around a website. Therefore, to accommodate a variety of readers and their navigation requirements, a range of navigation options should be offered.
3. Let readers know where they are
Navigation should give readers a clear and unambiguous indication of what page of the website they are on. Imagine you are on holiday and you are looking at a map in a town square. If the map is well designed, one of the most prominent features will tell you – “You are here.”
Navigation should be presented as hypertext. However, where it is in graphical form – which is recommended only for global navigation – the classification name that describes the page the reader is on, should be a different design form the other classifications in the navigation.
4. Let readers know where they’ve been
A fundamental principle of web navigation design is to let readers know where they’ve been on the site. This is a key reason to have as much of the navigation as possible in hypertext, rather than graphical form. With hypertext, when a link is clicked its colour changes. The standard colours for hypertext are blue for unclicked links, and purple for those that have been clicked.
5. Let readers know where they are going
6. Provide context
A primary function of a homepage is to provide context for the reader. Home page navigation is not simply about functional navigation such as hypertext and search. It also takes content highlights from the content archive, presenting them as summaries and or features.
7. Be Consistent
Readers turn to navigation when they’re confused or lost. Don’t confuse them further by displaying inconsistent or unfamiliar navigation design. Consistency for classification is critical for successful navigation.
8. Follow Web Convention
Over time, a number of navigation conventions have emerged on the Web. The designer who deliberately avoids these conventions, just to be different, achieves nothing except to confuse the reader. Go to the biggest and best websites. See how they design their navigation. Don’t feel ashamed to imitate the best practice you find.
9. Don’t surprise or mislead the reader
Never ask the reader to do something it is impossible or difficult for them to do. A classic example is forcing all users to fill in a “ZIP code” regardless of whether they exist in that user’s country. Never offer the reader contact options they can’t use.
10. Provide the reader with support and feedback
On any website, the reader should be only a click away from being able to contact the organisation. Contact facilities may involve email, telephone, call-back, or customer chat support. A “Help” link is particularly necessary if the reader is faced with a complex task.
We are used to receiving constant feedback based on our actions. However on the Web, the only viable and immediate feedback is through text. Text must be used in a comprehensive way to inform the reader the result of their action.
For example, if the reader has filled out a 30 field form and clicked on “submit”, the website should provide the following type of feedback – “Thank You. Your form has been completed successfully.” If the form was not completed successfully, it should say, “Your email address has not been entered correctly.”
Sources:
https://fireart.studio/blog/10-best-examples-of-designing-mobile-navigation/
https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/ch04.html
https://onextrapixel.com/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/