Recently amongst web developers there been a passionate conversation about the use of “hamburger” iconography for progressive disclosure usually showing navigation (for the record, I hate that name for the icon). Some have done extensive A/B testing to prove it alone doesn’t work well, and others write passionately how they have abandoned the pattern. This along with other examples like using a select menu for smaller viewport navigation highlights a problem with our community: we can all-to-quickly grab onto a fad without asking fundamental questions about whether it works or not.
The Ellipsis’ Traditional Use in Interfaces
I want to bring up another pattern that has recently become a big problem also: the humble ellipsis. I started seeing ellipsis iconography show up more and more over the last couple of years in web applications. Now the pattern has existed for a long time in desktop applications, but it has served a different purposes. For example, in the OS X Human Interface Guidelines, we read the following instructions for using ellipsis:
When it appears in the name of a button or a menu item, an ellipsis character (…) indicates to the user that additional information is required before the associated operation can be performed. Specifically, it prepares the user to expect the appearance of a window or dialog in which to make selections or enter information before the command executes.
This is also the similar usage found in Windows applications. The ellipsis is designating that if you want to accomplish “x” (i.e. “Save As”), you must give additional information through an input. Here is an example from Notepad even in Windows 8.1.
This pattern makes sense for two reasons (beyond its convention status of course): (1) the usage of the ellipsis is consistent with what you would expect from an ellipsis—namely that more is expected through input, and (2) it is accompanied with a textual description of the interaction’s results. Microsoft IxD guidelines are very specific that you shouldn’t add the ellipsis after menu items where additional input is not immediately required.
The Ellipsis in Web Applications
Now we can turn to web applications and their use of the ellipsis. The use of this is completely different from what we have already described. Before I go further I must clarify that I’m not opposed to do something in a new way, but it must (1) be consistent with mental models and (2) you must test the fool out of it. I have a feeling what I’m about to walk you through matches neither of those criteria. Here are some examples where the ellipsis is showing up in web applications:
As you can clearly see, these are not small applications. These up to multi-billion dollar applications that are relying on this method of progressive disclosure. The YouTube example use an ellipsis set vertically, which I understand to be an Android convention, but it’s still used in a similar way.
Here are my problems with that usage pattern:
- From what you can see above it’s used in very different ways. While generally it points towards “settings” or “filtering,” it still is far from consistent. At least the “hamburger icon” was used to primarily designate navigation.
- It lacks context. Not all of these are guilty of this: Facebook, YouTube, and SharePoint avoid this, but you can see from Yammer and Feedly that the ellipsis is next to nothing meaningful to give it context on why it is being use or what it is there for.
- Lack of textual guides. This is another serious problem that the “hamburger icon” had. In every single one of these examples, there is no text to designate what it does. Would it kill you to add “filter” or “settings?” Are we so pressed for space we continually chose complexity (single, unconventional icon) over the obvious (a single word).
- Progressive disclosure should be, in my mind, use smartly and sparingly and it’s best to not hide critical content underneath it. Yammer, SharePoint, and Feedly hide very important utilities behind a single ellipsis. The YouTube one doesn’t even show until you hover over the content (SharePoint does this in places as well).
- As web developers we have been given text-overflow: ellipsis in CSS, and now we have to wonder how ellipsis showing up in different portions of the site obfuscate what an ellipsis should mean? It should mean only text truncation.
At the end of the day as UX practitioners opinion only goes so far. Now I haven’t used an ellipsis for progressive disclosure because I obviously do not care for the pattern. However, my hypothesis is that, if tested and users were asked to find content behind the ellipsis, less than 50% would be able to do so successfully. I’m being generous in that number because the content usually hidden behind should be easily found closer to 80-90% of the time.
If anyone has tested this usage in their app, please let me know your results.
The final things we should glean from the ellipsis and hamburger icons are that we should never assume too much, and we must always test our assumptions. Also, do not introduce something complex when simplicity ensures success for your users and the applications they rely on.