Eye Movement & White Balance in UI Design

Eye Movement & White Balance in UI Design

Today I want to talk about two details that can have a big impact on your designs: eye movement & white balance. I’ll try to explain them with examples not to bore you to death with a lecture and paragraphs of text.

It was another lovely Monday and I had another payment screen design on my to do list. I personally don’t have a problem with doing similar screens or projects throughout the years as design trends change, my experience increases and there’s always a possibility to do something exciting.

Task was clear, user needs to see policy details, total amount of payment, credit card information form, user agreements etc. I quickly created a design based on the briefing and came up with something basic to start with.

White Balance

Lined Inputs 473x1024 - Eye Movement & White Balance in UI Design

This was clean and tidy but it was almost “too clean”.

So I tried changing inputs from “line-only” style to “background fill” to reduce the all white look and increase the contrast.

Titles without Icons 473x1024 - Eye Movement & White Balance in UI Design

Icons!

Let’s put icons to titles to make it all prettier!

Le Client

So I’ve tried adding a few icons but it didn’t work quite well. Eye movement was making it busy and complicated. Icons were not adding any value to compensate the lack of simplicity.

You can see the design with icons below and the eye movements. It messes with the readability and making your eyes jump around, especially on the bottom part.

Titles with Icons 473x1024 - Eye Movement & White Balance in UI Design
comp1 473x1024 - Eye Movement & White Balance in UI Design
comp2 473x1024 - Eye Movement & White Balance in UI Design

I could increase left padding and move icons left to align titles with the other text while keeping the icons but that would decrease the width of the content area which I would not like to do at all.

So I simply decided to go without the icons. We all know icons & images are processed faster in brain, they are making things interesting, they’re good with seperating sections etc. In this case though, I was happier with the simplicity and having a wider content area.

aax 1024x1024 - Eye Movement & White Balance in UI Design

Have a lovely day!

Leave a Reply

Your email address will not be published. Required fields are marked *