To The Envy of Ariadne, or Where Mobile Navigation Leads a User To | Umbrella IT

To The Envy of Ariadne, or Where Mobile Navigation Leads a User To

 

Have you ever found yourself in a situation when your friends or colleagues in a breeze use hidden features of familiar apps, and you gratefully note this, but at the back of your mind regret not having used them before? Unfortunately, many features of mobile apps remain a mystery, because users simply have no time to go into details. How can we help a mobile app find a way to the user’s heart by the way of clear and easy navigation, for instance.

 

It would be foolish to try and imagine a modern world without any mobile communication or mobile apps.

Although a mobile phone appeared quite recently – in 1973, just 44 years ago, today we use it to talk, write, negotiate, take photos, pay bills, read the news, draw, count training time, the energy value of our food and our sleep time, etc. The mobile device often knows more about us than our family and friends.

After a while, we adjust to mobile products we apply most often, reluctant to change our habits. And although now new apps pop up like mushrooms after a spring rain, we have no time (and interest) to look into a new non-standard navigation or strange symbols, which at first glance may seem a complete abracadabra.

Firstly, it takes much time.

Secondly, it is off-the-wall (and we need time to accept anything new).

So, this is the way it goes for a person desperately busy with own concerns. Umbrella IT suggests looking more closely at the language of the app navigation design. You will get to know it better and then, fully armed, can use it in your app, avoiding any UX mistakes that result in the last positions in Appstore or Google Play.

 

WHAT DOES THE USER NEED FROM A MOBILE APP?

Results of various UI/UX researches have shown that the user’s basic impression of the app is formed within first 10-15 seconds. This is not much, but enough to engage his/her attention. The main idea is not to lose any of the seconds in vain and use the time to win the user.

And the main role at this point belongs to the visual elements of design. I saw – I liked – I stayed!

Think It Over!

According to Statistic Brain data (as of September 2, 2017), the total number of downloads on Google Play was 91,000,000,000. Add also 62,000,000,000 Apple downloads.

Just imagine the number of apps! And, choosing from the diversity, you are sure to rely on the first impression. In other words, before you understand how easy or useful the app is, you may close and forget it, if the design seems not appealing to you.

But these are the first seconds…

What’s the point of a good-looking app, if we delete it after one or two failed attempts to use, since it is inconvenient and baffling, and we have absolutely no time to adapt to the new rules? The more so, as there are other more user-friendly apps at hand. And a modern user is spoilt for choice

Let’s take, for example, messengers: there are a lot of them, and the users choose ones that are easier to use and find some specific features in each of them.

According to Statista, millions of unique users choose “their own” messenger.

 

statista

 

What exactly does the user find in “his/her” mobile app? What should be provided for in a new app to make it popular?

  • uniformity: nobody will examine a new concept on each new screen – we want the app to have a uniform style (both from the point of view of design and functions).

This is one of the reasons for the unconditional popularity of Facebook: whatever the page/screen in the app we open – everything is recognizable and easy to understand.

  • clear structure: things shall be clear and simple – otherwise the user will spend no time trying to understand it but will either go to another app or skip some information.

The user needs to know his/her location in the app, how to get to the desired screen and how to return to a previous one. A title/tag of the screen is intended to show the user the current location.

 

milenana

 

  • immediate practical value: no one wants to freeze in confusion before a large selection of functions and buttons; we shy away from unwanted or unnecessary pages, as we need only the information we have come for and we do only the actions we need at the moment.
  • opportunity to apply the previous experience of using mobile apps: not many like “surprises”, when familiar symbols or icons hide the functions we are unaccustomed to.
  • convenience: we use mobile devices in action, on the run, sitting at the table, lying in the bed, in the street, in the dark.  And this means that regardless of the situation, all navigation elements should be visible, accessible and easy to use.

No one is fond of situations when we have to try several times to activate a button on a mobile screen that is obviously too small or to swipe on and on in order to switch to the part of the screen we need. We all set a high value for our time and want the app to respond quickly to any command.

 

In general,

