Article overview

Design Trend: Interfaces with Less Information

· By · 16 comments ·

When looking at some of the major new designs launched in recent days, an interesting trend seems to emerge: interfaces are getting slimmed down, showing less information at a glance.

Google’s recent redesigns across a wealth of their most-used services show a clear trend towards replacing button text with icons.

Google Docs design for upload files – new vs old

The new Google Docs design (to the right) for uploading files looks really good, but if you’re a new user it may be difficult to understand at first.

If you know what a box with an upwards arrow means, this is great – the new design looks good and takes up less space. But if you don’t know what this icon represents, even opening the dialog won’t be of much help to you.

Apple’s recently launched Mac OSX Lion, which hides the scrollbar so it is only visible when the page is actually scrolling (it also fades away a few seconds after scrolling stops).

In Mac OSX Lion the scrollbar fades away after just a few seconds of use.

While these 3 icons may seem like all the contents of the CD, there’s actually a fourth option below – but due to the lack of a permanently visible scrollbar there’s no indication of this fourth option.

Here I’m installing a tool for our new scanner at work. All seems fine and the install goes well. However, by accident I scroll down and realize there’s actually more options available on the CD.

The lack of a scrollbar means that you’ll have to try and scroll the window of every CD on Mac OSX Lion to see if you’re truly seeing all options or not.

The lack of a permanently visible scrollbar makes it difficult to know if you're seeing the full picture or only half of it.

Same window and CD as the image above, only I’ve extended the window size to show the fourth option “Tools” that was hidden from the initial view.

Here’s the expanded window, showing the additional “Tool” option, hidden from the initial view.

In both these cases, information is being removed from the interface for the sake of aesthetics and simplicity. Is this a clever move?

There’s clearly drawbacks to this approach. Replacing text with icons can remove vital context, especially if the icon is not 100% clear. Hiding visual cues like a scrollbar can (intentionally or not) trick the user to think they’re seeing the full view, when in fact they are not.

This is clearly “mobile app design” making its way back into “desktop app design”, however, one of the benefits of a desktop is additional screen real estate. On a smartphone, using an icon without text for a important action is most likely an acceptable trade-off because of the extremely limited screen size. On a desktop computer the equation is different.

These designs are certainly good for the experienced user. I quite like the new Google Docs design and the upload button is perfect for me, because I know what it means, so the text “Upload” is not necessary and the icon looks much better.

But what about less experienced users? Can we expect users to “play around” with our app in order to understand it? Can we consider something good design even if it isn’t 100% clear to most of our users at first glance?

Leon August 16, 2011 Reply to this comment

I think this is a good point, Jamie. I use Google docs a lot but it still took a bit of getting used to.

I think it’s done for aesthetic reasons rather than anything else, which is a bad thing, in my opinion. Minimalism isn’t just about the look of an object.

Gnome has also ditched full scroll bars, but at least places a mini scroll bar at the side of the window so you know that the window contents stretch beyond the bottom of the window. It’s still not as easy to use as a traditional scroll bar, though.

Keith August 16, 2011 Reply to this comment

To be honest, I think both are examples of bad user interface design!

Google took away the word ‘Upload’ and (presumably) didn’t bother to replace it with anything. I don’t see why they couldn’t keep the word – or at the very least add both a tooltip, and a title at the top of the popup menu that appears indicating that the dialog is for uploading files.

Apple took away the scrollbar and neglected to realise that they can still indicate further content exists. A subtle drop-shadow would work fine at the edges of the viewport where additional content exists.

It’s all about offering the correct affordances – Nielsen and co worked out a bunch of heuristics years and years ago through vigorous research. It seems these days that “designers” are far too often lacking the scientific knowledge required for really well-designed interfaces.

Thanos August 17, 2011 Reply to this comment

There is a title on the Create and Upload buttons. I believe that the problem with these two buttons is that they do not provide any visual feedback when hovering with the mouse. No change of border, no change of hue, not even change the cursor to pointer.
I agree that these examples are less usable but I find the UX improved.

