1

So... I am building a shopping app and I have a slight concern about placing two "Kebab" menu icons this close to each other.

Explanation:

This is a wishlist page and user can manipulate with products inside the lists he created. However, when user navigate to certain list he can do things with product or the whole list. Those options are important since they are related to the extra feature that this app is providing.

I believe there is nothing to be concerned about but I would definetely like to hear if there is a better option to show this particular case to the user.

enter image description here

2 Answers 2

2

I think this is an example of following a design system component by component rather than looking at the whole interface design. It seems like you took two components and put them together and this is the result that you ended up with, which is usually what happens when you work with an existing design system to come up with designs.

However, you can see that there are also clear delineations between what one component does compared to the other. One is clearly associated with the top level navigation and therefore the user understands the context for the kebab icon, while the other is associated with the card and therefore would have other features.

Used at the top level, there are alternatives or variations to the kebab menu (What the difference between the 2 menu icons: 3-dots (kebab) and 3-lines (hamburger)) but used at the card component level there are other alternate icons and design patterns that you can use to hide or reveal additional features.

Depending on the design system that you adopt, adapt or extend, you might find that there are different possibilities that can work if you want to avoid this kind of potential confusion for the users (which you should test rather than assume). As designers we are probably too close to the design system to be able to tell, but it is good that you are identifying potential design issues to investigate and test.

1
  • Hey Michael, Thank you for reply. I was actually doing my own design kit there on that project. Developers wanted to follow material design so some components are based to wrap up that idea. However, there is an option of gestures in design which is good enough but I wanted to avoid gestures if possible because of people with dissabilities. They cannot swipe left or right so easy. I will try some other concepts as well but I believe in the end it will be either this or something more subtle. May 1 at 7:44
2

I personally don't see any need to repeat the same icon for a sub-menu. This capture is the upper right corner of Chrome with the Facebook tab, I have counted five sub-menu icons all of them with different styles:

enter image description here

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.