The best designs are completely inconspicuous. They exist to help users complete their tasks smoothly and efficiently, and they do so discreetly while remaining unnoticed. To create such experiences designers do not make arbitrary decisions. Behind the simplicity of good design lies the study of patterns in human behavior and of human psychology. Designers then use the learnings to evaluate their options and make better design choices. Here are a few basic insights into the human mind and their implications for design. Law of Prägnanz “finding simplicity” “People perceive and interpret ambiguous or complex images as the simplest form possible” In 1910, psychologist Max Wertheimer had an insight when he observed how the lights encircling a movie theater marquee flash on and off. From the standpoint of an observer, it seems as if a single light travels around a marquee as it moves from bulb to bulb. In reality, it’s a series of bulbs that turn on and off without moving at all. The original observation led to a set of principles that describe how we visually perceive objects. These principles are central to nearly everything we do graphically as designers and are collectively called Gestalt. “Prägnanz” is a German word meaning salience, conciseness or orderliness. It is a basic law of Gestalt and is also called the “Law of simplicity”. It states that the human eye likes to find simplicity and order in complex shapes. We do this because it prevents us from becoming overwhelmed with information. For example, our brain simplifies what our eyes see to what is expected and necessary. We hence tend to not notice the repeated words in this diagram. Applying the Law of Prägnanz We can use the insights of ‘Gestalt’ to prevent users from being overwhelmed by information overload (reduce cognitive load) and help them to quickly identify groups or types of information by making them visually similar using shape, colour, size and proximity. Make sure screens are neat and not chaotic and busy Visually group items using shape, colour, size and proximity- Order items to make them easier to comprehend and understand (top to bottom or left to right) Use colour, shape or size to draw attention to the most important elements Don’t draw attention away from important things with unnecessary design elements (like irrelevant borders or scrollbars) Hick’s law “paradox of choice” “The time needed to make a decision depends on the amount of choices available” In 1952, two psychologists, William Hick and Ray Hyman, performed tests to understand the relationship between the number of stimuli and an individual’s reaction to any given stimulus. In simple terms, their insight was  that the time and effort it takes to make a decision increases as the number of options increases. While this insight might be somewhat obvious, less apparent is its implication for application design. This implication is that giving users too many options and forcing them to choose negatively affects their experience and can cause them to abandon an application or leave a website. This applies to everything from navigation options to product features and tutorial videos. In this context more actually is less. Hick and Hyman converted their tests into a formula that can be used to calculate the time people generally require to make a choice when given a set of options. Let’s say you’re on a website and you want to navigate to another page. If you need 2 seconds to read, understand and decide on one link out of 5 possible options, the response time calculation is: RT = (2 seconds) + (0.155 seconds)(log2(5)) = 2.36 seconds studied the relationship between the number of options and how content people were with a choice they made. They found that - given a lot of options - people tend to be more critical and unsure of a choice they made, and question it more. Choosing one among many can also make people feel powerless and frustrated, because choosing one means giving up many opportunities. Having fewer options makes it easier to make the best possible choice and generally leaves people more content. Other researchers Applying Hick's Law So, in combination, these two findings indicate that there are generally significant advantages to providing users with fewer choices. Alternatively, we may want to make a choice easier by suggesting a few options. We use this law to encourage users to act, make deciding faster and easier and avert decision paralysis. When we apply this law to our designs people will feel more content and happy with their choices and consequently also with the application. Take away any option that is not absolutely necessary Sort options so the more likely or desirable ones are easier to choose (like country drop-downs) Organise options into smaller, logical groups Give users a set of groups to choose from and reveal choices only once a group has been selected (progressive disclosure) Use Prägnanz to make some options appear more “selectable” and appealing than others Allow people to safely try out options to reduce the potential for errors and wrong choices Consider the cost vs the gain for each product feature Give new users a clear path by suggesting the next step through a complex software Jakob’s Law “users prefer familiarity” “Users prefer an application to work the same way as the ones they already know.” Jakob Nielsen is a usability expert and co-founder of the Nielsen Norman Group - a guru in UX. In 2000 he described an observation that users’ can feel confused and frustrated when they face uncommon design patterns. He concluded that people like to be able to anticipate what an experience will be like, based on past experiences. When they can’t, they have to think harder and tend to abandon tasks and leave the application more often. Applying Jakob’s Law Users expect to transfer learnings from one familiar product to other, similar ones and want to leverage existing mental models. We can use this law to allow users to make associations and understand quicker, thereby flattening the learning curve. This creates experiences in which the users can focus on their tasks rather than on learning new models. Use pattern libraries to find common patterns that solve common problems Research competitors, popular mobile and web applications to find similar solutions to the problems you need to solve Use the language and terms used by users to describe tasks, concepts and screen elements Don’t change built-in page controls and behaviours, such as scrollbars and scrolling Don’t change how every-day tools work Ground-breaking, innovative and unusual designs and interactions need to be tested before being put to use. Use new trends established by the main players in tech. They have the teams and money to thoroughly test innovations Fitts’s Law “speed-accuracy trade-off” ”The time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target” Psychologist Paul Fitts published his theory on “human mechanics and aimed movement” in 1954. The resulting calculation is called Fitts’ Law and it states that the bigger an object is and the closer it is to us, the easier it will be for us to reach it. Fitts’ Law calculates the time it takes to reach any target, taking its’ distance and size into account. In all honesty - I have yet to meet a designer who has used this formula to calculate how to lay out a screen or decide what size its elements should be. The law nevertheless provides good guidance for making better design decisions and is therefor very useful. When designing an interface a lot of factors come into play. Elements need to be seen in relation to each other, and the environment of use, device characteristics and the dexterity of the target user all have a role to play. For example, if I am designing a screen for a mobile app that my granny will use while screaming across the desert in a 4x4, the most important buttons should probably be quite large. Applying Fitts’s Law Gauging when a button is large enough or when controls are too far from each other is something we will probably use a best guess to decide. Over time our guesses will probably get better, but, as guessing always implies some uncertainty, there is no better way to validate a guess than with usability testing. Make important items large enough to reach easily, but remember that bigger is not always better (law of diminishing returns): at some point, an item is big enough Place items that are used sequentially in the sequence in which they are used Keep elements that are used in conjunction with each other closer together Place the most frequently used elements in the most easily accessible area of the screen Miller’s Law “chunking” ”The average person can only keep 7 (plus or minus 2) items in their working memory.” In 1956, George Miller published a paper in the Psychological Review called “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information”. In this paper he asserts that the point where confusion creates an incorrect judgment is the capacity of our memory, and that the span of immediate memory and absolute judgment is limited to around 7 pieces of information. In other words, on average, the quantity of information which can be reliably transmitted, conceived and recalled within a certain amount of time by a person is around 7 pieces. This law not only applies to things people need to recall, but also how much an average brain can handle before it needs to start working harder. Similarly to the Hick’s law above, its recommendations are that putting less strain on the user’s brain leads to fewer abandonments, less frustration and generally happier users. Applying Miller’s Law Where Hick’s law is more general, with Miller’s law we now get an actual concrete number we can use to decide what to present our users with. Show fewer items whenever possible so users have to deal with less stuff (7(+-2)) Chunk information so it becomes easier to comprehend and memorise Break up number sequences with spaces or other separators Visually break up long pages, text or forms into suitable sub-sections Separate complex and long processes into more, smaller views Improve learnability by adding fewer features to a product and elements to a screen Postel’s Law “the robustness principle” ”Be liberal in what you accept, and conservative in what you send.” Postel’s Law (also known as the Robustness Principle) was formulated by Jon Postel, an early pioneer of the Internet. It states that outbound messages should conform completely to specifications and be as precise as they can be while programs that receive messages should accept non-conformant input as long as the meaning is sufficiently clear. The Law represents a general design guideline for software and facilitates robustness mainly because it anticipates a high degree of variability in information it accepts. Designing good UIs means designing good human experiences. As users, we expect products and services we interact with to intuitively understand us and be forgiving (‘you know what I mean’). We expect to feel in control at all times, and we’re generally annoyed when asked to provide more information than is necessary. To meet our users’ expectations, the products and services we design must be robust and adaptable. Considering that people are often inconsistent, frequently distracted, occasionally error-prone, and usually driven by emotion, we can make more pleasant, better experiences when we implement this law in our applications. Applying Postel’s Law The capture of phone numbers, amounts, ID numbers, tax numbers and the like are all good examples for what it means to design a forgiving system. As per Miller’s law, people like to break up long number sequences into chunks. This also applies to data entry. Allowing users to add spaces, commas and other separators in number entry fields makes it easier for them to review that number. The system should do the work of filtering out unwanted characters and not force people to conform to its needs. Designers should always assume that users are not paying too much attention when using software. Often, users will not complete tasks in the way the designer imagined they will. They might not do things methodically and rationally at all. When we assume they do or when we try to force people to be very attentive, we encourage the users to make mistakes. We can then expect users to report more frequently that our software is very hard to use. Be tolerant and cater for a variety of user input formats Expect users to have very little time, focus and concentration. Consider disruptive environments of use (e.g. open plan offices) and remind them of the page or screen they are on, the task they are performing, the next thing they must do or what they have just done (feedback) Expect users to give tasks very little thought and to act impulsively Always provide the user with feedback as to what just happened Avoid ambiguous descriptions Plan for non-optimal, inefficient user workflows and design for situations where tasks need to be completed in a specific sequence Aesthetic-Usability Effect “beauty is forgiven” ”Users tend to perceive aesthetically pleasing designs as more usable.” ** ** The aesthetic-usability effect was first outlined in the field of human-computer interaction in 1995. Researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested 26 different ATM UIs. 252 study participants were asked to rate each design on ease of use and aesthetic appeal. The study found a stronger correlation between the participants’ ratings of aesthetic appeal and perceived ease of use than the correlation between their ratings of aesthetic appeal and actual ease of use. So, users are influenced by the aesthetics of a given interface when evaluating the general usability of that system. The personal affection users lend to a design they love evoke feelings of loyalty and patience. Such factors allow users to spend extra time and effort learning to use a device and forgive usability flaws inherent in the design. Aesthetically pleasing designs also have the positive side effect of making applications appear orderly, likable, and more professional. Apple devices are a good example of this phenomenon. They are generally sleek, beautiful, and often claimed to be extremely “easy to use” - usually by people who have never used anything else. This connection is probably not a coincidence but related to the Aesthetic-Usability effect. Applying the Aesthetic-Usability Effect The benefits of an investment into the visual appeal of making applications can have wide implications for product success. Users are likely to spend more time on such applications and also tend to be more patient with their shortcomings. Put effort into making your application look clean, organized, and slick. Spend the time to review each screen and polish it to make it as beautiful and as organised as possible Test different looks with a variety of users. Aesthetics are subjective and difficult to evaluate by watching people use an application. It might be best to ask people their opinion directly Remember all the different states your screens might be in and design for each of them Thanks for reading! Also published on: https://franzro.medium.com/psychology-in-design-5aef2cbd021e

Apple

Progressive

Target

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Low Code

2022 - HackerNoon Contributor of the Year - Psychology

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Psychology

Too Long; Didn't Read

Download free Tech Leaders Productivity Report!

How to Start Applying Psychology in Product Design

How to Start Applying Psychology in Product Design

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to add reCAPTCHA or hCAPTCHA to any web application

Why GradientTape Is the Most Underrated Feature in TensorFlow

AI Is Eating the Classroom, and That’s Not a Bad Thing.

The Dragon Hatchling Learns to Fly: Inside AI’s Next Learning Revolution

How AI Can Help You Avoid Overpaying for Bitcoin Transactions

How to add reCAPTCHA or hCAPTCHA to any web application

Why GradientTape Is the Most Underrated Feature in TensorFlow

AI Is Eating the Classroom, and That’s Not a Bad Thing.

The Dragon Hatchling Learns to Fly: Inside AI’s Next Learning Revolution

How AI Can Help You Avoid Overpaying for Bitcoin Transactions

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps