Back5 Minute Redesigns: Improving Hierarchy in 2 Steps
At Echobind, we place a lot of importance on efficiency. This often means we’re trying to accomplish a lot with minimal resources. This mindset has a way of hyper-focusing our attention on the things that matter most so we can maximize the time and money we invest in projects.
This can be witnessed frequently in the collaboration between our engineering and design teams. Sometimes, projects are staffed with engineers but not with a dedicated designer. In these cases, our engineers will sometimes ask a designer to make suggestions about small improvements they can make to a screen without having to invest a lot of time.
Recently one of our engineers dropped this screen into our Slack and asked for a quick 80/20 analysis and design recommendations on how to improve it.
The biggest problem with this screen is that there are three main elements that feel like they have equal amounts of visual weight even though they’re not all equal in importance.
This is a common challenge when designing UI, and for a screen like this it can be tackled with 2 simple steps:
- Assign a priority to each element
- Use ✨Design Magic✨ to give the right amount of visual weight to each element based on importance
When we’re finished, the screen should feel balanced, and the most important elements should attract the most attention while the least important should be present but not distract from the main thing.
Step 1: Assign a Priority to Each Element
First, let’s assign a priority number to each of the 3 elements we identified previously.
For this screen, the most important element is the “Scan Barcode” section since that’s the main action most users are going to want to take on this screen.
The second is the “Scan a barcode to get started” section, which is actually a way for the user to manually enter a barcode number if they’re unable to scan the barcode for some reason.
The least important element is the welcome message and number of orders completed. The orders completed is a nice number to know, but it doesn’t need to take center-stage; it just needs to be somewhere on the screen where the user can find it if they need it.
Step 2: Adjust Visual Weight Based on Priority
Now that we’ve identified what’s most important, let’s use some basic design principles to make adjustments to each element.
Remove the Least Important Element from Center Stage
The Interaction Design Foundation defines center stage as ”a design pattern where the most important information, panel, window, or toolset appears prominently at the center of the user interface.” So one way we can de-emphasize the least important element is by removing it from the center.
Let’s put the welcome message and the orders completed text in a row at the top. We’ll also further de-emphasize the orders completed text by removing the container border, decreasing the font size, and making it lighter gray in color.
Make the Most Important Element Stand Out
As it is, this design already does a decent job of making the “Scan Barcode” section stand out, but it’s still competing a lot with that chunky input and “Submit” button. Additionally, the microcopy doesn’t give the user any information about why they should scan a barcode.
We’re going to fix this using a couple different techniques.
First, we can update the copy and add some secondary text that gives the user more context. We’ll make sure the header is large, dark, and bold while keeping the secondary text smaller, lighter, and regular weight.
Next, we can put the “Scan Barcode” section in a white container and give it a subtle drop shadow to make it stand out from the background. We’ll also make the background a light gray color instead of white to further emphasize this separation.
Nice! This is already looking much better. But as I mentioned before, that input and “Submit” button are still taking up quite a bit of space and competing with the main section.
Compare Elements of Medium-Priority to Other Elements
The biggest problem with the input and “Submit” button is that they’re too large compared to everything else on the screen. The help text is also too dark and doesn’t let the user know that the input is an alternative method to scanning, so we’ll fix that while we’re at it.
By updating the copy, making the text lighter, and decreasing the size of the input, now everything feels just right.
As a side note, placeholder text can be problematic for a number of reasons including not being readable by some screen readers, so I always recommend using a label and ditching placeholder text altogether. Adam Silver has a great blog post on this if you’re interested in learning more.
So there you have it! This redesign took me about five minutes, didn’t cost the engineer much time to implement, and had a big impact on the overall usability of the product.
