Your website is like an office or a store, where clients or customers come to seek solution for their problem. It is your point of contact with your target audience. Therefore, it is important that your website is helpful in answering your user’s problems. To ensure that your website answer the problems of your users, you need to focus on all the aspects of a website. This includes content, navigation, structure and, particularly, website’s design.
Web design is actually a pretty broad term. It consists of many elements, like color palette, logo, typography, images, animations, micro-interactions, and transitions. All these elements of web design contribute to the website’s experience, also called user experience. ISO 9241-210 Ergonomics of Human-System Interaction defines UX as:
“person's perceptions and responses resulting from the use and/or anticipated use of a product, system or service”
Since web design has a significant contribution to UX and UX has considerable effect on conversions, it is necessary for businesses to work on improving the UX by optimizing their website’s design.
More White Space and Less Cluttering
Having images, videos, widgets, and all the other glittery things on a website seems aesthetically appealing, but in reality it is not. Cluttering a website with unnecessary aesthetical elements will only distract users from their original goal. For this reason, having more white space on a website is necessary.
According to a research conducted in 2004, “Use of whitespace between paragraphs and in the left and right margins increased comprehension by almost 20%.”
A white space (sometimes, negative space) is an empty space between different elements of a website. For example, a space between an image and its caption or a space between logo and navigation. Here is an example of text before and after white space was applied. After white space was applied to the text, it became more legible.
Google is the best example of a website with white space. The search box is in the middle of the page. The white between the search box and other elements puts emphasis on the search box. This makes it easy for users to reach their goal, i.e. to search their query.
Be Friendly With Mobile Users
Nearly 80% of Internet usage will be mobile by 2018.
There was a time when we used to browse websites from either PC or laptop, but this is not the case anymore. Now we have smartphones, tablets, smart TVs and even gaming consoles that can be used to browse websites.
In this age of multi-platform browsing, it is wise to optimize your website for multiple platforms. This means your website should be responsive to different screen sizes, loads quickly even on mobile with slower internet connection and must have readable and legible content. Websites that are not mobile-friendly may have higher bounce rate and exit rate, less conversions from mobile and possibly negative reviews from customers. Here is an example of Boston Globe when viewed on tablet (left) and mobile (right).
Page Load Time is Money
Time is money…this is also true when it comes to online users. Internet is full of information, but time is always limited. Online users want to consume as much content as possible in as less time as possible. For this reason, very few, if any, users have patience when it comes to website’s load time. According to this study, “47 percent of shoppers expect a web page to load in two seconds or less.”
Page load time affects various success metrics of your website, including bounce rate, exit rate, search ranking and conversions. All these variables eventually have a major impact on your revenue. A slow load time may decrease your conversions and hence revenue.
FT.com ran an experiment to see how a slow website can damage the publisher’s revenue. They divided readers into different groups. Some browsed the standard version of website and some browsed the variants with delays of 1,2,3 and 5 seconds. They concluded that slow websites decreased their engagement rate and number of pages viewed. This in turn negatively impacted their revenue that comes from subscriptions and advertisements.
This pretty much proves that page load time is an important factor in website’s success. There are various ways of reducing page load time, like using less third party plugins, content delivery network, gzip compression and compressing images.
The Contrasting Effects of Colors
As a designer, you might have read about color theory and how colors affect emotions of users. However, it is not just the emotions of users that are affected, the choice of color palette also have an impact on their experience with the website. Using too much bright or dull color might make it uncomfortable for users to look at the page and cause eye strain or headache.
In Interaction of Color, Josef Albers writes that using highly saturated colors create a vibrating effect. He described it as “…aggressive and often even uncomfortable to our eyes.”
When choosing a color palette for your website, it is important to consider their contrasting effect, i.e. the color of foreground and background. The color used on background must have contrast with the color used on foreground.
Let’s take this blog post as an example. The text is in black (or dark color), while the background of the page is in white (or some light color). Even Material Design guidelines state that dark text must be used on light background or white text on dark background.
According to W3C WCAG 2.0 Level AA guidelines, minimum contrast ratio must be 4.5:1. This ratio is decided to compensate for the loss of contrast sensitivity in some users. For example, the contrast ratio of #0000ff (foreground) and #ffffff (background) is 8.59:1.
Color contrast also makes some elements stand out from the rest. For example, UsabilityTools ran a test on their landing page. One variation had a navy color button and another variation had orange color. The result was that orange button received majority of clicks (75% of clicks), whereas navy button received less 33% clicks of the page.
For The Sake of Continuous Improvement
Design is not the only element of a website that affects UX, everything that makes up a website including content, images and widgets all contribute to UX as well. Therefore, it is important to consider improving these elements as well. Before finalizing any change to your website you must first A/B test the changes one by one and then go with the one that produced better results. Improving user experience of a website is an ongoing process because the aim is to continually improve the experience for optimal level of results.
