4

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 found a post that says that vertical dots are for secondary options menu but I see some examples that show that the horizontal can be also used for that. enter image description here

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?

enter image description here

  • If there are only two actions, why wouldn't you just put the two options? – DarrylGodden Aug 29 '17 at 16:43
  • 2
    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.) – Kurtis Beavers Aug 29 '17 at 18:13
  • 1
    @UXfrom12 If he needs to add 3 more options next week he wouldn't want that to involve a design change – Darren H Aug 29 '17 at 20:15
1

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.

  • In material design, the hamburger and the "More" icon have distinct meanings. The hamburger triggers the navigation drawer, whereas the three dot icon shows additional items. – Tin Man Dec 9 '17 at 10:09
1

The Material HIG recommends using the vertical menu icon on the web and on Android, the horizontal one on iOS:

enter image description here

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.

  • As for whether you can use the icon for linking to an "Options" page instead of a menu, I wouldn't recommend it, as I haven't seen it used that way anywhere. There's a settings icon in the Material icon set that you can use instead: material.io/icons/#ic_settings . – Tin Man Dec 9 '17 at 10:21
0

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.

enter image description here

0

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.

enter image description here

  • "fits better in the space" - A good point! "...in this case it's because of the continuity and harmony between the other elements" - needs more evidence/explanation. – rinogo Feb 20 '18 at 20:40
0

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 enter image description here

Now if you were to design for Apple devices, their guidelines use the horizontal icon, see System Icons, especially the More icon.

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.

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.