Human Behavior Theories That Can be Applied to Web Design

Nov 16 2010 by Alexander Dawson | 25 Comments

Human Behavior Theories That Can be Applied to Web Design

Humans are logical creatures, and as surprising as this might be, when we visit a website our minds make a series of decisions that affect the actions we take. The ability to reason enables us to form judgments, reach conclusions and make decisions. If, on the web, we weren’t able to think on the spot and then take action, we would trap ourselves in crippling situations of mindless clicking.

Behavioral psychology is an advancing field, and we web ninjas need to understand something about psychology in order to make usable websites. If we understand human needs and emotions — how we interpret what we see and how we choose to act — then we will better understand our site users. We’ll be able to choose and create meaningful layouts, typography and colors.

This article is no substitute for a degree in psychology (so don’t give yourself an honorary Ph.D. after reading this). Also, the items mentioned here don’t account for every circumstance, because no two people are the same. Yet by understanding the theories outlined below (there are no hard facts in psychology, just theories), you can better understand how your design work will be perceived and used.

Empowerment and Maslow’s Hierarchy

Giving your visitors a sense of growth and increasing their self-esteem is essential. One of the main problems faced by Facebook, YouTube, Twitter and many other social networks is how to get visitors to participate and feel that they are welcome and safe.

The "silent visitor" (or lurker) has existed for many years and makes up the majority of people who visit the average website. This type of visitor usually isn’t socially inclined; a number of your audience members will not go any further than to visit and read, which isn’t very encouraging if you want to establish a community.

StumbleUpon encourages people to make friends and invest themselves socially.StumbleUpon encourages people to make friends and invest themselves socially.

For a design to work, it must meet the needs of visitors–although what’s important to visitors is up for debate and could drastically change from project to project. Some needs cannot be met before other needs have been addressed.

The most famous theory about what humans require in order to reach their "pinnacle" — the point where they decide to participate — was posited by the humanist psychologist Abraham Maslow in the form of a "hierarchy of needs."

Maslow defined levels of importance that reflect how and what humans prioritize, as well as what they require in order to appreciate their surroundings and achieve personal growth (or "self-actualization").

Based on his concept, I’ve created one related to web development: The hierarchy of website user needs. They’re listed below in order of importance.

  1. Accessibility: The website can be found and used by all people.
  2. Stability: The website is consistent and trustworthy.
  3. Usability: The website is user-friendly.
  4. Reliability: The website is consistently available, without downtime.
  5. Functionality: The website offers content, tools and services users value.
  6. Flexibility: The website adapts to needs and wants of users.

he hierarchy of digital needs.The hierarchy of website user needs.

Fundamental expectations of visitors include being able to find the website, to browse around it effectively, to return to it easily and to use the available services and content.

Adapt to the needs of your users whenever possible. If the hierarchy of website user needs fails, it will severely hinder the user experience. Examine, then, the factors that affect experiences, and learn how to reduce the risk that primary needs will go unserved.

Attractiveness Bias

Web design — and specifically the visual aesthetics of a web design — is not a case of "fatal attraction," nor is it the be-all and end-all of a website’s success (as shown by big websites that have mediocre visual aesthetics). But beauty is attractive to humans. Psychologists surmise that humans have a cognitive bias to attractive people and things.

Content is, of course, the most important part of the website; it’s the personality that lasts after the design has worn off.

The attractiveness bias theory simply states that a good-looking design will draw more attention than a poor design. Once viewers get over their first impression (which is always important), they’ll be content and comfortable, and that will increase the likelihood that they’ll visit again.

The principle behind this theory is that humans are naturally attracted to beauty. And yet, content (the personality) is what matters — it’s the foundation of your long-term relationship with visitors — but the attractiveness of the design (the exterior) is what will get you noticed.

Beauty becomes less important when people learn what’s underneath, and with websites, what should be underneath is quality content.

Status, though, is an exception to this rule: If you’re famous, you can make the website as ugly as you like and visitors will still flock in droves. This is called brand recognition. Look at celebrated usability expert Jakob Nielsen’s website, for example.

Attractiveness BiasJakob Nielsen’s website.

Some believe that design does not affect the overall impression made by a website, but attractiveness bias theory indicates that, while the content of a website is important to regular visitors, the "wow" factor is responsible for creating initial appeal.

