Summary

The article explores the multifaceted uses of the ellipsis character in user interface design, demonstrating its significance in conveying various instructions and states.

Abstract

The ellipsis, represented by three dots, has been a staple in interface design for decades, serving as a versatile tool to communicate additional actions, text input prompts, ongoing processes, and truncation of long text. The character's primary function is to signal that further user interaction is required, such as making a follow-up decision or typing in a field. The article traces the evolution of the ellipsis in UI design, noting its decline in menu items and buttons due to modern design trends that favor minimalism. However, the ellipsis has gained new roles, like indicating additional options, showing an action in progress, and smartly truncating long text to maintain interface clarity. The author argues that despite its simplicity, the ellipsis is an underappreciated yet powerful element in design, capable of conveying complex meanings and guiding user behavior with just a few dots.

Opinions

The author holds the ellipsis in high regard, considering it the "most amazing character ever" in interface design.
The ellipsis is seen as a helpful tool in decision-making processes within interfaces, providing users with a visual cue that an action will not be immediate and can be canceled.
The use of the ellipsis in text fields is perceived as a modern design trend that enhances visibility and prompts user interaction, although the author personally does not favor this usage.
The midline and vertical ellipses are recognized as current UI design symbols for accessing additional actions, akin to the popularity of the hamburger button.
The author believes that the ellipsis effectively reassures users that a process is underway when used in indicators like "Loading..." or "Connecting..."
Truncation with an ellipsis is considered a crucial technique to prevent overlapping text and maintain a clean interface, especially when dealing with long filenames.
There is an acknowledgment that the ellipsis may be undervalued by designers and users alike, despite its significant contributions to interface functionality and user experience.

The Mighty Ellipsis

How 3 little dots can say so much

When I tell people that the ellipsis (…) is the most amazing character ever, most people look at me like I’m crazy. Before you label me a lunatic, let me try to explain.

For decades, interface designers have been using the ellipsis to communicate all sorts of important details to users. As you’ll soon see, these 3 dots can pack quite a lot of meaning in just a little space.

Let’s take a look at 5 different ways ellipses have been used in interface design throughout the years. By the end, you might just develop a newfound appreciation for this mighty little character.

1. Ellipsis = “There’s a follow-up decision”

The first time I remember seeing an ellipsis in an interface was on Windows 3.1. It was my first computer. Ellipses showed up on a few buttons and menu options, and it meant there was a follow-up decision I needed to make after clicking it.

Ellipses were helpful here because it assured me the action wouldn’t happen immediately. I could start the action but then cancel it if I changed my mind.

This ellipsis pattern still exists on Windows and Mac today, but it’s used far less nowadays.

Look at how far we’ve come in 2 decades:

Windows 8 (2013): Where’d the ellipses go?

Google’s Material Design guidelines recommend leaving out ellipses from menu items and buttons. It’s probably because many options require a follow-up decision anyway, and using ellipses everywhere would just clutter up the interface.

This ellipsis pattern may be going out of style, but I think it did a noble job of helping people make decisions all these years—and all it took was 3 little dots.

2. Ellipsis = “Type here”

In recent years, many products have been using ellipses to indicate text fields. It’s all the rage nowadays.

I don’t know who started this trend, but the earliest example I could find is from Facebook in 2008:

Why would someone use an ellipsis like this? My guess is that the ellipsis serves two purposes here:

Visual effect: Sometimes it’s hard to notice a text field among everything else on the page, so an ellipsis adds visual prominence to the text field. It’s used to catch your attention.
Psychological effect: Traditionally, an ellipsis indicates an omission of words. It means there’s something missing here. In a way, the ellipsis is nudging you to fill in the blank by entering your own words.

Some style guides even recommend using ellipses for all text fields. See the Salesforce Style Guide as an example. I personally don’t like to use an ellipsis in this way, but it’s clearly catching on as a design trend.

Without much fanfare, the ellipsis has quickly become a symbol for “type here.”

3. Ellipsis = “More actions”

More and more apps are now using a midline ellipsis (⋯) to indicate a menu with more actions. It basically means “Hey, there’s more stuff you can do here.”

In many Android apps, you’ll often see a vertical ellipsis (⋮) to mean the same thing.

Some people don’t like this design because it might hide important actions in your app. Whether you like this design or not, you can’t deny that this symbol has become a hot trend in UI design — much like the hamburger button from a few years ago.

Back in the day, I bet nobody thought an ellipsis could mean “more actions.” And yet, in recent years, the ellipsis has suddenly taken on this new responsibility, and there’s no turning back now.

As interface designers strive for simplicity, these ellipses will likely become more and more prominent in apps everywhere.

4. Ellipsis = “Wait a few seconds”

Another common use for ellipses is to show that an action is in progress. “Loading…” “Connecting…” “Uploading…” You’ve probably seen this pattern hundreds of times.

Now imagine what would happen if we didn’t use an ellipsis here. Because we’re so used to seeing an ellipsis for ongoing actions, we might think something’s wrong when we don’t see an ellipsis.

Doesn’t it seem like something’s not right here? At least to my eyes, using an ellipsis reassures me that something is happening in the background. The lack of an ellipsis makes me think something is stuck.

Many design guidelines recommend using an animation if the user needs to wait. But as long as the user only needs to wait a few seconds, I think an ellipsis can be another helpful indicator that the system is doing its thing.

Somehow, using 3 dots at the end of a word assures me that an action is in progress — even though they’re just 3 static dots. Isn’t that amazing?

5. Ellipsis = “More characters”

Ellipses are also used to shorten words when the text gets too long. This is called truncation. You’ll often see this when working with long filenames.

In the early days, long filenames were truncated at the end. Nowadays, many apps and operating systems truncate in the middle, so that you can still see the last few characters. This is smart, because the last few characters are often the most important characters in a filename.

If we didn’t have truncation, we’d have overlapping text all over the place. Thankfully, the ellipsis has come to our rescue, saving our interface from total chaos.

Here’s what we might see if we didn’t have ellipses. Oh, the horror!

Small but mighty

Now that you’ve seen the many different ways ellipses have been used in interface design, do you agree the ellipsis is the most amazing character ever? I mean, who knew a few little dots could mean so much?

I haven’t even gone into all the wonderful ways ellipses can be used in chats and dialogue text. That’s a story for another day…

The next time you put an ellipsis in your interface, please give it some love for me. It might just be the most underappreciated character in your story.