Ellipsis
Sign InA 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
Vertical
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.
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.
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.
Do
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.
Do
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.
In addition, horizontal ellipsis can be shown in conversational interfaces to represent activity.