Make your website look professional and beautiful, but make sure that it doesn’t overrule the hierarchy of website user needs. If you accomplish this, then your website should naturally attract even those visitors who are quick to judge quality by appearance (which happens a lot).

Once you’ve convinced people that the website is visually solid, then the content’s integrity will shine through.

Serial Positioning Effect

The placement of information affects how well it’s remembered. Lists, charts and tables are useful because they break large clusters of information into manageable, comprehensible chunks. Organized information stands out from blocks of heavy text on a website.

In lists, the first and last pieces of information will be most easily recalled. The beginning and end are, in our minds, naturally significant, and therefore the text in those locations will appear to be more important than other text on the page.

Yahoo Answers uses small content blocks to facilitate memorization.

The serial positioning effect, proposed by Hermann Ebbinghaus, proposes that the ability of people to remember something accurately varies with the item’s position in a list. In web design, this most closely relates to visual hierarchy.

When people browse the web, looking through pages and pages of information, they typically commit less than 10% to memory (and only 1% if they are looking for a key phrase or definition). Find helpful ways to present your information, and you might make your website and its content memorable.

Depth of Processing

Depth of processing (or levels-of-processing) is a term that refers to the level to which information has to be processed in order to be committed to memory.

Engage your users, and ensure that they read important details carefully by asking them about it afterwards. Remember those exams in school that tested whether you had retained the course material? Tests are feared by many, but there is science — go figure — behind the methodology.

At the end of a W3Schools tutorial, a basic quiz is offered to reinforce knowledgeAt the end of a W3Schools tutorial, a basic quiz is offered to reinforce knowledge.

Users do not want to be hassled with questions or have their browsing interfered with (which is perfectly understandable) so put simple mechanisms in place (such as an "I accept" button in a license agreement). Find a balance between subtle awareness and intrusiveness.

Use checkpoints and reviewing mechanisms to ensure your visitors are learning what they need to know. For example, asking questions at the end of an e-store checkout process and repeating important warnings can help users process the information you are providing.

If your website provides educational information, a quiz or method of testing knowledge could serve as an interactive memory aid. Even asking a pointed question at the end of a blog post (such as Do you have any tips to share about the subject?) encourages users to critically think about what they just read.

Finding the balance between helping someone remember key pieces of information and annoying them or getting in their way can be tricky. Use your best judgment to decide at which points images, interactive elements or other processing aids would be useful. From quizzes to images to humor — so many options are at your fingertips.

Fitts’s Law

Fitts’s Law models human interaction with computers. It states that the time and effort required to reach a target depends on the distance and size of the target. In web design, it is most relevant when designing the degree of usability of user interfaces.

To a great extent, websites determine how easy it is for users to achieve their goals. Certain layout structures can become an obstruction. A classic example of an obstruction is a clickable element that is so small that it requires precise movements and targeting to click (such as a small hyperlink text viewed on a mobile device).

The issue of small objects with a low clickability is important in mobile devices.The issue of objects with small clickable surface areas is significant especially in mobile devices.

Fitts’s Law states that the smaller the clickable area, the longer it will take to activate. The longer something takes to activate and get to, the lower its usability is.

Make the surface area of interactive items on your website sufficient in size. Take advantage of gesture movements on touchscreen devices, and ensure that pages can be zoomed and text enlarged. Removing barriers to access, especially for users with impaired motor skills, is important. Anything that detracts from the experience could cause visitors to run away.

Cognitive Load

The amount of time it takes to accomplish a task increases with the amount of tasks given to a person. Cognitive load is a term that describes how our learning performance is reduced when we have many things we have to do at once.

To put it simply: the more tasks we give users, the slower they are able to finish a task and the more confused they will become. Usability consultant Steve Krug, in his book Don’t Make Me Think!, illustrates this theory by using the idea of "goodwill" and gain and loss.

Keep things quick and easy to follow and your visitors will get what they want faster. Smartly laid-out designs are among the easiest to use and receive the most positive feedback. Using your website should be effortless.

The Zombie Browsing Effect

We’re not talking about characters from a George Romero movie. Zombie visitors target what they seek and don’t get distracted by other items on display at a store or on a website.

As people get used to a website, the zombie effect becomes more likely; as in a supermarket, once you know what goods you want and their location, you don’t spend much time looking elsewhere. This explains why stores sometimes change their layouts; it exposes existing customers to new goods.

