I was not going to post about this, but then I thought it could be a very
interesting example to show how the right models/tools can help to avoid
this kind of errors. Last but not least, I strongly believe you have to fall
into a lot of mistakes in the process of creating a great user interface,
but if you use the right tools and you are describing things at the right
abstraction level, they become evident, and you can quickly walk through the
l> prototyping process to achieve a successful design.
What's Wrong With The Contacts Design In The New Version Of GMail ?
The main problem is it has a bad layout. Layouts should be simple and Google
knows it more than anybody. Not only simple, they have also to be familiar,
recognizable (yes, copy them from other user interfaces). Layouts aren't an
innovation area and simple layouts have been all already invented.
So, What's Wrong With The GMail Layout?
Well, first of all it has too many areas. An area is the part of the screen
where you will present a UI concept. Actually, you should have so many areas
as concepts you want to present on screen at the same time. And you don't
want to expose your user with dozen of concepts at the same time, so you
don't want too many areas. In the new version of the contacts subsystem they
have 5 areas (just in that part).
However, five areas wouldn't be a problem is they weren't so poorly
orchestrated. Area orchestration, or Layout Behavior (as I lately redefined
it) is the way you assign a hierarchy to the different areas on the screen.
The main pattern you should know in this field is called Visual Framework
<http://designinginterfaces.com/Visual_Framework> . I will translate it in
this way: "Try to keep the area hierarchy always, never mind which concepts
are you presenting at each time in each area".
The Layout Behavior can be defined using with transitions that are
represented as arrows (this
4084/content.htm> is a very natural representation). Each arrow means that
the target will be refreshed when any action is fired in the source.
Typically you expect that top menus refresh second layer menus, left or
right bars refresh the content area and so on. This approach is very
interesting because you don't need to think it in terms of events and other
programming-related stuff. Just answer: when an action is fired in one
specific area, which area(s) will be refreshed? If you can find a simple and
recognizable orchestration for your areas, it will be good enough. Back to
GMail, have you seen this kind of orchestration in some other place?
Other problem with the chosen transitions are the transition jumps. The one
from FirstTopArea to the RightArea is anti-natural because broke the logic
sequence. The same happens with the transition from LeftArea to RightArea,
but in this case you should add that it provokes a a little inconsistence
because there is another transition from LeftArea to CenterArea.
Other good advice to take when possible is to define the transitions
targeting contiguous areas, in order to facilitate the focus flow of your
user. Why jumping to the other side of the screen? Users don't want to
guess where to look after clicking something. In this case, the user is
forced to jump his focus from the left to the right in one jump. When you
press something, the refreshed area should be the one the user is expecting
to be, and users don't expect to move their heads all around like playing
Simon <http://www.freegames.ws/games/kidsgames/simon/mysimon.htm> in a big
Also, there is a very ironic problem, the very strange behavior in the
search box. When you search a contact, a new item is added in the left list
(groups and other stuff list), while the results are added in the center
list at the same time. Why? What's the purpose of the left list with two
fixed items, all the groups and an intermittent search result item? Why
adding that item there? Why just not showing the results as Google taught us
in a dead simple way?
Finally, probably the most annoying error is the inconsistence. Consistence
is THE fundamental behind all great designed user interfaces. When you press
the "New contact" button you are directed to the RightArea, but when you
press the "New Group" button (placed just at it side) a popup appears on the
top left corner of the screen, while other popup's appear centered on the
screen. Added up, it provides a baffling experience for the user.
Random isn't a good friend of user interfaces. Actions presented in the same
style and grouped together, are expected to produce the same kind of
feedback in the user interface. If they are going to provide different
experience they should be separated or presented with a different style (see