Guest post by Anastasia Belyh.
Your website’s design may actually be one of the major obstacles standing between your website traffic and the bottom of your sales funnel. It can make the difference in your conversion rates.
Your web design can significantly impact your brand image and credibility among new sales prospects.
To provide context, it takes website users less than a second to form an impression of your website, and 94% of the time, those impressions are determined by your website’s design.
To keep visitors engaged with your site content, your web design needs to be attractive and professional, with intuitive navigation. Per recent research, 38% of visitors will abandon an unattractive website.
It’s not just about aesthetics; your website should be designed to encourage visitors to take action.
Your clicks, engagements, and conversions, all the important metrics that increase your website’s effectiveness and your company revenue, and these are all directly influenced by your web design.
By applying successful web design principles, you can influence certain parts of these convictions to your advantage.
Implementing and testing these web design principles will provide valuable insights. Only through testing will you be able to determine which design changes will work best for your website with your specific audience.
These nine web design principles will give you the knowledge you need to boost your conversion rates.
1. K.I.S.S (Keep it Simple, Stupid)
This is one of the most popular and effective web design principles.
The premise is self-explanatory: the simpler an action is to take, the more likely users will do it.
Avoid the impulse too many web developers have to add as much information or as many details as possible on their website, especially the homepage.
An “everything but the kitchen sink” approach to content leads to confusion rather than clarity. As visitors click away in frustration, the excessive copy will negatively affect your conversion rates.
Aim for simplicity and keep actions easy for the user. The most appealing design is generally more simple than flashy.
Keep Your Text Short and Simple
The amount of copy on your pages plays a big role in determining how clustered and exhausting your website looks. Short paragraphs, bullets, and subheads make information more visually appealing and easier to digest than long, unbroken blocks of text.
Use as few words as possible without losing your main message and emotion. Busy website visitors are more likely to skim content for meaning than to read every word.
Keep your sales copy short, punchy, and highlighted. One-line sentences work as great killer copies for websites. Try to keep paragraphs to three sentences at most.
Hootsuite’s homepage has two main, short blocks of copy above the fold:
It’s effective because it’s quick to read and understand. It adequately communicates what Hootsuite is about in a meaningful way to prospective users.
Long Copy Belongs on Blogs
If you have to write something that looks like a book, reserve it for your blog. Even so, your blog posts should have a well-spaced sentence structure. They should be scannable, easy to read and digest.
Be generous with paragraphs and bullet points. These make your posts seem less like a wall of content. Most importantly they make your message faster and easier to grasp, improving your user experience.
Note that the principle of short copy applies differently in different contexts for different websites. You might need more copy to describe a complex product or concept. Use more copy if you need more copy; just don’t use more copy than you need.
Carefully consider the needs of your target audience before drafting and simplifying your copy. If you’re struggling to create the copy or don’t have strong writing talent on staff, then you may want to save a lot of stress by hiring a professional writer or using a content writing tool.
Like blog posts, landing pages need a different quantity of content than normal website pages. The focus is on selling your products or getting the visitor to do something (download a white paper, schedule a demo), so the copy needs to be compelling and action oriented, while still simple and tight.
2. Make Good Use of White Space
White space, or negative space as it sometimes called, is a useful and influential aspect of web design.
It’s simply the blank space between the elements on your web page; your text, calls to action (CTAs), design elements, and graphics.
The ratio of white space to text and images affects conversion rates by reducing the visual and mental stress for users. Less stress makes visitors more likely to convert.
Using sufficient white space between the content and elements on your website make it look cooler and less discomforting for users. They’ll be more open to interacting if your website doesn’t look cluttered.
By paying attention to white space, you can use it intelligently and arrange your CTAs and navigation elements in ways that work to your advantage. For instance, you can use space to separate your main CTA from the rest of the elements to make it stand out.
Note the amount of space between the elements on Spotify’s homepage and how it makes them pop:
3. Increase Website Load Speed
Your website speed can have a huge influence on your conversion rate. The longer it takes to load, the more your bounce rate increases.
Internet users are pretty unforgiving when it comes to loading speed. At least 47% don’t have the patience for websites that take longer than two seconds to load.
Adding to that challenge, fast load speeds are both more difficult and more vital to attain on mobile devices.
So how can you improve your website speed through design?
Optimize Your Media
Images, videos, and GIFs are a major source of drag on website speed because of their file sizes, so use them carefully.
Pictures and videos positively impact engagement, can often convey ideas more simply than text, and are expected by consumers, so it’s not simply a matter of using fewer visual elements.
The key is to be smart with how you use them. Never use more than necessary, at a larger size or higher resolution than needed, and don’t load up too many on one page.
To minimize the impact of images on page load time, compress your files before uploading them and optimize your images.
Optimize Your WordPress Environment
If you’re using a WordPress-powered website, there’s tech that helps reduce load speed. Optimizing your WordPress website can be done using WordPress plugins, applying web design common sense, and a little geeky stuff.
There are other ways to improve your website speed that are not directly tied to your website’s design.
Using a web hosting plan that guarantees high speed is a great step. You can get a powerful web hosting plan at reasonably affordable rates from cheap web hosting platforms.
Other effective methods to improve your website’s performance include minimizing your HTTP requests and enabling browser caching.
4. Apply Hick’s Law
Hick’s law is a psychological theory that has a strong application in website design. The principle asserts that the more choices a user has, the longer it takes them to make a decision.
Therefore, your web design should aim at simplifying decision-making for your visitors. Including too many features or choices increases the likelihood that they won’t make any decision at all.
Choices are often impulse-driven, and it’s harder for people to take action when you’re giving them too many options or too much information to think about. Focus on less thinking, more clicking.
Many websites have tested Hick’s law and achieved significant results. For instance, the Sims 3 website was able to achieve a 128% increase in conversions just by reducing the CTA buttons on their website’s homepage from four to one.
To limit the number of offerings, features, and CTAs on your site effectively, think of the main product you want users to buy or the main action you want them to take—the one that offers the most value to your business.
Then focus on it (make it the main button in the above-the-fold part of your homepage, for instance), preventing the less valuable actions from acting as distractions.
Look how Grammarly applies this principle. There’s only one main CTA button above the fold.
For an ecommerce store, this means having a “most-rated” or “most popular” product or product section. This can be placed on a hero banner which is the most visible element on your site. This makes it easy for users to take the next step.
No matter the type of website, the goal is to make the one most profitable action the most visible one on your site either by CTA button, copy, or other element used to drive action.
At most, provide two actions (and test this!). For example, a secondary call to action might be something like “Not ready to buy yet? Join our mailing list for monthly specials!”
By doing this, you reduce the paradox of choice for users and simplify their decision-making. Often, this leads to a significant increase in conversion rates.
5. Apply Fitt’s Law in your Visual Hierarchy
Visual hierarchy is one of the most basic and important web design principles. It’s simply the idea that design elements should be arranged in such a way that users see the most important information first.
One way to apply this is by placing the elements you want users to see along the conventional pattern of sight on web pages.
Visitors often read web page content in a Z pattern. They scan from top left to right before trailing down to the bottom left. The bottom right is usually the last place they look at.
To capitalize on this, you can place key elements, like your CTA, navigational bar, company logo, and copy along this train of sight so they can be seen by users.
Here’s an example of how the Z pattern is applied on Slack’s homepage:
Different websites use the Z pattern in different ways. Some place their elements in different positions and utilize different areas of focus along the trail. The Z pattern is not absolutely definitive, but rather a general path of focus that can be used.
Fitt’s law is a way to make your visual hierarchy most effective. The principle states that the amount of time required for a person to move to an object is a function of the distance to the target and the size of the target.
To translate into the simplest terms, the bigger and closer an element is, the more likely it is to be clicked.
Applying this to your visual hierarchy, make the most important elements stand out through their size, color, and position on your web page.
To help you do this right, create a list of what you want to include on your page; CTA, text, copy, navigational elements, media, graphics, etc., then sort them according to their level of importance to your conversion rate. This should be easier when you apply Hick’s law, i.e, focus on one primary action.
Then order the elements in visual prominence based on the hierarchy of your list.
BigCommerce has a good visual hierarchy and applies Fitt’s law to make their CTA button a prominent and very clickable feature:
But be wary of over-relying on Fitt’s law to the point that it does more harm than good. It’s helpful to make important elements large, but making them too big looks unbalanced and just plain ugly.
6. Consider the F Pattern
Another common visual pattern users follow when browsing a website is the F pattern.
Put simply, they scan from left to right, focusing more attention on the top, middle and left sides of a page than other areas.
Here’s what the visual heatmap of users who scanned in an F pattern looks like:
The F pattern generally works best for web pages with dense copy, like blog posts, while the Z pattern is suitable for pages with sparse copy and a focus on singular elements like CTAs.
Those rules aren’t hard and fast, however; there are homepages and landing pages that use the F pattern effectively.
What pattern to use is ultimately best decided by testing to determine which drives more conversions. Both are proven and effective visual layouts.
7. Use Colors Brilliantly
Colors are more than just a tool to remain style guide-complaint and make your site look attractive. They are powerful elements that can influence users’ actions and make your brand unforgettable.
Colors are emotion carriers. They can have a powerful influence on the user experience. They can convey the mood of your website as well as influencing how users see your brand.
Choose colors that support the image you want to convey for your brand, to your audience. The best colors for a law firm, a medical device company, and an ecommerce site that sells children’s toys will all be very different. Your color scheme helps consumers subconsciously understand your brand.
The wrong colors confuse your brand message and can ultimately affect your conversion rates negatively.
Choosing the Right Colors For Your Website
To pick the colors that best reflect your brand, you may want to work with a design agency or a brand strategist. Create a style guide that provides a family of complementary colors to use across your website.
It’s similar to the creative process you’d take to design a logo. Ask yourself: what is unique about my business, or brand? What image or element (in this case color) best represents this?
A popular way to choose your color scheme is to use an Adobe color wheel. Simply place images you think align with your products or visually represent your brand the most in the software and the wheel will automatically generate the color scheme for you.
Keep in mind though that this is helpful guide, not a set of absolute rules.
To be most effective in your use of color, you need to understand which colors represent which popular emotions or values. It also helps to have a solid grasp of color hues, combinations, and contrast.
Even if you’re working with a web designer, this knowledge is helpful for communicating your ideas with them.
While choosing the right color scheme supports your website and brand image and messaging, the following color-related guidelines can have a more direct influence on your conversion rates.
Use Color Contrast to Promote your CTAs
CTA buttons can be made more prominent by using colors (preferably the brightest colors in your palette) that contrast with the background. This makes buttons more noticeable and also more inviting to click.
Of course, the contrasting color has to complement your overall design.
Stay Creative But Consistent
Use a consistent scheme throughout your website. All your web pages should have a strong sense of ”fit,” through your colors and overall design.
It may sound obvious, but it’s best to avoid the temptation to go overboard with website design, trying to ‘‘jazz it up’’. It’s cool to be expressive and use creative uniqueness, but not to the point of creating a design that’s distracting or incoherent.
8. Stick to What People Know
At this point, your site visitors expect certain conventions to be followed when they are browsing web pages.
A website that operates differently from what they know can seem really strange, and not in a good way. This can ultimately discourage them from interacting with your website.
These conventions are more like helpful guardrails than stifling rules. Remember, maximizing conversions is your ultimate goad, you’re not purely an artist (unless you are..)
No matter how unique you try to make your website, there are some certain elements or principles you shouldn’t ignore if you want to optimize conversions:
- CTA buttons: Make them prominent, distinguished by color, placement, and size. And don’t ignore Hick’s law.
- The principle of simplicity: Remember to KISS.
- Visual layout: You have a better chance at conversions by following the conventional visual patterns: the F or Z patterns and Fitt’s law.
- The use of copy: Use copy where it’s needed, as much as needed but no more. Don’t try to substitute icons or graphics for copy in vital areas like your CTA button. Descriptive, direct button copy works best (e.g., “Download the ebook” rather than “Submit”).
- Navigational elements: Most website users are accustomted to specific ways of navigating through a site. This is especially true if you use an ecommerce platform. Use the navigational or product menu style people are used to, such as a drop-down menu or a sidebar menu.
An effective way to use conventional knowledge to your advantage is to use words that your target audience is familiar with. Words that depict your product or service but are still relatable to your audience work better than jargon or possibly unfamiliar acronyms.
9. Use Original, High-Quality Images
Images are powerful elements that can quickly influence how users feel about your website. They’re attention grabbers and can engage users effectively when carefully chosen and used.
Using the right images in the right way can boost your conversion rates. Here are tips to help you use the best images to optimize your conversions.
Use High-Quality Images
High-quality, high-clarity images convey the impression of professionalism and competence. Low-quality images and over-used free stock photos do the opposite.
This applies particularly to product images. Consumer and business buyers alike want to see high-definition product images they can zoom in on to see the details without a loss of image clarity.
Use Human Faces
No visual element is more effective at conveying emotion than the human face. Using images of people’s faces on your website can strongly influence engagement.
Happy, warm, and excited faces are the go-to for many websites. But could the expression to choose depends upon the message you’re trying to convey or the feeling you’re trying to evoke.
Most websites use happy faces because they represent solved problems, happiness, and clarity, which is what buyers want.
Use Original, Genuine Images
Avoid using stock photos. As noted above, today’s savvy internet users are quick to spot lazy stock photos, which make your brand look less credible.
Website visitors prefer original photos of real people, not just supermodels and Hollywood actors. Depending on the industry, consumers want brands to use images that more realistically depict their target audience.
Using genuine pictures that people can actually relate to makes them feel more connected to your brand. In some instances, it can give your brand a positive uniqueness.
Asana uses a picture of their clients, one of the teams that use their software, on their homepage:
This picture appeals to teams that use Asana’s software because they’re more likely to see themselves in this image than in any generic photo.
Conclusion
It can be disheartening to generate significant website traffic, either through SEO, social media, or email marketing, only to have a low conversion rate.
Actually, it sucks. But with great web design, you can turn this around.
Whether it’s building a new website or making changes to an already existing one, these web design principles provide a solid foundation for boosting conversion rates.
All of these tactics are geared towards improving the consumer experience, which helps with SEO, improving your brand image, and ultimately landing more sales.
Anastasia Belyh, COO at FounderJar.com and Cleverism.com, is a regular contributor at Entrepreneur.com and other publications.
This applies especially to item pictures. Shopper and business purchasers the same need to see top quality item pictures they can focus in on to see the subtleties without a deficiency of picture lucidity. Site guests incline toward unique photographs of genuine individuals, not simply supermodels and Hollywood entertainers. Contingent upon the business, customers need brands to utilize pictures that all the more sensibly portray their intended interest group.
So true, Emma! Buyers want authenticity…they want to see themselves reflected in the images brands choose to use. Better versions of themselves, but not unrealistically better.