Taiga-front: Mystery meat navigation in main menu

[fuzzy76]

You are employing Mystery Meat Navigation in the main menu. The difference between timeline, backlog and issues is not clear at all until you mouseover leading to a bad usability experience.

[KDWorsley]

These are pretty standard terms in Agile development, no? Any explaining of these would seem like a bug.

[fuzzy76]

You misunderstand. The problem is that there is no text, only icons.

This is an error both from a UX and accessibility perspective. I would actually call it a pretty elementary one.

[liamdawson]

I must admit as a returning user, the icons (and lack of any other context) are confusing - I don't know where to go to do anything without having to blunder my way around. :-1:

[Xaviju]

In terms of accessibility, all buttons include an aria-label indicating the link content.
Suggestions to improve this are welcome.

[fuzzy76]

This is about usability, not accessibility. The icons does not clearly tell the differences between timeline, backlog and issues. There should be text shown below each button. I have used Taiga for months, and still have to hover the mouse over several buttons and wait for the tooltip to know which one to press. There is a reason most other tools use text buttons.

Look at http://gigi.nullneuron.net/gigilabs/on-mystery-meat-navigation-and-unusability/ for a better description.

[EstherMoreno]

We are working on a new icon set for the sidebar. Do you think this changes could help you to recognize every section? Including text below the icons is a solution but we prefer to work on improving the icon semantics.

[fuzzy76]

These are just as confusing as the earlier ones. Let's guess:

• Search, this is always a magnifying glass. Easy one.
• Horizontal lines. This reminds me of a mobile hamburger menu. I guess it could be a list. A list of what? A project consist of a lot of things. After long consideration it occured that it probably is the activity feed, but it actually took me quite a while.
• A symbol resembling a mountain? If you put a square border around it, it would look like the standard icon describing "pictures". Is that it? Or is it the luminati?
• The standard symbol for "open new window"? Or is it a stack of windows or a stack of documents? I actually have no clue what this will do.
• I would expect an icon of three columns to bring me to the sprint board. But I know this button doesn't. It brings me to a screen with one column...
• A standard bookmark icon, as used in numerous webapps on the web. I would expect to be taken to a list of bookmarks related to the current project?
• A book. So probably help pages, documentation or the wiki.
• A standard user symbol. This is probably the users associated to the project.
• A cogwheel says settings, so I guess this is obvious as well.

[fuzzy76]

Highly recommend you read this: https://medium.freecodecamp.com/material-design-and-the-mystery-meat-navigation-problem-65425fb5b52e#.7ra4q7rrg

[KDWorsley]

I would hope the menu is not cluttered up with unnecessary text. Mystery meat navigation doesn't apply here, this is a specialised menu bar, not a public website, and the people who use it will memorise what each item is in 30 seconds if they have half a brain. Keep it clean and simple!

[fuzzy76]

Thank you for implying I have half a brain. Your argumentation are sure to make you a welcome person for discussing usability problems.

The last article I linked does not talk about public websites. It talks about... drumroll specialized menu bars. I suggest you read it.

This is really basic stuff that is part of the first semester of any UX education.

[KDWorsley]

I did not mean to imply you have that much a brain! Terribly sorry for the misunderstanding.

[fuzzy76]

Ah, the personal attack. The sure sign of a man without arguments.

[Xaviju]

Sorry for locking this but in the latest comments our code of conduct has not been respected. Personal attacks will not be tolerated in this project by its maintainers. We are committed to making participation in this projects a harassment-free experience for everyone regardless of their opinions.
We apologize to all Taiga users expecting a constructive dialogue about our navigation menu who have received this attacks.
In terms of solving this issue, we will ask UX and UI users and contributors of Taiga for their opinions and we will close this issue with the final decision.

[jancborchardt]

Hi @Xaviju @EstherMoreno. I’m not a regular Taiga.io user, I only checked it out very rarely in the past (also congrats on the design. I am a designer however and have some experience, designing @Nextcloud (formerly ownCloud) among other things, and doing design consulting for several open source projects.

Here’s what I expect behind each of the icons:

• (Magnifying glass) search, that is pretty clear
• (List of lines) menu, like a hamburger menu which would retract from the left. Thinking about it it could also be »list of issues« …
• (Mountain? Arrow?) I have no clue. Base? Goal? This is a pretty big issue already since being one of the first real icons here except a basic one like »search«
• (Stack of rectangles) Also no idea really in the context of a project management application. This would be images maybe? Or topics in this context?
• (Three columns) I guess a Kanban board, like the look of Trello or any other kanban board. ;)
• (Ripped off rectangle) Phew … might also be a broken »Bookmarks« icon. Looks a bit like a normal »picture« filetype icon too. Really no idea.
• (An open book) Wiki maybe?
• (People) team members or user management
• (Gearwheel) settings

