The Psychology of UI and UX

Leen Khalil
Media Reflections: Past, Present, Future
9 min readDec 5, 2019

--

Everything around you was designed for you. Or at least designed to make it easier for you to use.

“I invented the term [User Experience] because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning.”— Donald Norman

To Norman, User Experience Design (UX) is the core of every thought experience design. It is always centered on the human being.

What is User Interface Design?

User Interface Design (UI) is quite a broad term but could simply be about the design of the product, how it looks and is presented, as well as anything that a user could interact with that includes any type of screen, keyboards, sounds, lights, and more.

The UI is always changing and developing with multiple purposes. It oversees a product’s development. Through research, content, and layout, the UI ensures a product looks attractive and receives positive experience from users.

A UI designer’s role is crucial as they are responsible for researching, analyzing, prototyping, ensuring interactivity and effective use of animation. That is not even all of what a UI designer must do, as there are many more depending on the product that is being designed. For instance, if a designer is creating an app then they must be aware of the different screen sizes and adapt their app to all screens.

In short, User Interface Design (UI) is responsible for the strengths and visuals of their design and to enhance interactivity between the user and product and the user’s experience. The UI designer is responsible for the product’s skin (visual presentation), senses (interactivity responses), and gestures (product’s guides that visually leads users).

What is User Experience Design?

User Experience Design (UX) developed from the creation of the User interface (UI). If there is something a user could interact with, their experiences with the object, whether positive, neutral, or negative, made an impact on how the user felt with the interactions. The object could be anything, for example cars, chairs, lamps and so on.

A UX designer is responsible for making sure that a product or service is satisfies the customers’ needs, while making it easy for them to achieve their task with said product or service. The designer is also responsible for analyzing their competitor and costumer, product strategy, prototyping, and testing. After finishing their design, they must work with UI designers to complete the product.

Similar to UI designers, UX designers also have a lot of responsibility to carry as both roles are complex. In short, User Experience Design (UX) is responsible for understanding cognitive science and sociology, develop quality interactions between user and the company, not just the company’s product, and research and test.

There are tons of great products that contain one but not the other, however both UI and UX are crucial in creating a much more successful product. As written in the article “The Gap Between UX and UI Design” by designer and expert Helga Moreno:

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”

The Difference between UI and UX

Most people confuse User Interface (UI) and User Experience (UX) with one another, while there are people who would think they are one and the same. They are both essential in a product as they are intertwined. Even though they are closely related, their roles in the design process and design discipline are quite different. UI Design is more like graphic design, while UX Design is more analytical and technical.

To explain the difference simply through the analogy of Emil Lamprecht, a user researcher:

“If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body–its presentation, its senses and reactions.”

Another simple analogy by Steven Brykman is of elevators:

“For elevators, UI is simply the panel of buttons you use to summon the elevator or to choose your destination floor once inside, plus things like the indicator that shows what floor a car is on. UX is not only those visible/interactive objects but everything else that affects your experience of the elevator: Where do I find them? How many are there? How do I know which ones go to the floor I need? Are the cars large or small? Are they well-lit or dim inside? Do they move slow or fast? Can I maintain the cell signal for my phone while riding? Do the doors open too slowly, close too quickly? What factors in the experience affect my choice of the elevator vs. the stairs?”

As presented in the analogies, the UI relates to the physical or digital product itself, for example an elevator, a car, a website, application…etc. UX relates to the user’s experience while using the product.

The Origin of UI and UX

UI and UX have always been present all around us even if it did not have its scientific term. They could date all the way back to ancient China.

The Chinese had a philosophy of Feng Shui that translates as “wind” and “water”, as well as refers to the spatial arrangement of objects in relation to the flow of energy. Feng Shui concerns everything from framework to colors and materials. It is basically like interior design where one arranges furniture to make it comfortable to be in for the person. This relates to UX where the designer applies similar principles into the product to make it user-friendly.

Technically speaking, UX and UI go back to the 1970’s. You had to use the command line interface to use a computer. This required many and many lines of code to simply complete a task. So, in the 1980’s, computer scientists at Xerox PARC developed the first graphical user interface (GUI). Users are now able to interact with their computers by simply pressing on icons, menus, buttons, and check-boxes. The groundbreaking innovation meant that you could use a computer with no coding.

