Ellipsis

A set of recommendations on how to use ellipsis designing interfaces.

The ellipsis is a text convention borrowed from editorial design to digital interfaces. Commonly represented with a set of three dots. It communicates the idea that there is more content that isn’t shown or there is something more to be done.

This subtle interaction detail helps users to unconsciously anticipate the action of the system in order to achieve more considerate products.

Types

Horizontal

horizontal ellipsis
The most common usage on interfaces

Vertical

vertical ellipsis
It works better for narrow spaces

So, which is the better option? Lexicon doesn't provide a rule for using one over the other. Once the ellipsis type is chosen, it must be consistently used in all the same scenarios when designing a product.

Use Cases

Overflow

Use ellipsis to communicate that there are further options that can’t be shown. Often we see this solution to solve narrow spaces or responsive interfaces.

a pager showing the number of pages and the ellipsis

More characters than space

Use ellipsis when there is not enough space to show a complete text. You can truncate long texts in the middle or at the end to avoid overlapping. Choose the option that best displays important information for your use case.

Document items with truncated titles showing ellipsis in the end and in the middle Two types of ellipsis: in the end and in the middle

Use tooltips to show the complete text using ellipsis. However, if the text is not relevant for the user or the text length exceeds a normal time to read it, do not show a tooltip.

3 Document items. One of them has its title truncated showing a tooltip with the full text.

Do

2 Card items. One of them has its description truncated showing a tooltip with the full text covering the next card.

Don't

Additional action

Use ellipsis for actions or menu items when additional information is required to perform the command:

Immediate Action

The absence of ellipsis in a command communicates that triggering said command will perform the action and have an immediate effect. As seen below on the left side, users won’t need to execute any other action as results will be shown directly after submitting their search.

search box

Do

search box using ellipsis

Avoid

It requires more input

Commands of this type need to answer specific questions such as "Move to which Folder?" before running it. This means that there is a follow-up decision that the user must confirm after triggering the command.

a menu with many options. One says: Permissions

However, informative commands which do not require additional actions to be taken such as the Permissions command above, should not include an ellipsis. These commands only display a modal window, users don’t need to perform any other action as it is just a matter of showing permissions.

If, for example, the command Permissions contains a verb like Change, it should include an ellipsis as it means users will need to perform an additional action after clicking on it.

a menu with many options. One says: Change permissions...

It requires confirmation

In this case, ellipsis also serves as a hint to let users know that the action will not happen immediately. Before taking any risky decision, for example, complete elimination of information, an alert will warn or inform the user with a confirmation modal or proposing an alternative action.

a menu with an option: Delete... a down-arrow pointing a modal windows that asks for confirmation

Other use (Infrequent)

Although it is seldom used, ellipsis can be applied to indicate that the system is busy working on a heavy task and there is a period of waiting time during which the action is being performed.

a blue bar with a loading indicator and the text "Processing actions..."

In addition, horizontal ellipsis can be shown in conversational interfaces to represent activity.

Menu