Dot Dot Dot: use and misuse of the “overflow menu” icon

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.

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 actions

SharePoint document actions

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's "Kebab" menu

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.”

Monthly email notification from Google Apps for Work

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?