Table of Contents
Why should every web designer, and you too, care about Maslow’s hierarchy? It is no longer enough to design a good-looking homepage, write couple hundreds lines of HTML, CSS and JavaScript and put it out there. This approach was perhaps sufficient couple years ago. Today, the rules are different. Technology is evolving faster and people on the Internet have much higher expectations. If you want to design irresistible website that satisfies the users, you have to go as high on Maslow’s hierarchy as you can.
Web Design and Maslow’s Hierarchy of Needs
Maslow’s hierarchy of needs is simplified model of needs of website visitors. This hierarchy shows you different stages of web design and also helps you grasp this whole design discipline. It is safe to say that web design as a discipline stands on the intersection of technology, user interface design, content strategy, psychology, sociology, marketing and branding. When all these pieces fall into the right place, the result is functional website, satisfied client and happy users. On the other hand, if one of these pieces is missing or weak, the result will look according to it.
You can also use Maslow’s hierarchy of needs as a tool to help you estimate the price of the web design. The more competitive the digital environment (or business of your client) is, the higher stages of the pyramid you will have to reach in order to lead the project to success. In other words, websites in more competitive digital environment will require more time and bigger budget. This has one big downside. Client can get different price estimates on one proposal. The reason is that each designer may think about reaching different stages of Maslow’s hierarchy.
I should also make it clear that you can’t skip any stages of Maslow’s hierarchy. For example, if the website is unusable, working on its persuasiveness is a waste of time. Stages of Maslow’s hierarchy also lack any clear borders. We can almost say that, at some point, individual stages will start to smoothly blend each other instead of simply end.
Stage no.1: Meaningfulness
Ever web design project should start with one simple question. Why are we doing this? Meaning, what is the meaning or purpose of the website? What are we trying to achieve? Project started without a clear idea about its meaning or purpose will never reach its full potential. Does this mean it will not “work”? No. The website may be beautiful and functional. It may even reach client’s goals in terms of conversions and other metrics. However, it will never go beyond that.
Here are three questions that will help you find the meaning of the website and finish the first stage of Maslow’s hierarchy. The first question is, “is your website solving someone’s problem?” The second question is, “is there more people having this exact problem?” The third question is, “Are these people willing to pay for the solution enough to make it sustainable?”
You can create beautiful website. However, if it’s not solution for any need, it is useless. Well, you can post it on Dribbble. Web with meaning has much bigger chance to become a part of lives of client’s visitors and users and help them achieve their goals and satisfy their needs.
Let me also mention that meaningfulness is double-edged sword and can cause problems to both, you and your client. When website lacks meaning, it will not bring any profits, or at least not significant. As a result, client’s business will not flourish. On the other hand, work on couple website without any meaning and you will burn out like a candle. Sooner or later, you will lose your enthusiasm and passion. Remember, test the hypothesis and find the meaning before moving on.
Stage no.2: Searchability
If a tree falls in a forest and no one is around to hear it, does it make a sound? Let me rephrase it. If you have a website and no one is visiting it, can it work? There is whole industry built around this topic and it is also the second stage of Maslow’s hierarchy for web design. Searchability is in the fact that there are right people (potential customers for your client) who will hear about the website and visit it. Whether the source of traffic are search engines, shares on social media or business card of your client, it doesn’t matter. All these tools can serve the purpose.
Website searchability can have different priority for your client. The first example is that the web is the main source of customers for your client. In that case, there must be clear vision and fast execution of marketing strategy. Otherwise, the website and your client will not be here too long. Second example is that your client has couple sources for getting customers and also has stable subscribers. Then, website is only a way to expand and grow his business. It is not necessary for its survival. Marketing strategy is part of the website, but it doesn’t have to be overly aggressive.
The third example is that the website works only as supplemental tool. It may be primarily used by sales representatives. Or, it can have even more passive role and works as digital business card. The key in this stage of Maslow’s hierarchy is to understand which category suits your client. Then, you can move on and set goals for the website, create strategy to reach these goals and estimate the budget for the project. When someone will ask you to build a website for him, find the right category and how people will get on the website first. Otherwise, the project loses its meaning.
Searchability in practice
Start by thinking about different types of customers from the view of whole buying cycle. You can use See-Think-Do framework by Avinash Kaushik. Next, you need to identify touchpoints. These are the places where you will find people interesting for the website. Keep in mind that these people will be in different stages of buying process. These touchpoints can be both, online and offline. Some of these touchpoints may not even exist before you intentionally create them.
One thing … Before you start searching for these touchpoints, you need to understand how the perfect visitor and customer looks like. Otherwise, you will either not be able to find the touchpoints or not the right ones. In both cases, you will waste time and resources.
Next, you need to come up with ways to catch attention of people in these touchpoints. You also need to convince them to make some conversion or microconversion. After that, prioritize the touchpoints you found and make sure people will really get on the website. Finally, monitor the results and adjust as necessary. Soon, you will be on your way to the next stage of Maslow’s hierarchy.
Not all tools are equal
The last thought on searchability is that its outcomes and requirements will vary. For example, PPC will bring you visitors and customers almost immediately. Building stable and credible brand on Facebook or Twitter, on the other hand, can take months or years. For this reason, it is important to create individual strategy for searchability for every web design project according to project’s goals. Unless you are skilled in internet marketing, leave this to professional.
Stage no.3: Availability
The third stage of Maslow’s hierarchy is about making the website work fast and without any visible errors. Visitors can browse it without waiting for too long or ending on 404 page. And, even if visitor will encounter some error, this error will be explained in simple terms and quickly fixed. Is this the only problem we have to keep in mind?
Another problem is that only few clients will care about how well-designed the structure of the website is, not to mention its smaller parts. Clients will often not see that something is wrong with the website immediately. Another thing is that your client will expect the system and back-end part of the website to work fast and, flawless, modular and therefore expandable. What four indicators can help you find out if the website was designed in the wrong way?
First indicator of badly designed website and system is that every change and adjustment, no matter its size and scope, will take a lot of time and client will have to pay more. This is not true for websites built on well-designed system. The second and most common indicator is that whenever you make some change, something will break. Website will be close to house of cards metaphor. You will also have to manually test the website after every change to make sure everything is working properly. Is this really necessary?
No, it’s not. Well-designed website has automatic tests built-in. Then, these tests will notify the developer that there is an issue that needs to be fixed. The third indicator is that the website will be slow. This is often caused by bad structure and inefficient bloated code. Form the design point of view, another cause of low performance may lie in inconsistency and re-inventing every layout element from scratch on every page. Fortunately, these inconsistencies are often easy to spot and also fix, hopefully not by users. What’s the last indicator?
Imagine that your client will lose his patience with his current developer and entrust the system to someone else. What will happen next if the website and its system is badly designed? Your client and his team will find out that nobody actually knows how the system works, except its creator. Another problem is if no one, except the creator, has access to source code and rights necessary to make any changes. If you’ve ever replaced another designer or developer, you probably experienced this situation on your own. What’s next?
Combination of stupid errors and slow website will after some time discourage any visitor, no matter how much he likes the visit the website. This combination will also significantly lower the chance of getting new visitors, user and customers. We need to accept that speed is still one of the most important factors for successful website and getting through this stage of Maslow’s hierarchy. Does this mean that we should stop using beautiful photography and videos on our websites?
The answer is clear no. You can place beautiful high resolution photos on your websites. You can use videos for headers. However, you should also prepare the ground for these features. In case of bigger images, one example is using lazy loading. This will allow the browser to load your website gradually as the user scrolls. Today’s Internet users expect the website to react on his actions immediately. They are not willing to wait. What can we do?
First, we have to monitor the performance of our website and optimize it. Second, we can also use couple trick to change user’s perception of time. The perception of time and speed is subjective. Probably the easiest trick you can use is to show people some action on the screen. You can use animated indicators to load images. You can use neat animation to simulate “opening” of article while the content is loading on the background. You can also use progress bars to visually shorten long delays. Another example is Twitter. You can see the tweet you sent in your feed while the server is still processing it.
Stage no.4: Accessibility
The fourth stage of Maslow’s hierarchy focused on accessibility got more complex with the rise of mobile devices. Website accessibility is primarily important for web developers. Developers should watch whether the graphic design of website is not going against accessibility best practices. However, even web designers working only in graphic editors should care about it as well. The easiest things to do is keeping the HTML code clean and valid, clearly distinguish clickable elements and using proper contrast. What about accessibility in terms of design?
First, make sure the content of the website is appropriately structured using headings. Second, use appropriate amount of contrast for text on the website. You can test your contrast ratio with this tool created by Lea Verou. Third, the text on the website is readable and legible. Fourth, the website should be fully controllable by keyboard. Fifth, every graphic element has specified text alternative for screen readers and similar devices. Sixth step is to pay close attention to the tables (if you are using them). What does this mean?
First, table cells should contain only data that are logically related. Second, tables makes sense only when they are read line-by-line. Third, more complex tables with merged cells should contain some summary (note: summary attribute is not supported in HTML5). Lastly, every row has appropriate label. This applies also to forms.
Blind and handicapped people
The main interest of accessibility stage of Maslow’s hierarchy are handicapped people, blind people, people using mobile devices and also web crawlers. Handicapped people were the reason why this whole area of web design was created. These people are often using various screen readers, special keyboards, voice controls, etc. Even if the website is not focused specifically on handicapped or blind people, you still should invest some time into improving accessibility of the website. What’s more, every accessibility improvement you make can also help other users.
Web crawlers
Another group of “visitors” of your website are web crawlers. These artificial users are also known as search engine robots. These robots see your website primarily as text. However, that doesn’t mean these robots can’t recognize banners. Anyway, what these crawlers are looking for is well formed and valid HTML code and text alternatives for graphic content. Robots.txt file is another thing they “care” about. You can use this file, for example, to exclude specific pages of the website from being indexed and shown in search results.
Another important file for web crawlers is sitemap.xml. This is basically complete map of the website. This map makes it easier for crawlers to get an overview of the website structure.
People using mobile devices
The third group of users that is growing in increasing speed are people visiting websites on mobile devices. These people demand primarily three things. First, website’s layout has to be optimized for their devices. This means that you need to consider a variety of tablets, phablets, smartphones and also smart watches. On the other side of the spectrum, you should also start to think about designing for TV and large screens. Second, as a consequence of touch displays, your design has to include clickable elements big enough people can “press” with their fingers.
Third and last condition is adjusting the website’s content to the context. The problem with many “mobile” designs is that they are just shrunk version of version for desktop. At best, the content is at least little bit restructured. At worse, it’s just squeezed to fit the smaller screen. This is common among “desktop first” designers. These “designers”, still living in ancient times, will create only desktop version of the website and then let developers to use their fantasy. If you are not familiar with “mobile first” design you had better start learning. This is the future of web design.
Quick tips for mobile web design
First, make sure the content is structured in the right way. This means placing the content before the navigation. People came on the websites because of the content. They don’t care about links in navigation in the first moment. Navigation links, login and register links and search box are part of the header. In the navigation should also be some link to take the visitor on previous page or on the beginning of the page. In footer should be link to desktop version of the website because some people don’t like mobile websites.
Second, your website has to be fast. We already discussed this in third stage of Maslow’s hierarchy. Anyway, don’t redirect on other pages. Use CSS sprites (multiple small images “merged” into one). Merge CSS stylesheets into one and use minification. The same for JavaScript files. Use lazy loading. Some people also suggest using canvas element instead of images. The reason is that by using canvas, you force the browser to keep the decoded information in its memory. As a result, this will prevent it from doing unnecessary heavy work.
Third, make element big enough for touch. Clickable elements should have width and height at least 9mm. This means at least 34 pixels. More important buttons and the ones placed near the edges of the screen should be bigger. Make use of white space. Active elements has to have enough space around them. Otherwise, people can easily click on wrong element. Good idea can be incorporating invisible, but still clickable area around active elements.
Fourth, make the website independent on hover states. Make all forms on the website mobile friendly. Place labels above the form inputs, not next to them. The reason is that mobile browsers often zoom-in on inputs and labels are not visible. Use specific HTML5 inputs, such as number, tel, email, etc., so users on smartphones will be able to use keyboards customized for that kind data.
Stage no.5: Usability
In this stage of Maslow’s hierarchy, your goal is to make the interaction between user and website as smooth as possible. The website has to be easy to navigate and allow the user to get the job done quickly. Usable website should also make it easy for user to consume the content. Website should be easy to understand and work with. If you want to take the website on another level, you have to make it intuitive. This means that working with the website will feel natural to the user. It will be easy to use with his fingers. Is this all?
Part of usability is also application of knowledge in typography and principles that will help user better orientation on the website. You should also incorporate various design patterns instead of trying to reinvent the wheel and forcing users to learn how to use your website. People will often rather don’t use the website at all than learn how to use it. Information architecture and well-chosen priorities for content on individual pages of the website are another part of usability. The last thing, don’t try to innovate the UI before you understand principles of human behavior.
Stage no.6: Credibility
The credibility of your website is primarily built on two pillars. The first pillar of this stage of Maslow’s hierarchy consist of psychology principles of human mind. The second pillar is about using the art of great rhetoric. Website with credibility is also authentic, proven and guarantees tangible results. In short, credibility is prerequisite for successful transaction. Website without credibility will never achieve any conversions, or not too many. In order to support credibility, website has to offer sufficient amount of information along with appropriate graphic.
Unambiguous website owner
When someone visits the website, it must be absolutely clear who is the website owner and operator. As defined by law, the website should contain full billing information. Omission of these information can have some very unpleasant consequences in the form of penalty. Even if you will successfully avoid officials, it doesn’t guarantee you anything. Website without these information will look suspicious to majority of people. And, they will rather avoid your website completely.
Appropriate argumentation
One way to improve and support credibility of your client and his website is by stating sound arguments and solid arguments for his product. These arguments should work as a proof that your client can deliver the results he promised in his proposal. Let me give you a handful of tips.
First, use big numbers. If you want to present some number, focus on the big ones first. Think in thousands, hundreds and dozens. Second, let certificates talk. Show every certificate your client has to show that his product is proven. Third, talk about membership in associations. If your client is a member of some association, make sure to mention it. And, the bigger and better know the association is, the better. Fourth, references and case studies. Show people proof that your client has experience in what he sells.
Fifth, lectures and publications. If you are lucky and your client is actively giving lectures or published a book or two, mention it as well. Doing so can make miracles. Sixth, support nonprofit organizations to show more human side of client’s business. Seventh, create partnerships. If your client doesn’t have a strong brand, find at least one partner who does and start networking. Then, your client can use logo of his partner as a leverage for his own brand.
Customers’ testimonials
It is one thing when someone praises what he sells. It is something completely different when other people do this job for him. The fact is that people trust other people. Give satisfied customers some space to talk about the product of your client. However, keep in mind that these testimonials has to be authentic. People will spot fake testimonial in a second. Showing one or two negative testimonials can also be helpful. Remember, nothing is perfect. If someone is showing dozens positive testimonials and no negative, it can look suspicious. Want more?
Another important thing to make customers’ testimonials work is to allow people to identify with people who provided the testimonials. This means that testimonials should contain maximum information about the author. For example, you should mention author’s full name, city where he or she lives, age, company he or she either owns or work for, position, photo, etc. Remember that the more information you will provide in testimonials, the more authentic they will be.
Graphic representation of the website
When it comes to Maslow’s hierarchy and credibility, there are two approaches. The first approach is about website that is incredibly well designed and stands out from the crowd. The second approach is about website that is “old school” and authentic. Interestingly enough, both of these approaches work. It is proven by couple studies that people will sometimes ignore something just because it is more visually appealing something. The reason is that it looks like marketing or advertisement. Result?
People think about it as having low value or credibility and dismiss it. It is just too good to be real. For many customers, ugly equals authentic and credible. Ugly design also helps customers complete the task without any distraction. This is why sites such as Craig’s List are successful despite the design (or thanks to it?). However, there is a catch. If you try to combine these approaches and create some kind of modern “old school” hybrid, it will backfire. Conclusion?
In other words, you have to choose between one of those two approaches. You can use modern trendy design to create website that looks new and fresh. Or, you can focus on “old school” style, never both. Otherwise, the result will not work at all because no one will trust it. You should also make sure that design direction fits the client’s brand and business. There are some more traditional and conservative industries where people expect to find certain style. However, I believe that the change is inevitable and coming. And, what about lower budget?
There will be situations where the budget will be very tight. I’m talking about $150 gigs on sites such as Freelancer.com. Is it possible to build credibility with these websites? Yes, to some degree. Buying some good-looking affordable template and customizing it to fit the style of your client will be enough. Also, don’t rush choosing the additional images for the website if your client doesn’t have any and don’t want to invest in photographer. Cheap stock photos can sink the website faster than anything else. Remember, good picture is worth every penny.
One last thing … Remember that good design is good business. Quality web design has significant impact on business of your client. This is achieved by creating aesthetic-usability effect, making orientation and navigation easier and inducing the right emotions and atmosphere. You probably heard, at least once, that graphic design is not important for website. Don’t believe it. It is an excuse web design agencies use to cover their own incompetence.
Feeling of safety
The last step to improve credibility of the website is by creating feeling of safety. For every website using any financial transactions this is a must. You should place some safety certificate next to every form requiring user to pay with credit cards. You should also clearly mention that the website is using SSL encryption (and really use it!). Another part of creating feeling of safety is great customer service. Website has to provide answers on users’ questions such as – What will happen with my credit card number? Is this transaction safe? Will my data be sold to anyone else?
Stage no.7: Persuasiveness
Website should “behave” in similar way as skilled sales person who is using human behavior to close sales. This, seventh, stage of Maslow’s hierarchy is not about forcing users to make transaction. This is not what available, accessible, usable and credible website is about. Persuasive website uses psychology of human behavior for good. However, it is up to the designer to decide whether he will help people achieve their goals and complete the tasks they want to get done on the website, or manipulate them. Fortunately, people will sooner or later spot manipulation and spread the word about it. Is the risk really worth it?
Two sides of decision-making process
When it comes to Maslow’s hierarchy and psychology, there are two things we need to know about people’s decision-making process. First, we don’t base our decision on rationality. Every decision is made on lower levels of thinking. Logic plays much lower role than emotions and unconsciousness. In a fact, logic is usually used to rationalize decision based on emotions. Second, we have limited mental and time resources. Everyone has limited mental capacity and time he can use for making decision. This is the reason why we are trying to save some energy by using various mental shortcuts.
When we are about to make some decision, it is often based on one most significant feature or benefit. This is what triggers the shortcuts. These shortcuts are based on principles discovered by psychology. We can use these principles in web design just like successful salesmen are using it to close sales. Again, it’s not about trying to manipulate people. What are these principles?
Principle no.1: Consistency
People view consistency as credible. This principle applies to everything and everyone. You will be more likely to trust person who keeps his word than someone who breaks every promise. In web design, consistency is about using the same colors, consistent vertical and horizontal spacing between elements in the layout, consistent headings, show navigation and other menus in the same place, using the same color for text links, using the same set of icons and fonts and making sure form elements are looking the same.
Principle no.2: Popularity
Research showed couple times that people like other people similar to them. We prefer people wearing similar clothes, having similar experiences, attitudes and opinions. We also prefer people who are on our side. Finally, we prefer people who praise us, even if the praise is not based on anything tangible and is used with a purpose. You should clearly show that you are on the side of the people buying your products or services.
The vast majority of population do what other people are doing. People often don’t want to step outside the crowd or specific group. This inclination is even stronger if we are unsure about something. Then, we look at people around us to find some clues. You can use this principle in web design by showing users’ testimonials, social shares, number of visits and so on.
Principle no.4: Scarcity
We are more afraid to lose something than to gain. This is why we often buy things for higher price just because they are rare or limited in amount. It is important to mention that scarcity increases attractiveness of a product only in terms of ownership. What was unattractive yesterday is “hot” today because it is scares. Interestingly, this principle doesn’t increase the probability we will also use the product. One example of this principle in action is Apple. Have you seen those queues?
People are willing to do almost anything if the order comes from some authority. It has been shown in Milgram experiment that majority of participants were willing to torture someone because authority told them so. These participants “transferred” their responsibility on the authority giving them orders. Interestingly enough, just a symbol of authority (uniform, scientist’s jacket) is enough to create this effect. Simple way to use this effect is showing official certificates, awards and testimonials from experts and famous people.
Principle no.6: Reciprocity
The sixth principle states that people want to pay their debts. This doesn’t mean just financial debt, but just any debt in general. When someone do you a favor, you will want to pay it back. The interesting thing on reciprocity is that all trumps are in hands of person who did you a favor. It is him and his favor what sets the tone, place and time. This principle is often used online in advertisement. You will get certain benefit from some brand and, in turn, you will be more likely to buy from this brand again in the future.
Principle no.7: Rationalization
Do you know the magic word? No, it’s not “please”. It is “because”. Imagine you really want something. If you rationalize your demand with the word “because”, it is more likely that you or someone else will accept it. Funny thing is that you don’t even need any sound reason. Soundness of the reason not important. Just the presence of the reason itself is often enough. It is safe to say that the word “because” works as some kind of trigger because …
Stage no.8: Joy of use
The majority of your client will want the website to be easy to use. However, if you want to reach higher stages of Maslow’s hierarchy, people have to like to use the website. How can you achieve this and give the website place in people’s heart?
Gamification
When you mention gamification, many people will immediately think about points and badges. Although this is part of gamification, it is not the whole picture. Gamification is activity that supports specific behavior of your users by using principles of psychology and game design. Gamification applied to web design can help you motivate people to make specific actions. However, gamification takes time and resources and it’s used only occasionally in web design. Unless you are working on web app, investment in gamification will probably not pay off.
Emotions
Visual communication is the main tool you can use in order to set the tone of the website. Emotions are also important for web design for two reasons. First, people will be more likely to remember the website when they will connect it with specific emotion (hopefully positive one). Second, people will be more likely to talk about website they remember. You can imagine it as a loop … One part of the loop supports the second. How to bring this into your project?
You can support emotions not only with design, but also with conversational tone of text and work with avatar. Avatar is imaginary person that represents client’s brand or product. It makes it easier for people to interact with the website and can even be a trigger of this interaction. One great example of avatar is Mailchimp. These folks took their avatar so far they don’t even need a logo. Just think about ape and email and Mailchimp is the first thing that pops into your mind. What’s more, you don’t even need to remember the name. The ape is enough.
Stage no.9: Establishing connection
Let’s suppose you have the ambition of reaching the peak of Maslow’s hierarchy, or pyramid. In that case, your ultimate goal is creating a connection or bond between the website and its visitors. Achieving this stage means that the website will become so strong part of people’s lives, they will come back regularly. And, not only that. People will also talk about the website and recommend it to their family members, friends and colleagues. They will become ambassadors of the project and client’s brand. This is the highest stage of web design. So, any tips to reach it?
The main prerequisite for creating such a connection and bond is perfect understanding of people and their behavior. This requires diligent study of psychology and sociology. I would also suggest examining websites and web applications that were successful in creating these bonds. Facebook, Pinterest and Twitter are good places to start. Thorough the time, all these companies (and products) were able to change relationships and behavior of millions of people. What’s more, many people are spending huge part of the day on these websites. Search for couple case studies and look for what you can replicate in your project.
Closing Thoughts on Maslow’s Hierarchy of Needs
What should you take away from this article? First, valid HTML is the lowest stage of Maslow’s hierarchy. It is not necessary. It is something that is considered automatic. The real success of majority of website is directly dependent on much higher stages of Maslow’s hierarchy. However, in order to reach these stages of Maslow’s hierarchy, you have to perfectly handle the lower as first. Remember that lower stages of Maslow’s hierarchy are about technology. Higher stages are about psychology. Successful website lies at the intersection of technology and the humanities.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
