90

Adding three dots after the title of items in a dropdown menu seems to be a common practice (as you can see on the picture of a drop down menu in Google Chrome). They generally mean that there is something after clicking on it.

Google chrome dropdown menu (french version)

These dots are also sometimes present in the text of action links and buttons.

I am wondering about their utility and relevancy...

In your opinion:

  • What kind of information should be conveyed by these dots?
  • How and when should I use them?
  • Is it really relevant to the user, and easily understood by them?
1

3 Answers 3

103

These dots, referred to as an ellipsis, always mean that there are additional options. For example when you see "Print..." it is indicating that there will be another step before there is anything sent to the printer.

Taken from The Microsoft UX Guidlines:

Design concepts Using ellipses

While command buttons are used for immediate actions, more information might be needed to perform the action. Indicate a command that needs additional information (including confirmation) by adding an ellipsis at the end of the button label.

In this example, the Print... command displays a Print dialog box to gather more information.

By contrast, in this example the Print command prints a single copy of a document to the default printer without any further user interaction.

Proper use of ellipses is important to indicate that users can make further choices before performing the action, or even cancel the action entirely. The visual cue offered by an ellipsis allows users to explore your software without fear.

This doesn’t mean you should use an ellipsis whenever an action displays another window—only when additional information is required to perform the action. Consequently, any command button whose implicit verb is to “show another window” doesn’t take an ellipsis, such as with the commands About, Advanced, Help (or any other command linking to a Help topic), Options, Properties, or Settings.

Generally, ellipses are used in user interfaces to indicate incompleteness. Commands that show other windows aren’t incomplete—they must display another window and additional information isn’t needed to perform their action. This approach eliminates screen clutter in situations where ellipses have little value.

5
  • And you just beat me to it... :-)
    – Sam K
    Commented Aug 1, 2011 at 19:47
  • 9
    Its funny but I never even noticed these before but have used those commands many times. Low and behold, there they are in my FireFox menu. They do their job without you even realizing it. Commented Aug 1, 2011 at 19:49
  • @Matt Same thing happened to me about a year ago. Commented Aug 1, 2011 at 19:50
  • 5
    I've also never, ever, noticed these dots. And I've been using Windows since 3.1. However I don't think they've been doing any kind of job - I just blanked them.
    – PhillipW
    Commented Aug 1, 2011 at 20:52
  • Your bolded summary of these guidelines is completely inaccurate and furthers the common misconception about what an ellipsis on a menu item means. The quotation is perfectly clear: it means that additional input is required, not simply that additional options are available. Commented May 17, 2017 at 8:43
8

From the article: How to Use Arrow and Ellipsis Affordances

Sometimes a button or menu option will open a modal window instead of completing an action. An ellipsis affordance tells users this is what happens. In the english language, writers use ellipses for unfinished thoughts. On a user interface, designers use ellipsis on buttons and menus for unfinished actions. The user completes the action on the modal window.

1
  • 2
    The first sentence from that quote is misleading. Only if that window which opens contains additional options required to start the action named by the menu entry, then it needs "...". For example, the "About" dialog opens a new window, yet does not need "..." because it has no additional options to start the "About" action.
    – Ray
    Commented Dec 16, 2014 at 9:43
3

I'm going to assert that the human interface guidelines on this subject are outdated. For this, I need to go into some depth first. If you're just interested in when to use it, I make my recommendation at the bottom.

The history

This is an ancient convention among OS HIGs regarding the use of ellipses in menu items. In essence, it works as thus:

  1. If you click an action in the menu, it immediately does something
  2. If you click an action in a menu that has a ... at the end, it first asks you something (in a dialog box).

Details for different HIGs can be found on Stackoverflow, strangely enough. Or in Matt Rockwell's answer to this question. I find this section particularly interesting:

The visual cue offered by an ellipsis allows users to explore your software without fear.

Fear. That's not a word I want to see anywhere near my UX evaluation form. And visual cue? It's only slightly larger than the smallest possible symbol.

So I dug around a bit - it's present since the very first iterations of Windows and macOS, as well as some DOS versions, during which time it actually had some affordance thanks to monospacedness:

Windows 1.04

Notably, this is a decade before "User Experience" as a term was coined. During this time, using computers indeed was scary: "one wrong keypress and everything disappears" was a thing back then.

However, ellipses didn't actually prevent you from making a wrong keypress, but they did provide a mostly consistent way of distinguishing actions which make everything disappear immediately from actions which first show a dialog (which you can escape from) before everything disappears once you knew about this. So either you learned this pattern (which isn't super obvious), or it does nothing for you - but gives ample opportunity for others to tell you to RTFM.

Fast forward some 40 years and computers now have variable fonts and smaller pixels (and many more of them) and ellipses have become so tiny, they're very easy to overlook. They have been carried forward from edition to edition of the relevant HIG, but I highly doubt they've been reconsidered. Meanwhile, in the wild west that is the web, nobody knew about these rules, nor did anyone care, so it's rarely seen in the web, and when website building gave way to modern webdev and mobile apps, it got completely lost here. Instead, the ellipsis has found it's way into overflow menus everywhere, replacing the hamburger menu in some cases.

Even on Apple's very own HIG page, this example is shown in the context of iOS:

context menu

Just like "Save as..." needs additional input so it knows where and as what to save, "Share" needs additional input before things before it can know whom to share it to. But it's been forgotten.

Which brings us to today, where in practice this guideline is ignored when building apps.

The problems

As said earlier, the ellipses are barely visible today and don't really offer any affordance to most people.

Additionally, the ellipses model doesn't account for the humble Save menu option: On first use it requires you to specify where and as what to save it, on second use it is an immediate action.

There also is the question if it actually makes things easier to understand. If we take one half of Audacity's Effects menu, for example:

Audacity menu

Outside of the absolutely overwhelming number of options (which, as an aside, I since have ordered into subcategories), you can see an overwhelming number of ellipses here, which don't really serve anyone.

Remember, one of the stated purposes of using it is "users can explore the app without fear". But what does a user expect when they go to this menu? Well, they want to apply an effect. Whether the effect they choose shows a bunch of sliders or not isn't massively relevant here, it's entirely predictable to the user what's going to happen (an effect gets applied to the audio) and what to do if they accidentally apply an effect they don't want (undo). There is no fear here, the ellipses are unnecessary.

Additionally, the plugin manager option used to be called "Add/Remove Plugin...". I removed any ambiguity here on whether it's an instant action or something that opens a dialog by renaming it to "Plugin Manager". It's a manager, it's never going to be anything but a dialog. Having a ... here is unnecessary, because users will never be confused as to what it does.


When to use ellipses today?

With all of the above in mind, I'd say the new guidelines should be as follows:

  1. Use ellipses in menu items when the text itself is incomplete. So for example, "Save as..." would retain the ellipsis, while "Save Copy", "Create Backup" or just "Save" would not have one.
  2. When naming menu items, name them clearly and unambiguously. For example, an option simply titled "Overwrite" on it's own is ambiguous as to what is being overwritten. Adding this information makes it much more clear: "Overwrite my_holiday_photo.jpg"
  3. Use ellipses in cases where not doing so would confuse users. Your user testing trumps any guidelines.
  4. Avoid using ellipses in all other cases.

Your Answer

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

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