developing your website based on targeted psychological principles

You do not need an advanced degree in psychology to be able to use its principles when developing your website, and there is no need to bore you with studies and names of scholars. All you have to remember is that most people are built the same way when it comes to the way they think and feel, and psychology is a study of those similarities. The fact people are so similar is ideal for website developers that are trying to appeal to their own target audience. Think of it this way, Baskin Robbins created 31 flavors, and yet the most popular ice-cream flavor on earth is vanilla.

People Organize Information In A Symmetrical Manner

In the mind of the web page viewer exists a mechanism that helps bring order to chaos according to Christian von Ehrenfels who came up with Gestalt psychology. The world is a very chaotic place, and our mind’s have to make sense of it, and we do this by taking parts of what we see, feel, hear, experience, etc., and turning it into a whole.

We collect jigsaw pieces based on our experiences and make our own picture. In simple terms, it is how a pair of twins may go to a theme park, and one has a great time where the other has a terrible time.

Kurt Koffka came up with the widely misquoted saying, “The whole is other than the sum of the parts.” Most people say “greater” rather than “other,” but they are incorrect. The web user arranges the chaos of each web page into a user experience, from the flashing gif to the broken link.

How Can You Use This Principle?

Make sure your web page is as un-chaotic as possible. Look at the worlds most famous websites such as Amazon, Wikipedia and Google; you could hardly call them chaotic.

Symmetry helps lower the amount of chaos the user experiences because we organize information in a symmetrical manner according to the law of Prägnanz. We take the experiences (parts/gestalt) and make them orderly, symmetrical and simple in our minds. Apply similar principles to your website, and it becomes easier to make the user comfortable, confident and satisfied. Common sense also suggests it would lower the user’s frustration whilst using and/or navigating the website.

If you wish to draw attention to a single element of your website, then make it the one element that is obtuse and unsymmetrical.

For Example

example website heatmap

Take a look at the image above and you will see an eye-tracking study conducted on a website. The information on the website may appear uniform to a person that only identifies patterns. If the letters were solid black boxes, then the website would look uniform, but a person wishing to read and “understand” the website and text will have difficulty.

What the person is actually seeing is many single sentences that are unrelated. There are too many jigsaw pieces without a clear view of the whole. The eye tracking is sporadic because the user is trying to make sense of the website and the content.

The image below has a similar problem. It has too many parcels of information for the user to organize. Aesthetically the page looks uniform and orderly, but the user has trouble arranging the information into a palatable whole, hence the sporadic eye tracking and quick exit (the rest of the website was not even glanced at before the users left).

website heatmap example hard navigation

A good website should make the information orderly and easy to arrange in a person’s mind. The reader should be able to piece the website together and understand it. If that occurs, the user engages more fully with the website and is more likely to read it all and understand it all. Below is an example of a website that has arranged its information in a suitably orderly manner.

good website heatmap example

For a quick example of placing an obtuse object or feature in order to draw attention from an otherwise orderly web page, here are two eye-tracking pictures (source: kissmetrics). You can see how the eye is drawn to the baby because it is round where the rest of the website has squares and blocks, plus it has plenty of white space between it and the text so as to not distract from the text.

eye tracking heatmap drawing attention

eye tracking website heatmap example

Use The Law Of Past Experience

There are many marketing principles based on the law of experience. It revolves around people mistrusting the new and embracing the old. We fear what we do not know, and we find comfort in what we have already experienced, felt, done, seen, heard, smelled and touched.

Drip-Drip marketing works so well because once people become accustomed to a product/service/website/logo/brand, they are more likely to trust it. The law of past experience also affects how a person group’s information in his or her mind and it is one of the foundations of what non-thinking people call racism.

For example, a Chinese man walks into you and doesn’t apologize, and you think he is rude. It happens again with a different Chinese man two weeks later, and then again a few days later with a different Chinese man. In your mind you will associate Chinese men and the trait of being rude, ergo if you saw another Chinese man, you would assume he is also rude based on your past experiences.

How Can You Use This Principle?

Give your website a logo and ensure it is on every page, then whenever you produce a piece of positive spin that is placed outside your domain, you ensure your logo is attached to it.

The law of past experience is a great reason why you should make your website uniform across the board. This is especially true when it comes to widgets, navigation and style. You should also conform to many of the online traditions because it will make your website more intuitive. Things such as having the word “back” with an arrow pointing left, or underlining your links and such.

Be very careful you do not make your website look or act in a way that reminds people of websites/brands they do not like because of the way people group information in their minds (like with the Chinese man example). For example, let us pretend that the “My Little Pony” website is even more world famous and becomes noted for a sparkly fairy-dust effect when links are clicked. If the Harley Davidson website were to add similar effects to their website, they are likely to alienate their core consumers (macho people) because of the law of past experiences.

