Skip to content

Web Design Derby

Blog

Universal Web Design Strategies To Improve Conversion Usability

Good design is more than just cool pictures and catchphrases. A good design will yield results, communicate effectively and problem solve.

For the majority of websites, the visual layout needs to support the objectives of the business such as engaging with customers and getting them to subscribe to your brand.

To achieve this, you need to know how the human mind retains visual details. Luckily, this is easy to determine.

It is easy to make a website both visually appealing to your customers while meeting your end goals by simply applying these tried-and-true design strategies.

Visual hierarchy

The visual hierarchy allows viewers to quickly identify the highlights of a web page.

For example, on those pages with multiple calls to action, you need to ensure that the most crucial item is highlighted by a special icon, bolder color or larger button.

In order to determine the principles of visual hierarchy, you must first decide on your business objective.

The main goal of the following example is to tempt the visitor with a juicy steak, then state the purpose of the web-page, followed by a call-to-action.

Following are some basic principles to help you build visual hierarchy:

Page-scanning pattern

Generally, people scan a web page first to see if they wish to delve deeper into the context. On typical pages that contain a lot of text, such as articles, readers tend to follow an F-pattern as they read down the left side. They scan for eye-catching keywords in headlines that are aligned to the left as well as the first sentence of each topic.

In order to capture the attention of your targeted audience, you should place the most relevant information close to the top of the web page. As well, the use of left-aligned headings will help to raise interest. 

On landing pages or other layouts that contain less text, people tend to use a Z-pattern to scan the page. To use this to your advantage, you should strategically place the most pertinent information at the corners, followed by the rest of the text along the top and bottom. Place a visual element, perhaps a hero image, in order to connect the diagonal between the content at the top and bottom of the page.

Size

You should emphasize relevant content by making it larger as people tend to read the larger elements on a page first. If the color contrast or graphic treatment is strong, it is possible to break the left-to-right or top-to-bottom reading pattern by drawing attention to the largest detail on the page.

Bold colour and high contrast

To put it simply, bold and bright colours easily capture the eye as they stand out. When paired with a grayscale or muted background, bright colors deliver a bold effect.

Typeface weight and pairing

The most important attribute when it comes to fonts in establishing visual hierarchy is the weight of the stroke. This is why designers use bold type to highlight specific phrases within their page content.

As well, items such as font (i.e.: serif/sans serif), world placement and modifications such as underline and italics also influence the visual hierarchy of the content

Headings and subheadings

To enhance the visual hierarchy, creators also utilize headings and subheadings in those pages or articles that are text-heavy.   Make it easy for your audience to comprehend the hierarchy of the text, by setting the style for H1, H2, and H3 tags to remain consistent across the entirety of your website.

Directionality

The human brain is trained to read text that’s aligned in a pattern or horizontal or vertical lines. Anything that goes against that pattern, such as diagonal or curved text, will immediately catch the eye of the view, thus becoming the most important item on the page.

Space and texture

Putting ample space around the design element in order to gain understanding works is more effective than simply making it larger and louder.  To create a holistic “texture” for the page layout, combine the point size, weight, tint, line spacing, typeface, general spatial distribution, and letter spacing. The order in which people follow the text is influenced by the tone and texture. For example, a shaded box draws the eye to the content inside the box.

White space and clean design

A good design will amplify the usability of your website while allowing visitors to easily find what they desire. To avoid clutter and help users quickly find relevant information, you should incorporate the use of clean design and white space.

White space

A wall of text on any website will drive visitors away as the average 8-second attention span cannot process that much information.

Since it’s not always feasible to summarize a thought in three sentences, there is another solution. Enter the term “white space.”

White space is the area between the space with the design elements and the design elements themselves.  It makes web content look more presentable and easier to read so that your customers can remember why they landed on your page in the first place. As such, adding white space and simplifying the layout increases the conversion rates on the majority of websites.

White space is also referred to as “negative space.” However, there is nothing negative about white space. Rather, it allows you to organize the content and balance design elements in order to improve the overall visual experience while keeping the attention of the reader.

