Designing Effective User Experience for Human Eye

Gestalt Principles:

  • Humans prefer complete shapes and see them first, hence when provided with spaces between elements, we tend to automatically fill in the gaps.
  • Humans follow the lines and the same flows.
  • Humans notice convex shapes before the concave ones.
  • Humans desire stability and avoid uncertainty, thus we look for stable objects. Our attention is always caught by the foreground until and unless the image we’re looking at is unclear.
  • Humans relate those elements together that form a meaningful image.
  • Humans group elements that are close to each other.
  • Humans sort objects that connect to each other while forming a pattern.
  • Humans look for balance and try their best to bring order in designs.

Hierarchy UI Design Patterns:

F Pattern:

Z Pattern:

Eye and colors:

Points To Remember:

  • The size of the elements should be large enough for the users to see them easily. Larger elements attract more attention than smaller ones as people tend to ignore objects they can’t clearly see.
  • Bright but calming colors should be used as they compel users towards them. Also, the color scheme used should be contrasting, especially between the background and foreground elements to help the user distinguish easily among them.
  • Extra decorative fonts make it difficult for the users to interpret the words. Simple fonts should be preferred such as Arial, Roboto, New Times Roman, etc. Also, the font size should be at least 16px for it to be easily visible on all kind of devices.
  • Similar content should have the same alignment so the users can relate them together. Also, an element that breaks away from the alignment pattern tends to grab more attention from the user.
  • Margins are one of the most essential factors when it comes to the domain of design. Despite closely placed elements give the impression of being related, all elements should be organized and distanced in such a way that they are clear and can be easily found.
  • Standard shapes should be used for each kind of element, although style variations can be added to them. The
    the beautiful and complex design of an element won’t matter if the user can’t
    recognize its use.
  • It is important to see whitespace not as an extra space, but as a significant design element. Properly placed whitespaces enable the users to perceive each of the elements without much
    effort.
  • Important elements and content should be placed at places where the human eye scans first or more often as compared to others. They should also be emphasized by using larger font sizes, bold styles, and contrasting colors and alignment.
  • Consistent style themes such as shapes, icon packs, colors, and fonts make the users recognize the content as a related body.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store