HFS 1 - Critique on the Gmail Inbox Interface
Yiyi Chen, 9/4/2012
Yiyi Chen, 9/4/2012
Overview
I use Gmail everyday to manage my emails, so do many of my friends. There are a lot of good design considerations going into the interface, which makes it interactive and intuitive to use, in addition to supporting a rich set of functionalities. I do, however, encounter occasional frustrations after I try more than five times to accomplish a seemingly simple thing. I thought it would be an interesting exploration to check out some of the underlying designs that make up the goods and bads of a very important part (email checking!) of our daily life.
Interface Description
As shown in the image below, the interface is divided into five main components, a search bar and account settings on the top, a “COMPOSE” button and a dropdown list of different inboxes on the middle left, an embedded Google Talk on the bottom left, the actual email/inbox content display in the middle, and an advertisement pane on the right.
Usability
The arrangement of the content as a whole also follows a good conceptual model, as it represents a natural logical progression. As we habitually parse the page from left to right, what we see changes from abstract (folders or inboxes) to concrete (email content), and from core (email content) to potentially relevant (advertisement links). (See Note* below for the underlying assumption for this statement) This is consistent with how we process things in our mind. We blow up a specific part of a big picture, or correlate outside information to an event we encounter. We rarely think the other way around.
There are a lot of impressive design features in this Gmail interface that makes it intuitive and easy to use, as exemplified by the placement, colors, and visual representations of its components. All the items are neatly aligned in a grid like layout and properly spaced. There are over 40 buttons/hyperlinks (excluding the advertisement links), but they don’t feel cramped or lack of focus at all. The links/buttons of similar functionalities are placed close to each other. For example, the links for different inboxes are all on the same column on the left, and the buttons for mail management operations (delete, move to folder, archive, etc.) are on the same row in the middle above the email content.
The arrangement of the content as a whole also follows a good conceptual model, as it represents a natural logical progression. As we habitually parse the page from left to right, what we see changes from abstract (folders or inboxes) to concrete (email content), and from core (email content) to potentially relevant (advertisement links). (See Note* below for the underlying assumption for this statement) This is consistent with how we process things in our mind. We blow up a specific part of a big picture, or correlate outside information to an event we encounter. We rarely think the other way around.
Aesthetics
The Gmail interface has a very clean and modern look. The grey color of the buttons makes them stand out from the background in an unobtrusive way. The light shade of the color gives the buttons a metallic feel, which conveys a sense of professionalism without looking boring or too serious. The rectangular shape of the section and buttons match the grid layout naturally, and thus are very friendly to eyes.
The interface also uses different visual cues to make certain components stand out. It uses color variation to emphasize some of the buttons, e.g. the blue search and the red compose button. The amount of variation, however, is controlled, so the users can still focus on the desirable content without getting dazzled by a feast of colors. In addition, most of the buttons have graphic instead of text labels, which shows a more visual mapping between the buttons and their corresponding usage.
On the Visibility and Clarity of the Buttons
Despite the overall easy-to-use design, I sometimes find the graphical labels on the buttons confusing. It’s not entirely obvious what functionality each button stands for at the first glance. For example, the leftmost button on the second row has a label of a backward pointing arrow. It is natural to associate the “backward” operation with the label, but exactly which “backward” operation? It can be “back to the previous folder”, which is the actual function of the button in this case, but it can also be “back to the previous email” or “back to the inbox”. The same problem exists for the button next to it. It means “archive” in this case, but it can very well be “download to the local disk”. The graphic labels are direct, spatially compact and maybe visually pleasing. The tradeoff for all these desirable properties is their susceptibility to mis-interpretations. The precise text label will appear as a mouse-over text if I rest my mouse in the button area for like a second. That is, however, an additional step and extra time that I need to spend to clarify the purpose of the button. The visibility of the functionality is compromised due to the lack of clarity in the labeling system.
Suggestions
My first suggestion on improving the button design is to include text in the button label, e.g. the inclusion of “Tools” from 1a to 1b. This gives a user the maximum clarity, but the new button now takes up more space. As a result, the text labels may no longer fit nicely in one row on top of the email content. It also loses parts of its original clean minimalist look.
An alternative suggestion that maintains the chic appearance is to design a less ambiguous symbol for some of the buttons, e.g. a redesign of “back to the previous level/folder” from 2a to 2b. This approach does not take up more space, but the tradeoff is a more thorough design process and thus a longer time. A constant user feedback gathering process will be very necessary to ensure the unambiguity of the current symbol. Regardless of the meticulous effort involved in the process, the solution is still prone to the same problem as before, as it is always possible for people to misinterpret the meaning of a graphic label if they are given the chance to. In another way, it relieves the symptom of our problems but fails to cure its cause.
My third approach requires less design time per button, but instead focuses more on the placement of those buttons, e.g. moving "trash" and "move to label" to the left and "archive" and "report spam" to the right from 3a to 3b. In this example I assume that people use the former two more often the latter ones. (based on our discussion feedback from last week) Hence it should be less confusing and more convenient since people see the buttons they are more likely to use first.
The top right settings section is another part of the interface where such repositioning might be desirable. I often try to change the inbox/mail settings by clicking on the topmost dropdown button before I realize that it is for account settings. It would be nice to have some more obvious visual hints on the difference between the two than just a profile picture and a gear wheel. For example, we could move the account name from the left to next to the picture so as to imply the concept of "accounts" into the dropdown through the proximity of the account name. We could also move the mail settings all the way to the left next to the "Gmail" button, which builds up a correspondence between the "Gmail" and the mail settings.
A potential tradeoff for my third approach is the loss of a clean look, as it is harder to achieve a placement that is simultaneously easy to follow and aesthetically pleasing. In addition, this approach is more effective for some of the buttons than others.
Instead of choosing only one of the three proposals, I think the best improvement implementation comes out as a combination of all three. However, such a change might be too costly in a real world setting, and thus compromise might need to be made for the maximum overall economic return.
The top right settings section is another part of the interface where such repositioning might be desirable. I often try to change the inbox/mail settings by clicking on the topmost dropdown button before I realize that it is for account settings. It would be nice to have some more obvious visual hints on the difference between the two than just a profile picture and a gear wheel. For example, we could move the account name from the left to next to the picture so as to imply the concept of "accounts" into the dropdown through the proximity of the account name. We could also move the mail settings all the way to the left next to the "Gmail" button, which builds up a correspondence between the "Gmail" and the mail settings.
A potential tradeoff for my third approach is the loss of a clean look, as it is harder to achieve a placement that is simultaneously easy to follow and aesthetically pleasing. In addition, this approach is more effective for some of the buttons than others.
Instead of choosing only one of the three proposals, I think the best improvement implementation comes out as a combination of all three. However, such a change might be too costly in a real world setting, and thus compromise might need to be made for the maximum overall economic return.
From left to right and top to bottom:
1a | 1b | Proposal 1: Add text to labels
-------------------------------------------------
2a | 2b | Proposal 2: Redesign the symbols
-------------------------------------------------
3a
3b
Proposal 3: Rearrange the buttons' positions
Note*: In this article, I assumed people read from left to right. I believe that some of the current designs should be modified accordingly for cultures with right to left writings.