the user prefers to think of WHAT is done in the app, but not HOW it is to be done.

The reason is as follows:

  • given a modern pace of life, there is no time for this;
  • even if time is enough, no one wants to spend it solving extra problems that can be avoided (by using another simpler app).

And now look at the screen of your mobile device: is it 5 inches? Or more?

Do you think it’s easy: to come up with a mobile app navigation design that would fit into the screen, be equally easy to understand for the users of different age (sex, nationality or profession) and still convenient-to-use so that the users would not spend their precious time searching and guessing?

No, it is not. But possible.

Speaking of major platforms (Android and iOS), we understand that each of them has its own mobile app navigation patterns, familiar to their loyal users.

For developers of Android apps, Material Design is their Bible, specifying the way to create visual, interactive or moving elements. And Android users are accustomed to the style and features of their apps.

Similarly, iOS developers have their own Guidelines.

Such standards are developed for each platform so that users could feel “at home” in any new app. We get used to it, adapt and, by force of habit, we regularly enter the apps just like our own study or workshop intended for our hobby.

 

guitar

 

But just like in a workshop, each shelf is intended for definite things, and we know exactly which box to open, we want to understand where and what to look for in any mobile app.

 

USER’S GUIDE

A key tool of UI / UX designers to tell the users about the app is a menu. A set of symbols, pictures, texts that helps choose the right screen, switch to it and perform the actions required.

 

FULL-SCREEN MENUS

Such menus raise fewest questions among the users; they utilize all the screen space available and, accordingly, display a maximum possible content. All you need is to select the menu item that interests you and then look into it in more detail.

Information in such mobile menu design is given in the form of a list (with a text description of positions):

 

amazon

 

Or in the form of a grid (using images):

 

amazon

 

Pros:

  • contains many items (we immediately see what the app can offer us);
  • gives a clear description of positions (usually there is a text and an icon for each menu item: the text is for beginners and the icon is for those who have been using the app for a while and are accustomed to its interface);
  • the user acts intuitively (wastes no time thinking, but simply selects one of the list items to see the more detailed content).

 

Cons:

  • The rest of the app content is hidden, and we won’t see it unless we select the required item.

 

Good news: full-screen menus are the simplest and most consistent mobile app menu examples, thus they fit well into apps operating a large amount of information. Firstly, the user selects the item of interest and then can look through the full content related to the item, without being distracted by any other information.

 

HAMBURGER MENU

The most popular and most discussed type of menu. On the one hand, the icon is familiar to all the users and does not take up much space. It would seem to be the best mobile menu design: frees the space and hides the information in the place where everyone will look for it.

But… on the other hand, without knowing which information is hidden there, the user won’t look for it and will remain in the dark. Therefore, this type of menu is said to be gradually dying away. Let’s wait and see what new experimental app menu design inspiration will bring us. But for now, we unwittingly continue searching the apps for the hamburger icon (in various variants).

The hamburger menu often conceals secondary features. And the features that we use most often and always need at hand, are offered in a more obvious format.

 

nearby

 

Pros:

  • recognizable icon;
  • compact.

 

Cons:

  • when open, it hides the rest of the app content;
  • the content of the menu itself is unknown to the user and can remain unviewed.

 

Good news: Today, the hamburger menu not just opens a list of links to the app sections, but becomes a pleasant surprise for the user, since it includes a wide variety of content (contacts, social network icons, animation, sound effects, animated background, etc.).

 

TAB BAR

We would call this type the most user-friendly of mobile navigation examples. As we are accustomed to using such bars in desktop versions of websites and apps, and we know exactly the way they work. For this reason, these bars offer the most frequently used functions.

 