Keep the following in mind when you are incorporating white space in your design:

  • Legibility: White space helps your text appear more legible while incorporating the size, color, and font as well as leading and tracking.
  • Focus and attention: The white space around a design helps to guide visitors through interactive content.
  • Branding: White space is useful in marketing your brand image. For example, a lack of white space is used in new sites to give off the impression of authority while a great deal of negative space conveys a sense of luxury and minimalism.

Grid system

A grid system will help your page a clean and organized appearance for those pages that contain a great deal of content. Grid systems have been used for hundreds of years in order to help our brains comprehend written content.

In order to minimize the restrictive effect of the grid system, you can break it to draw attention to specific content, hence making the design of the page more appealing. Designers tend to prefer grid systems with multiple columns to create visually exciting groupings.

Typefaces

Back in the day, web designers only had a few “web-safe fonts” to use for their content. Today, this number has virtually exploded as a result of @font-face embedding. However, this does not mean that it’s acceptable to use a multitude of fonts on the same web page. This will cause the content to appear overwhelming to site visitors.


Begin with a display font, such as serif and sanserif font as this combination will adhere to the build of your design needs without overwhelming your audience.  Assign each font a header tag (H1, H2 and so forth) to keep the typeface consistent throughout your website while allowing you to present the hierarchy of your agenda.

Colours

Similar to fonts, it is best to minimize your colour plate by sticking with 2 or 3 main colors.

Creating a brand style guide will ensure that everyone is  always on the same page

Images

While an occasional animated GIF may be appealing, too many of them on one web page can be a distraction. Generally, readers prefer websites that are not jumpy.  The images you use should add value to your page while providing useful information. Never use images to fill negative space. As well, to present a consistent identity for your brand, keep your images in alignment with the tone of your website.

Occam’s Razor and the Pareto Principle

The basic principle for eliminating useless elements on a web page and can make the design unefficient is known as Occam’s Razor. In other words, “the simplest solution is almost always the best.” As well, consider the old adage that “a design isn’t finished when there is nothing more to add, but when there is nothing left to take away.”

When combined with the Pareto Principle (otherwise known as the 80/20 rule), Occam’s Razor will help identify otherwise the most crucial elements and eliminate the rest to improve the effectiveness of the design of your web page.

Accessibility

It is important when creating a website to ensure that everyone is able to access the information quickly and with ease.

Intuitive structure

A website must be intuitive to the user regardless if it’s the layout or navigation of a page. Your site visitors need to be able to find the information they need as well as take actions in an efficient manner. Do not make your audience feel as they have to cross hurdles to make use of your website.

Typefaces

While some display fonts are easy on the eye, they are not ideal to be incorporated on the website in its entirety. Stick with tried-and-true fonts at a size that the majority will be able to read with ease for the body text.

Colours

The text and background of your page should be designed in contrasting colours such as a white background with black text for legibility. Dark text on a light background is more pleasing to the eye. Never use dark backgrounds with light text for lengthy content. As well, keep colour blindness in mind when choosing a colour palette to ensure that all of your visitors will be able to see your page in its entirety.

Images

As 93% of human communications are visual in nature, the brain processes images 60,000 times faster than written content. Be sure to incorporate the proper images in your page in order to better reach your audience and enhance usability.

Mobile

In order to optimize the experience for mobile users, you must do more than try to fit all the content onto a smaller screen. You must think about how each of the design elements will complement each other when viewed on a mobile device. If the images are not scaled to point and illegible text will not allow you to effectively communicate your ideas and present your brand.

The Golden Ratio

Often round in nature, this mathematics ratio of 1:1.618 seems to be hardwired to the brain. Applied to web design, it can produce natural and organic content that is pleasing to the human eye.

Layout dimensions

The Golden Rule can be used to discern the dimension of different elements on your web page. For example, if you divide the 960 pixels width of the standard web page by the Golden Ratio, the result is 594 pixels which is typically used the height for most web pages. As well, the Golden Ration is often used to set the width of pages with two-column layout design.

Spacing

It’s bit tricky to find out the ideal spacing between your design elements sometimes. Use the Golden Ratio diagram to guide your placement of images and text.

Content placement

In order to ensure that your readers are taking in the entire content on your page, place the content along the Golden Spiral, as this is appealing to the human eye.

Rule of thirds

