Friday, February 27, 2015

gui design - What is the significance of the three dots "..." on menus and buttons and how to use them right?


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 generaly mean that there is "something" after clicking on it.


Google chrome dropdown menu (french version)


These dots are also sometimes presents 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 to use them ?

  • Is it realy relevant to the user, and easily understood by them ?



Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...