There are Simply Too Many Dots in Mobile Email Apps
I get that consistent design language is important, but I feel like it's been at least a week since I actually clicked the correct set of 3 dots to do what I meant to...
As a contractor currently, I find myself frequently needing to flag, save, and forward emails. I’m usually doing that on my phone, and I never do it correctly. That’s because the 2 email apps I use, and that most people use, are Gmail and Outlook. And in both of those apps, there are 2 sets of 3 dots a thumb-stretch away from each other, and I’m simply not capable of remembering which set of 3 dots is responsible for which actions.
What Each Set of Dots Does
To understand the issue, we need to understand what each set does and why they’re separate to start with. In each, the top set of dots is designed to affect the “thread” level, and the lower set (which repeats with each message) affects the “message” level. That being meaningful to you depends on whether the antiquated architecture of email fits nicely in your brain which…I don’t think is true for many.
In Gmail
The top set is next to controls that let you archive, delete, and mark as unread. The options under the dots involve some similar actions, like snoozing, moving, and labeling. There’s also an option to mute the thread, report spam, print, or (strangely) add to Google Tasks. Some of these things feel very similar to the options outside the dots, but others feel like a terrible fit. In total, there are 9 options.
The lower set is next to the option to reply to the message and the options under the dots make a bit more sense, except for the first one. That’s “revert auto-sizing” and I’ve tested everything I can think of but cannot discern what this does. Other options are Reply All, Forward, Print, and Block. Reply All and Forward make a ton of sense, but Print and Block feel like repeats of the top menu. In total, there are 5 options - that’s a grand total of 14 actions in submenus for a single message.
In Outlook
The top set is next to controls that let you voice search (??), delete, and archive the thread. The options under the dots allow you to move the thread, report it, snooze, print, ignore, mark as unread, flag, pint, or create a task. Similar to Gmail, including the obsession with Tasks. In total, there are 10 options here.
The lower set is next to the recipients list with no other action in the row. It starts with an add-in bar at the top, which I don’t use, but then includes options to mark as unread (again), flag (again), reply, reply all, forward, and delete. In total, excluding any add-in actions, there are 6 actions - that’s a grand total of (at least) 16 actions in submenus for a single message.
I’ll also note here that Reply, Reply All, and Forward options are also anchored to the bottom of the screen here where you can quickly begin composing a message in the same bar.
The Trouble with Design Systems
I’m not a designer, and any time I’ve tried to play one on TV it’s gone poorly. However, I’ve managed lots of design work and I think I’ve done that pretty well. A big reason that someone without any design chops can manage the design process is that most design teams have developed a comprehensive and consistent design system that allows everyone to speak the same language.
Design systems define everything from the colors of specific elements to the kind of element to use for specific actions. If you build a new feature where you can share something in the app, that sharing element will be the same as it is everywhere else; there’s no need to reinvent the wheel for every feature and element on the page. This is a massive time savings for the working team, and as a user you’ll usually appreciate it because it helps each piece of an application feel consistent and attached to the whole.
But adherence to design systems are also how you end up with 2 sets of 3 dots a thumb stretch away from each other in 2 of the most used apps in the world. When the team decides that the set of actions should be distinct from each other, they’re still talking about accessing a menu of actions. And the element through which you access a menu of actions is 3 dots. So if you want to be able to do that a few different places, you end up with identical elements that serve unique purposes, and folks get confused.
Some Thoughts on Improvement
I think the cardinal sin here is that the product teams working here decided, long ago, that thread and message actions are distinct things that absolutely must be separated. But that’s false on the face of it, because in both products there are repeat actions! Yes, they act different at the thread or message level, but why does the ingress need to be separated? Why not provide the affected level as an option in the action itself?
For example, let’s say I want to print an email. I select that action, and then I’m prompted whether or not I want to print the whole thread or the selected message only. Flagging and adding to Tasks can be similar - why not have that option for the thread or the message each time?
The only actions that feel like they don’t work at the thread level at all, and only the message level, are the response options (reply, reply all, and forward). Those are so core to the email experience that I don’t think they should ever be obscured in a dropdown menu. Outlooks approach of anchoring these to the bottom of the screen makes a ton of sense here, and I don’t understand why they won’t commit to that.
Overall, though, I think what’s happening here is modern design being applied to old architecture. Email has always sucked, but it’s still necessary. That doesn’t mean we have to continue caring about distinctions that no longer matter, especially when doing so makes a bad experience exponentially worse.