Do you REALLY know how to use the ellipsis?
The moment I start writing this story, the old friend is right in front of me:
Rather than 3 dots or 3 periods, you can type it out this way:
Mac: Option + ;
PC: Ctrl + Alt + .
iPhone/iPad: Hold your finger on the period to bring up the ellipsis option
Accurately, I mean Horizontal Ellipsis… Yes, there are 8 ellipsis in total in Unicode:
The use of ellipsis on UI can trace back to 1983 on the menu of Windows 1.0.
The idea of using ellipsis here is neat. It doesn’t require user’s effort to notice nor impact users’ key task flow, but an unconscious guidance to indicate the users there are more information or a command that needs additional information (including a confirmation).
It’s a durable and timeless micro-interaction design based on natural language habits:
Depending on their context and placement in a sentence, ellipses can indicate an unfinished thought, a leading statement, a slight pause, an echoing voice, or a nervous or awkward silence.
— Wikipedia
Just like there are no universal content writing rules for every product, the standard for using ellipsis varies. For better user experiences, we need to define consistent guidelines for using ellipsis on our product UI, especially those content-rich SaaS products.
Here are 3 steps to understand ellipsis and standardize it for your product.
Step 1. define the ways of ellipsis usage
There are different ways ellipses have been used frequently nowadays. Based on the purpose and context, you can define whether your products need to use ellipsis in these scenarios.
- Working on it, you might need to wait for a moment:
Since ellipsis has the meaning of indicate an unfinished thought, the use of it on UI can pacify the user that an action is in progress. If you already have an animation, the process is very fast, or there’s too much text on your UI, ellipsis might not be needed.
2. Input something here…
Medium use ellipsis on “Write a response” and “Tell a story” text field but not on search box. Salesforce put “use an ellipsis in ghost text” in their style guide, while their own style guide site does not following this rule.
I also noticed eBay and Facebook used to have ellipsis on their main task ghost text as well, but not anymore in the current version. Since there’s a lot more usage of the three-dots icons, the trends are toward use less ellipse for attention attracting purposes.
Besides from text field, ellipsis can also be used on drop-down lists. Compare the two examples below:
In this case, users have to make all selections to proceed. They have multiple drop-downs, some of them are pre-selected by default while some are not. By adding “…” on the none-default-set options to catch users’ attention and indicate selections have not been made yet can improve the experience.
3. Expand for more…
We can find lots of examples for use or not use ellipsis in this case. When you have a down arrow or an exact number of how many more you can show, the ellipsis is not necessary.
4. Trailing off a title/sentence
Seriously, I can’t find a better way to indicate the same meaning using another UI solution. So, feel free to use ellipsis in text truncation when space is limited. There are still two things you need to concern for its placement —
- omit the middle or the end?
- omit from the middle of a word or not?
The decision can be made from the text content itself and the available space you can display, always find a rule that can display valuable information as much as possible. In the example above, since the end of a model name is more important (to differentiate the car), truncation of the middle is better than the end.
For the correct use of ellipsis, when truncating from the middle of a word, don’t add space (example A/B/C above); while if truncate always leave complete words, add space between the word and ellipsis (example D above).
5. A command that needs additional information
This is the most complicated one often used in software and complex system, let’s jump to step two to solve it.
Step 2. define the rules for ellipsis on command
If you pay attention to the products you are using every day, you might notice and wonder why there are some buttons/menu-items have ellipsis while some are not. The guidelines might have changed a lot from 1983 (Windows 1.0), luckily, the rules are similar.
Let’s start from the lowest level, how operating systems define the use of it.
The difference between Windows and Mac OS is Windows point more specifically “only when additional information is required”. That’s why the button “Advanced” has no ellipsis in Windows, while Apple put “Advanced…” as an example of their guidelines.
What value ellipsis bring for the user command?
- secure the user that the action won’t happen immediately, don’t be afraid to click on it. For example, by just clicking the “print…” won’t waste your paper.
- differentiate non-immediate commands from immediate ones (on a list or menu).
← Example: Google Inbox app. When moving an email to a certain category, only “Trips” have ellipses. Because you need to pick a trip first and then move the email to it; while other options can move email immediately after a tap.
In general, Google and Material Design Guidelines recommend leaving out ellipses from menu items and buttons, but this example is a valid proof that ellipsis can be a helpful subtle indicator.
In Everett N. McKay’s book UI is communication, he concludes:
Use on command labels only to indicate that more input is required to perform the command.Ellipsis are a constant source of confusion on desktop UI. Note that ellipses aren’t used for this purpose in mobile UI. Commands normally have immediate effect, whereby the command is executed immediately after an interaction. Ellipses are added to labels to indicate when a command isn’t immediate — when more input is required. Many people mistakenly believe that ellipses indicate that the command displays a window or dialog box. The difference: If the purpose of a command is to display a window or dialog box, ellipses aren’t needed.
Above is a diagram I draw to judge if a command needs to have ellipses. If the purpose of a command is to display a window or dialog box, ellipses aren’t needed. For example: option/setting/select/choose/change selection.
You might create your own diagram based on your product’s goal, user habits, and positioning.
Step 3. define the specific format for ellipsis usage
Here we come to the nerdiest part.
If your product is writing & publication related, you might care about this tiny issue more and hear about varies suggestions for how to type out ellipsis:
Speaking as a writer, editor, and typesetter: use three dots, no spaces.
or AP Stylebook:
or Chicago Style:
Chicago style is to use three spaced periods rather than another device such as asterisks.
All those suggestions have it’s pros and cons based on usage scenario and publication style. We have to accept the complexity existed, because language is dynamic and changing.
As the Unicode standard accepting to everywhere of the world, for long-term consideration, usually we recommended using U+2026 (…) glyph, because it’s created for the purpose of ellipsis.
In a controllable situation like printing, it’s not a big deal. Just follow their rules and keep consistency. But when it comes to an uncontrollable scenario like a web browser, operating system UI, you might not know what exactly your audience sees.
The examples above show the ellipsis and three-periods can look different in many typefaces, the reasons are
- when ellipsis as one glyph, the spacing between dots are different from the spacing between periods (Helvetica and Roboto);
- some typeface have more white space beside the ellipsis glyph (SF UI Text).
Some platform will auto-correct three periods to ellipsis, say, Medium. Try type three dots slowly, I bet you can noticed there’s a switch (more space) right after the last period.
From my research, it’s safe to say that on most of the popular products’ UI we see nowadays (examples below), ellipses are shown as the U+2026 (…) glyph without space. You’d better always show ellipsis this way, too.
But if your product needs the user to input text, do you want to auto-correct their three-periods to the ellipsis glyph? Here are some comparison examples:
Web: Medium will while Gmail will not;
Mac design App: Sketch will while Axure will not;
Mac chatting App: Slack will while iMessage and Wechat will not …
It’s your decision to make based on your context.
One last thought…
There are a lot of stories behind these tiny little dots, right?
All these research and explore I did for this topic starts from a UI with a “Set All…” button in our product. As a millennial use smartphone a lot, I have no idea what the … mean or why it was there.
And the designer who added it initially said the reason was to indicate users there is a follow-up decision to be made before the system take the “Set all” action. 1. the ellipsis makes users feel more at ease on clicking, and 2. ellipsis differentiate the command with other buttons which helps users to understand the interaction logic next.
The Don’t make me think design philosophy is not just about highlighting, animating or simplify. It can be done more thoughtful and subtle, for example, through the good use of ellipsis by considerate designers.
References
Thanks to realfish Q for discussions and proofread.
