Vertical and Horizontal three dots icon button usage
Despite the Material Design has great guideline documentation, I'm confused about vertical/horizontal dots icon for a Web App since for mobile, the vertical solution is a stablished pattern.
I'm redesigning a table list that have option menus but some are linked with option pages. Is okey to use the horizontal dot icon also as link for a option page instead of vertical menu?
I think either are acceptable and have identical meaning. Although I prefer the horizontal version because it literally can be interpreted as an ellipses (i.e. there's more here.)
The Material HIG recommends using the vertical menu icon on the web and on Android, the horizontal one on iOS:
If you're following these guidelines in general, it's best to use the vertical icon.
As for Spotify, LinkedIn, and Jira, none of those are following the material design guidelines. In fact, if you look across various applications and platforms, you'll see that the "menu overflow" functionality doesn't have one consistent icon: Microsoft uses horizontal dots, Firefox and Gnome use the hamburger icon (which is used for navigation only on Android), and some iOS apps use a gear or a tool icon.
Be aware of alternate usage for three horizontal dots: In addition to their being a hamburger icon dialect, I have seen horizontal three dots used on a button as a prompt to browse for a file whose pathname is to be entered into a field.
You can go both ways as the icons have the same meaning and there is no consensus on which one to use. There are even multiple other solutions (I'm not proclaiming that they're better).
As an idea (depending on your context):
- It might be valuable to show primary actions directly in the table and hide only the secondary ones in a submenu.
- In case the table is quite full of date you can unclutter the view a bit by showing the actions only on mouse-over and selection of the row.
This is a really interesting question, luxo. The difference between horizontal and vertical should be based on design shape, space, and/or fit.
For instance, let's take a mobile app with a navigation menu that has icons (like the pic below). A vertical ellipsis fits better in the space and provides continuity within the design. A horizontal ellipsis just wouldn't provide as nice of a touch.
It's not always about looks, but sometimes it just 'looks/feels right' for a reason that you might not be able to come up with. But if you dig deeper, there is a reason for why it looks/feels better – in this case it's because of the continuity and harmony between the other elements that it possesses.
For consistency reasons it's better to stick to one selected guideline instead of mixing. You need to be consistent across the interface, but also consider the device it was build for.
So, you mentioned Material Design, so I will assume that you are following that guideline and maybe are creating Android/Web apps. In that case, you should use the vertical icon. You can see example images with the icon in the Components > Contextual Menus
I prefer the horizontal icon, since it's reminiscent of the typographic ellipsis which was intended to suggest "more" items, so it has a more common interpretation in the user's minds, but above preferences, I would go for consistency.