Design and Usability Importance

Design and Usability Importance

Hi, I’m Keeley and I’m a web designer here at WebFX.

Welcome to the fifth video in our FXLiveGuide series, Design and Usability Importance.

We’ve already talked about the basics of SEO, how to do keyword research, content creation, and off-page SEO. Today we’re going to talk about the importance of design and usability on the web.

The way something is designed and how users interact with it is super important for how people convert on your website and how you get people to fill out your forms.

When a user is given 15 minutes to consume content, two thirds of those people would rather read something that is beautifully designed rather than something that is poorly designed.

It’s easier to digest content when it’s broken up into sections and laid out in a unique way rather than just plopped on the page and you’re expected to read 10 pages of content. 57% of customers say they wouldn’t recommend a business with a poorly designed mobile site, and 40% of those users have turned to a competitor site with a better design presence.

A lot of users these days are using mobile phones to view these sites, so it’s important to make sure you test your site on a mobile device. Mobile shoppers convert 160% more often on sites optimized specifically for smartphones.

So if you go to a site and your site is just optimized to zoom out of your desktop version, you’re going to see that the links are super tiny, and you’re not going to be able to click. Users will stray away and go to a site that has links that are easier to click and the process to get to the checkout or to find out more about them is more streamlined and easier to digest on the site – and it’s readable.

Let’s now talk about some important factors in good web designs.

Those would be things like the color palette, the typefaces, the images, and how they all blend together to create your site.

Choosing a color palette

Let’s start with choosing a color palette. Choosing a color palette is key to giving your brand a strong identity. Most companies have a dominant color that makes their brand recognizable. For example, when you think of Coca Cola, the first color that comes to mind is red.

When you think of Coca Cola for example, the red makes you feel love and excitement, and that’s exactly what Coca Cola wants you to do – feel excited about their product, and they want you to love their product.

The color red also creates a sense of urgency, so that causes people to want to go and buy it, for Coca Cola in this case. Think of all the stores and products that use the color red – Heinz, H&M, Wendy’s, Target – they all have a sense of urgency for you to go to those places and get something or buy something, along those lines.

After you’ve determined your dominant color of your site, you’re going to then choose accent colors, which would be part of your color scheme.

There are a few resources you can use to do that. One of my favorites would be Kuler, by Adobe. Anyone can go on the site, you don’t have to have an Adobe account. You can go on there, pick your colors, and its super flexible. You can search through color schemes that have already been created, you could search “cotton candy,” and it’ll pull up blues and pinks, and different variations of combinations people have thought remind them of cotton candy.

Or you can create your own, where you would put your dominant color in and then you could choose monochromatic, or complimentary, and then it will give you variations of those colors.

I typically start with one of the color palettes and then I’ll modify the colors to match more of what I have in mind for the brand.

When you’re using colors on the website, it’s super important that you have a call-to-action color.

So on the WebFX site, for example, our call-to-action color would be the yellow and the bright green. Those buttons on our site are important and we want people to click those to get to a form or to learn more about something that’s very important to us.

The other buttons on the site are more subtle and they’re more blue, and different shades of blue so that they’re not standing out as much on the site. We want to make sure that that color stands out and is only used on certain things that you want to pull out and you want people to do, so that you’re not overusing it, and then it becomes diluted and not as important.

After you’ve picked your color scheme, you’ll move on to the next important factor of the web design which would be choosing a typeface. There are tons of different typefaces out there. We typically use Google Fonts for websites because they’re easily accessible and everyone can see them on their browsers.

Choosing fonts

There are different types of fonts – you could choose a serif, a sans serif, scripts, and then there’s variations of those fonts.

A serif font is the ones with the little feet at the bottom and at the tops of letters. Those are typically thought to look more serious, and traditional, and more sophisticated.

The sans serif, on the other hand, are the ones without the feet, and they’re flat and more modern and clean looking. These fonts are more streamlined and considered for better use on the web for viewing and reading.

Scripts are what we consider to be a cursive and a handwritten font. Those are sometimes used on the web for accent fonts or fancy call-to-actions on the site, but we don’t use them as often because they are harder to read.

The serifs on web are harder to read because the resolution and the way serifs sit on the screen on a lower resolution make them fuzzy and harder to read.

When choosing a font, you need to think about whether you want to use all caps, lowercase, or if you want to do a combination of those.

When you use all caps, you give off a more serious tone, and more demanding. When you’re using lowercase letters, it’s more soft, and friendly, and welcoming.

You don’t want to come shake hands with a giant capital letter, you would rather shake hands with lowercase letters, because they’re more friendly and welcoming.

I typically, for a company like CAT, would want to use all caps because they’re serious, they’re an industrial firm, and their equipment is heavy – so that implies a heavier font.

It’s okay to mix fonts on the web, so you can do some caps and some lowercase and combine them in a way that works for that client.

Heirarchy of H tags

After you’ve chosen your fonts, you’ll need to choose the hierarchy of your H tags. So I typically use a site called grid lover, and you put in the size of your first H tag, which would be your H1, and then it will scale out the other sizes and you can adjust that.

You can copy those and put those right into your CSS, so that everything is consistent and the spacing above and below each header title would be the same throughout the site and everything will be consistent.

And that’s called vertical rhythm!

Creating graphics

After you’ve chosen your font, you’ll move on to choosing your images and creating your graphics, and infographics.

These are the important elements of the site to make it look pretty and more presentable, and that will make users enjoy looking at your site.

When placing images on your site, you don’t want to just plop them on the page. You have to think about where they should go.