The accessibility of personal computers led to designers thinking of the users while designing otherwise the product would not sell. However as mentioned before, UX and UI are not just limited to digital products but physical as well.

From there, UX and UI continued to develop exponentially to where we are today.

The Psychology of UI and UX

A large part of both UI and UX relate to psychology as the designer needs to understand who they are designing for and how the product they are designing will be perceived and received. To better understand the user’s perception, some design principles that relate to psychology will be explained.

The Principles of Psychology in UI and UX

There are many design principles that are based on psychology and following are some examples:

The Von Restorff Effect

The Von Restorff Effect, aka Isolation Effect, explains how if there were multiple objects present, the one that looks different than the rest is most likely to be remembered.

The Business option grabs the user’s attention

Designers use this principle mainly for call-to-actions buttons on sites or applications. Users will notice the difference between a simple action button and a call-to-action button.

The Serial Position Effect

The Serial Position Effect demonstrates that a user will remember the first and last items in a list or series.

The important actions are shown on top and bottom

That is why most applications are designed with a bar navigation on top or bottom, while placing the most important actions to the right or left.

Hick’s Law

Hick’s Law states that the amount of choices available affect the time it takes for a user to make their decisions. The more the options, the more time it takes to make a decision.

The less shown the better

Designers show items or options in a list with the least amount of options to choose from, or to show a few options at a time so the user does not get confused or overwhelmed.

Law of Proximity

Law of Proximity states that objects that are closer together are tended to be grouped. This demonstrates how the human brain organizes things. The example shows circles that through the different distances, we can perceive that there are four groups of circles.

4 groups of circles are perceived by our brains

Designers use this principle when they want to make it clear to group things together, and they are aware of the importance of being careful with how far to place items.

The Effects of UI and UX on people

As understood from the design principles that correlate with principles of psychology, the way a product is designed does create an impact on its user, whether it was negative or positive. UI and UX designers carefully craft their products with the intention of making it appealing to costumers and users through psychology.

However, not only does psychology affect users, but also animation and how it is used. The way a designer uses animation also relates to the principles of psychology and mostly designed for the user’s experience. If an animation is smooth and easy on the eyes, it will be more appealing to users than a simple plain animation. Animation is used in many forms, as they could be used to grab a user’s attention, lead their eye to a certain action, or simply make the website or app look better.

Example from Twitter

With all these combined, the affect it has on users is great and the users mostly unaware that it is affecting them unconsciously. How a website, app, product is designed affect the user’s decisions and thoughts and whether they will use the app or buy the product for instance. The experiences that are created from using these products also affects users. That is why UI and UX designers must research thoroughly and why they must have knowledge on sociology and psychology.

The Experimentation

To fully understand the effects of UI and UX on people, an experiment was conducted where a group of people, who were half designers and half not, were asked to choose the more correct choice out of two designs choices. The participants mostly agreed with the more correct choice, with some disagreeing a few designs stating that the lesser correct looks better. A website game called Can’t Unsee was used, as well as other animated transitions for this experiment.

The transition on the left is static and right to the point, the one on the right leads the eye and dynamic

The designers took less time to see what the “correct” choice was in comparison with the non-designers who took longer but still chose the “correct” choice. The experiment was mostly based on common sense, but also with what felt right as a design.

Example of the “correct” and “wrong” design from the experiment

Of course, what makes a design good is subjective, however the experiment demonstrated that people mostly agree with what is universally considered a good design versus bad. Intuitively, the participants knew the right choice whether they understood why or not.

User Interface Design (UI) and User Experience Design (UX) are extremely complex, ever-changing and developing with the advancement of technology. With multiple factor, such as psychology, sociology, and the integration of animation joining together to result in a successful product that could be experienced positively. However successful or not, a product can majorly influence people’s decisions and thoughts.

Sources

https://blog.marvelapp.com/psychology-principles-every-uiux-designer-needs-know/

https://uxplanet.org/the-evolution-of-ux-process-methodology-47f52557178b

https://careerfoundry.com/en/blog/ux-design/the-fascinating-history-of-ux-design-a-definitive-timeline/

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

--

--