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.
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.
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.
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.
Have a lovely day!