Pros:

  • the bar is fixed at the top or bottom of the screen;
  • helps understand a current location of the user in the app (the relevant element is visually marked (with color or highlighting).

 

Cons:

  • the number is limited to five items (such bar covers only the most vital app functions);
  • there is no space for text near the icons. And if some super-original icons are applied, the user may not understand what is happening and where the app is switched to;
  • the top bar often disappears while scrolling, and the user has to scroll up all the content again to return.

 

 

Good news: switching between tabs on the bar can be performed not only by clicking on them but also by gestures (say, by scrolling). When we talk about mobile phones, it is obvious that switching between the buttons arranged in a row on the screen is not always convenient (although the designers strive to make the distance between the buttons as sufficient as possible). Therefore, the user is offered a choice.

 

BUTTON MENU

This is the type of menu you need first to try before you understand what the button is intended for. This button on the screen helps you quickly move to the action, which is most important in this app section.

The menu opens either by pressing or pressing and holding the button.

As a rule, the button stands out against the background of other interface elements due to its color and convenient location, so it’s hard to miss it.

 

gif

 

Pros:

  • takes up minimum space on the screen;
  • the icon of the button may be described with a text so that the user can clearly understand its purpose.

Some icons, which at first glance are hard to interpret in more than one way, can have a different meaning in different apps. For example, a pencil icon may mean creating a new message, or it’s editing.

Cons:

  • the button can overlap some content on the screen;
  • the function of the button is not always immediately clear.

 

Good news: There aren’t many buttons on the screen, so the user is not distracted and wastes no time choosing between several bright elements. Usually, there are one or two buttons used for basic functions of the app (for example, in the mail it is the function “to write a letter”).

 

USING GESTURES

We have long got used to the screens of our mobile devices responding to our touch. And designers actively use different gestures (tap, double tap, scroll, swipe, pinch, etc.) we apply intuitively as if we had a mouse in our hand.

 

Pros:

  • this way of dealing with the content is more convenient for mobile devices;
  • navigation elements are hidden and do not take up much space on the screen;
  • this is a technology of the future driven by the popularity of sensor devices.

 

Cons:

  • users are not aware of such hidden elements and have to learn about them empirically.

The sixth feeling is really deceptive and not many have it in their power. Therefore, do not count on the user’s excellent intuition that will help get outside of all questions. Test any complex navigation with some of your friends – a couple of behavior patterns will undoubtedly be a surprise for you.

 

Good news: for the users not to get lost among hidden elements the various hints are offered when the app is used for the first time. Onboarding process is activated to familiarize new users with benefits of the product. Do not skip this step – the hints are created specifically for the users who have the habit to utilize all the features for 100%.

 

BOTTOM LINE

Mobile apps are created to provide the users with new opportunities. Mobile navigation is a guide in any app, and therefore, it is a guide in the world of new opportunities.

No doubt, no one forbids you to use only the most essential functions of the app. But having bought a new car, you are sure to check it in all possible modes and situations, aren’t you? The same is true for a mobile app: new opportunities are delivered in a user-friendly and familiar way.

Use 100% of your product potential – do not give any chance to your competitors and do not give your users any reason to start doubting whether their choice was right.

 

Contact UmbrellA IT

 

Photo: Shutterstock.com

 

 

 

 


More

  • Umbrella IT Takes Top Spots in Web and App Development
    Umbrella IT Takes Top Spots in Web and App Development
    Skateboarders and bungee-jumpers love the risk of what they do. To them, the thrilling danger is fun and exciting–it keeps them alive. But when it comes to online presence, why take risks? Umbrella IT is the recognized safe option in Russia. We were the first official Symfony partner in Russia. Our pedigree is known to our …
  • How to Build an App like Uber: Development Guide to a Million Dollar Project
    How to Build an App like Uber: Development Guide to a Million Dollar Project
    Uber was the first company which successfully implemented both sharing economy and on-demand business model and boarded the entire world. The destabilization of the traditional taxi industry doesn’t prevent it from considering itself as a tech company, rather than a taxi firm. It makes sense: exemplary service and effective technical solutions are quite the things …
  • 6 Tips to Increase User Engagement with Mobile Apps
    6 Tips to Increase User Engagement with Mobile Apps
    What makes users come back to your app time and again? How to make your mobile app run at full blast and be indispensable to one and all? Do you have a dozen or maybe two dozens of apps installed on your smartphone, but actually use only a few of them? You don’t want your …