đŸ‘‹đŸœ We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

How to Use Visual Hierarchy and Alignment to Improve UI Design

5 min. read

Proper element hierarchy and alignment will make your website or app easy to scan. Learn how to drive users' attention and guide them to the next action.

Just like the Terminator, your brain is always scanning what it sees, looking for cues on where to focus your attention. Understanding how and where your users will focus their attention will allow you to design more effective and easy-to-use products. When proper hierarchy and alignment are implemented your site or app will be easy to scan and better for comprehension.

Master visual hierarchy to make your UI more effective and easy to read

In the broad sense, understanding visual hierarchy means understanding how our brains help us see and comprehend the world around us, by scanning, and how that affects our behavior when interacting with digital interfaces. If you understand the levels of attention each item on your page will get, it will help you design better pages / apps / software. People will understand whatever it is that you’re wanting them to do more quickly, with less effort.

Lack of visual hierarchy and poorly aligned content interrupts your brain's ability to scan and zone in on areas of interest. If we cannot quickly understand what we see, we become frustrated and will likely leave the experience.

Image with messages in different sizes and reading order for each, from the most prominent to the least one.
This is a popular meme, but we're not sure who originated it. Source of the image.

I’ve seen lots of these posted online and it's true. If you read in the order in which it said you would, you’re not alone.

It’s how our brain takes in information. Visual hierarchy is something that permeates all types of communication. Advertising, art, and journalism all use it. Designers use it intentionally to guide people to the areas they want the most attention on.

That is why our brains scan content. There is no way we can read every word that we see, just like we cannot focus on every image we see or sound we hear. We must design experiences that give users clues as to what each area is about, and let them decide if that is what they want to dig into more.

Look at this example of a web page with no hierarchy. There is nowhere for your eye to focus. You are looking or scanning for places to anchor onto and glance at. When there is no place like that, you simply ignore it.

Balsamiq wireframe of a web page with placeholder text and no formatting.

When you add a bit of hierarchy to a page, now attention is drawn to the top of the page and people will read the headline at the very least.

Balsamiq wireframe of a web page with placeholder text with some formatting (headlines).

When there is no hierarchy or places for our eyes to go, we cannot focus, and must use more of our attention to discern where we need to go next.

Sometimes this is used intentionally. When you place equal weight on the items on your page you are confusing your users. It’s a common dark pattern sites use when they don't want you to take action at all (e.g., to cancel your membership). The example below uses a lot of similarity between the choices and the result is the user must study each section and read the button text to ensure they take the action they want.

Audible.com uses multiple primary buttons to discourage you from canceling.

Animated gif that shows how combining the hierarchy of UI elements and text alignment makes the page easier to scan.

You can see the effects even more when you combine hierarchy and alignment. Communicating the most important elements prominently, while aligning everything allows people to quickly scan the elements on the page to find what they’re looking for.


Alignment also affects how your brain scans content on a screen

Proper alignment is one of the telling signs that a professional designer crafted the interface you’re using. When you see something that is well aligned, even if you’re not consciously aware of it, you feel that you’re using an interface that was designed more deliberately.

Align text with text

Look at the example below. The first option does not look bad, but something is off.

Wireframe of 2 testimonial box components: on the left, the UI elements are a bit off. On the right, they are well-aligned.

When compared with the example on the left you can see the alignment on the right is with the text and not the quotation marks and it makes it much easier to scan.

You can see this better in an example with more content. Aligning text with text and not with the icons will allow people to scan the icons and headline text easier. It’s also easier for the user to read.

Horizontal alignment

Horizontal alignment for images and text boxes is also important. It’s easier to scan across the top of a page when it all aligns.

Another form of horizontal alignment is when content blocks are cascaded but the content still falls in the same eye-line. If that sight line is interrupted you will naturally want to jump to the next piece of content. This makes it hard to focus on the first bit of content. When you have things side-by-side it adds a nice visual interest to each text box, but overlapping can cause disruptions to comprehending the content.

If you have places where the text runs across the page, try to give some vertical space between things so the user can easily look at each area separately.

You may be tempted to squish things together so the pages don't feel as long, but in reality when people are reading websites, they don’t mind long pages. We do mind when things are too close; our brains chunk them together and we can't focus as easily.

Putting it all together

Let’s look at a full web page that doesn’t have good alignment and a page with good alignment, to compare. There are fewer places for your eye to get lost in the more aligned version.

Gif that compares 2 web pages with the same content. One has well-aligned elements, and the other one doesn’t.

Your brain loves patterns. Did you ever notice that most content-heavy websites are symmetrical? Look at this overlay. Everything aligns nice and neat. This is a useful exercise when creating wireframes for a web page to see how well everything aligns.

Animated gif of a wireframe showing dotted lines to indicate areas of alignment and symmetry.


Conclusion

This article only scratches the surface of what there is to learn about visual hierarchy and alignment. But even implementing lessons from these basic examples will improve what you’re working on. Be sure to constantly analyze your design to see what areas your eyes are naturally drawn to. Take notice when you feel like you're interrupted or distracted when scanning your site.

All of these are the clues you need to understand how others will also perceive it. Better yet, ask friends to review your work and ask them the same questions. Find areas that need improvement and fix them. Your site will be better for it.


By Billy Carlson
Got questions or feedback? Email support@balsamiq.com.


Related Articles

Common Website Mistakes and How to Fix Them

Learn how to improve your website’s user experience! For each mistake you’ll learn what usually happens and why, what it looks like, and what to do about it.

By Leon Barnard

How to Help People Avoid and Recover From Errors in Your UI Design

Error management: help people avoid errors in the first place, see the error, and understand what's happened — and add instructions on how to recover from it.

By Donna Spencer

How to Design a Sign-Up Flow: Balsamiq Cloud Case Study

Designing a Sign-Up flow for a web app is much harder than you’d think. It requires a balance between usability and security, with a sprinkle of marketing on top.

By Peldi Guilizzoni

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - JĂ©rĂ©mie AndrĂ©
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!