You don’t want to be a one-hit wonder; you want to encourage users to explore your wares so that you can increase sales. Zombies avoid exploration by ignoring their surroundings and merely following their primal instincts. That’s what I call brainless buying habits!

Overcoming the zombie problem can be quite a challenge. You don’t need to whack them on the head like in the movies (although that might help); rather try getting their attention and engaging them with distinctive design. For example, thoughtfully-placed and distinctive elements could garner the user’s attention.

The Zombie Browsing EffectWhile searching a website like Amazon, our field of vision is limited to specifics.

If everything on the page is somehow important, decide which sections you most want to promote–streamlining content will streamline traffic. Too many advertisements and too much content and clutter will cause the zombies to raise their defenses and ignore all messages; their brains will shut down completely.

Single points of interest attract attention, and if the item is relevant to visitors, they might spend time exploring it. Allowing people to customize your website according to how they prefer to browse (as iGoogle and the BBC do) can discourage the zombie effect, because people will be attracted to the relevance of the content.

Conditioning Models

In psychology, the term conditioning refers to the process of instilling predictable behavior. Classical conditioning modifies involuntary reactions, whereas operant conditioning modifies choices (or the likelihood that the subject will make a certain choice). Both are relevant.

Classical conditioning becomes relevant to web design when we think about visitors closing pop-up windows or turning the volume down on a website’s background music. Some reactions are natural, but many of them are conditioned by experience. These are called learned behaviors.

Behaviors are learned when people experience the same thing or similar things repeatedly. In web design, conventions, trends and patterns are responsible for learned behaviors and help users associate events with likely outcomes. Thus, a range of possibilities emerges — emotions can be leveraged to improve conversions, for example.

Conditioning ModelsThe learned behavior to a "Page not found" error message is to click the "Back" button.

Instead of trying to override natural behavior, streamline your website by adapting to them. A natural or learned response requires less cognitive power than a response to a new experience — say, when the user faces a change in the layout. In the latter case, the learning curve is increased significantly, primarily because training oneself to suppress a natural response is a lengthy process and can take years — and it might not be worth it. Trying to classically condition Internet users is like swimming against a fierce tidal wave.

Now let’s consider operant conditioning. Operant behavior is the behavior of an agent — that is, someone who chooses rather than reacts. The agent learns by trial and error, and patterns of behavior are created by learning to anticipate outcomes.

One method you can use to affect operant behavior is called priming. Here’s simple example: if you invite website visitors to "Contact us if you need help," a visitor will feel the need to contact you once they have exhausted their own means of accomplishing their task. If you hadn’t suggested it, they’d be less likely to think of it as an option.

By showing off important features, Get Glue primes visitors to use its services.By showing off important features, Get Glue primes visitors to use its services.

Operant conditioning employs methods of positive and negative reinforcement (reward and punishment). What does this have to do with web design? Ensure that actions that benefit your website, like visitor comments, are rewarded and that negative ones, like spamming, are punished. Loyalty is in short supply and can fizzle quickly if participants feel they are being treated unfairly, so be fair and make sure that users know you’re trying.

When it comes to the underlying features on a website, conditioning is a lot subtler and requires less explanation. Websites that have calls to action — such as buttons that encourage users to download a piece of software or a friendly message that asks people for information — will prime users to perform the relevant action. If the results are beneficial, then users are likely to repeat that behavior.

Conditioning takes time, and people will comply with fair rules if they feel they have reason to. By using operant conditioning you can encourage visitors to change their perception of your website and even go along with the behavior of the majority (although some people might defy conditioning for other reasons).

Coca-Cola uses positive reinforcement: a reward system is in place for customers.Coca-Cola uses positive reinforcement: a reward system is in place for customers.

A person’s behavior has so many contributing factors that trying to understand it can be a real challenge. Being aware that behavior can be altered (with the right incentive or by addressing certain issues) might be key to keeping your community alive.

Ultimately, you can’t force people to do your bidding, but you can give them reasons to visit and instill in them the desire to return. The encouragement of a community is a powerful psychological force.

Conclusion

In almost everything we undertake as web designers, psychology plays an important role. Whether the influence is subliminal or explicit, and whether you leverage common trends and conditions, understanding the experience of the audience and their perception of your web design gives you a great advantage.

Sources and Further Reading

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

25 Comments

