Psychology has always played a large part in design. Whether we talk about architecture, general infrastructure or packaging design, psychology was always there to nudge people into making a purchase. But can that same science be applied to color and layout in eCommerce web design?
Web design for eCommerce businesses requires as much care and thought as any other product of design. Let’s take a look at some useful and actionable psychological principles that can be applied in eCommerce web design in order to drive traffic and engagement for online retailers.
Why psychology matters in design
We are all human beings looking for something that will make us whole. Psychology has always stood the test of time due to our very nature. We always search for understanding, acceptance and fulfillment in every facet of our daily life. Once we go online in search of information or inspiration, that fulfillment falls solely on the quality of web design we are confronted with.
Psychology plays a huge role in how we perceive each product, service, website or pack of bubble gums we come across. The principles applied in creating that piece of design will either make us want more of it or divert our attention to something more fulfilling. This is why psychology is an important factor in any type of design.
Today, we face a large influx of web services that can solely be enjoyed through the internet. eCommerce sites such as Amazon are a good example of this new trend. But what principles have been applied to Amazon and similar eCommerce websites since they are so popular and successful in their businesses?
Grid design and layout
A deciding factor in whether or not a visitor will make a purchase usually comes down to legibility and navigation. The easier your site is to navigate and comprehend, the more likely they are to buy something from you. This is where grid design comes into play. Your page layout is your most important element.
Try drawing a simple square-based grid with all the elements present exactly where you would like them to be. This includes the navigation bar, footer with general information as well as page content in the middle. The way you structure your content will often determine the traffic you will stem from it. Using the rule of thirds is a good way to segment and position elements in your layout.
Convoluted sites that require multiple clicks in order to make a purchase or get to a useful page often don’t bode well. This is one of the principles of Fitt’s Law which states that obvious and easy to reach actions will always be more attractive than their counterparts.
A good way to circumvent any difficulties your audience might experience is to place products and purchase options as close to the landing page as possible. Some of the most successful eCommerce businesses place products, prices and purchase options directly on the front page without any mistake. Below is an example of one of the free LemonStand eCommerce themes, Meyer, which does this well.
Color theory implications for eCommerce web design
Everyone likes to see colorful illustrations, web pages and buttons. One of the most important aspects of web design is the use of color. Effective implementation of color theory in your eCommerce web design can alleviate other mistakes that might have made their way into your website. Let’s take a look at some of the most surprising reasons to pay close attention to color in website development:
- Adequate use of color can speed up your visitors’ navigation and subsequent purchases of your products.
- Color can increase meaning and importance of certain elements as well as highlight relevant information.
- Color is one of the essential parts of visual brand storytelling – it is used in logo design, visual elements and site structure.
- Color can be used to symbolize good options (green) from bad (red). This can increase sales of certain items if used correctly.
- Color can associate certain items, elements and pages to one another, thus creating an internal logic for the viewer.
As you can see, color plays a huge role in whether or not your eCommerce site will bear fruit. It goes far beyond mere “red or blue” when choosing which color should be primary to your website. A whopping 85% of people have stated that color has been the deciding factor in their purchases, which is staggering to think about. But what does each color represent and how can we effectively decide which ones to use in our own website?
Color and meaning
Each color stands for something different. We are so used to seeing different colors all around us that we have become inert to their deeper meaning. Let’s take a look at each color’s symbolism and meaning, as well as how we can use them in website development:
Red is the color of passion, excitement and energy. We can often find red in packaging for energy drinks, wines as well as romantic gifts and lingerie. There is a good reason for the red rose to be so popular in media and literature. However, as any other color, red also has negative connotation.
It can often induce rage, jealousy and danger in the person seeing it. Just think about Spanish bulls or traffic signs – red symbolizes danger. The color red can effectively be used in web design to communicate unavailable items or pages, as well as to divert readers to more suitable parts of your site. A good example of an eCommerce web design using the color red is Kombi which sells winter clothing for all genders and ages.
Orange is the most creative color – it is also the most adequate color when food and nutrition is concerned. This soothing color is adequate for adventurous and youthful websites that focus on younger generations.
The color orange is most notable for sharing its name with a fruit that has the exact same color. This is why it is very effective with young generations with very little knowledge of how colors work. Full Orange, a design agency situated in the US has used this to their advantage when they shaped their visual identity.
Green is the color of nature, vitality and healthy living. This is why we can find green in most visual identities that are used by NGOs and agencies that focus on global wellbeing. This color can be found in products that offer vegan, vegetarian and otherwise cruelty-free versions of foods, drinks and cosmetics. Using green is a good idea if your site identifies with any of these traits. Treehugger is a site that effectively uses this postulate to their benefit.
Blue is the color of trust, communication and corporate professionalism. This color has a calming effect on people that come in contact with it. It can also cause depression if used too much, so it is important to implement complementary or neutral colors alongside it.
However, if used effectively, blue can communicate your intent to sell high quality products to people that might want to do business with you. eCommerce sites that effectively implement blue in their design solutions will see a spike in traffic and revenue almost immediately. Wo Hing General Store is a wonderful example of how the color blue can intermediate between the seller and the buyer.
The two neutral colors that fall on either side of color theory are black and white. These colors can be used in tandem with almost any other color. However, they too have their own symbolism and meaning that should be taken into account.
For example, black is usually the color of sorrow and sadness, but it is also luxurious, sophisticated and represents high society. Black should be used carefully in eCommerce web design however, since it can effectively cut your revenue in half due to its nature. People are not very fond of seeing black online and retail stores in general. SWG Studio has effectively used black in their corporate identity as an architecture design agency, but it’s rare to see this in retail.
White is the color of minimalism, purity, innocence and life. We see white in many web design solutions today due to effective use of negative space. White can be a good solution for eCommerce sites of any niche due to its neutrality and welcoming nature. It can be combined with any other color of the spectrum, including black and their shades. Kommigraphics is a good example of white website design that complements the elements in the forefront effectively.
Gender and age based coloring
The decisive factor in grid layout and coloring of your site will always come down to your target audience. Studies have shown that different genders and age groups react fairly differently to varying stimuli. If your website is blue and black, you won’t attract a lot of female viewers. The same can be said about shades of red and orange that are inviting to women and mothers.
Aesthetics play a huge role in children and their preferences as well. They are far more likely to convince their parents of buying them a toy or a piece of clothing if the site is designed in colorful patterns and bright tones. A good example of this practice can be found in LEGO’s website and their color palette. The combination of colors you implement in your logo and visual identity will dictate the type of audience you will work with for the foreseeable future.
Psychology in motion (Conclusion)
Listing all the ways in which psychology can help us with website perception and traffic is not the same as applying it all in practice. Try implementing some of the principles and resources we have talked about in your own eCommerce web design.
If your elements and landing page are inadequately designed based on the information above, think about redesigning some of your materials. It may create short-term expenses but the payoff is far more lucrative than you can imagine. Psychology will always play a crucial role in web design and online sales. Make the most of the resources you have available and use them to your full advantage.