T. August 17, 2011 Reply to this comment

Yup. Have to agree; they are simply bad interfaces and bad decisions on the behalf of the designers.

Both are now actually less usable, and the Apple example quite is astounding. It will mislead or at minimum waste the time of countless users.

Aesthetics shouldn’t trump usability.

omar bennani August 17, 2011 Reply to this comment

Translations people translations. When you’re a global company that has to provide the same interface in 50 languages your opinion if an icon vs text will change.

Elizeo Benavidez August 19, 2011 Reply to this comment

Agree with Omar! Consider a car and all it’s icons on the panels. My 10 year old may not know what they all mean, but when it’s his turn to use the car on a daily basis, text will not be not necessary. What’s the global symbol for cold air in your face? I’m no expert on hieroglyphics, but maybe the Egyptians figured this out a long time ago.

Bill Addison September 1, 2011 Reply to this comment

Wow, you actually changed my opinion on this, cool. With time, new symbols can become standards. We have to start somewhere.

You’ve identified a really good point too, not all interfaces are designed for all people; or in other words: you can please some people sometimes, but you can’t please all the people all the time.

Giles Colborne August 22, 2011 Reply to this comment

There’s an implicit assumption that all users NEED to discover all features. That’s rarely true. Mainstream users need quick access to the mainstream features – without lots of extras to divert them from their task.

Lior D. August 22, 2011 Reply to this comment

The user should never guess how to interact with the interface.
If something is not self-explanatory, the icon must have text labels on it. Give the more advanced user the option to remove it later if he/she wants to.

Alberto Attia September 1, 2011 Reply to this comment

Maybe responsive web design should not only work for different devices, but for different types of users as well. 2 or 3 triggers could help the system distinguish and adjust the interface accordingly.

Gary Bury September 2, 2011 Reply to this comment

I like Google’s current focus on design but some is definitely at the expense of usability. Like you say icons are great for regular users but very unusable for new users, I prefer labelled navigation every time.

Avner September 26, 2011 Reply to this comment

Google now added a tooltip to every button that shows only an icon. maybe they read this post.. what do you think about the minimalist google docs scroll bar? I have a tendency to think that users don’t need anymore the arrows and the whole line on top and buttom.

EvaProv December 8, 2011 Reply to this comment

Even with a graduate degree, it took me a bit to get used to the icons (on both the iPhone and Lion). It was an annoying process, and in some cases, I’m not sure it made my life any speedier in using the icons vs text.

What I really wonder about is: With 20% of the U.S. population functionally illiterate, I wonder how they find the changes? Do unnamed icons make it easier for them to find information, or do they make the barrier to entry even higher? We work in health literacy, and I constantly see how high the barriers are already for this population – many underserved and disenfranchised.

Evan January 25, 2012 Reply to this comment

It’s called minimalism. Not a design trend, a way of life.

However, the new Gmail sucks. They got it wrong.

Haitham Al-Beik March 6, 2012 Reply to this comment

When a new folder opens up in the Mac (to respond to the Mac issue above) Finder will always display the scroll bars for few seconds before fading away letting you know if there are more folders beyond the current viewport.

However, if you revisit the folder later, then the scroll bars do not flash. I noticed that Apple does flash them scroll bars for few seconds when you first open the window.

In terms of the other notes in the article – iconography is the way to go as it can be universal. However, developers and designers need to think about first-time use (show tips on first visit and by hover in future inquiries) and screen readers for the blind.

s. monk October 21, 2012 Reply to this comment

Yes Jamie, you are correct. But in addition to the example you highlighted, in some cases you always end up positive node.
for example: in ecommerce, you can certainly show a mobile icon instead of wiring buy mobile phone !! its understood and easy to digest for a user.

Similarly a icon of a camera is sufficient enough for a user to understand what that page would divert to ! Hence, you ending up with good UI without reducing any information to visitor :)

Post a comment!

Close overlay