You should think about the colors of the images, so say you have an image that is super bright and sunny, and then another image that’s dull and not as sunny. You would want to make sure that you make the image saturation and value similar so that they look like they’re cohesive on the site, and the images blend together.

Or you could do an effect to the images, where you take the image into Photoshop, or another program like Canva, and give them a filter and change the saturation so that they match up better.

When you are placing the images on your site, you’re going to want to place them in strategic ways. Say you have a lady that’s looking down. People are going to follow her eyes down the page, so you’re going to want to put a call-to-action right there so that people know, “hey this lady is looking at this button, I probably should click it and find out more.”

You will have to decide whether you want images to be full-width, or if you want them to be cropped and have a style to them, where they have a border and a caption, or no caption, and how they sit next to the text.

If you do a full-width image, you’ll need to make sure that the image looks good on all different devices and not just on desktop. So if a viewer is on their phone, you don’t want them to only see an eyebrow, you want to make sure that image scales down properly so that you see the whole person and you know what the image is pointing to and that it matches up with the text well.

Little details like that help a page convert better, so like before when the lady is looking at the button, people are going to want to click that button rather than not click a button that she’s looking off the page. That’ll keep the viewers eyes on the page.

There are a ton of free programs out there for people to use if you don’t have Photoshop, or a fancy editing program.

You can use Canva, which has templates already made, and you would upload your images to the template, modify the colors and then it would match your brand.

Colors, fonts, and images are all elements that lead to what make a good usability experience. Users should not have to think hard when they come to your site – you want it to be simple and straight forward. They don’t want to feel stupid or lost when they’re on your site, so you have to make sure that it’s very streamlined, and straight to the point.

Content organization

In order to achieve this, the site needs to do a few things. The content needs to be organized in a way that’s intuitive – it lets users know that they know what they’re doing.

For example, on a tax site, say you Google “file my taxes for free,” and a site comes up – you click on the first link, you go to the site, and it looks a mess. It’s gray, boring, and you have no idea what to click on because there’s nothing that’s pulling your attention, so you leave.

You go to another site like Turbo Tax. You click on it and right away it says, something along the lines of, “let’s get started!” You see that giant button at the top that makes you want to read the headline that says, “let us help you today,” or something along those lines.

Then, that assures you that you know what you’re going to be doing – you’re going to get help and it’s going to be simple.

It’s super important that you think this through – you need to make sure that the sitemap makes sense to not just you, but other people that would be viewing the site. You need to lay that out first before you start designing anything.

You would want to put the pages in an order that makes sense to a whole bunch of people. So you wouldn’t want to put blog under services – people aren’t going to know to look under services to find the word blog or find the blog.

You want to make it very clear where things are located.

Your nav bar serves as a way to navigate through the site, so you need to make sure that that’s organized well, and that it’s easy to see on both desktop, tablet, and mobile.

Page load time

Another factor that plays an important role is how fast your page loads. It’s important that your images are optimized for the web, and all your files are compressed and uploaded so that your site isn’t slow and it’s not lagging when someone goes to your site and they have to wait forever – what it seems like – for it to load.

Some free resources that you can use would be image optimum to optimize your images. You just plop your images in there, it’ll run, and it’ll compress them down to a smaller file size so that the images are of the same quality, but they’re a smaller file size.

Another one would be tiny png. It compresses pngs so that they’re smaller and they’re still viewable on your site without being fuzzy and losing resolution.

Keeping all of your CSS in one file is super important for page speed. You don’t want it spread out, or displayed in line with your text. You would want all of it in one file and if it’s possible, to minimize your CSS and make that a file, because that will make your site speed increase.

You can run your site through a page-speed test, for each page, if you’d like through GTMetrix. That’ll give you a breakdown of what’s working and what’s not and items that could be fixed.

It’ll tell you images that you could optimize more, or JavaScript files that are too large that you could optimize, or CSS files that you could combine to make them have a faster page speed.

Think critically about your design

The usability and design both go hand-in-hand. In order to have a good user experience, you’ll need to have a good design and understand it.

The best way to accomplish this is to have a well thought out design and make sure it’s intuitive for everyone.

Also if it’s not in an intuitive way, or laid out nicely, people will think that it’s not trustworthy. Trustworthy is a big factor in converting – if your site looks gimmicky, or cheap, people aren’t going to trust your product, even if it is good.

I have a few tips so that you can create a sound website for both design and usability.

First you want to remember the acronym K.I.S.S., which stands for keep it simple stupid. Make sure it’s simple – don’t overdo it. You want something that’s not super complex, and it’s easy for everyone to use.

Second, you want to make sure you’re using best web design practices. You shouldn’t make all of your text part of your images, you should make that CSS and HTML. It shouldn’t just be uploaded pieces of images plopped together and hoping it will scale down well.

You should create prototypes in Photoshop before you start building so that you know what you have and what you plan on doing before you start building it.

A good plug-in for Photoshop to make sure everything is following the grid would be GuideGuide, and it gives you a set of guides that you can use for your bootstrap plugin.

Third, you would want to test it. You would want to test your site and make sure it works on all browsers, different devices, scaling it down in your browser, and have some other people test it too in case you miss something because it’s easy to overlook something.

You could also test it in UsabilityHub which is super helpful if you want to see if something’s designed well. You can look at things that people have recommended, items that you want to change, and then you can rerun it after you make those changes and see if you get a better outcome.

There’s so much that goes into web design and usability, but when you get it right, you can dramatically increase website traffic.

Thanks for joining us today! Stay tuned for our next video, how to measure SEO success!