For Example

Sometimes it is good to look at little like your competitor if they too are respected. For example, there was a time when the BBC news website and CNN news website looked similar. The law of past experience may help users feel more at ease with what they are reading and seeing if they feel it reminds them of something they already know and have a relationship with.

bbc cnn news website look similar

You may also notice with the screenshots of the banking websites below–that not only do many of the websites look similar in one way or another, but almost all of them comply with common Internet traditions. For example, almost all of them have their search bar at the top/top right. All have their name and/or logo at the top left. All have widgets and clickable buttons that are a strong color and are rectangular shaped.

bank website similar layout different colors

Consider The User’s Cost-Benefit Analysis

Why are auto-start videos so annoying? Especially when they are on full volume? It is because they are inconvenient and do not care if the user is watching at college in the middle of a lecture, or at home at 2am in bed. Is listening to the video worth the inconvenience? Or, will the user quickly close the web page to stop the noise?

Most people consciously do a cost-benefit analysis; and some people are better at it than others. For example, one man may get the come-on from his personal trainer and cheat on his wife without a second thought, where another man may decide against it because there is too much to lose.

People do a cost-benefit analysis all the time–even when browsing the Internet. Should I read every word of this article or skim it first? Should I read a few lines of each paragraph or just the headers? How long is the article and how long will it take me if I read it word-for-word? Will I miss something else if I invest time reading this? It only takes you a fraction of a second to answer these questions in your mind before you start reading an article, but you do it every time.

How Can You Use This Principle?

You have to consider the cost-benefit and risk of your website, and some web masters are TERRIBLE at it. For example, pop-ups that do not allow people to see the website until they sign up are a great way of scaring off thousands of viewers, but some web masters use them.

Consider the costs and benefits to the user. It is worth entering the CAPTCHA puzzle and getting it wrong again just to enter a congratulatory comment onto a blog post? Will it be worth reading that 2000 word article that is split into three paragraphs?

If you are having trouble figuring out the costs and benefits of each element of your website, then start by looking for barriers. A CAPTCHA puzzle is the perfect example of a barrier. It is yet another thing a user has to do to get from deciding to do something to actually doing it.

For example

If you had a comment section that allowed a person to simply type a comment and see it appear, then that process has one barrier, which is the typing and submitting process. However, many ask for the name of the commenter, which is another barrier. Some ask for users to sign into their social media profile first, which is another barrier. Some ask for users to sign up for an account first, which includes a bunch of new barriers. The more steps a user has to take, then the more barriers there are and therefore the chances of the users abandoning the process are increased. Every barrier that is in place adds another cost to the user.

The CAPTCHA and registration puzzles below are some of thousands of puzzles that have cost web masters their users because people would rather abandon the process than have to complete the CAPTCHA puzzles.

captcha puzzle examples

The image below is an example including you the reader. In the image, you see a reasonably well laid out website. If you understand the F pattern when it comes to eye tracking, then it is fair to say you will follow an F pattern when reading the website. Ask yourself, how do you feel about reading every line on the website shown in the image below?

businesswired good old website design example

Source: https://businesswired.files.wordpress.com/2011/02/bw1996.jpg

The website screenshot is from a website in 1996, which is a time when this website would have been considered well designed (and it still is). However, you, today, right now, are used to better things. You are used to a more updated design and content that is easier to see, read and skim.

If you came across this website today, despite its reasonably efficient and good design (ignoring the color for now), if you came across this website today, you would do a cost-benefit analysis and probably decide not to read it unless you had been searching for a long time and had no luck so far.

Costs

  • Fonts are old fashioned
  • Design is old fashioned
  • Text is difficult to skim
  • Website looks cheap and therefore less trustworthy
  • Reading each line requires attention
  • The text is lackluster and dull looking
  • Website looks old so the content may be out of date
  • Will I waste my time clicking on links that may have broken years ago?

Benefits

  • A slight chance it will tell me something I want to know
  • If I cannot find anything elsewhere, then I may return

The higher the costs to the users, the less chance they will engage with your website and/or convert in any way. Some costs are barriers, such as CAPTCHA puzzles, and others are inconveniences. Remove all barriers and as many costs as you can, even if it means you have to simplify your website or trawl through your registrations manually to identify spammed accounts. It is worth it if it means you do not lose traffic or conversions.

Alice Depp is a freelance writer. She specializes in UX and Usability spheres. Now she is working under educational service at online homework help and makes life better and more pleasant. In future Laura is going to launch her own service dedicated to improving UX.

Leave a Comment

Your email address will not be published. Required fields are marked *