Introduction
In 2021, scratching the surface isn’t enough — good landing page designs, functional search bars, and speedy checkout experiences are table stakes. In fact, Shopify provides most of these out-of-the-box, both for you and unfortunately, your competitors.
While no two target audiences are alike, there are luckily some psychological principles that have withstood the test of time. We’ll highlight 6 that forms the backbone of the highest-converting websites we’ve ever seen — as well as some real-life examples. Let’s dive in!
1. Jakob’s Law
What is it?
The core guiding principle of this law is centered around the ancient proverbial saying, “don’t fix what ain’t broken”. Designers at top UI/UX agencies know, from experience, something that first-time e-commerce entrepreneurs don’t: the best is the enemy of the good. Sure, you might come up with what you believe is the perfectly polished solution — but your buyers might still end up preferring the old version.
When you try to be overly innovative, you might end up misunderstood (remember that 2-3 year period when Facebook kept changing its News Feed design and everyone hated it? Yep, the same could happen for your Shopify store).
The name Jakon’s Law comes from Jakob Nielsen — he founded the Nielsen Norman Group, an acclaimed UX research institute. The law itself is simple: people spend most of their time on other websites, and therefore, are already used to certain design patterns. Sticking to these design patterns on your Shopify store will make the experience more familiar and intuitive for everyone.
What are the three elements every Shopify store shouldn’t touch?
- The navigation — on desktop versions, the company’s logo should always be on the top left, followed by the navigation bar. The top right-hand corner is the place for login and sign-up buttons, sometimes accompanied by the search bar. On mobile, these elements should be collapsed into a hamburger menu. Again, remember: there’s no need to reinvent the wheel.
- The layout of textual content and images on the landing pages and PDP — the layouts of these landing pages echo the left-to-right reading direction of Latin languages. This makes for a more intuitive structure. The text is in the first column, and should by default be aligned to the left. The hero image or video is always on the right (or below the text on mobile).
- Mental models — Jakob’s Law averages the visitor’s existing mental models. What does that actually mean? The buyer already has a representation of what an e-commerce shopping experience should look and feel like in their mind. They expect certain functions to be found in certain places and to work in a specific way. Eye tracking UX research has shown that when it comes to new landing pages, people tend to scan them following the Z-pattern:
Evernote’s landing page follows this design almost to a T — they understand that over the years, we’ve all subconsciously trained our eyes to follow that pattern so absorb information on the page as quickly as possible.
2. Principle of Least Effort
We don’t process more information than is necessary — and surprisingly, it’s not because we’re lazy.
It’s because we just have too much on our plates.
The average person — not a voracious reader, but just the average Joe down the street — process around 100,000 words every day… the equivalent of a medium-length novel, such as The Hobbit, or Harry Potter and Prisoner of Azkaban.
Your buyers may not tell you this explicitly, but we all reward experiences that respect our time/effort — especially in this day and age of information overload. So, how can you use the principle of least effort when designing your Shopify site?
- Cut the experience short — Analyze the user journey and find the weakest spots. See where visitors are dropping out (Google Analytics’ Behavior Flow tool shows this for non-technical founders). Visitors almost universally drop-off whenever there’s friction in the experience. The fix? Redesign the journey — make it shorter, remove potential points of frustration, and take out any unnecessary elements on the page.
- Stick to plain language — The copy on the site is just as, if not more, important than visual design. Luckily, it also happens to be something you can change through your Shopify store’s settings pages now, if you wish to — instead of having to request it from your designer. Shopify merchants selling high-AOV items (such as jewelry, bespoke fabric, etc.) are almost always guilty of peppering their on-site copy with industry jargon and complex paragraphs — and each word adds extra tasks to their cognitive load. The fix?
Use short sentences. Use simple vocabulary. Ask yourself, “would a 5-year old understand what I’m trying to convey?”
- Group items into categories — A landing page serves a certain purpose. You don’t have to hit the visitor with all the details at the start. When you’ve got a product offer to show, you can group different features into three or four categories. It’s enough if the visitor gets a general idea that’s easy to process and remember. At this stage, your main goal is to get the user to respond to the CTA.
3. Hick’s Law
When it comes to options, is it the more the merrier?
It would probably work like that if our decisions were purely rational. Hick’s Law states: the more choices we have, the longer it takes to make a final decision. This became the foundation for the KISS acronym: Keep it Simple, Stupid.
A similar phenomenon was described in Barry Schwartz in his book The Paradox of Choice. Schwartz goes a step further and states that limiting choice can actually reduce the user’s anxiety. Choosing from a variety of options certainly offers the perception of freedom, but it’s also a responsibility. It’s a double-edged sword: when we’re not happy with the final decision, we blame it on ourselves.
The fix? When we make certain decisions for our buyers, we might be doing them a big favor.
Apple has understood this principle for decades — rationally, if you’re Apple, the incremental cost of manufacturing another color for the flagship model of the iPhone is tiny. So, why not offer customers more colors?
Because offering every additional color may cause you to stop and think, “which color do I really want?” versus “well, there isn’t the perfect color for me, so I might as well pick one and checkout.”
Don’t like any of the 4 colors? Tough luck.
Here’s how you can design with Hick’s Law and the Paradox of Choice in mind:
- Focus on a single goal — and only ONE goal at a time. Why just one? Almost half of all landing pages have more than one offer, even though including more than one option may decrease conversion rates by as much as 226%. Instead of trying to squeeze in as much information as possible, create more landing pages that are designed for a single purpose — use LeadPages, Unbounce, or ClickFunnels. This approach comes with a lot of ancillary positive benefits, including a significant SEO boost.
According to Hubspot, going from 10 to 15 dedicated landing pages is likely to result in a 55% increase in leads.
- Try progressive disclosures. Easier said than done, right? We know that some information can’t be entirely omitted. But there’s a workaround for that… Progressive disclosure sequences information across several screens. To keep your landing pages clean and simple, you can include the main categories or the essential details on the landing page, and then guide customers further for more information. This could happen either through (the easy option) lazy-loading or (the more involved option) creating additional dedicated landing pages.
4. Figure/Ground
In the context of landing pages, the law of figure/ground is particularly common. This phenomenon is typically illustrated with this popular picture:
You can either see two face profiles… or a vase.
The same element can be perceived either as the figure, or the background. This is a classic example of a reversible relationship between the figure and the ground. Here’s the catch: depending on the context, the same part of the picture can serve as both of them.
The law of figure/ground is one of the Gestalt Principles — a goldmine of information (and inspiration) for the very best web designers. Where did the Gestalt Principles come from? The psychologists of the Gestalt group.
Their big discovery? They studied how people make sense of stimuli around them and how they perceive and interpret objects to make sense of the whole picture.
Kurt Koffka, one of the members of the group, came up with a brief manifesto. He stated that “the whole is other than the sum of parts.”
This sentence is beautifully universal and works as an amazing reference for web designers. It shows us that no matter how much time you spend working on a particular element, it won’t get you far if it’s not a strategic part of a bigger picture. Each element you design is perceived differently when it’s part of a bigger set of elements.
In landing page design, you will aim for a stable relationship between the figure and the background. The figure should stand out — and this is most easily achieved through contrast and color.
Hubble Contacts, one of the top advertisers on Facebook, has mastered this concept in their high-performance creatives:
You can also play with the size of certain elements. For instance, Hilma made the “Shop Hilma” button significantly bigger than other components on the website:
5. Pareto Principle
When your resources are limited, priorities are everything. This is especially true if you’re working with a $50,000/project UI/UX web design firm.
The Pareto principle can help you define your design strategy. According to this approach, 20% of efforts cause 80% of the outcomes. With this in mind, you could state that 20% of your design accounts for 80% of the success.
Let’s have a closer look at the data… if you’re using heatmap software (e.g. Hotjar) on your website, you’ve probably already noticed that only a small fraction of all users scroll all the way to the bottom.
Research from the Nielsen Norman Group suggests that buyers spend 57% of their time on a website (imagine how much higher this is when isolated for Shopify e-commerce sites) above the first fold — the section of your website that’s visible without scrolling. 74% of the time is dedicated to the first two folds. This is where you should focus the majority of your efforts.
Of course, it doesn’t have to work exactly the same way for every landing page. We encourage you to test new designs or to use session recording software and watch customers interact with the website.
Here are some ideas on how to use the Pareto principle in design:
- Suggest options — you don’t always have to display the whole alphabetical list (of products, categories, collections, etc.) by default. Instead, you can make things easier for the customer and move the most likely choices (or highest margin products) to the top.
- Prioritize features — analyze the most common requests and the most used features on your site. This will help you build landing pages that are more likely to meet the customers’ needs. For example, if your Shopify store only offers one hero product, don’t bother implementing a search bar! Conversely, if you’re getting a lot of questions about a particular feature, or if a particular service generates most of your traffic, it’s a clear sign that it deserves more attention.
- Build for a mobile-first world — Whimsical is an incredible example here. This collaboration tool was designed for desktop users (ever tried making flowcharts on your tiny iPhone?). Here’s what their desktop landing page looks like:
As you can see, the top right-hand corner navigation is very much like the other landing pages we’ve covered.
Things, however, look a bit different when you see the mobile version:
See what happened? The “sign in” and “sign up” buttons are gone. When you look for Whimsical on mobile, you’re not ready to start using the app. You’re probably just looking around to see what it does and how much it costs. This is why the “pricing” button is highlighted front and center, instead of the sign-up or hamburger menu. It all depends on your findings when analyzing your customers’ behavior.
6. Social Proof (Tailored for E-comm)
Now that we’ve discussed a range of principles coming from cognitive science, it’s time to turn to social psychology. You might have heard of Influence: The Psychology of Persuasion, a classic book by Dr. Robert Cialdini. Although the book is several decades old, it’s still an incredible source of knowledge about the core mechanisms of persuasion.
One of the most widely known phenomena described by Cialdini is social proof. It describes how people tend to think that actions taken by others are worth following.
In other words, we’re more likely to do something when we see other people doing it — monkey see, monkey do.
What’s more, social proof works better when we see other people as competent. This is commonly used on landing pages, even by industry giants such as Slack:
Slack’s landing home is studded with raving reviews from firms, companies and agencies in the country of every size — from Uber, to the U.S. Department of Veteran Affairs. They’re also using the popular trick of adding logos of companies who use Slack.
Another interesting way to use social proof is through user-generated content (UGC).
Parachute Home, a bedding and furniture brand, is one of the leaders in this category. They use pictures of real people using their products on their website (pulled directly from Instagram). This builds trust and makes their customers feel like part of the community:
Conclusion
TL;DR? Implement these psychological principles into your Shopify site today to see an immediate boost to conversions.
The very best Shopify UI/UX designers use the principles outlined in this post as a checklist before launching any site for their clients. You now have access to the same checklist.
Happy selling!