2

For overflow and more menus, Google Material Design seems to favour vertical dot menus, see

enter image description here

Apple seems to favour horizontal dot menus (see https://i.stack.imgur.com/qEdr3.jpg).

On desktop applications, horizontal dots mean "this menu action will pop over a dialog box with things for you to fill in". Arrows, not dots, mean "show more menu options".

Horizontal dots on touch devices can mean "swipe horizontally to see the next card/image".

So already the horizontal menu icon is overloaded.

I've read that some designers feel that we should use the dot menu that matches how the menu will pop up. I.e., use vertical dot menu for when the menu pops down or up, and use horizontal menu for when the menu pops left or right.

So, with all that said, is the cognitive load of using both icons in the same experience worth the guidance of how the menu will appear? There's added load in two ways: making the user wonder "what's the difference between these two icons? Do they behave differently?" and to recognize two different icons.

In what way does providing the information of in which direction the menu will pop help the user? Does the user really need to know where it's going to appear?

You can probably tell I'm not sold on the idea of using both menu icons in the same UI and am leaning toward using just the vertical menu icon (when I don't have room for a text menu label), so I'd love to hear some counter-arguments in support of doing so to ensure I'm not overlooking something.

Improve this question
2
  • FWIW, I think the "horizontal menu icon" started out as a "horizontal ellipsis," indicating there is "more" that is hidden, like it does in text. I think vertical ellipses are used in math or something, but I've never really seen them. Either way, I don't think the icons themselves indicate directionality…more like, the platforms you mention have established conventions about how menus work, and also for icons, and they happen to match up that way.
    – Nate Green
    Jun 27, 2016 at 16:11
  • Another designer just told me he uses vertical menus when the reveal gesture is a click and horizontal menus when the reveal gesture is a hover so that the user understands that the menus behave differently. But I'm iffy on mixing how menus are exposed in the same GUI.
    – Marnie A.
    Jun 27, 2016 at 16:43

2 Answers 2

Reset to default
1

Based on the previous answers my suggestion is that instead you craft icons that hint at the content of the menus themselves rather than thier direction of entrance. So make the icons look like either a silhouette of the menu, or use an icon that hints at the menu's purpose (gear for settings, profile picture for account, Mail icon for email, etc). I vote you do the latter if those two options. You may find you want your menus to open differently some day. And when you do, you may be glad that you chose an icon that does not henge on the direction the menu slides in.

Improve this answer
3
  • Yes, naturally icons that are more specific to the menu's purpose would be better than the generic dots. Alas, my team is set on using the dots because "Google does it that way". :( These menus are a catch all for menu items that don't fit across the toolbar. It's a More menu. I tried convincing them of the values of labeling icon menus (no mystery meat!) and the values of not hiding any more menu items than necessary (no hamburger menus!), but I wasn't successful.
    – Marnie A.
    Dec 4, 2016 at 12:11
  • @MarnieA. It isn't naming the menu icons which is most important. What's most important is discoverability and the ability to recognize the buttons and what their purpose is.For example, the gear icon for Settings would've never made sense 200 years ago, but somewhere along the line, things changed and it became understood to represent settings.
    – Leviscus Tempris
    Dec 4, 2016 at 16:33
  • @MarnieA. At the same time, there is absolutely nothing wrong with doing things because Google does it. It isn't a great reason, but there is a pro to the situation:A lot of people are exposed to Google's work, and I asked such they are more likely to recognize and understand the icons because of this, as long as your team implements their icons in a similar fashion. Either way if your correct, the icon issue will resurface eventually. For now, "shoot the engineer" and complete the project. Sometimes, it is better not to become the odd one out on a project when so many other things matter too.
    – Leviscus Tempris
    Dec 4, 2016 at 16:34
0

I have to agree with you.

One argument that might be given in favor of using both directions is that the standard menu triangle or > (the one that appears on drop-downs, for example) shows directionality. That argument, however, doesn't hold, as unlike with the majority of icons, arrows are necessarily directional.

If you look at icons for buttons that bring up pop-overs or menus, you'll see that they don't indicate directionality in any way and that this information isn't relevant to the user. Therefore, with the three-dot icon, directionality shouldn't be relevant either.

Why are there two variants, then? The horizontal icon comes from the standard ellipsis symbol meaning "More". Its direction comes from the standard direction for reading text. I assume the vertical icon is a merger between this ellipsis symbol and a vertical list, but that's only an assumption. If it is, the icon's direction comes from the direction of the list to be revealed. Using both variants at once would be completely disregarding the original thoughts behind their directionality.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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