Arrow and Ellipsis Affordances on Buttons and Menus

by on 05/02/12 at 1:18 am

There’s more to menus and buttons than just labels. Before users click a button or menu option, they’ll usually read the label first. But labels alone don’t always give users a clear picture of what will happen after they click it. Sometimes users are left wondering which buttons or menu options open a new page, window or dropdown. By using proper affordances on your buttons and menus you can make this clear to users so that they can choose the action they want with full comfort. Interface affordances are certain qualities of a button or menu that cognitively help users take action. The two most common affordances to use on menus and buttons are arrows and ellipses. Both look simple, but mean two completely different things. It’s important to know which ones to use on your buttons and menus.

Arrow Affordances

Arrow affordances have different meanings on menus and buttons. An arrow affordance on a button intuitively tells users that clicking the button will execute an action that takes them to another page to engage in a task. At a cognitive level, the arrow communicates action and direction. When used on buttons, the user gets the impression that the button will take them somewhere. Arrow affordances are helpful because they emphasize your call-to-actions. On a web page, the text on your buttons could easily blend in with the body text on the page making your call-to-actions harder to spot. But with arrow affordances on your buttons, your call-to-actions visually stand out more.

Contrary to buttons, an arrow affordance on a menu doesn’t mean that the interface will execute an action. Arrow affordances on menus tell users that there are more menu options at a lower hierarchical level that they can view. For example, if your menu offers dropdown or flyout options, you should use an arrow affordance that indicates there are other options in the menu that users can choose from. Without an arrow affordance, the other options are hidden from users, and they’ll have no way of knowing that a particular menu selection opens a dropdown or flyout menu.

Ellipsis Affordances

A button or menu selection doesn’t always take users to a new page. Sometimes it opens a modal window with more options for users to choose from before the interface executes the action. In this case, an arrow affordance would not make sense. An affordance to intuitively tell users that a button or menu selection will open a modal window is an ellipsis. An ellipsis works well because it’s a common mark used in the english language for omissions and unfinished thoughts. At a cognitive level, users will understand an ellipsis affordance to mean that there are more options available to complete the task that aren’t yet displayed. The ellipsis tells users that the action is not immediate. This allows users to click a button or menu selection to explore the different options behind it. Without ellipsis affordances, users will assume that every action and selection is immediate when every one is not.

Proper Affordances Make for a More Intuitive Interface

It’s impossible to communicate everything an interface does in words. That’s why proper affordances next to labels on buttons and menus are so important. Arrow and ellipsis affordances give users a better idea of what the interface will do before they click anything. It helps the user differentiate between the actions and options that are immediate and the ones that offer more options. With a better understanding of how the user interface works at an intuitive level, users can click your buttons and menus without worrying about unforeseen consequences.

One Response to “Arrow and Ellipsis Affordances on Buttons and Menus”

  1. H.E.A.T.

    Oct 15th, 2012

    This is a very enlightening article.

    I have seen the two affordances used, but always thought they were used more for looks than for function.

    These are the types of informational articles I enjoy reading. Keep up the good work.

Leave a Comment