Share Facebook

Twitter

Reddit



As I’ve been exploring iOS 13 to write the just-released Take Control of iOS 13 and iPadOS 13, I’ve become concerned about what seems to be an increasingly frequent pattern in iOS software design. What finally pushed me over the edge into writing this article was documenting Apple Card’s user interface in Wallet (see “How to Get the Most from Your Apple Card Benefits,” 14 August 2019), because I found myself typing the same character over and over and over…

That’s right, I’m talking about the increasingly ever-present ellipsis ••• buttons in iOS (technically, we generally render a user-interface ellipsis in running text as three bullets to make them more easily seen).

Now, I don’t have a grudge against the ellipsis itself; it’s a perfectly valid character that writers can use in interesting and flexible ways. The most formal usage is probably as an indication of the intentional omission of a word, sentence, or section from a larger body of text. For instance, Apple inserts an ellipsis in a file name when it’s too long to display in the allocated space. But the ellipsis has also come to be used to indicate, as Wikipedia suggests, “an unfinished thought, a leading statement, a slight pause, an echoing voice, or a nervous or awkward silence. … When placed at the beginning or end of a sentence, the ellipsis can also inspire a feeling of melancholy or longing.” If only our technology could be so subtle.

That’s in writing. In the Macintosh interface, the ellipsis has long had a specific meaning. An ellipsis following a menu item means that choosing that item will result in a dialog, rather than an action being performed immediately. Choosing File > Save saves the current document; choosing File > Save As… displays a Save dialog where you can enter a new name and location for the file. In technical writing, we drop the ellipsis when referring to menu items to avoid confusion with the more traditional uses of the ellipsis.

But in iOS—and even in some Mac apps—Apple has started using the ellipsis in random ways that muddy its meaning. Let’s take a look.

Apple’s Use and Abuse of the Ellipsis

First, let’s return to the Wallet app, where you tap the ellipsis button to access information about a credit card and its settings.

In this example, the ellipsis button is akin to choosing File > Get Info on the Mac to open the Get Info window, which displays metadata about the selected file. Interestingly, Wallet only recently switched to using the ellipsis button; before that, it relied on a button that looked like the lowercase letter i. Perhaps the i was awkward when localizing the interface into other languages and script systems, but it is an ISO standard symbol.

Let’s say you then switch to the Music app to play some tunes. While playing a song, you see yet another ellipsis button. You might assume that tapping it would display more information about the song, perhaps like what you can see in iTunes when you choose Edit > Song Info. But no, the ellipsis button in the iOS Music app brings up a list of track-specific actions, like adding it to your library, adding it to a playlist, creating an Apple Music station based on it, and so on. At least the Add to Playlist and Share Song menu commands honor the standard use of the ellipsis to indicate that a dialog will appear next.

We’ve now switched from the ellipsis button indicating that tapping it will provide information and settings to it acting as a contextual menu of actions you can perform on the selected song. That’s a jump.

Speaking of the soon-to-be-defunct iTunes, it goes way over the top on ellipsis usage, especially when browsing for music by Artists.

While having so many ellipsis buttons—of two different types—seems excessive, at least Apple uses them consistently here: clicking any of the ellipsis buttons displays a contextual menu for the given item. But visually, this interface is a mess. Unfortunately, it’s similar in the Music app in the current beta of macOS 10.15 Catalina.

Speaking of betas, the iOS 13 beta presumably reflects Apple’s most recent design thinking. Since Apple is now beta testing iOS 13.1, iOS 13.0’s visual interface is likely locked down. (If you’d like to get a head start on your iOS 13 experience, check out Take Control of iOS 13 and iPadOS 13.)

iOS 13 tweaked the ellipsis button in Music, but not in a particularly helpful way.

First, Apple changed its position, but more importantly, tapping it now opens an activity view instead of the action sheet that iOS 12 used. In interface language, should an ellipsis open an activity view or an action sheet? It may seem like a small difference, but any time an interface does something unexpected, users lose trust in their abilities.

These interface confusions extend to the Files app in iOS 13 as well. Much like with Wallet, Apple replaced a perfectly understandable Edit link with an ellipsis button. What does it do this time? Settings, perhaps? Sharing options?

No, this time it offers commands for scanning documents, connecting to servers, and the options to edit locations, favorites, and tags. These are very different actions. The Edit command makes sense for manipulating the lists of items underneath, and the new feature for connecting to a server fits well too, but scanning documents? Nothing else in Files relates to creating documents.

Perhaps my favorite abuse of the ellipsis button is in iOS 13’s Shortcuts app, where tapping it on a shortcut takes you to the shortcut actions, but tapping it while viewing shortcut actions takes you to the shortcut’s settings, although the sheet is labeled “Details.”

In the first instance, the ellipsis button means “Edit,” whereas in the second, it means “Settings.” This is once again a step back from iOS 12’s Shortcuts app, which uses a distinct settings icon with toggle switches for a shortcut’s settings. Why did Apple replace a visually clear icon with a generic one?

That’s exactly what the ellipsis buttons in iOS have become: generic icons that indicate that there’s something more to see, but you never know what. You could replace the ellipsis with Clarus the Dogcow, and it would be every bit as visually clear (and more interesting).

