Every user interacting with your web design is a human — at least until the singularity arrives — which means each one of them is subject to certain psychological principles. Over decades of research, psychologists and philosophers have observed things about human nature that hold true to this day, and if you’re a UX designer worth their salt you’ll pay attention to them.
Using psychology in your UX is without a doubt the best way to make a seamless user experience that will be a joy to navigate through. Navigating through a website that doesn’t pay attention to human psychology is like pulling a push door: it makes you feel stupid, even if it’s not your fault, as Joe Posner of Vox elaborates.
Luckily, you don’t have to do the hard work of running clinical tests and writing academic papers to psych-test your designs, because psychologists have done that for you. Here are a few rules to bear in mind next time you do some UX design.
Jakob’s Law: Be Familiar
This first rule of UX psychology is about the balance between novelty and ingenuity. New designers often set out to reinvent the wheel, perhaps out of artistic individuality or maybe because they want their website to stand out amongst the competition. Unfortunately for these creative types, it’s generally accepted that users don’t like new experiences.
Jakob Nielsen of the Nielsen Norman Group is behind this law, which says that users value familiar experiences when it comes to websites. This is related to the group’s 2008 study on eye-tracking; essentially that most internet users read and digest information in roughly the same way. Specifically, users will likely read across the top of your website, move their eye down a little to read across again, then will usually scan up and down the left side of their screen. Many people design their content to try to prevent too much of this behavior in consumers, like splitting up articles with bullet-points and images, but some normal, boring content can be alright sometimes. If you try to veer drastically off course, you’ll definitely stand out, but that might not be a good thing.
Of course, this doesn’t mean you should ape every design choice from Facebook or your biggest competitors but instead take the time to notice how they satisfy customer needs. You can learn how they have already approached similar problems to what you’re facing, and maybe notice areas in which they aren’t quite delivering, which is where you can make a different choice.
Above, the forum and Q&A site Quora copies the standard, common placement of the search bar that many sites, including the forum Reddit use. This keeps the site intuitive for both seasoned forum users and novice, general users of the internet.
Hick’s Law: Make Choices Easier
Also known as the Hick-Hyman Law, this regards how long an individual takes to choose one option from among a range of other options. The law states that, by increasing the number of choices, the time taken to decide increases logarithmically, as opposed to exponentially.
In lay terms that means that, given one choice, decision time is 0, but decision time increases sharply with the addition of the first handful of choices, and then levels off eventually. Essentially it explains the phrase spoilt for choice; if there are too many options, you find it much harder to decide.
What does this mean for UX? Well, as Sioarse Key, a UX designer at Writinity and Last Minute Writing, points out: “Giving your users too many choices at the beginning might confuse and annoy them rather than engage them. This doesn’t necessarily mean you’ve got to limit the number of options you present a user, but more that you should build your options into a branching path feature that gives the illusion of simplicity. Think of hamburger navigation menus: as Wes McDowell writes, they’re easier for the users to use if they get more specific as you travel down one particular branch.”
Facebook uses the Hick-Hyman law throughout its app, minimizing how many options are on a phone’s smaller screen at any one time, so as to maximize the available room.
Miller’s Law: Keep It Simple
The third law of UX psychology was gifted to us by George A. Miller, a psychology professor at Princeton, and it’s about our memory capacity. In its simplest terms, it says that we can generally only hold seven things in our minds at one time. This describes working memory, things we can actively draw upon at any one moment, rather than our long-term memory, which can hold a lot more but takes more work to draw from.
The Law as applied to UX design tells us to keep things simple. If you present the user with more than seven concepts on your first page, you’re essentially asking them to forget at least one before they move onto the next page. Similar with Hick’s law, try to parcel out the information in smaller chunks as they progress through the site. You should group the information into groups of 4 to 7 pieces for a more pleasurable user experience.
This blog post on Dogtime uses Miller’s Law well, with the social element, gallery and image being grouped with the first paragraph – a group of four, which is perfect. This group is separate from the breed finder element on the right, because of the margin. This way the reader is not distracted excessively.
Gestalt Principles: Make Smart Groups
Speaking of grouping information, Alexa Farqad, a design blogger at Draft Beyond and Researchpapersuk, has something to say about the Gestalt Principles: “Back in the 1920’s some German psychologists discovered that we humans are very good at finding patterns in chaotic information, and that we do so in common ways. For example, we fill in gaps if a collection of lines or dots almost form a recognizable shape, or we group together elements that have the same color or form, no matter their spacial relation to each other.”
Rubins Vase (Source: Interaction Design Foundation)
In the above famous image, the human brain naturally groups the two gaps into a picture of two faces, but an image of a vase is also present. This is a prime example of the Gestalt principle.
There are lots of examples of Gestalt Principles that get used in major websites, most of which people do automatically without even knowing it. These principles mean you can have users associate or disassociate design elements just by playing on how we understand shapes and colors. Whether you’re designing dashboard elements, landing pages or infographics, it pays off to know your Principles.
Despite near-constantly updating their page, Amazon are always sure to pay attention to the Gestalt principles when they update. Here, the “Discover Amazon” clipart buttons, linking to various articles are grouped together within a rectangle, with some space between this rectangle and the one above. This grouping and spacing helps a busy page feel spacious for the user, and helps them also to quickly find exactly what they are looking for.
The Von Restorff Effect: Highlight Judiciously
Continuing the trend of psychological principles that could be horror movie titles, the Von Restorff Effect is also about how our brains group similar objects. This rule states that, while we will always group similar-looking objects, we will remember the ones that look most different.
For UX design, the Von Restorff Effect is great for getting your users to remember certain elements over others. You might want to communicate that you have a sale on one item, so although all your thumbnails look the same, one will have a bold highlight. On the other hand, highlight too many and suddenly the unhighlighted elements stand out. This psychological principle is a big fancy way of saying: make sure you highlight judiciously.
At the end of a learning session, Memrise are notorious for flagging up their premium plans to the user. Here, they highlight the annual plan as being the right plan for you, making it larger than the rest, with the “Subscribe now” button in a different color, contrasting with the other elements and giving it a little “50% off” tag.
Mental Models: Don’t Reinvent The Wheel
Another lesson in familiarity comes in the form of mental models. This is a broad psychological trend that describes how certain things become popularly accepted to be true based on experience. That last part is key here: the nature of this truth is not often logical or psychological, it’s just true because it has been before.
How does this relate to UX design? Well, you know when you scroll down an article on your phone? That’s an example of using mental modes in design. The article doesn’t physically continue below your phone, so there’s no true reason to use scrolling above, say, flipping or tapping, but our mental modes tell us that the article continues below, so we automatically scroll to find it.
What’s more, mental modes are constantly updated by new technologies. Swiping left and right now have associations that they didn’t have before Tinder. If you were to design an app that reversed the connotations of left and right swipes you would confuse your users. In essence: stick with commonly understood practices where possible.
Above is a screenshot of the educational social network, Edmodo, which mimics Facebook’s layout extensively, almost exactly. Students can like and share posts by clicking on buttons with an identical placement to Facebook’s, and settings and menus are also located in the same place. This reliance on mental models is what has helped to make the Edmodo platform so popular.
Takeaway
Of course, you could follow all these rules and still confuse your users; the laws aren’t completely foolproof. The guiding principle, however, is to put yourself in your user’s shoes and try to see how your design could be misinterpreted. After all, we’re all humans here (I hope).
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices. Good luck on your learning journey!
