Abusing Ellipses Chris Poteet, June 3, 2014June 6, 2014 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. Notepad File Menu 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: Ellipses in Modern Web Apps 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. Hypothesis 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. Final Takeaways 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. Related Posts Design SharePoint Usability User Experience User Interface iconographynavigationprogressive disclosure
What ever happened to just using words to describe what a button does? I’m sure there are benefits to abstraction but when the iconography and images used to communicate different actions vary from site to site then it is difficult to really extract the purpose of something. Many times I just end up clicking something to see what it does because it appears clickable. But at no point do I go into the action knowing what it is I am going to get. Reply
Your examples are that of people trying to extend the meaning of the ellipse too far. Good finds! I think you said it best when you said new usages must “(1) be consistent with mental models and (2) you must test the fool out of it.” Reply
One more example: the new Flickr design! There an ellipsis on each individual photo page and what does it mean? It doesn’t say! If you click it,you discover: “More actions”, like “Download all sizes of photo”, “Flag photo”, etc. (In the previous design of Flickr, there were many more simple text labels, and the design was better, IMHO.) It is easy to become lost in interfaces nowadays (both web and mobile, desktop, etc.) and I don’t see really why we need to make things even more complex with hamburgers and ellipses, indeed… P.S. On a side note, so nice to stumble upon an article where you can leave a simple comment — fill your name, email, website, and comment — and hit “Post comment”! So much better than all these modern things like “Reply to this post on Twitter”, “Enter our Disquss registration information to post a comment”, “Use your Google+ or Facebook account to post a comment” etc. :))) Reply
Context and purpose should drive the design decision. Clarity to a new user is just one metric to measure the success of a menu affordance. In some cases it is important, in some cases it isn’t. If you can teach your users to use them and it results in a better overall experience, then perhaps it is worth the learning curve. Curious what the solution would be for an english learning app where text alone won’t do. Reply