To make matters worse, in each of the above examples, the ellipsis button triggers a different sort of interface. Sometimes you get a separate screen, sometimes an action sheet, and sometimes an activity view. It’s disorienting because there’s no consistent behavior.

And of course, there’s yet another completely different context for the ellipsis, the incoming message indicator in Messages.

Don’t try tapping it—nothing will happen.

Unfortunately, Apple’s bad practices have infected third-party developers as well. Check out this example from Slack’s iOS app.

An ellipsis button just for a single View Files option! Why not just put a View Files button next to the other buttons?

What Is “More”?

You might be thinking that it’s obvious that the ellipsis buttons and icons simply mean “More,” but there’s no way to know this for sure.

The good news is that Apple has introduced a standard library of icons in its upcoming operating systems, called SF Symbols. Until now, developers had to create their own icons or borrow them from a third party.

Unfortunately, the descriptions generally document only what the icons look like, not what they’re meant to mean. So the names don’t give developers any idea about why to use these icons, just what they look like, which is already obvious.

(SF Symbols isn’t a standard Unicode font, so there’s no way for tech writers to use them when documenting Mac and iOS apps. Worse, Apple’s license seemingly prevents their use in documentation anyway, saying “Your use of Symbols obtained from Apple’s SF Font is limited to creating mock-ups of user interfaces for software products running on Apple’s iOS, macOS and tvOS operating systems.”)

Names like ellipses.bubble and ellipsis.circle aren’t helpful. Interestingly, it’s not as if Apple can’t describe how specific icons should be used. The company does so for icons that developers are allowed to use only to indicate specific Apple features.

Developers and users can be sure that the icloud icon can only refer to Apple’s iCloud service, but good luck deciphering what ellipsis.circle means. Maybe it means “More,” maybe it doesn’t. Apple is being intentionally vague here.

The broader issue here in terms of usability isn’t the philosophical issue of “what is more,” but the practical issue of what “More” means to the user. As you saw in the above examples, tapping an ellipsis button can activate a widely varied range of user interface elements. Unlike, say, the Share icon, which consistently presents an activity view that contains sharing-related options, the behavior of ellipsis buttons isn’t predictable or consistent, which leads to user confusion. It confuses me, and I’ve spent years documenting iOS!

Let’s examine a competing approach to representing “More.”

Google to the Rescue?

Believe it or not, Google might have outdone Apple on design here. Google gives developers a clear design standard, called Material Design, that comes with color palettes, templates, and icons. Each of Google’s open-source icons clearly states its purpose.

For the most part, Material Design doesn’t name its icons based on what they look like, but instead for what function they should represent. Unlike Apple, Google doesn’t call the gear icon “gear.” Instead, it’s named “settings” to indicate that tapping it should provide access to settings. Material Design also provides an array of other settings icons for different things, like Bluetooth and brightness.

To be fair, Material Design also includes the ellipsis button, though it puts “more” in the name to indicate that tapping them should provide more of something.

Let’s look at how Google uses ellipsis buttons in its iOS apps. Gmail shares iTunes’s annoying tendency to nest ellipsis buttons, and like iTunes, it uses them in an internally consistent way.

Tap the ellipsis button associated with an email thread to bring up a menu for that thread. Tap the ellipsis button associated with the message to bring up a menu for that specific message. As with iTunes, it’s not pretty, but it’s consistent and it works.

The ellipsis button (vertical this time, presumably to take up less horizontal space from the video title) works the same way in YouTube: tap it to see a menu of extra actions much like Gmail provides. The only difference is that each action has an icon to the left of it, which would be nice to have in Gmail.

Just as with Gmail, the menu pops up from the bottom of the screen. Thankfully there’s no nesting here.

In Google Docs, ellipsis works much the same way: tap it to reveal a menu of hidden actions. In the file view, the menu pops up from the bottom like in Gmail and YouTube.

But tapping the ellipsis button while viewing a document causes the menu to pop out of the side of the screen. Given the length of the menu, that small inconsistency makes some sense, but I can’t help but think that a “hamburger” button (which Material Design calls a “menu” button and which Google apps use as well for app-level menu options) would be more appropriate.

Google Maps breaks this convention somewhat. Tapping More in the Explore Nearby pane opens a full-page menu of place categories.

But this isn’t an entirely fair comparison, as this ellipsis button doesn’t look like most other ellipsis buttons—it matches the nearby colored icons and provides a text label. I like this particular usage because you can intuit what will happen when you tap that clearly labeled More button.

Of course, what you prefer is a subjective choice, and it’s not as if Android developers (including Google) follow the Material Design guidelines exactly. However, I think Google’s usage of ellipsis buttons is clearer and more consistent than Apple’s.

It’s disappointing that Apple, supposedly a leader in interface design, has resorted to such uninspiring, and I’ll dare say, lazy design in its icons. I don’t claim to be a usability expert, but it seems to me that icons should represent a clear intention, followed by a consistent action. To quote Apple’s Human Interface Guidelines:

A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

The ellipsis button may be system-provided, but even Apple isn’t using it to initiate app functions in ways that people expect.