How to Use Arrow and Ellipsis Affordances

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

Text labels aren’t the only thing that describe what users are clicking. The two most common affordances on menus and buttons are arrows and ellipses. Affordances are qualities on a user interface element that describes the actions users can take. Using them right can make your interface more intuitive.

Arrow Affordances on Buttons and Menus

Arrow affordances have different meanings on menus and buttons. An arrow affordance on a button emphasizes to users that clicking the button will complete an action that takes them to another page. They’re effective for making your call-to-action buttons stand out.

An arrow affordance on a menu doesn’t mean that the user interface will complete an action. When it’s on a menu, it’s telling users there are more options under a label. Without the arrow affordance, users won’t know that there are more options they can choose from.

Ellipsis Affordances on Buttons and Menus

Sometimes a button or menu option will open a modal window with more actions instead of completing an action. An ellipsis affordance tells users this is what will happen. 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 that pops up.

Affordances Make User Interfaces More Intuitive

Words aren’t always enough to communicate everything on a user interface. Arrow and ellipsis affordances give users a better idea of what the user interface will do so that they can take the right action. When interfaces are intuitive, users can click without worrying about the consequences. In this case, affordances speak louder than words.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

3 Responses to “How to Use Arrow and Ellipsis Affordances”

  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.

  2. B Philip

    May 24th, 2015

    At first, I liked this concept, but when actually implementing it, I realized that it would change conventions that most people already understand.

    For example, a “Log In” button on the home page would now read as “Log In…” and “Create Account” would read as “Create Account…” so the effect is that you’d see a lot more ellipses on the home page and other general areas. Even Apple’s “Buy Now” button doesn’t have an ellipsis.

    Unless it’s made clear in this article that it refers to desktop only UI.

Leave a Comment