The Golden Ratio can also be used to inform composition on either a page layout or an image. The best way to do so is to adhere to the Rule of Thirds.

Divide the page into 9 equal parts with two each of both horizontal and vertical lines to draw the eyes to where the two intersect.  The intersection on top left is important and it is the prime spot for pertinent information.

Gestalt Design Laws

“Unified whole” Is the meaning of “gestalt,” which is a type of psychology that studies cognitive behaviors such as how the brain perceives, processes and pieces together fragmented pieces of information.

Gestalt refers to how the mind handles vast amounts of visual information in our everyday lives when applied to visual perception and design. To simplify input, we tend to consolidate objects and discern relationships when it comes to design elements.

Following are some design principles of Gestalt Psychology :

Proximity:

  •  Objects that are closely grouped together are typically perceived as one object.
  • The distance between the object determines if they are perceived as a group or solo object.

Place elements in the same category in proximity (i.e.: footer or navigation links) to increase usability.

Similarity:

  • Relationships are created between shared visual characteristics. If two items are perceived as alike, they are then perceived as part of the same group.

To communicate the category of the function of a part of the context in your website design, use visual treatments. For example, website visitors will perceive that every review that shares the same design treatment belongs to the same category regardless if they are scattered in other places on the website.

Continuity:

  • Once the human eye has begun tracking an object, it will continue to travel in the same direction until it spots another object.

By using photographs of models who are gazing directly at the call to action or main content of a web page, conversion site pages can gain leverage.

Closure:

  •  As the brain is constantly in search of completeness, it tends to fill in the blank when we see images or shapes that are incomplete.

In visual design, the law of closure is often used to make a visual design more appealing. This theory is best suited to those images that are most commonly recognized.

Symmetry:

  • As a rule, the human brain will seek out those arrangements that are symmetrical
  • Our minds tend to put those items that are unconnected but symmetrical to form a cohesive object or shape.

On a web page, arranging elements symmetrically will create a visual unity that is appealing to the viewer.

Common fate

  • The brain also tends to group together those that display the same directionality.

I.e.: If you spot a group of people traveling in the same direction, they are then perceived as a group

Similar to the law of continuity, you can use this principle to guide the viewer to the logo, call to action of the content of your web page.

Hick’s Law

Remember that every decision you have available to your viewers will increase the amount of time it takes them to make their final decision. Similar to the Paradox of Choice, this means that if you give someone too many choices, they end up not choosing any of them. Using these laws can vastly improve the conversion rate and usability of your website.

Minimize choices

Ideally, on landing pages or other conversion-focused pages, you should minimize the amount of choices thus making your desired action as the only choice that makes sense to your viewer. A typical landing page will feature concise text with a hero image and only one prominent call to action which makes the visitors’ choice that much clearer.

Navigation

Adding links to every page on your website in the navigation bar will create chaos and thus overwhelm your visitors.  Make sure to design your site menu using only categories that are high level, as the user delves deeper into your site, slowly drill downward.

Search function and filter

A strong search function will allow visitors to find specific details without having everything thrown at them as they navigate the website. Search results can be extremely overwhelming for those websites with a large product selection.

A user-friendly filter feature will enable viewers to limit the number of alternatives even further, so they will see those results that are most relevant.

Fitt’s Law

A function of the size and distance of a target is the time that is required for an object to move to the target area is known as Fitt’s law.

Utilize this principle of design to get your site visitors to click on a call to action that much faster.

Size and placement

By placing a button in the most vocable area of the screen, you will increase the chances that a visitor will click on it. As well, you can use a bold color or increase the size to make it more appealing.

Keep in mind though that bigger does not always mean better. A larger button will not always increase the usability of the web page. The expected frequency should be reflected in the prominence and size of the button as well.

Distance and movement

Another principle of Fitt’s law is the distance between where the mouse pointer needs to be versus where it is currently.  The further apart the key elements are from one another, the longer it will take visitors to finish a sequential task. Be sure to group these links in proximity.

Conclusion

  • Websites must be financially rewarding as well as aesthetically pleasing.
  • Using the psychological and design principles outlined above, you can reduce bounce rates while increasing conversion rates and driving more traffic to your website.
  • These principles will help you design your website while keeping your business objectives in mind.

Leave a Comment