How people perceive information
Tags: ux, beginners, webdev, design
Published: 2020-09-16 14:40:31


##### THE UX BASICS

## How people perceive information

#### There are six individual principles commonly associated with gestalt theory: **similarity, continuation, closure, proximity, figure/ground, and symmetry & order.**


Have you ever wondered how we get hooked to certain websites and spend hours without realising? Or, how it becomes so easy to navigate between some websites while with others it’s simply annoying even to identify the provided action items. So what makes these websites or products stand out? The answer to all these questions is a better User Experience Design. So grab a cup of coffee and let’s know, how, when and where we can use UX to make our products stand out by focusing on the User as the primary source of inspiration.

## How do we see a webpage?

* Jumping our eye around the webpage

* We usually find most of the information at the centre

* While looking for information, the sequence of eye fixation is usually in **F pattern** — *the simpler the better: **Saccades *( [Common eye fixation ](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.561.5859&rep=rep1&type=pdf#:~:text=These%20fixations%20typically%20last%20for,an%20average%20of%20400%2D%20425ms.))**
>  Basically we can say that, just because you put something that doesn’t mean user gonna see it. We need to understan the visual perception of users to make the layout of the website in such a way that the content is visible.

## 🟌 The principal of Visual Perception?

* Make important information and action **visible **don’t put it below the fold

* Leverage **‘the read” *(**People usually read in the F pattern)*.

* So evaluation would be “Did they see it? Or they miss it entirely”

![src: [https://www.fueltravel.com/blog/search-engine-results-page-behaviors-2005-versus-2015/](https://www.fueltravel.com/blog/search-engine-results-page-behaviors-2005-versus-2015/)](https://cdn-images-1.medium.com/max/2000/1*JdibuqRt_Q4fZV5yQzHHXw.jpeg)

## Making sense of the visual field

We can make sense of what we see by different characteristics like:

 1. Color Recognition

 2. Patterns or Shapes

 3. Interprete object

## Feature Detection

Our eye is most drawn to these features so we need to make use of these distinct features to detect a feature.

 1. Colour

 2. Value

 3. Angles or Edges

 4. Slope

 5. Length

 6. Texture

 7. Motion

We can differentiate an object very easily if it is unique in terms of the above criteria. This is called **Visual Search**

![](https://cdn-images-1.medium.com/max/2000/0*qKqX1mxbV_kkGiwT)

## Pattern Detection

We can detect patterns in different elements on the basis of the following criteria:

 1. **Proximity:** Distance between two elements

 2. **Closure** or continuation (like buffer circle)

 3. **Symmetry** (Like a simple object symbolizing an element)

 4. **Similarity** (Are all the things in a section similar)

 5. **Common Area** (While grouping the element with a common boundary, it means the elements belong to this area?)

 6. **Common Action** (if common actions are implemented in two elements fro 4 elements, they are likely to be grouped together)

![](https://cdn-images-1.medium.com/max/2000/0*xkdmp-KJOhXEcyn8)

## 🟌 Principal in UI
> # We can use **pop out** or **Motion** or **Extreme Colours** to attract attention to a specific element.

* Use of the [gestalt principle](https://www.interaction-design.org/literature/topics/gestalt-principles#:~:text=Gestalt%20principles%20or%20laws%20are,the%20separate%20simpler%20elements%20involved.)
>  There are six individual principles commonly associated with gestalt theory: **similarity, continuation, closure, proximity, figure/ground, and symmetry & order. **Know more here.

* Associate Items in a group to help them recognise

* Help user to understand what to skip

## **Memory**

How to make the information into the memory? For that, we need to make sure to utilize 4 different segments of memory appropriately.

* Sensory Register

* Perception

* Short term Memory

* Long term memory

## Short term memory

* Short term memory has a very limited capacity

* The “magic number” would be (7 +- 2) items (Miller’s law, 1956)

* Or in some case, maybe more like (4 +- 1) items (Cowan, 2001)
> #### **Information that is not retained(committed to long term memory) is lost or wasted. **That is what happens while learning before any exam

## 🟌 Principal in SHORT Memory

 1. Keep the list of Options short

 2. Give users tools(visual components) for reducing options/ information — If there is a huge number of information. Like sorting/raging/options to favourite and compare later

 3. Don’t expect users to remember stuff

* They won’t remember info from one screen to other

* If something is useful, make it visible in the next screen

## Long term memory

* When the information is stored for more than a few seconds

* How is the information transferred?

![](https://cdn-images-1.medium.com/max/2000/1*dg8ZqI364yWej7TI_iy38A.png)

## Principal in LONG Memory

 1. Learning will work better if the learner isn’t forced to learn stuff

* **Like using metaphors:** Like a PR or Cart or Items in Cart or Sign up or log in

* **Being consistent throughout the website and using specific standards used in other websites or apps: **Same icons, cancel button is red. Like even different websites should be consistent with each other

* **Avoid asking to memorize stuff:**

![](https://cdn-images-1.medium.com/max/2000/1*CTIw5BrhUZJzBwmOFndo0A.png)

2. Recognition over recall or repetition

So that’s it for this article. I hope you all liked it and if you liked it then do not forget to tell us your thoughts in the comment section below.
>  *If you want to connect with me, here I am at [Twitter](https://twitter.com/anishaswain) or [Instagram](https://www.instagram.com/anisha_swain_/)*

Follow our community [LinkedIn group](https://www.linkedin.com/groups/13894715/), [Facebook](https://www.facebook.com/iamtheuigirl) Page and [Twitter](https://twitter.com/the_ui_girl) for more such articles and posts and meet like-minded people to collaborate.