2

So I think that when "dot dot dot" in an UI design hints something more behind it, even is a graphic that is not featuring. I just like to know if I am wrong, and how you think about it?

For example, this image is talking about the features: enter image description here

So the dot dot dot hints mores behind it, do you think so?

dot dot dot:

3 Answers 3

8

Three dots are used for different reasons:

  1. Content / Copy:

    Ellipsis (plural ellipses; from the Ancient Greek: ἔλλειψις, élleipsis, "omission" or "falling short") is a series of dots (typically three, such as "…") that usually indicates an intentional omission of a word, sentence, or whole section from a text without altering its original meaning.

  2. Menu Items

    (kudos to @Ken Mohnkern) Menu items can use ellipsis to call out if clicking a menu item starts a flow requiring additional actions / decisions. "When to use ellipses with ToolStripMenuItem Navigation" question covers such use case in detail.

  3. Design pattern for a pagination:

    Most common use case is for image carousels or content teasers. You can see an example on http://www.apple.com

Slider example

  1. Design pattern for a separator:

    Acts as a visual content / copy separator.

  2. Design pattern for a secondary navigation (mobile)

    Horizontal or vertical layout of ellipsis in some cases indicates a hidden menu or a secondary menu (if standard "hamburger" design pattern is already used)

Linkedin Navigation

In your case

In your particular example it looks like a "Separator" rather than an interactive element, because there are no "carousel controls" and color on the dots suggests a non-interactive element.

3
  • I think this is a great summary. Ellipsis certainly mean "more" but one needs to be sure to use them in the right context.
    – DA01
    Commented Nov 2, 2015 at 7:40
  • As shown here, there needs to be a difference in the active and the "hidden" dots, like the color difference on Igoreks example above. Otherwise they just look lige separators, like the on the example in bards post.
    – Anders
    Commented Nov 2, 2015 at 11:56
  • Good answer. An example of your first definition: An ellipsis in an Apple menu command indicates that the user has to do something more to complete the command. For example, "Open..." pops open a file selection dialog. Commented Nov 2, 2015 at 14:48
3

"..." is ellipses and it's a well-understood punctuation that indicates something has been omitted in text medium. But to extend its usage to graphical medium like UI and making it a clickable element to reveal hidden items, and expecting most people understand it, would not be the safest UX design practice at the moment. There are more established design patterns (such as a simple hyperlink) that would work better.

2

I don't think it means more 'behind' it, it just means that there's more content available- on the next page/ as a modal window/ some other UI element. Looks to me like u have used it as a Pagination control, to show that there are more menu items on the next page, or to separate content- show that there's more content below the fold.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.