Gmail's been redesigned

Gmail doesn't look quite the same anymore. Not sure when its visual look and feel last changed in any substantial way, something like 2007 perhaps, but it has always had a no-nonsense, "just get on with it" design that's been quite refreshing in the current day and age. 


My initial thought on the redesign is that the new "Material design refresh" looks a lot better than the ghastly "Material 1" design paradigm gmail in fact never really received. I also like how they've integrated some of the best Inbox features into gmail (like quick access to attachments).

But perhaps it's no surprise that gmail and some of the other Google web apps never got the material treatment. Why? Let's see. First, I can't help but notice that a quite complex app like gmail — and by that I mean complex from an interactional perspective, i.e. lots and lots to click on at any time — also seems to reveal some inherent weaknesses of the "Material design refresh" design system and most other flat or semi-flat design paradigms.

When you're designing a simple web app or a phone app, there are just a couple of things on the screen that you can interact with at any time. If you need to dig down into the details, there's typically a hamburger or settings menu behind which a lot of the complexity is hidden. If you only have a couple of things to click or tap on, users typically understand that just by the placement of elements on the screen, by using icons, and/or by certain elements having a dedicated color that the user has learnt means "tappable". Apple iOS's blue color is a good example of this, paying homage in some ways to the blue link color of the early days of the web. Anything that's that hue of blue can be tapped.  

However, gmail is the quintessential opposite type app. Everything's clickable and everything's available at any time. If you're designing a more complex app with lots of things to click on, things get a little harder both from a design perspective but also from a user perspective. From the user's perspective: What can this system do for me? From the system's (and designer's) perspective: How do I show what I can do?

The GUI designers of yore — think the 70s — rapidly came up with the idea of designing clearly visible buttons to signal to the user: "Hey, I'm clickable!" Later on, they started to add depth and shadows and other visual effects to make it even more obvious to the user that the screen real estate occupied by this particular set of pixels is somehow special.

Although debated over the years, in the Human-Computer Interaction (HCI) literature this "specialness" is often referred to as the buttons "afford" clicking.    

But for 5-6 years or so now, a different breed of interfaces have become popular. Gone are the clear, visual affordances of buttons with depth and shadows. In fact, gone are most visual adornments full stop. Instead, the so-called "flat design" design paradigm has conquered the digital world.   

While this blog post isn't going to delve into all the current flavors and history of flat design, let's just say it's been and still is a highly influential and fashionable design trend, impacting almost all digital design domains.

From what we've seen so far from the Material design refresh however, there are a couple of interesting aspects to consider in relation to its flatness. In gmail, at any one point in time there are a lot of clickable things on the screen. On a typically gmail front page showing your inbox, you can click on about a 100 different things.

As traditional buttons are not allowed anymore in the flat paradigm, the system still has to show the user what can be clicked. So instead of affording that in the traditional way by clearly delineating clickable buttons from other text using clear visual cues and color, the designers have instead chosen to add so-called hovering effects, i.e. when you move the mouse pointer over a clickable area the area changes font, color, background etc. When you move the pointer away from the area, it goes back to the way it was. 

Hovering effects are fine and there's nothing inherently wrong with them, in fact they were originally introduced and used in web design to make interaction more fun , playful, and engaging. However, when you have a complex interface like gmail where pretty much every inch of the screen is a clickable area, moving your mouse pointer over the canvas is like constantly shaking a kaleidoscope — there's just too much stuff going on all there time.

To me, this makes interacting with the new gmail a bit messy and visually tiring.