{"id":19061,"date":"2018-10-24T09:00:55","date_gmt":"2018-10-24T07:00:55","guid":{"rendered":"https:\/\/trilogi.com\/blog\/priority-navigation-a-solution-for-mobile\/"},"modified":"2018-10-24T09:00:55","modified_gmt":"2018-10-24T07:00:55","slug":"priority-navigation-a-solution-for-mobile","status":"publish","type":"post","link":"https:\/\/trilogi.com\/blog\/en\/priority-navigation-a-solution-for-mobile\/","title":{"rendered":"Priority+ navigation: a solution for mobile"},"content":{"rendered":"

Let\u2019s talk about mobile navigation<\/h2>\n

Before defining Priority+<\/em> navigation<\/strong>, here\u2019s a question for you: how many times have we visited an online store on our phone and found that the navigation isn\u2019t fully visible, doesn\u2019t adapt well or is far too big?<\/p>\n

The main concern of this post is how to approach mobile navigation in an online store so that it\u2019s usable and easy for our users. There are countless opinions on the subject and plenty of debate about the best solution. We want to explain what Priority+ navigation is<\/strong> and the benefits of using it in your online store.<\/p>\n

\"CaixaBank<\/a><\/p>\n

The \u2018CaixaBank Now App<\/a>\u2019<\/strong> mobile app, recently awarded by the Bank Administration Institute (BAI)<\/strong> <\/a>for the best user experience, featuring Neo<\/strong>, the first AI-powered chatbot providing virtual assistance to users. <\/span><\/p>\n

First, let\u2019s recall bottom navigation<\/h2>\n

Before explaining what Priority+<\/em><\/strong> navigation<\/strong> is, let\u2019s review the most commonly used types of navigation.<\/p>\n

Bottom navigation<\/strong> is a solution that already existed in our apps and organized their sections as tabs<\/em><\/strong>. It was undoubtedly an approach that worked.<\/p>\n

Mobile applications (apps)<\/em> are certainly a good example of usability and functionality, as they are designed specifically for small devices. However, an app\u2019s needs and functions differ from those of an online store, so we need to watch out for the problems that can arise.<\/p>\n

The main drawback is the limited screen width available to display an online store\u2019s sections.<\/strong> For bottom navigation, it\u2019s best not to exceed 5 items. You\u2019ll probably also want to use icons and text. In that case, space will be even tighter and fewer sections can be shown. As you can see, it may not be a good solution for an online store that wants to promote many different sections.<\/p>\n

The example below is the China Tippler online store<\/a>.<\/strong> In Chinese eCommerce, bottom navigation is very common across online stores. On the other hand, many want to move closer to Western aesthetics and are gradually opting for cleaner, less cluttered designs.<\/p>\n

\"China<\/a><\/p>\n

Enter top navigation<\/h2>\n

So far we\u2019ve covered bottom navigation, which originated in mobile apps, along with its pros and cons. Now it\u2019s time to talk about top menu navigation.<\/strong><\/p>\n

With the arrival of new smartphones, a different navigation strategy was needed that could work across different screen sizes and on smaller, touch-based devices. As a result, a light, minimalist icon that could adapt to all of them was revived: enter the hamburger icon, or hamburger menu.<\/em><\/strong><\/p>\n

The main feature of this navigation is the collapsed menu icon which, when tapped, reveals the category menu and other links on the website. Tap it again and it disappears, leaving the page clear of information. It consists of 3 parallel horizontal lines and is usually located at the top left of the screen.<\/p>\n

We say the icon was \u201crevived\u201d because back in 1981 Norm Cox<\/a><\/span> had already introduced this kind of hamburger button as part of the user interface for the Xerox Star<\/a><\/span>. But it wasn\u2019t until 2009 that it got the boost we know today.<\/p><\/blockquote>\n

This icon is now used everywhere. Users have come to associate it with the idea of a menu and know where to find, for example, an online store\u2019s categories. It has become the king of mobile menus.<\/p>\n

The aesthetic advantage is that anything we\u2019d rather not show on screen can be tucked behind this icon, leaving a clean, minimalist design. But watch out! It\u2019s also easy to make the mistake of hiding information that matters to users, who will only find it if they open the menu.<\/strong> They won\u2019t know what\u2019s in that section until they\u2019ve explored a bit. In other words, you can end up with a kind of \u201cjunk drawer\u201d hiding information we\u2019d want to see more easily. Likewise, people have tried to use this solution on desktop<\/em> designs, and that, my friends, is a usability mistake! There\u2019s more than enough room there without hiding links behind an icon!<\/p>\n

And let\u2019s be honest: we all like things made easy and to be told explicitly what we\u2019ll find behind each icon and what everything is for. For that very reason, some designs add the word \u201cMenu\u201d right next to the hamburger menu<\/em> to make its purpose clear. You can see this in the following example from the Anna Mora online store<\/a><\/strong>:<\/p>\n

\"Top<\/a><\/p>\n

What is Priority+ navigation?<\/h2>\n

As a result of the drawbacks we\u2019ve seen in the other options, Priority+<\/em><\/strong> navigation<\/strong> is here to stay.<\/em> This new solution combines the previous two: sections are organized as tabs<\/em>, with one tab reserved for opening a side drop-down menu<\/strong> (as in top navigation with the hamburger menu<\/em>).<\/p>\n

This navigation lets users find the most important sections at a glance and shows much more content without overloading the screen. It can include other categories and\/or relevant links, as well as additional information or contact details. What do you think? Great, right?<\/p>\n

In mobile apps we\u2019ll see examples of Priority+<\/em> navigation, such as Facebook, YouTube (the Library tab shows more profile sections that aren\u2019t visible in the tabs<\/em>) and, of course, Google\u2019s main search page. In the following screenshot we see the tab bar at the bottom and a section on the right labeled \u201cMore\u201d. In the second image we see the drop-down of links inside this icon:<\/p>\n

\"Screenshots<\/a><\/p>\n

Could Priority+<\/em> navigation be the solution?<\/h2>\n

It could indeed. This combination gives access to the most important parts of an eCommerce while reserving an area to show other relevant links whenever needed.<\/p>\n

This solution can also be applied in countries like China that use bottom mobile navigation, as mentioned earlier. It also adds value thanks to the \u201cextra\u201d section.<\/p>\n

We call it Priority+<\/em> navigation<\/strong> because some content is prioritized while the rest is left for users to explore if they\u2019re curious. Even so, all that information stays in the same navigation area, never lost, while the user keeps browsing.<\/p>\n

\"Close-up<\/a><\/p>\n

So, should I use this navigation in my online store or not?<\/h2>\n

It doesn\u2019t necessarily have to be Priority+<\/em><\/strong>, and we don\u2019t mean to confuse you (I know what you must be thinking, but there\u2019s an explanation). Here goes. Every online store has its own needs, style, amount of information and categories, and also its own purpose. At TLG Commerce, our designers and Project Managers,<\/em> are responsible for finding the best solution for each user and type of store.<\/p>\n

That\u2019s why each case must be studied carefully, considering how it will be used, who the target audience is and which information should be prioritized.<\/p>\n

Priority+ <\/em>combines tab navigation with the side drop-down menu powered by the hamburger menu<\/em>. The best navigation will depend on the number of categories in the online store and the client\u2019s goals.<\/p><\/blockquote>\n

To help you a bit more, here are some general tips to keep in mind when planning your online store\u2019s navigation:<\/p>\n