Jason Gross

November 16th, 2010

Good article Alex, some pretty good points in here too. I would note that Nielsen can get away with a rather bland site because he knows his target audience. By targeting a specific group of people with information they care about you can get away with alternative design methods.

If Nielsen was targeting the average Joe who has limited interest in design they may not find his side credible at first glance.

James

November 16th, 2010

very nice article, well written.

Dainis Graveris

November 16th, 2010

Over a week ago I’ve read somewhere (shame I didn’t bookmark it) a study about how visitors’ eyes travel on a website, what they look at first and what catches their attention through an eye-tracking experiment. By the results, the interface designer then repositions everything to be more “findable”

Curtis Scott

November 16th, 2010

Interesting article, you make some great points about Attractiveness Bias and conditioning. My favorite takeaway was the The hierarchy of website user needs – I loved the breakdown.

Dan

November 16th, 2010

Dainis – they’re website heatmaps, they’re very interesting – I believe there’s a site that will commission one if you’ll pay their fees. IIRC the first thing a user does is looks to the middle left of the page – meaning that’s where you can charge most for advertising :P

Advitum

November 16th, 2010

I think psychology is a very important jet very often ignored point in web designing.

Thanks for this very fresh article!

Jordan Walker

November 16th, 2010

psychologically stimulating.

Michael Tuck

November 16th, 2010

Arrggh, you beat me to the punch, Alex, I was gonna write on this topic! However, you’ve done an excellent job, so instead of gnashing my teeth, I’ll just say “congratulations on an excellent article.”

Chanon

November 17th, 2010

Six Revisions’ content is so solid!!!

Young

November 17th, 2010

I’m starting to have favorite SR writers. I should really be fair and open-minded toward other writers… but you’re one of them, Alex.

Kane

November 17th, 2010

Great article! Very well researched and written. I use ‘Empowerment and Maslow’s Hierarchy of Needs’ in this way.

1. Content users are looking for
2. Findability and Emphasis
3. Clarity – Which is affected by content structure, typography etc.
4. Aesthetics – Graphs, Charts etc.

By which, this article meets.

Maicon Sobczak

November 17th, 2010

Huge and very informative article. To learn the theory of psychology is more important that we can imagine. With the atual stage of the internet, some conceptions of the tradicional medias are gaining importance.

heathquinn

November 17th, 2010

A lovely article. Thank you very much! (You might get deep value from Dr. Margaret Livingstone’s research on how human vision systems work with art (and, implicitly, design). Check her “Vision and Art: The Biology of Seeing”.)

Jon Garcia

November 17th, 2010

Wonderfully thought out and informative. Nice to be exposed to alternative approaches to the field of design beyond the overwhelming “50+ Best Widgets” lists out there.

Reminder of how important psychology is to our field as well as to look outside our field for new perspectives on how to approach it.

Thanks!

Alexander Dawson

November 17th, 2010

Thanks for the comments everyone!

@Jason Gross: I agree to some extent but I think perhaps the overwhelming factor with Jakob Nielsen is that his audience know and trust in his name (rather than it being a case of Jakob knowing his audience). Many critique his site in particular but still visit it due to the branding and content provided (as the general overriding factor).

@Dainis Graveris: As stated, heatmaps are one of the focuses of eyetracking and is precisely what you were talking about. If you have Google Analytics there’s a beta test for “In-page Analytics” which measures click placement with various levels of success.

@Michael Tuck: There’s much more within psychology you could talk about, I just skimmed the surface. It’s one of my favourite subjects though, totally interesting stuff! ;)

Lesleywriter

November 18th, 2010

Excellent article, I wish more web designers knew half of this stuff! Usability and readability appear to be beyond most designers area of knowledge!

Ian Franklin

November 19th, 2010

Alex I am a professional psychologist and ergomomist and I have worked in the usability area since 1988 (yep some of us did this work pre-web when it was called man-machine interface). I understand what you have tried to do but you have missed the mark a bit on some of the items; and there are FACTS in psychology. I still think that the best introduction is Donald Norman’s book “The Psychology of Everyday Things”. I think you are wrongly applying Maslow; better are theories from stress which deal with goal achievement. If a user can not achieve their goal then they will get frustrated and click away. This is why we scream at computers, our goals are frustrated.

