Revisiting topics from your Psychology 101 class in college comes in handy. These topics relate to how we design every day. It’s a wonder, despite the relative simplicity in understanding the design fundamentals, that bad design still persists.
In this post, Joe Zeoli, Senior Website and Graphics Developer at Miles Technologies, discusses some of the psychological elements behind website design principles and the human behaviors that influence them.
The truth is that merely knowing these principles will not turn you into a good designer, but you will need to understand how to apply them to your work. A great way to understand the idea behind any rule is to learn how the brain functions and how people interact with things. Let’s revisit what they are very quickly:
Knowledge of basic principles are very important when learning how to design, whether you are doing so in school, on your own, or for a graphic design studio. These principles separate true art from design. Designers use them to create both aesthetically pleasing and effective material.
These are the six basic principles:
- Balance – Make elements look stable
- Proximity – Closely related items should be grouped together
- Alignment – Related items should line up
- Repetition – Make similar elements consistent
- Contrast – Emphasize key elements over less important ones.
- Space – Create distance between unrelated sections
The internet—and web technology in particular—has progressed to a point that there is very little that cannot be done. Parallax sites, hover animations, responsive design, and video backgrounds are some examples of functionality that are constantly being adapted to web development.
While the use of these technologies may seem trivial—as if their only purpose is to enhance the visual appeal of website layouts—you’ll be surprised to know that there is actually psychology behind why they are utilized the way they are. Deployed correctly, these techniques are able to entice visitors to do anything, from reading more content than they normally would, to converting via a call to action button.
A basic understanding of memory, behavior, learning, and perception—terminologies taught in a basic psychology class—would greatly improve any design effort. Understanding the limitations and abilities of humans to create an easy-to-use user interface is important when developing complex systems
Humans can only store about seven elements or chunks of information in their short-term memory bank. Reduce the stress on the user by giving them constant reminders via the user interface (UI). Examples of this include displaying an already-visited link in a different manner, or having breadcrumbs present. Doing so gives the user a visual representation of where they have been, reducing the possibility of frustration over unintended revisits to the same page.
Another, more specific example is an ecommerce website that has items in the shopping cart available for review at any time. The user can access this information without having to go to a specific page just to see what they have added to their carts, or to see if they have forgotten something. They can flow through your site quicker, and have a more enjoyable experience, simply by not requiring them to remember a lot of information.
Behavioral psychology—conditioning and shaping a user’s behavior through reinforcing specific actions—is a more complex concept to apply to a user’s experience. It is in the hands of the designer to decide how to shape this. Feedback loops are an easy way to accomplish a positive experience. Designers can create a loop where an event is presented, an outcome occurs, and then the user receives feedback from that outcome.
The feedback loop happens during the process of submitting an inquiry through a website’s contact form. The act of completing the fields and clicking on the submit button is the main event. The content of the form being sent to the company is the outcome event. Since the user is not aware that the outcome has occurred, they need feedback—which is where the Thank You page (or a thank you message) comes in. Visual validation, such as green checkmarks to indicate valid inputs, is another excellent form of providing feedback.
As the user’s experience progresses, he or she will eventually learn which behavior produces positive feedback, and will start looking for them. The two concepts at work here are classical and operant conditioning. Classical conditioning focuses on a subconscious reaction to something (such as salivating at the sight of food or your heart rate increasing), while operant conditioning is about a conscious, physical reaction. There is more focus on the latter in UI, where users seek out rewards for the actions they take.
Visualize a button that animates when you hover or click on it. Even though it’s subtle, you are rewarded for your action. Eventually, you will become conditioned to look for the same reward should you be presented with a similar situation. In essence, you would then use an animation as your visual cue to let you know that something is clickable. What could be misrepresented as an unnecessary extra on the site can actually increase click-through rates by not confusing the user.
Perception—how one interprets what is being seen or heard on a website—is the backbone of design. As designers, there is a need to capitalize on how the brain takes in information in order to provide a great user experience. This concept is the reason why it is important to keep elements consistent throughout your site.
Creating a hierarchy of information is the first step to helping users perceive the site in the way that was intended. Header tags (h1, h2, h3…) display the most important information because they usually have the largest text size of the entire page. Size connotes importance, so items that are larger on the page get more attention than those that are smaller. Items that are grouped together are also considered similar; make sure you keep this in mind.
Stay in school, kids!
You’ve probably said it in school before, but “I don’t need to learn this because I’ll never use it” could not be further from the truth. Learning about psychology and understanding the underlying principles of design is extremely important not just in creating great experiences, but also in explaining the different choices you make. “It looks nice” never will be as persuasive as providing serious facts and statistics about why a particular design solution is the right one. Expand your knowledge of other topics and you will be surprised how much you can apply to whatever it is you are working on.
Did you pay attention in psych 101? Are you a web design with awesome tips and tricks? Give us a shout in the comments section. We’d love to hear from you.
Interested in learning more about how custom website design can help grow your business? Contact us today and see how we roll.