What’s in it for me? Discover the psychology behind good web design.
What makes a good website? You might think that it’s one of those “I’ll know it when I see it” kind of things. But good web design takes many things into consideration – not the least of which are relevant principles of human psychology and behavioral science.
In each section of this Blink to Jon Yablonski’s Laws of UX, we’ll briefly explain two rules or principles that designers follow to create effective and user-friendly web designs. We’ll look at ten principles altogether, and end on a section that describes how certain design elements have raised ethical dilemmas that need to be considered going forward.
Jakob's Law & Fitts’s Law
Let’s kick things off with two essential principles, Jakob's Law and Fitts's Law, which guide designers in creating user-friendly experiences.
Jakob's Law states that users spend most of their online time on familiar websites and prefer new sites to function similarly. Just like we expect doors to have handles, or light switches to be located by entryways, users expect certain design conventions based on past experiences.
This principle encourages designers to follow conventions, ensuring users can focus on content, messaging, or products rather than struggling with interfaces. Essentially, it's about minimizing mental effort. Designers rely on common patterns like navigation and search bars, making it easier for users to accomplish tasks without relearning everything.
This doesn't mean innovation is discouraged. But when change is necessary, it should align with user needs and context. Testing new designs with users helps ensure they can understand and adapt to the changes.
Fitts's Law, on the other hand, delves into the ease of interaction with on-screen elements. It emphasizes two key factors: the distance to an element and its size. In simpler terms, designers must ensure that interactive elements are easy to tap or click on, regardless of the input device used – be it a desktop screen with a mouse or a touchscreen with a thumb or finger.
To apply Fitts's Law effectively, first make interactive elements like buttons big enough to easily select. Second, provide adequate space between elements to prevent accidental taps or clicks. Third, position interactive elements in a way that users can smoothly access them.
Don’t make the mistake LinkedIn did when they placed the “Accept” and “Deny” buttons too close to each other on their iOS app. Such issues hinder the user experience, especially on mobile devices with limited screen space.
Hick’s Law & Miller’s Law
In the world of web design, Hick's Law and Miller's Law provide invaluable guidance for creating effective digital experiences.
Hick's Law is a principle that emphasizes the importance of simplicity in design. It says the more choices and complexities you present to users, the longer it takes for them to make decisions. Essentially, as a designer, your primary task is to streamline information and simplify the journey to prevent overwhelming users with unnecessary options and steps.
Just consider the evolution of TV remote controls. As TVs added more features over time, remotes became overly complex, requiring substantial mental effort to operate. In response, “grandparent-friendly” remotes with essential buttons emerged. And today, smart TV remotes have super pared-down controls.
Similarly, digital platforms like Google Search and Slack implement principles aligned with Hick's Law. Google Search presents various search result filters only after users have initiated a search, preventing them from feeling overwhelmed at the outset. Meanwhile, Slack introduces users to its features gradually, starting with messaging and progressively revealing more options once they grow accustomed to its interface.
Icons are also a way of simplifying things. They can be visually appealing and save space – but it’s important to note that an icon’s meaning may vary among users around the world. So it’s best practice to pair icons with text labels, especially for navigation elements, to improve clarity and usability.
When implementing Hick’s Law, remember not to oversimplify to the point of abstraction. Your goal should be to strike a balance between simplicity and functionality.
Now let's shift our focus to Miller's Law, which suggests that individuals can typically retain around seven items in their working memory at any given time. This principle has influenced UX design through a concept known as “chunking.”
Chunking involves grouping information in a way that makes it more manageable and easier to understand. Consider how phone numbers are formatted. It’s far more difficult to recall an unbroken string of ten or eleven numbers than it is to remember those same numbers broken into chunks of three or four digits.
In web design, chunking plays a pivotal role in enhancing user comprehension and memory retention. Elements like headings, subheadings, whitespace, and formatting contribute to chunking, making content more digestible and organized. It’s especially useful for website product listings, where images, titles, prices, and details are grouped together. Nike, for instance, leverages chunking to group-related filters in the sidebar, simplifying navigation and filtering for users.
The exception to Miller's Law are navigation bars. These can contain more than seven items since users don't need to memorize anything – they can see all the choices right there and navigate accordingly.
Postel's Law & the peak-end rule
Let’s move on to two more essential principles of effective design: Postel's Law and the peak-end rule.
Postel's Law states that we need to be conservative in what we do and liberal in what we accept from others. This is based on the understanding that users are diverse, occasionally inconsistent, and often driven by emotion. Therefore, design should be reliable and accessible to accommodate this diversity.
For example, Apple's Face ID simplifies user authentication by recognizing users' faces without requiring additional input. Another example is responsive web design, which was pioneered by Ethan Marcotte. This feature allows your website to adapt its content to different devices, screen sizes, and viewing contexts.
Designers should anticipate various forms of user input, such as touch, gesture, and voice, and make interfaces that accept them. They should also consider factors like text expansion in different languages, ensuring the design remains functional and legible. By embracing this principle, designers create resilient and adaptable products and services.
The peak-end rule, on the other hand, explores how people remember experiences based on their emotional peaks and endings rather than the sum of all moments. This cognitive bias affects how users perceive and recall interactions with a product or service.
Mailchimp, for instance, understands the emotional significance of hitting “Send” on a bulk email campaign. So, just as you’re about to finalize your work, it uses humor and animation to ease your anxiety. Uber reduces the frustration of waiting for a ride by providing transparency and entertainment. Seeing your driver on the map turns waiting into a game – and puts a positive spin on your memory of the experience.
As much as possible, put yourself in the user’s shoes and map out the emotional peaks and endpoints in their experience. This will allow you to focus on designing delightful moments when it matters most.
The aesthetic-usability effect & the Von Restorff effect
Next up? The aesthetic-usability effect and the Von Restorff effect. Don’t let the complicated-sounding names trip you up – these principles are quite straightforward.
The aesthetic-usability effect highlights the connection between aesthetics and usability. It was coined after studies revealed that people tend to believe attractive designs function better. In short, an aesthetically pleasing design doesn’t just trigger positive emotions – it also enhances cognitive abilities and the perception of usability.
Apple's products, with their elegant simplicity, exemplify this concept. But it's important to strike a balance: an excessively pleasing design may actually mask usability issues.
Now let’s turn to the von Restorff effect, which recognizes humans’ innate ability to notice differences. In design, this means guiding users' attention effectively while avoiding information overload. Elements like color, shape, size, position, and motion can be harnessed to emphasize important content or actions.
For example, using a distinct visual style for a critical action button ensures users will notice and select it correctly. Then again, excessive contrast can overwhelm users and reduce the effectiveness of important elements – so be judicious. Also remember to consider the needs of users with color vision deficiencies and motion sensitivities when employing visual properties for contrast.
In summary, visually appealing design can enhance usability, but it shouldn’t overshadow functionality. And differentiating important elements through visual contrast is effective – but requires moderation to avoid overwhelming users.
Tesler's Law & the Doherty threshold
Our final two principles, Tesler's Law and the Doherty threshold, offer even more valuable insights into creating efficient and user-friendly interfaces.
Tesler's Law is also known as the law of conservation of complexity. It states that in every system, there’s an element of complexity that can’t be reduced. For our purposes, this addresses a fundamental question: How much complexity should be the burden of users, and how much should be handled by designers and developers?
The answer is, of course, to shift as much of this burden as possible away from users. Email clients like Gmail simplify the process of composing emails by autofilling the sender’s address and offering suggestions for the recipient’s address after you type a couple of letters. Shopping services also try to make things as frictionless as possible by storing your information and allowing for things like one-click purchases.
The Doherty threshold, on the other hand, emphasizes the critical role of performance in user experiences. When computer systems and users interact with response times below 400 milliseconds, productivity soars and frustrations are minimized.
Performance isn't just a technical concern, though; it's a fundamental aspect of good user experiences. To enhance perceived speed, employ techniques like skeleton screens and progressive image loading. Facebook, for example, uses a skeleton screen – which essentially displays empty, shaded blocks in the areas where content will eventually appear.
These techniques create the illusion of faster loading times and reduce the perception of waiting – which makes for happy and engaged users.
In pursuit of ethical design
As we’ve seen in the previous sections, the theories and principles of human behavior play a big role in how technology is designed. The result of these practices is that technology can, in turn, shape human behavior in ways that are both intentional and unintentional.
Research has shown that the mere presence of smartphones can reduce cognitive capacity. Meanwhile, social media use is linked to increased depression and loneliness in young adults. Given this knowledge, it’s the designer’s responsibility to create interfaces that are both user-friendly and ethical.
Let’s look at a few design elements that have had negative effects on users.
First, intermittent variable rewards are a well-known way to get an addictive response from people. The most common example of this is gamblers who are all too happy to sit in front of slot machines all day. In the same way, apps use notifications, feeds, and refresh mechanisms to keep users engaged.
Next, infinite loops – such as autoplay videos and infinite scrolling – aim to keep users hooked by removing decision points.
Third, likes and comments on social media tap into our need for social approval and belonging.
Then there are the deceptive design techniques known as dark patterns, which can be found across the internet. For example, you might have noticed that some shopping sites always have items that are listed as being low in stock – yet they never actually sell out. Retailers use this deceptive ploy because they know people are more likely to make a purchase if they think the window of opportunity is at risk of closing.
Designers play a critical role in addressing these ethical concerns – it’s your duty to align corporate goals with human goals! Slow, intentional design that respects users' time and well-being is the way forward. Diversifying teams is also essential to catch blind spots and ensure inclusive design.
There’s no doubt that psychological principles need to be integrated into everyday design. This involves fostering a culture of dialogue within the team, and establishing design principles that are aligned with enhancing the human experience rather than replacing it. By following this process, you can create user-centered, ethical digital experiences.
Final summary
User-friendly web design relies on understanding human behavior and applying principles that account for people’s limitations and preferences. Many of these principles come down to ease of use and accessibility.
Specifically, this involves anticipating user needs and creating familiar designs that don’t require learning new ways of accomplishing tasks. It also means considering different screen sizes, means of inputting information, and languages. Finally, the principles promote organizing information in efficient ways, not distracting users with too many contrasting elements, and using design to enhance – rather than diminish – the human experience.