Depth perception in user interface design

With the “minimalist design” being thrown around essentially everywhere these days, we seem to be accepting all that it brings to the table, without considering the implications. While minimalist interfaces have their charm, a few significant issues might spoil even a very tasty-looking one.

For generations, we have grown accustomed to three-dimensional user interfaces, and that happened for a reason: people needed something to hint at the depth of the environment they were interacting in. Our normal, daily interactions happen in a three-dimensional space (let’s forget about time for just a second), so naturally, our perception is tuned to allow us to navigate easily within it. A healthy human being is able to judge the distance between two or more objects with a good enough accuracy to get himself from a bedroom to a kitchen to grab a midnight snack, without getting injured along the way (provided there is sufficient light to see at least a fridge door handle).

Ideal interactive interface elements follow the same, simple principle: they are instantly recognisable as actionable, with their purpose clearly stated. Sadly, there are no such thing as “ideal UI element.”

Software interfaces are a bridge between users and hardware, so they need to use emphasised visuals for interactive elements, such as buttons and inputs, in order to allow their users to distinguish them from the non-interactive bits (labels, micro copy, etc). The closest analogy can be a door knob: it sticks out, so we have an obvious point of interaction. The available action is dependant on the context (type of the door frame, its position; type of the door knob, etc).

Ideal interactive interface elements follow the same, simple principle: they are instantly recognisable as actionable, with their purpose clearly stated. Sadly, there is no such thing as “an ideal UI element.” The so-called “flat design” makes this problem even more evident, by removing a lot of visual cues (affordances) that can help users distinguish such elements from anything else.

By removing certain visual features, such as shadows, borders, or even whole backgrounds, some designs go a bit too far, and blur the lines between actionable and non-actionable elements. Accessibility ends up being heavily impaired, sometimes to the point, where users encounter problems with performing basic operations.

iOS

The new design language for iOS (since version 7 onwards), is where Apple decided to replace well functioning (although slightly over-designed in some cases) UI buttons with plain text labels, differentiated from the rest of the UI only via accent colour of a given app (or blue, in case of iOS itself). Losing all these affordances has required existing users to relearn certain interactions, such as navigating between screens. For all new users, visual cues may not be/have been clear enough at first, as the interactive elements look just like ordinary text labels on the screen. And don’t forget the elephant in the room of all touch-based devices: tappable targets.

Designers who decide to pursue minimal design need to carefully consider how to convey importance of information displayed to the user.

The lack of depth doesn’t just affect interactive elements, but the visual hierarchy as well. Designers who decide to pursue minimal design should carefully consider how to convey importance of all information displayed to the user. Placing most important or most relevant sections towards the top of the screen won’t deal with this problem entirely, and in some cases may even make the situation worse, by introducing organised chaos: only the creator of such interface will understand its purpose, and how to use it.

Apple’s mobile platform in its most recent incarnation can be a case in point for many bad design decisions, which surprisingly, were not remedied in subsequent releases of iOS. Their updated Music app, which was supposed to be the new messiah in music streaming, ended up as a cluttered and messy combination of a radio app, a music player, and a streaming service, all of which would be better off, if they were published as separate apps.

The number of usability and user experience issues related to Apple Music, that were discovered by designers in the community was shocking. This begs for a question: “what was Apple really thinking?” From the awful on-boarding experience, through self-adjusting bottom navigation bar (navbar items change order, depending on the status of your subscription, or enabled functionality).

Android

To be fair, it’s not just iOS that emphasises what is wrong with going the minimal route all the way, without thinking; Google does it too in Material Design; for example they use call-to-action elements which look like labels, differentiating their importance (when used in clusters) with just colour and weight of the text. Colour alone, even if given a bolder label, is simply not enough to inform users about the importance of an element. That’s because people with colour blindness, or other colour-related vision deficiencies, cannot rely on colour cues alone.

Colour alone, even if given a bolder label, is simply not enough to inform users about the importance of an element. That’s because people with colour blindness, or other colour-related vision deficiencies, cannot rely on colour cues alone.

A quick way to tell if your UI is usable, would be to run it through various vision deficiency simulators, such as NoCoffee Chrome extension. If you can’t tell a call-to-action from a label during these smoke-screen tests, you should definitely reconsider your design choices.

Minimalist user interfaces are not broken by default. In fact, careful consideration for how people perceive different elements on screen can help tremendously to provide interaction cues. Appropriate contrast, spacing, and well-structured content will do a solid job, yet without the feel of depth, they’re still prone to user error, and that’s because depth perception provides the most natural way for light and meaningful affordances.

Windows Mobile

Microsoft hasn’t really excelled at their minimal design implementation either. Despite using decent spacing, high overall contrast, and text labels heavily for primary parts of their Windows Mobile 8.1 OS, they’ve failed at indicating meaning for a lot of in-depth call-to-actions. This is mostly because they put emphasis on text, which robbed their UI from the most basic of affordances: the distinction between a label, and a tappable element. To add insult to injury, their OS navigation is badly optimised, with no sense of hierarchy whatsoever.

---

Minimalist user interfaces are not broken by default. In fact, careful consideration for how people perceive different elements on screen can help tremendously to provide interaction cues. Appropriate contrast, spacing, and well-structured content will do a solid job, yet without the feel of depth, they’re still prone to user error, and that’s because depth perception allows us to pick up on even the smallest, yet meaningful affordances.

Adding a bit of depth to your designs may not win you any brownie points from hipster designers, but your users will certainly appreciate the little cues you’ve left for them, to ensure completing their daily tasks is as intuitive as possible.

In the end of the day, gestalt principles, colour theory, platform-specific human interface guidelines, or even user testing won’t save us from making decisions on how, and if to use one design implementation over another. In the age of everyone being connected, we have a moral duty to provide our users with the most usable and accessible ways to interact with the software we design. Influencers sometimes lose sight of the big picture and start following trends, or pursue the cool factor, often overlooking problems already laid out on the table, right in front of them.

Adding a bit of depth to your designs may not win you any brownie points from hipster designers, but your users will certainly appreciate the little cues you’ve left for them, to ensure completing their daily tasks is as intuitive as possible.