Design Trend: Interfaces with Less Information
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.
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).
On Mac OSX Lion the scrollbar fades away after just a few seconds of use, so 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.
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.
(For a beginner’s introduction to UX, start with our primer, UI vs UX.)
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?
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Related Articles
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 123 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 9,200+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 620 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
Premium Research
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Audit Service
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
LeonAugust 16, 2011
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.
KeithAugust 16, 2011
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.
ThanosAugust 17, 2011
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
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 bennaniAugust 17, 2011
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 BenavidezAugust 19, 2011
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 AddisonSeptember 1, 2011
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 ColborneAugust 22, 2011
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
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 AttiaSeptember 1, 2011
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 BurySeptember 2, 2011
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.
AvnerSeptember 26, 2011
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.
EvaProvDecember 8, 2011
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.
EvanJanuary 25, 2012
It’s called minimalism. Not a design trend, a way of life.
However, the new Gmail sucks. They got it wrong.
Haitham Al-BeikMarch 6, 2012
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. monkOctober 21, 2012
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 :)