The 7 Elements of a User-Friendly Website

The 7 Elements of a User Friendly Website

Today, User Experience Designers spend their careers bridging the gap between the end user and website owners. They design apps, products, and websites to be as smooth and seamless as possible. It wasn’t always this way. At the beginning of the Internet, website owners primarily worried about content and not how it looked. Content was king. Today content still reigns supreme, but now it has a partner. Usability is now queen. Without usability, we’d still be in 2000. Usability and content need to go hand in hand for an effective website. According to Wikipedia, “Usability is the ease of use and learnability of a human-made object such as a tool or device…” In our case, the tool is the website and usability refers to the ease of use of it. You can have the best content in the world, but if it’s presented in an uninviting way it won’t have a chance to reach your intended market.

Below are my 7 Elements to create a user-friendly website.

1. Make it Scannable

Making your site scannable is essential in today’s day and age. This includes word choice, sentence structure, and the length of paragraphs. Have a clear hierarchy of typography that leads the user through the page. With clear areas for the user to rest. It’s ideal to establish yourself as a thought leader in your space, but stay away from too much technical jargon. And don’t forget to allow imagery to help tell your story.

2. Page Speed & Load Time

Load time is a major factor in determining page abandonment and bounce rate. Ideally, you want your page load within seconds. The majority of users are willing to wait at most 6 to 10 seconds. Beyond that, you’re asking a lot. Users also expect your mobile version to be comparable to desktop versions.

There’s plenty of web tools designed to help you create the fastest website possible.

Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/

Google Page Speed Insights allow you to see which files allow for compression whether through reducing the size or minification of files.

Chrome Dev Tools – Waterfall
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference

Within Chrome Dev Tools there are a plethora of options to test via the back end to increase usability. Specifically, the waterfall section allows you to see the order in which your files load along with the time it takes to load each file. This makes it possible to see areas to improve the usability. Again, quality and speed are what you’re going for here.

3. Good Design

Ultimately, your goal as a designer or website owner is to allow for your user to gather the info they want with as little effort as possible. And your user should never have to work for what they seek. A well thought out page structure and design will assist in guiding the user through to goal conversion. As we know that’s easier said than done. It takes a lot of effort on your end to get to this point and keep the quality top notch, but a good design will do just that.

4. Logical Navigation

When building out your website you need to keep your sitemap front of mind. This includes wireframing clickstreams, a logical naming of sections and pages, and the structure and location of your navigation. The common convention regarding the latter is to either have the nav either along the top or left of every page. Some sites utilize a hamburger menu For a cleaner look. And for larger websites, many systems include a secondary breadcrumb navigation. This allows the user to know exactly where they are on the site with a simple glance.

5. Mobile Friendly

As of April 2015, if your site is not mobile-friendly, Google will now decrease visibility and the possibility of visitors finding your site. With the advent of content management systems (CMSs), it’s easier than ever to create a mobile-friendly website. CMSs allow you to create a desktop and mobile site with ease. Many themes come with responsive capabilities built in. If WordPress isn’t your thing, there’s Drupal, Joomla, and Bootstrap too. Alternatively, if you’d like to code by hand you have the option of coding breakpoints or @media call outs.

6. Browser Consistency

Any web designer/developer these days knows that not all browsers are created equal. Just mention Internet Explorer in context of web design and you’re bound to draw the ire of a multitude of individuals. These days Internet Explorer has upped its game and isn’t the horrible browser it once was. Today you still have to code for cross-browser functionality, but the ease with which to code for them has significantly improved. In the below example each of the major 5 is represented by the following copy:

-Webkit- (Chrome and Safari)
-moz- (Mozilla)
-ms- (Internet Explorer)
-o- (Opera)
 
nav { background-color: red; background-image: url(gradient-slice.png); background-image: -webkit-linear-gradient(top right, #A60000, #FFFFFF); background-image: -moz-linear-gradient(top right, #A60000, #FFFFFF); background-image: -ms-linear-gradient(top right, #A60000, #FFFFFF); background-image: -o-linear-gradient(top right, #A60000, #FFFFFF); background-image: linear-gradient(top right, #A60000, #FFFFFF); }

7. Always testing behind the curtain

If there’s one thing I’ve learned along the way it is to test, test, and test some more. Not everything works as you expect it to or as it should. There are multiple ways to test and each has certain items that you can take away. For instance, A/B tests are great for testing the user-friendliness of your design compared to another version whereas click tracking will tell you how a specific element on your page is adding or detracting to the overall experience for users. Many sites run multiple types of tests simultaneously. Ideally, you want people to convert or complete goals on your site. Testing and tracking to optimize your site are essential to understanding your user.

Conclusion:

If you follow the above and start making these steps routine you will have a user-friendly website in no time. It takes a lot of effort to make and keep your site user-friendly, but in the end, that’s who it’s for, your users. If they are happy and spending a long time on your site they are more likely to convert or spread the word to someone who is. And ultimately that’s what you want, more conversions.

Photo by Nick Karvounis on Unsplash