Liferay.Design / Lexicon
/
Get Started
    Patterns
Resources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Ellipsis

Sign In

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

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.

Something to improve? Report an issue!
Menu