It’s easy to get caught up in superficialities when designing or redesigning a website. Is that the right tone of blue? Is it preferable to have the logo on the left or right side of the display? Why don’t we just plop a huge GIF right smack in the middle of the page?
But in a world where people have access to more than 1.8 billion websites, you need to make sure yours is more than just a pretty face. Usability and user experience (UX), or how pleasant it is to use your website, should be primary design goals.
However, to help you get started, we’ve compiled a set of guidelines and best practices that can be applied to your next website redesign or website launch. We’ll then go over the top 10 elements your site needs to have in order to implement these suggestions. Sure, let’s just jump right in.
Ease of use
While the way your site looks is important, most visitors aren’t checking it out to see how well designed it is. They need to accomplish something or locate certain data.
Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they’re trying to accomplish.
For optimal usability and user experience, keep things as simple as possible. It’s hard to simplify a page too much if you have all the components you need. There are numerous applications for this idea, such as:
When it comes to color, less is more. The Handbook of Computer-Human Interaction recommends using a maximum of five (plus or minus two) different colors in your design.
The typefaces you use, if any, should be kept to a minimum, and the ones you do use should be highly legible. Minimize the amount of color you use for text and make sure it contrasts well with the background. The rule of thumb is to stick to no more than three typefaces and no more than three sizes.
Don’t just throw images in there for the sake of it; only use them if they’re going to help the user accomplish something.
Hierarchy in Images
Visual hierarchy is the practice of arranging and organizing a website’s elements in such a way that visitors are drawn to the most important elements first, which is closely related to the principle of simplicity.
The goal of usability and UX optimization is to guide visitors to take the desired action in a way that is intuitive and pleasurable for them. You can structure your site so that people’s eyes are drawn to specific parts of it by changing their position, color, or size.
In the example below from Spotify, you can see that the main heading “Get 3 months of Premium for free” sits atop the visual hierarchy with its size and page position. The focus is immediately drawn to the importance of their mission. The “Get 3 Months Free” call to action comes after this and encourages signing up. Users can take action by either clicking the CTA provided or browsing the available options above.
Navigability
The success of your website depends on the ease with which visitors can navigate it and find the information they need. A site visitor should be able to land on your page and immediately know what to do next. As little effort as possible should be expended when going from A to B.
In order to improve the usability of your site, consider the following:
- The primary navigation should be easily accessible (and situated near the top of the page).
- Put links to the site’s other sections in the footer.
- To help users remember their path through your site, use breadcrumbs on every page (aside from the homepage).
- Put a search box near the top of your site so people can find what they’re looking for quickly and easily.
- Don’t offer too many navigation options per page. It’s that easy!
- Integrate links into the text of your page and clearly label their destinations.
- Don’t bury the content too deeply. Create a simple wireframe map of your site’s pages in a pyramidal structure. The first layer is your homepage, and the subsequent layers are the interconnected pages that you’ve created. It’s recommended that maps have no more than three levels. Take HubSpot’s site map, for example.
Consistency
Every page on your site, not just the homepage, should have the same design and feel to it. This includes the navigation. Consistency in design elements like backgrounds, color schemes, typefaces, and even the voice of your writing can improve usability and UX. However, that doesn’t imply that every page needs to look the same. Instead, you should make unique designs for various webpages (landing pages, info pages, etc.). By sticking to those formats, site visitors will have a better idea of what to expect from any given page. You can see that Airbnb follows the standard practice of using a single design for all of its “Help” pages in the sample below. Imagine what it would be like from a visitor’s perspective if every “Help” page had its own, unique layout. There would be a lot of shrugging of shoulders.
Responsivity
Statistics show that mobile devices such as smartphones and tablets account for nearly half of all page views worldwide. Our data also shows that 93% of users have abandoned a website due to poor mobile compatibility.
The lesson here is that in order to provide a first-rate user experience, your site must function properly across a wide range of devices. This is referred to as “responsive design” in the technological sphere.
A responsive website requires a highly adaptable framework. For optimal viewing on any device, responsive websites scale and rearrange their content mechanically. Either use a mobile-friendly HTML template or develop a dedicated mobile site to achieve this.
It’s more important to provide a fantastic experience across all devices than to make sure they all look the same.
Accessibility
The purpose of web accessibility is to ensure that all users, regardless of ability level, can effectively navigate a website. As a Web Designers Ottawa, it is your responsibility to incorporate these people into your UX strategy.
In the same way that responsive design considers the entire site, accessibility considers the structure, page format, visuals, and written and visual content. The Web Accessibility Initiative and the World Wide Web Consortium established the standards for web accessibility in the Web Content Accessibility Guidelines (WCAG). These rules generally require of websites that:
- Visitors can easily make out the information you’ve provided on your site.
- Accessible: Your website’s features should be usable in a variety of ways.
- All content and notifications are easily digestible.
- Your website is accessible to people using a wide range of assistive technologies, devices, and browsers, making it robust.
Conventionality
Finding the sweet spot between originality and user expectations is a major challenge in web design. Most of us are seasoned internet veterans who have adopted certain habits over the years.
- Setting up a site’s primary menu across the top (or left) of the display.
- Having a logo appear in the upper left (or central) corner of a page.
- Including a link in the logo that always takes the user back to the main page.
- Having links and buttons that alter their visual appearance in response to mouseover.
- Making use of a virtual cart while browsing an online store. A number badge on the icon indicates how many items are currently in the shopping cart.
- Including controls that let users manually rotate slides in image sliders.
Some may choose to ignore these for the sake of originality, but they will regret it. Within the bounds of web convention, there is still plenty of room for creativity.
Let’s think about architecture for a second, another form of design. In order to ensure the comfort and safety of their inhabitants, governments adopt building codes. Because of the legal ramifications as well as the assurance of guest safety and comfort, architects do not complain about or violate these codes. If the stairs aren’t level or there isn’t an emergency exit in case of a fire, it won’t matter how beautiful the building is on the outside.
The same techniques can be used to provide satisfying results while still impressing customers. Users may experience discomfort or even frustration if the site doesn’t behave as expected.
Credibility
Your site’s credibility will increase if you use accepted web standards. Simply put, it improves the credibility of your website. Credibility is essential if you want to create a site that offers the best possible user experience.
Being open and honest about the features and benefits of what you’re selling goes a long way toward establishing trust. Don’t bury the lede by making people sift through hundreds of pages to figure out what you’re about. Put some effort into explaining the benefits of your work right away on your homepage.
A pricing page that is easily accessible from the homepage is another indicator of professionalism. If people want to know what things cost, they shouldn’t have to contact you to find out. This establishes your company as more reliable and legit-looking.
User-Centricity
User preferences are the ultimate determinant of usability and user experience. After all, if not them, then for whom are you creating this product?
While the aforementioned guidelines are a solid foundation from which to build, the ultimate secret to perfecting your site’s layout is to test it with real users, compile their feedback, and make adjustments accordingly.
Also, you shouldn’t rely on your own usability testing. You’ve spent a lot of time on your design, which means you’re likely to be prejudiced toward it. Find people to test your site who are as unfamiliar with it as a first-time visitor would be.
