0

I'm having a hard time to find the most intuitive panel navigation.

Here is what I'm working on:

menu

To expand/collapse the panels, the user has to click the white triangle on the top right. The panel will expand and all others will collapse to a certain size. On the expanded "Meat" panel, the user can select a group ("Beef", etc..). Assume the user goes one level deeper into "Beef", by clicking on a beef image. He will come to this screen:

menu-beef

To let the user know that he came from "Meat" to "Beef", I put some sort of breadcrumb navigation. I gave it already to some users, and the expand/collapse action (using the white triangle) was quite clear to them.

In order to get back to the "Meat" panel, I put a link in the breadcrumb, as it is common on websites. As this is not a web application, hyperlinks are not automatically assigned to such an element and most of the users didn't find their way back. I thought about placing a back-button somewhere, but besides the triangle it looks weird, and left of the text is somehow also strange. The best would be to visualize somehow that the user can click on the text, in order to get back one level, each time he clicks on the text region.

Any ideas to solve this issue?

1

Aren't you making it a bit hard on yourself (and the user) by sticking with one view for everything? Especially on mobile, where space is limited. Considering creating a view for every level in the navigation, like these examples on Tympanus. I'm also pretty enthusiastic about the curtain navigation. This is a two-level-navigation, not three-level, but perhaps it sparks your imagination.

Otherwise, I would try using tabs inside the card with different shades for every tab/level to make it clear for the user where he is. By making the parent a little bit darker than the child, it should be clear enough for the user. Add a small, subtle animation to move the current clicked nav-item to the tab navigation and vice versa to make it clear for the user what is happening

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.