5 Website design principles provide optimal user experience and increase conversion rates for brands

A well-groomed website is an effective customer attraction tool in the digital age. Not only focusing on mass customer groups, The business also pays special attention to independent customers. So, Investing in every channel, every touchpoint to create a comprehensive experience for all user groups becomes a priority for brands, which includes website touch points.

However, According to survey conducted by WebAIM, space 98% Website homepages all have at least one error according to website building standards WCAG Website Accessibility Guidelines 2.0 (Web Content Accessibility Guidelines).

Below are some notes to help businesses optimize website interfaces to create user experience and increase conversion rates.

Cách kiểm tra tình trạng hiện tại của website

Before "embarking" on fixing the website design, Businesses can use the following tools and utilities to review the problems their website is facing::

  1. WAVE Web Accessibility Evaluation Tool

WAVE is an extension that helps programmers and businesses evaluate the accessibility of websites to users according to standards. WCAG Published by Chrome.

Detailed instructions on how to use the WAVE utility

In addition to reports of potential site errors and problems, WAVE also suggests to users ways to improve accessibility. For example, in the screenshot below, The extension has pointed out that some images are missing alt text (alternative text).

“Errors” are errors the website is experiencing, “alerts” are warnings about potential website problems
  1. ARIA DevTools

ARIA is a quite popular Chrome extension, allows designers to preview how the website browser will display to users, From there, customize how they interact with website content. Besides, ARIA created to improve the usability of websites for people with disabilities and make them more accessible with assistive technologies such as screen readers.

General introduction to ARIA DevTools (Accessible Rich Internet Applications)

To use ARIA, Users must install this extension from the Chrome Web Store, then select “Add to Chrome” and “Add extension”.

  1. Manual check

If you do not want to use support utilities, Website designers and businesses can evaluate their websites against standards WCAG 2.0 with 5 following question:

  • Is the website content easy to read for all users??
  • The image has full alt text (alternative text) Not yet?
  • Does the site allow keyboard navigation??
  • Does the audio and video files on the website have translations? (transcript) or annotation (captions) full?
  • Does the contrast between the colors used highlight the content on the website??

However, Using the manual method will take more time than using online extensions.

Cách tăng trải nghiệm người dùng khi truy cập website

The key thing when website design is to be accessible and usable to everyone, including people with disabilities. So, Businesses should apply 5 rule below to ensure users have the best experience when using.

  1. Lưu ý về độ tương phản của màu sắc

Color is the first thing that impresses users when they visit a website. There are many principles of color combination in design, However, for websites, Designers should only use the maximum 3 color. Combining too many colors in a "greedy" way will distract visitors and make it difficult to focus on the main content..

Choosing too many colors will create chaos, confuses visitors

Besides, Color contrast is an important factor when designing a website, Helps users distinguish content more easily. Good contrasting color pairs like white – black, yellow – black,… can make the content on the website stand out.

Standard contrast ratio of colors WCAG 2.0 with text usually 4.5:1. However, Depending on the size of the image and text, this ratio will change.

  1. Dùng thêm từ khóa và ký hiệu thay cho màu sắc

When performing operations on the website such as pressing an order button or switching pages, users with low vision or color blindness will not know what they are doing without keywords or symbols.

“King of streaming music online” Spotify also apply symbols to their designs. When the user clicks to repeat the song, The repeating icon will change from gray-white to green. However, so that color blind users can operate more conveniently, Spotify cleverly added a small dot below the repeat icon.

  1. Thêm văn bản thay thế cho hình ảnh

Alternative text (alternative text) also known as image description in HTML code. No matter what image is used, Web designers don't forget to add alt text. The original purpose of alt text was to describe images for blind people who cannot see them. These visitors may use a screen reader or a variety of browsers to help them better understand the content on the site., including images.

Instead of displaying the image to the user, Screen readers look at an image's alt text and read the image's content. So, users can understand what's on the image and get a better overall experience.

Image descriptions need to be accurate, brief, and limit stuffing too many keywords

Besides optimizing images, The description also helps the website improve user experience (UX) and accessibility.

  1. Title hierarchy

Dividing content into small paragraphs will make it easier for visitors to read. Clear titles can help screen readers better understand and interpret them for visitors with disabilities, At the same time, it supports navigation within the page. WordPress recommend that web designers use the built-in title hierarchy: Heading 1 (H1) for title, H2 and H3 for subsections respectively.

Text is hierarchical from H1 to H6
  1. Điều hướng bằng bàn phím

For all users, especially people with disabilities, A clear navigation system plays an important role. Make sure users can quickly find what they are looking for. By using the tab keys, Arrow up – down – left – right, space (space), Users with disabilities can perform actions on the website, such as clicking on links or filling out forms.

 

Theo Advertising