Top Navigation with Profile headache

Question

We have introduced a beta version of our web app 2-3 weeks ago. Although we have not benchmarked it, i feel that something is very wrong here, in the way we present the top nav bar and the profile via mobile.

I would appreciate your constructive feedback alongside suggestions if possible.

We have 6 tabs and a profile page.

Desktop view: We show the logo (A), all of the tabs one next to the other (B) and the user profile at the far end (C)

Mobile view: We show the logo (A), one tab (πως παιζεται=how to play) without an icon (B) and the user profile on the top (C) and below these we have the other 5 tabs (B)

We did not want a burger hence why we went with this solution although i am not entirely convinced this is the right way to go. Not only on mobile two rows of tabs, logo, user profile gets too much space occupied but looks ugly as well.

Answer 1

From a UX perspective:

As others mentioned you are indeed shouting at your users a bit too much. There is such a thing as too much use of iconography. Due to that you are losing any sense of hierarchy within the site.

If "Πως παίζεται" is meant to be a CTA (call to action), make it look like one. A button in mobile would be better than just floating text next to the profile picture.

In general you need to re-approach where you want the user to concentrate on and work from there. I understand the need for everything to be approachable and visible to the user but there are limits to how much attention you can try to draw out.

Your text is inconsistent. "Πως παίζεται" in desktop is uppercase but lowercase in mobile. Keep also in mind that uppercase adds more "noise" and is not as friendly (considering the theme of the website) as you probably would like it to be.

If I could sum all this up: If everything is important, then nothing is.

From a UI perspective:

There are major inconsistencies in text and icons. Text I mentioned above. All icons look like they've been taken from different icon sets. Even the default profile picture looks completely out of place and has a different art style than the main guy in the logo.

Uniformity is a must, especially when we are talking about navigation options. Consider using icons from the same icon set or with a unified colour theme.

You can find some good icon resources here:

• https://icons8.com
• https://icomoon.io/icons.html
• http://www.streamlineicons.com/
• https://thenounproject.com/

Consistency and attention to detail increases trust with your users and makes them consider that you have a good product to offer.

You are also giving a lot of emphasis in icon size but those icons don't have a direct correlation to the menu option that sits below them.

"Ομάδα" (team) has an icon that shows tactics and next to it you have a similar icon (only with gradients) for Superleague.

You are using a playstation controller to signify "Πως παίζεται" giving the impression that you can use a controller. Is that true? If yes then why is it missing from mobile as an icon?

In short: Simplify, I know you want to impress but bring it down a notch and draw attention to a couple of strong elements that help and entice your users.

Answer 2

1. Your logo gets eaten by those icons, on the first sight i did not identify it as the logo

2. Thats why you should either remove the icons and do a classic menu with only text or use icons that are visually different from your logo (just use 1 solid color for the icon, simplify it etc.)

3. You can keep the icon for profile but at least add an arrow that indicates that this is a clickable area, bonus points for displaying the users name.

Regarding mobile

You can use a hamburger icon here or you can display the navigation on top or at the bottom (depending on your user base and if you have more android or ios users).

Same here though: simplify those icons.

Answer 3

The problems that I can identify with the current design:

1. The user cannot see clearly that there is a submenu
2. The user might feel overwhelmed with the amount of the information and the visual cues

In order to solve these issues, my suggestion is to

1. Make clear that there is a tab navigation menu or add the secondary menu when the user goes to the page "How to play"

Option 1: A tab navigation menu

Option 2: When the user goes to the page "How to play", only then show the menu

2. Remove the icons from the secondary menu and keep only the naming, Pectoralis suggested as well.

I am not so much in favor of the hamburger menu in your case, because your navigation is not very complicated. As suggested in this article https://www.nngroup.com/articles/hamburger-menus/ people are inclined to use the navigation more if it is not hidden.