Use and misuse of the overflow menu icon.

Best Practice

Author: Julia Borkenhagen, CXO and Co-founder at Whitespace

Date: 07 June 2016

The overflow menu is a user interface element that provides access to additional actions or options that are not directly visible on the screen. It is typically represented by a three-dot icon.

To avoid usability issues with this design pattern, it is important to carefully consider the placement and labeling of items in the overflow menu, and to use it only for actions that are not essential to the core functionality of the app.

Dot Dot Dot

Whenever I see 3 little dots on user interfaces – known as an overflow menu icon – I have to think of Mamma Mia, the movie.

Remember when the girl (Amanda Seyfried) reads her mother’s (Meryl Streep) diary about her wild years?

“…and then… DOT DOT DOT!”

For a refresher, watch: Honey Honey.

Unfortunately, the 3 dots on your computer screen are not half as suggestive, though they generally hide a lot of very useful actions.

Used initially on mobile screens, the overflow menu icon has also become quite the standard on desktop interfaces. And while the dots work just fine when presented in the context of other action icons, such as shown in this Twitter capture below, they tend to be overlooked in other circumstances.

One reason that the overflow menu icon may be misused is that it is often used as a catch-all for actions that do not fit conveniently elsewhere in the user interface. This can result in a cluttered menu with a large number of options, making it difficult for users to find the action they are looking for.

Another reason is that the overflow menu icon is not always clearly labeled, which can make it confusing for users to understand what actions are available through the menu. This can lead to frustration and a poor user experience.

Twitter capture
Twitter actions

Icon abuse

One of these cases is SharePoint 2013, which introduced the 3 dots for their action menu in document libraries. Having used SharePoint quite extensively and trained many users, I do wonder whether this design was ever seriously tested with average end users.

Whereas SharePoint 2010 featured a drop down menu that allowed you to access all the actions for a document in a single click, the 2013 version forces you to find and click on the “overflow menu” – not once, but twice!

SharePoint document options
SharePoint document options

As you can see on the screen capture, the overflow icon is combined with actions displayed in regular text. This combination makes the icon much less visible than in the Twitter example above. Even worse, the actions exposed are not necessarily the most used ones.

Another problematic example can be found in the Google Apps for Work interface. To modify your payment information, you need to click on the overflow menu icon.

Google Apps for Work
Google Apps for Work's "Kebab" menu

Not only are the 3 dots displayed vertically (according to Luke Wroblewski, that’s called a Kebab menu – as opposed to Meatball menu), but they are also used in complete isolation on the screen, twice! The top one hides “Preferences”, and nothing else, while the other one allows you to modify your invoice information or to cancel your subscription.

I am all for uncluttered interfaces, but this one just feels empty. Clearly, people must have run into issues, because the monthly invoice email contains detailed steps on how to “update your payment information.”

billing email from Google Apps
Monthly email notification from Google Apps for Work

Overflow vs. Ellipsis

Looking back historically, the 3 dots were and are still used in desktop applications for command menus that required further information, such as Save as… or Print… The technical term is “ellipsis” and it was never meant to be used on its own. (For more info on how to use the ellipsis, see this discussion on Stackoverflow.)

That’s the reason why the overflow icon works when used in combination with other icons, but much less in combination with text actions.

It really falls flat when displayed as a stand-alone icon, since the original meaning of “more” is then completely lost. More of what? Nothing?

Related content