Basic tips on how to bulletproof your Visual Hierarchy in design
One of my most common observations in Usability reviews is a broken visual hierarchy. Such designs create a world of many problems. Users usually do not understand the information they are shown. A lack of hierarchy can lead to information overload, confusion and might even prevent users from executing the intended action of the design.
Having a good working visual hierarchy is an essential step in having UX working towards your business goals. Sure, usability reviews can help and fix it. But can we actually prevent such issues in the future?
Based on my experience, a broken visual hierarchy is often caused by four mistakes:
The unclear goal at the beginning - The purpose of the design was never clearly defined. Maybe it was once or twice mentioned in the meeting, but it was never documented.
Unclear communication of goals - Since the goal was not documented, it is difficult to get back to the goal of the design. Sure, it might have been communicated at the beginning, but people tend to forget over time. Are you sure that everybody on the team is aligned? Unclear goals create an environment for misinterpretations among team members and departments.
Too many “stakeholders” - The involvement of too many individuals from various departments with differing agendas can impact the final design. Not in a good way.
Iterations without clear goals - The original visual hierarchy was lost after a few rounds of iterations. These iterations were not guided by the original design goals.
With these four root causes in mind, I created 5 tips on how we can protect visual hierarchy for the future:
Tip #1: Define the main goal of your screen/feature. WRITE IT DOWN.
Tip #2: With more complex screens, try to create an ordered list of goals. Be careful with this one and be strict on yourselves. Do you really need to communicate 8 things at once?
Tip #3: Share these goals! Make sure everybody is synced and knows where to find these goals later on. Clarity and sync is the key.
Tip #4: Come back to these goals at every step of the process. Review if you are still on the right track. Sketching wireframes? Check the list. Launching the product? Check the list. Clarity and sync are important throughout the entire process, not only on the first day.
Tip #5: Update your goals! These goals shouldn’t be followed blindly. Don’t be afraid to ask why. Then redesign accordingly.
I realize these tips might come to you as basic. I agree. However, most design issues are the result of poor fundamentals and a lack of communication.
Since this newsletter is called Design Breadcrumbs and my goal is to provide easy-to-digest information (see how I now implemented tip #4?), I don't want to dive too deep into detail on how to actually fix the visual hierarchy. Maybe next time.
Instead, I put up a list of a few interesting resources for further reading:
Nielsen Norman Group on Visual Hierarchy - your “go-to” source for anything UX related.
visualmess.com - oldie, but goldie. My favorite guide with tips on how to actually fix design with Poster example.
Vice Interview with LINGsCARS - interview with the owner of the Lingscars. (5 years old article)
When everything is important, nothing is important.
In case you are currently dealing with a redesign in your project, don't hesitate to contact me via LinkedIn or you can book a call via my webpage.