Navigation Bar with Text App

Question

Answered:

I settled with this design and Icons ("My List" is not 100% correct, but I used it for the "My" to let the user feel more comfortable with the app)

Thank you for your help!

---

Question:

I am working on an app and I have 4 main windows, which can be switched to from a bottom navigation bar.

Recently I asked a friend if the navigation bar is intuitive or if more context is needed to understand what the Icons mean - because I had doubts that the Icons alone would be easy to understand.

His answer was, after understanding what the Icons and the App do,

"that the Icons fit their windows, but he would prefer the text to be shown all the time, not only after pressing the three dots"

For explanation: The "Random Movie" Icon is the core of the App, so that is why there is a house, as in "home".

Please forgive me my spelling mistake and the wrong Icon from the "Favorite Movies" - forgot to change it.

So my Question:

• Is it better to show the text along the Icons? (I thought it would get too chaotic if too much information is presented at once, like "less is more")

• Do the Icons match their descriptions, or am I on a wrong way here?

.

Answer 1

Is it better to show the text along the Icons? (I thought it would get too chaotic if too much information is presented at once, like "less is more")

Check more information about this subject here: When to use icons vs. icons with text vs. just text links?

Basically a user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Do the Icons match their descriptions, or am I on a wrong way here?

(this one is vague since it depends of the perception of each individual but here it goes)

1. The Favorite Movies could be an heart or star icon.
2. What's the difference between Movie List and Movie Database?
3. The Random Movie could be the shuffle icon since shuffling means playing something on a randomized order

Answer 2

Always use labels for your icons if you can. This greatly helps icon usability.

Here's a snippet of an article by the Nielson Norman Group on icon usability.

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

[...]

There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces. This absence of a standard hurts the adoption of an icon over time, as users cannot rely on it having the same functionality every time it is encountered.

Source: Icon Usability

About your four icons.

I think the first one is unclear. For me it means to add something. When thinking about favourites I would use an icon like a heart of a thumbs up. The second and third icon are clear for me. The fourth isn't. I'd look for an icon with a question mark or something that indicates randomness like a dice.

Answer 3

Design in general, if you cannot recognise what the icon is without text then you shouldn't use it. Especially in UX terms when you want somebody to click something.

Answer 4

It is better to show an icon with text. Many people are not familiar with all icons. The primary task of an icon is to help users where they need to go and browse for the data they are looking for.

For icons with labels, users were able to correctly predict what would happen when they tapped the icon 88% of the time.

Icons can make or break the usability.

For reference: https://uxplanet.org/tips-for-using-icons-in-your-app-541a6728e7d4