Bottom line: Only using icons for anything more than one or two icons somewhere in a header makes it very difficult to understand the purpose. Even or especially if it is the main navigation, there should always be text below or next to it.

@KDWorsley never assume that »the people who use it will memorise what each item is in 30 seconds«. What about first-time users? What about people who haven’t used it for a week and come back to it? People also use other software than Taiga, and similar icons might be used for very different things.

[KDWorsley]

@jancborchardt "I’m not a regular Taiga.io user"

That's nice. I'm a paid user. If text were added to menu items I would no longer be a paid user due to the clutter in the menu, and I'd find something else. 40 people in my organisation use this, not one has said a word about not understanding the menu within minutes of using, or confusing with other software. It's a feature, not a bug. We also use JIRA with its all text dropdown menus, and those work too.

[Xaviju]

Hi @jancborchardt THANKS for helping out here!!
Only icons would be hard to understand so we went with the approach that we found on our research of some other apps: displaying the icon name on hover. So when a user hovers an icon this is what happens:

Questions:

• Is that enough to avoid _mistery meat_ or accesibility problems or the only option is adding text below?
• Are there other options?
• What would be a good practice (UX and UI) in other apps around?
• Facebook or twitter (amongst others) have the same problem, don't they?

@KDWorsley We are grateful that your company is a paid user (THANKS, that keeps Taiga running and its very important to us!). However, I'd love to listen to every professional opinion regardless of how much they use the tool (that insights are also very useful). When someone tries to help in an Open Source project I feel I should always be welcoming and grateful. Thanks again.

[KDWorsley]

I think that's a fair solution, it stays unobtrusive, and if someone really wants they can always block the CSS locally.

[KDWorsley]

Also let me know if Taiga wants user testimonials - would be happy to send one!

[fuzzy76]

@Xaviju

Is that enough to avoid mistery meat or accesibility problems or the only option is adding text below?

I don't feel you read any of the links I provided to understand what mystery navigation is. It is the problem of adding cognitive strain by forcing users to guess and/or search manually for the navigation destination they want to reach. This does not change that at all. The icons already had tooltips.

Are there other options? What would be a good practice (UX and UI) in other apps around?

Those are thoroughly explained in both of the articles I have linked to in this issue.

Facebook or twitter (amongst others) have the same problem, don't they?

Twitter on desktop shows text on their menu, so they solved it. Facebook has three icons. The low number makes it both easier to remember and easier to guess.

[Xaviju]

@KDWorsley we have an open issue to learn who and how is using taiga: https://github.com/taigaio/taiga-back/issues/817

[Xaviju]

@fuzzy76 of course I read your links. I was just asking for more opinions, examples and suggestions to improve it. Thanks.

[audreytoskin]

Hover text helps, but when a new user is searching for a UI element, they have to mouse over the side bar one item at a time till they find it.

The WordPress side-bar menu might be a good example solution. In the desktop version, at least, the WordPress admin lets you toggle the display setting for the left-side menu, showing either a minimal bar of icons, or a wider display with descriptive text labels beside the icons. Showing the text labels makes it easier for new users to navigate. Hiding the text saves room for users who have memorized the icons.

[pudlovich]

I agree that this is a problem with using Taiga for me and a lot of people in my company. Most of the navigation in the application is a mystery and it takes a lot of time to get used to. I've been using Taiga every day for almost a year and I still think it's not intuitive and requires too much thought - time and time again.

I think that labeling these icons clearly is a must, otherwise the app is making a bad first impression on a lot of people.
By the way I'm sure that it's possible to add explanatory text to the menu without cluttering it too much.

Regarding hover - it helps a little, but it's not making people in my company feel less lost - it just enables you to eventually find your way, through slowly checking out one item at a time.

Regarding Facebook - yup, they have a "usability problem". But they use only three icons, from which the messaging one is instantly recognizable, the friends invitation is clear after first use, and the third one... you just get used to it, I guess 😉
And remember that ~90% of the time you use them when you have a notification, not when you're struggling to find some function. For example "Home page" isn't an icon, it's clearly written (at least in my locale) - now that I think of it, it's probably to avoid using them too much.

[stale[bot]]

We have been doing some housecleaning work prior to Taiga6 upcoming release and we are rejecting old issues that we didn't correctly attend back then. Since Taiga6 brings a significant UX/UI rework, we encourage you to wait and see if Taiga6 satisfies this need and open a new issue if that's not the case. This time we will make sure to review it when it comes through. Thank you very much on behalf of the Taiga Team!