Minimize the “Eye Energy”

In this topic, you will learn some pointers on applying proper spacing, grouping, and arrangement of UI/UX features. Also, it will briefly discuss the advantages of typography and design aesthetics.

The second principle of UX is to minimize eye energy. Our eyes focus on the things that attract them, like the bright text on a dark canvass or a big object in the middle of small items. This principle is called the Von Restorff effect. It means odd stuff stands out and gets remembered easily.

 

What is Eye Energy?

In UX, eye energy refers to the eyes’ effort when using and manipulating a product. One design golden rule states, “anything that causes you eye strain should be removed.” It could bad color contrasts, irregular font sizes, unreadable text, or lack of negative space.

 

3 Useful Techniques to Reduce Eye Energy

Have you ever wonder why billboards are so prominent? Why car stickers and signboards are noticeable in a busy street? Well, to make BOLD visual statements. In design, we emphasize what’s important.

 

1. Sacred Space & Alignment

White space is not an empty design. It speaks volumes of meaning and sustains balance. Alignment sets boundaries and prevents chaos, for it imposes correct margin, padding, and position.

 

Example
The image below shows an example of the first technique. See how organized the objects on the left picture are. Proper spacing and text alignment are well executed.

Credits: Adobe Help Center

Ask Yourself

Exhibit A

Analyze the image above. Appy your knowledge on sacred space and alignment to answer these questions:

  • Does this design minimize your eye energy? Why/Why not?
  • What can you do to improve it? Enumerate 2 suggestions and explain why did you recommend them.

 

2. Typography & Aesthetics

In design, typography is the art of making letters or written words. It must be exquisite, readable, and captivating. In contrast, aesthetics means putting together elements and features to create beautiful but beneficial products. When combined, these two highlight the importance of correct usage of fonts, backgrounds, assets, and color palettes.

 

Examples

Credits: BioRender

 

Credits: Prototypr

Ask Yourself

Exhibit B

Facebook is the number one social media application for many years now. It’s known for connecting users with friends, family, communities, and businesses.

Credits: Facebook

Look at the image above and analyze the underlying UX principle and techniques used on the user dashboard.

  • Why FB uses only three font colors and font weights?
  • Why FB sets gray and white as its default background?
  • What can you say about its image-content layout? Explain your answer.
  • Why FB considered a user-friendly application in terms of UX and UI?

 

3. Hierarchy & Clustering of Elements

This technique was mentioned on the hand energy, but it is also essential to conserve eye energy. By right clustering of connected/related features and determining the hierarchy of their elements, users can understand visual cues, flow, and relevant information without too much use of content.

Credits: Alvalyn Lundgren

Ask Yourself

Exhibit C

Slack is a channel-based messaging platform which goal is to make work communication and cooperation easier using its app tools.

Credits: Slack

Look at the image above and analyze the underlying UX principle and technique used on the user interface.

  • Why do you think the search bar is located on the top part?
  • Why do the threads, all DMs, mentions & reactions, and saved items are group together on the upper part of lev navigation?
  • Why starred groups and channels are highly prioritized before direct messages?

 



References

https://vanseodesign.com/web-d...

https://www.interaction-design...

Next