Gmail redesign
A study on Gmail UX and its opportunities
“Go Foxxy, not for real real, just for play play.”
— Foxxy Love
Do you sometimes have this feeling, when you see a glass of water idling on the very edge of the table that you should push it a bit further? Just so that it won’t fall down with people moving around. If you have experienced it, you know what I feel about Gmail. But try to multiply the feeling described above 50 times. Because, to my eye Gmail is a table that has glasses loosely standing all over it’s perimeter. In a middle of the crowded factory workshop.
On Design Thinking
Let me confess one thing right away, I’m starting this article as a part of my Daily Design Doodle practice. Therefore, most likely, it will not have any profound research to back it up or decent amount of work put into suggestions. Yesterday wrapping up my work, I thought “Hm, I keep saying I would love to re-design Gmail’s Settings. Why not sketch it tomorrow. The weather is gonna be crappy and the exercise must be fun.”
And, unlike it usually happens with other Design Doodles of mine, I’ve decided to start documentation right away. It is going to come in handy one day, because when interviewed for work, I’m often asked to present the background thought that lead to one or another solution. So, here we go, buckle up. In case you are tender-hearted, maybe, ask someone to read it aloud to you, I’m not sure if I’m going to curse along the way.
There is a lot of talk about Design Thinking. It was a bit of a buzz-word throughout 2010s, at least in the innovation design offices. Unlike all the romantic speakers of TED, I’m not a cozy artistic type. For me design thinking begins with “Wow, that’s crap…”. Which I often verbalise. Which, you’ve guessed it, makes some people think I’m an asshole. But let’s look at Gmail a bit closer. You would imagine, that THE ultimate mail agent of XXI century has figured out their basics. Not quite, love, not quite.
On the arrows pointing left
Let’s briefly dissect what happens with the core functional buttons in Gmail. Just as an example of the lack of thought and legacy overload. If comparing a and b on the picture you don’t see much difference — you are not alone. Back-button is generally a very tricky UI element to design, which is especially true for web. Historically the use of back button in the browser interface (one that marked with “g” on the picture) is very regional. If you were lucky to have thoughtful web-designers that followed the standards and reacted to browser updates — you are probably used to this. You may even use the swipe on your laptop’s touchpad to navigate back and forth across visited pages. Then, on the other hand, if Internet took you by storm in the 2000s China — en mass visitors of your site were digitally illiterate. They have jumped onto the moving train, and you as a web-developer have tagged alone. Non of you have ever heard of in-browser navigation, so all the pages open in a new window and you use “x” to close the whole window when you want to go back.
Fast forward to our days. Gmail virtually has no competition in their niche. Yes, Microsoft managed to lobby their products as more “secure” and you might be forced to use some kind of terrible Office product for your correspondence at work (heaven bless all the time you’d waste on that). Should google desire to own a new age of email — they could. By which I mean to say that Gmail can start trials of the new iconography (and more generally — innovative UI experiments) for messaging without any loss in client base. Looking at the difference in between mobile and desktop Gmail iconography one may forecast upcoming changes for the desktop version. Yet, I’d claim that the changes are not drastic enough. Reply-button is still an arrow pointing to the left. It is still a bit of legacy from all the ancient icons that were developed for a cause. But it is not a standard and it has never been, meaning, people do not “know” that this means “Reply”. They guess it. Let’s google “Reply icon” to prove the point. Et, s’il te plait, my reader, It’s arrows, and boxes and envelopes and what not. Now look back at the Gmail desktop. There are four arrows pointing left. Two more pointing right. Countless amount of mini-pointers that look downwards. Which in turn means — there is a room for good (as in standard) design to come for a single-function reply button.
To give a fair credit to the Gmail design team — there is a type-in from that follows every letter and allows you quick reply. And it would have been brilliant if this interaction was branded. Why won’t you style the whole page around this? This is the core of what emailing is about. Why won’t you streamline Gmail browser experience to the level, where no one would want to use desktop mail applications anymore? My only guess is that Gmail (while being one of the flagman Google products) is not a priority for long-term development. After all, rivalry that we see among the messaging agents today (FB Messenger, Whatsapp and Slack to name the few) is redefining the manner in which we communicate. Radical investment into this battlefield would be strange for a company that can (and does) spend the best effort on the AI products. But then, doesn’t general quality of a platform matter anymore?
This rant about a single button does not come from me being painfully anal (which is also the case, of course). I’ve had a personal work disaster connected to this very button. We’ve had a somewhat lazy intern in the office, whom I’ve had to supervise and rather naturally part of my deliverables were done by him. I don’t have any expectation from the “humanity”, but I’m always very hopeful about the individuals, so I never wanted to oppress him with way too many directives. I was giving loose feedback and soft functional wireframes. Which resulted in him copying Google iconography for the message section of a wearable UI we were modelling, instead of switching his brain on and actually being a “designer” for 5 minutes.
Same plague of legacy overload you can see in Apple Watch. To me it is still a mystery how did their “Incoming Call” UI came to be. I perceive it as a massive failure on the side of their UI team. The first Apple Watch was release in 2015. A year before this you could find this video online of kids reacting to rotary phones. Feeling old yet? Well, it feels like Apple Watch design team was lead by people over 60. What are these handset icons do there? They don’t even depict the actual function of the buttons, since in some cases decline will get the caller into the voice mail (or so some articles on the subject claim. Do correct me if i’m wrong here). Either way. How many people would actually know what these icons even mean? How many people (realistically) would use Apple Watch and go “Oh, a horizontal handset! Just like in good old times, when I would lift and land a handset back to the levers to silence my dial phone.” C’mon fellows. Spice it up with the fact that Apple Watch has processing capabilities that allow animations. The whole UI could have been a journey with such resources. With some other embedded devices every 10kB of memory allocated for screen assets are luxury. And even there designers make effort at times.
The story of legacy in iconography is, of course, recurring and persistent. When I have just started engaging with visual design in early 2000s the more rational designers were urging people to stop using this ☎ icon before the phone numbers. Because, firstly, phone numbers are rather self-evident in most of the cases and secondly, dial phones were fading out at this time letting button and radio-phones to take over the market. Today, we have this 📱 and, well, some people have Apple Watch with this ☎ on board.
Proposal 1: Cut, paste, reuse
Zoom out from the page. Do you see how many times your own icon is repeated. Why? Simple colour coding (white for myself, grey for the incoming messages) would do. But hey, I’ve actually focused on the functional purpose of the page for this exercise.
There are no major changes in this proposal. The only aim was to get a sharp (or “sharper”) focus on a letter and its reply form. Because, you are certainly not opening your inbox to see your own face, right?
As I have mentioned before — the page is overloaded with legacy. Menus are grouped chaotically and often repeat each other.
There are only two drastic changes that I have done in this layout. Firstly, I have added a “⋮”-button in the end of the letter header. There can be a few more icons next to it (say, the “bin” for delete), but at the moment I have just wanted to highlight how many buttons can be packed from surrounding menus into a more rational location. Otherwise it is absolutely unclear whether it is a current letter or an entire batch of letters that the bin is going to delete. The second “ground-breaking” change I’ve allowed myself is getting rid of a “↰” back-button. It is absolutely redundant in this interface. It’s function should be taken by the word “Mail” or the word “Inbox” in the folder list.
It may seem that the contact-details menu have disappeared from the right. Don’t be fooled by this, amigo. It should rather be shown on click or on hover of a user image on top of the letter list. Because, shockingly, it is a child object (semantically) to your contact icon.
I’ve held my breath and did not erase a terrible chat window. However, it is a) not an actual part of Gmail, b) mind-freezingly terrible UI. Honestly, I have no idea how something as low-quality as this chat widget has happened within Google.
There are actually many more aspects to this view alone (not to say — other views that people don’t even know exist) that I did not touch for now. The idea was to make a mock-up without inventing new widgets or new visual elements. There are plenty of beautiful variants of Gmail on Dribbble. Non of them are truly emailing agents, though, they are just beautiful and dumb. I wanna make one like this too later! Uhhh…
_______
If you were expecting more from this text — come again later. If I am inspired, I will just continue this text. If you are Google and you wanted to see more — hire me. You will love me. Bisous.
