UI hierarchies best practices: How to make the most of them
With every app having dozens of features, how do we guide our user, instead of overwhelming them?
Modern technology is complex. It’s not always complicated though, thanks to our constant striving to make human-computer interaction an effortless experience.
However, the more intricate a service/product, the more difficult our job becomes. Two factors make our job today tougher than ever:
- There’s more computing power than ever before — which means the apps and programs can include more and more features.
- Mobile apps rule the software market — which means there’s less and less actual space for UI elements.
This is why today UI is all about creating and structuring feature hierarchies.
Feature hierarchies vs. the essential, but rarely used functions.
Creating a feature hierarchy is easy enough. You take all of the features available in an app and evaluate them according to two main poles:
- Feature’s importance — how crucial it is for the proper functionality of the app (e.g. “Play” button in a media player).
- Feature’s urgency — how often an average user needs it (e.g. update settings on a phone).
Naturally, if the feature scores highly in both importance and urgency, we place it at the very top of our UI hierarchy, making it visible and easily accessible.
The less-popular and less-important functions, in turn, are relegated to obscure corners on the “lower levels” of the UI.
This can lead to a self-fulfilling prophecy of sorts. We place some functions at the lower UI level figuring they aren’t as often used. The features then become nearly invisible and people use them less frequently. Seeing that, we conclude that we were correct to place those features on the lower levels in the first place.
But sometimes our products can support features that are both crucial, but not needed often. Those have been named by the Seoul researchers Min and Lee the “raressential” functions.
The easiest example: changing a carrier on your phone is not something you need often. However, when you’re traveling aboard, those settings need to be accessed if you want to use your phone as a phone.
This means that we need to pay especially close attention to what of our products/services.
Why it’s difficult to design for rarely used functions.
What we strive for is usability.
But as any experienced designer will attest, usability is often about what the user is used to, not what’s actually easier.
By using certain functions every day, even if it’s tough to access them, users form behavioral patterns. And if you mess with that, the usability will drop. The feature itself will be easier to access, but it won’t matter, because nobody wants to learn a new way to do something they already learned how to do once.
The secret of designing software is this: in the world of frequently-used, vitally important features people will put up with a lot.
The problem with raressentials is specifically that users won’t memorize where they are. The user might only have to access them once a week/month/year, but when they do, it means that the product can’t work without this access.
This means that we have much less room for error, and the user will absolutely refuse to put up with being “lost” in the product.
Where to place the raressential functions
Now that we know what we’re talking about and the complications associated with raressentials, I’ll go over some of the best practices both for mobile and desktop apps.
For a mobile app: place them on the lower levels of UI accessed through screen corners.
For a start, our most-used computers — our phones.
There is a hard and fast rule in mobile design: location > symbols.
It doesn’t work every single time, but it’s a good enough rule of thumb.
Since most of our phone screens are pretty small, we can’t as easily rely on the symbols telling our users how each button corresponds to a feature.
Whereas a desktop is wide and can accommodate every button in existence, the mobile screen is restrictive, and nobody wants to scroll for additional buttons.
Mobile design is about being deep, not wide. A user can go down the design hierarchy 5–6 levels in a couple of seconds because it only takes them a finger tap to do so.
In terms of screen geometry, the most important part of mobile design is how other elements interact with screen corners.
As we all know, corners are where you look if you want to go “deeper” into the menus and buttons of a mobile app. It’s also where we look for any important features.
How it started, I don’t know, but I do know that we can use both our users’ familiarity with the corners and their ability to go deep into the UI very quickly.
Add to that the fact that most of us will instinctively try to look for raressentials somewhere “deep in the menus”, and we got ourselves a prescription for the mobile apps.
Make the users start their journey from the screen corners. Once they’re in the menus, it’s okay to make every screen feature fewer buttons, but have more screens overall.
For a desktop app: highlight the essential features by icons and orient the user with feature hierarchy maps.
The crucial difficulty in designing for mobile — the screen size limitation — is not an issue for most desktop applications. In fact, now the screen size becomes a hindrance cause it takes our users time and effort to traverse the screen.
A great way to use that freed up space when designing for a desktop is to show your user the “path” they took to get where they are. This helps users memorize how to get to the features they need + it helps them re-trace their steps if they end up lost.
Symbols and icons also acquire a special significance in desktop software.
The screen is bigger, the text is tougher to read (and a lot of large-font text often ends up looking awkward) — therefore the icons and symbols become more important.
The keyword here is balance: if you decide to add a symbol for every button, especially when they are located closely together, the user will become confused.
With many generic-looking symbols laid out in a row, you’ll guarantee that people will need to read the names of the features to avoid misclicking, which will slow them down and frustrate them further.
For this reason, I would say designing a line of icons is not the best decision user experience-wise, as most users would still rather go deeper into the menus, considering this a “safer” option, than clicking on a symbol next to a couple of other symbols like it.
In my opinion, this is why placing the raressential functions on the upper UI levels won’t necessarily increase usability.
Here I’d recommend not being afraid of deepening your feature hierarchy, but using that additional screen space to show which steps the user already took so they can go back to any UI level if they need it.
Add to that a spare use of icons and symbols to highlight the narrow and essential function, and you’ll be pretty much golden.
Senior UI/UX designer at Awario.com