Summary: Google’s Material Design language reinforces one of the most valuable principles of graphic design, visual design, and user experience. It is to provide design elements that make it clear that a control is present for use. This technique is called a “signifier”; it signifies how to interact with the UI.
Visual designers, Creative Directors and UX designers have been on a mission for the past five years to “clean up” or minimalize UI design. The approach is called Flat Design. Design minimalism is not new and the intentions of de-cluttering your design are vital. However, industry studies and our own usability tests conducted on Web, Web App and Mobile apps tell us that there are a few things missing from most approaches to Flat design or new hybrids like “Flat 2.0”.
The Problem with Clean UI’s
UI’s that are so clean, they are invisible! Hiding UI elements is one of the worst things a designer can do. But the motivation is understandable: clean up the interface, reduce the clutter, simplify! These are all extremely important goals of UX Design and Visual Design, two overlapping efforts that go into design.
An example of “clean can be too so clean, that it wipes out the UI” was found on Skype (Note: It’s recently been updated to be docked in the top right during a call). For years, you could ask any heavy Skype user about Chat and they will tell you, the other callers could never find the chat element (it dissapeared when on a call, requiring mouse over, shown below, then click icon to open). Instead, it might have prompted the person you were sharing a link with, to auto-open instead of making them hunt.
Image: Skype chat icon requires users to find it (hidden off to the left in a non-essential area of the screen), then open it in order to receive a link or message. Instead Skype could place the icon in the main tool bar (next to mic icon), or one of the following: a) make it automatically open if the sender types a message, b) make it appear in the center of a screen like an incoming message, c) add a notification bubble, or d) pulsate when sender shares content.
The fix for providing a Clean UI
A signifier is a UI element that signals or invites usage. In the Interaction Design discipline, it is closely related to an “affordance”…a clue that affords or bekons usage, without requiring the user to think, study, interpret or play. In Google’s Material Design language, they recommend offering clear targets and making UI’s provide clear visual clues that a control exists. Google’s agenda is clear with Material Deisgn: NO HIDING controls behind minimalist design approaches!
Google Material Design guidelines specify that your visual design is useless without strong affordances (and signifiers) present. This advice is underlying much of Material Design and for good reason, Google has made the mistakes: eg. Android was a grand unintended experiment in mobile usability.
Getting “clean” or Flat Design right is not trivial and requires getting past the following obstacles:
1) Your designer’s brain (you can handle a lot more visual ambiguity than you realize). eg. Gray on gray doesn’t bother you, does it? 😉
2) Your stakeholder’s opinions (visual design is so subjective that a UI signifier can be removed in one design review, all in the name of Klean. (You know who you are!)
3) Your user’s brains. Users don’t look at UI’s and they don’t care about rules or requirements, sequences or flows…let alone clean UI’s. They care about doing what they want to do with your UI.
The best way to test your design to see if it’s user-proof is with usability testing. Watch users as they complete their tasks and see if they can find your UI underneath all that “clean”. Just like we have, you would be surprised what the eye does not see.
To learn more about other approaches for testing Visual Design, check out:
Webinar: Visual Design- Setting the Standard for Design Leadership