Memory models like levels of processing, recognition rather than recall is where we get the “recognition rather than recall” Nielsen heuristic. Miller’s “the magic number 7 plus or minus 2″ still applies to memory. Conditioning is only one model of learning (but we clearly look for certain features on sites – previous experience shapes out behaviour). Models of skill talk about tacit knowledge and transferable skills.

To yourself and others do look at psychology, particularly perceptual and cognitive psychology for reasons why users do what they do. Psychologists have been looking at these usability issues since about 1942 when the first radar was put into planes. Usability is an old science and did not just appear with the web. Happy to help and advise.

Dreb

November 19th, 2010

When i read the title i thought it’s gonna be about the left and right hemisphere of our brain that correspond to different aspects of web designing. But this one is pretty informative. Your serious on this one Alex compared to the other post you had about designs that are scary. :)

Alexander Dawson

November 19th, 2010

@Ian Franklin: While I appreciate your feedback I have to disagree with you on a few points. Firstly, Psychology is at it’s core a science and as such, proclaiming anything as factual is deeply misguided. Yes psychologists have learnt a great many things about human behaviour through research and good, composed scientific study. But with any formulated theory it’s important to recognise that even though the odds of a certainty can be exceptionally high (such as a 99.9% chance of a theory holding true), nothing can legitimately be qualified as a “fact” (if you’re defining facts as undeniably correct). To make such a claim would require every possible variable and situation (of which an infinite potential amount could apply) to be tested. Nothing in science is a gaurantee, all we can do is theorise on subjects with some level of certanty, nothing more.

Regarding the use of Maslow, while other equally viable studies relating to goal achievement exist (I’ve been particularly interested in BJ Fogg’s Game mechanics in design psychological research), Maslow’s hierarchy does reflect the need both of humans and sites to self-actualize (in that barriers to a sites function can prevent it being an idealistic design). The use of this theory isn’t really a negative in respect to applied psychology (as the need for each level to be attained before others can be holds true), it simply provided a good platform to illustrate the need to help users achieve goals and sites to “be all they can be”.

PS: I’m aware of the history of usability (and psychology). They’re fantastic subjects and I recommend others to continue learning! Thanks for the feedback though, it’s great to hear your points (I agree that Normon’s book is a fantastic read).

Carolyn King

November 20th, 2010

Very interesting. Psychology is an integral part of most types of design, but we’re not always aware of theories that are being put into practice. I came across a very interesting resource recently about how psychology is used to direct or trick people – see http:/darkpatterns.org (I recommend watching and listening to Harry Brignull’s 2010 Brighton presentation, which is linked from that page). That’s about the “dark side” of psychology – conditioning models that the user may not even be aware of when visiting websites. Understanding the psychology is useful for us as website visitors, as well as with our web designer hats on!

Joseph C Lawrence

November 25th, 2010

Great article! This is the reason I got into UX design. I have to take issue with one thing though :) Negative reinforcement is not the same as punishment, as any first year Psych text book will tell you. Negative reinforcement is the encouragement of a behaviour by the removal of an adverse stimulus (we drink when nervous at a party), whereas punishment is obviously the discouraging of a behaviour by the introduction of an adverse stimulus (Getting hit by the boyfriend of the girl you started hitting on when drunk).

In the context of web design, negative reinforcement is fairly uncommon, but it could be argued that steps to increase website credibility, such as clearly displaying popular and trusted payment methods, or listing well known clients, make use of negative reinforcement. They do so by encouraging a user to stay and use the website by extracting the latent mistrust people have of a new site.

Gilda Horgan

December 7th, 2010

As a print designer for many years prior to joining the internet revolution, I have studied how people shop 2 dimensionally, what information they retain, how they respond to color, hierarchy, etc. It is very fun to expand those principals to the web which has different hot spots and considerations. And now, as mobil devices become the latest tool, the rules will expand yet again. Excellent article.

Jamie Maing

December 13th, 2010

Wow, this is my university education from my digital communication summed up in an article. That’s crazy and a lot of info to absorb! Was great to get a refresher on this!

Helena Martins

January 19th, 2011

Dainis,

is this the study that you saw?
http://www.poynterextra.org/eyetrack2004/main.htm

I had it bookmarked ;0)

Just Some Dude

February 26th, 2011

It’s “Fitts’s Law”, not “Fitt’s Law”.

Leave a Comment

Subscribe to the comments on this article.