Design and Usability Importance.mp3

Speaker 1 Hi, I’m Kelly, and I’m a web designer here at Webpage Effects, welcome to the fifth video and our first live guide series, Design and Usability Importance. We’ve already talked about the basics of 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 do you get people to fill out your forms when a user is given 15 minutes to consume content in, two thirds of those people would rather read something that is beautifully designed rather than something that is poorly designed. It is 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. Fifty seven percent of customers say they wouldn’t recommend a business. What a poorly designed mobile site.

ecommerce

And 40 percent of the users have turned to a competitor site with a better designed 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 one hundred and sixty percent more often on sites optimized specifically for smartphones. So if you go to a site and your site is just optimized like zoom out of your desktop version, you’re going to see that the links are super tiny and you’re not able to click and users are going to stray away from that 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 and 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. 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 picking a dominant color, something you don’t just randomly pick. You have to put a lot of thought into it, whether that what that color means, what that color is going to imply and what that color is going to make people do. We you think of Coca-Cola, for example, the red makes you feel love and excitement. And that’s exactly what Coca-Cola want 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.

building a business online

In this case, think of all the stores and products that use the color Red Hynde’s HSM, 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’s a few resources you can use to do that. One of my favorites would be Color by Adobe. Anyone can go on the site. You don’t have to have like Adobe Account or whatever. You can go on there, pick your colors and super flexible. You can search through color schemes that have already been created. You could search like cotton candy and I’ll pull up like blues and pinks and different variations of combinations.

internet marketing

People at 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 like monochromatic or complementary. And then I’ll give you variations of those colors. I typically start with like one of those color palette and then I’ll modify the colors to match more with 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 webpage effects like, for example, are called 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. 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 like overusing it. And then it becomes diluted and not as important.

digital marketing

After you pick your color scheme picked out, you’ll move on to the next important factor of the web design, which would be choosing a typeface. There are tons of different typeface out there. We typically use Google fonts for websites because they’re easily accessible and everyone can see them on their browsers. They’re different types of fonts. So you can choose a share of a sans serif scripts. And then there’s variations of those fonts. Azera font as 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 sand serves, on the other hand, are the ones without the feet and they’re like 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 script or cursive and a handwritten font. Those are sometimes used on the web for like accent, fonts or fancy call to actions on the site.

digital marketing strategies

But we don’t use them as often because they. Are harder to read on the Web. A typical font chosen would be the sans serif, and then you would choose variations of that to make your hierarchy. The serifs on web are harder to read because the resolution and the way serves it on the screen on a lower with the lower resolution to make them fuzzy and harder to read. When choosing a font, you need to think about whether you want to use all caps lowercase and then 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. Like you don’t want to 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 like a company like Cat, you would want to use like all caps because they’re serious. They’re an industrial firm and they are like heavy, their equipment is heavy. So then that implies towards like the heavier fonts, it’s OK to mix fonts on the web so you can do some like caps and some lowercase and combine them in a way that works for that client. After you’ve chosen your font, you’ll need to choose the hierarchy of your H tags. So I typically use a site called Grif Grid Lover, and you put in the size of your first each tag, which would be each one, and then it’ll scale out the other side and you can adjust that and then you can copy those and put them right into your success. So then everything’s 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. After you decide on your font, you’ll move on to choosing your images and creating your graphics. These are the important elements of the site to help make it look pretty and more presentable. And that’ll 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 like, say, you have an image that is super bright and sunny and then another image that’s like dull and more not as sunny. You would want to make sure that you make those image saturation and values similar so that they look like they’re cohesive on the site and the images blend together. Or you could do an affect to the images where you take the image into Photoshop or another program like Cannava 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. So you have a lead that’s looking down. People are going to follow her eyes down the page that you’re going to want to put a call to action right there so that people know, hey, this lady’s 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 with or if you want them to be cropped and have a style to them where like they have a border and a caption or no caption and how they sit next to the text. If you do a forward image, you’ll need to make sure that the image looks good on all different sizes and not just on desktop. So like if a viewers on their phone, you don’t want them to like only see an eyebrow, you want to make sure that image is scaled down properly so that you see the whole person and you know what the image is pointing to and it matches up with the text. Well, little details like that help a page convert better. So like like a 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. And 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 Kambah, 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 straightforward. They don’t want to feel stupid or lost when they’re on their site. So you have to make sure that it’s very streamlined and straight to the point. 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. So you Google file my taxes for free and a site comes up, you click on the first link, you go to the site. It looks a mess. It’s gray, boring, and you click on it. You have no idea what to click on because there’s nothing that’s like pulling your attention. So you leave, you go to another site like Turbo Tax, you click on it right away. It says something along the lines of let’s get started. You see that giant button on the top that makes you want to read the headline. It says, Let us help you today or something along those lines. And then that ensures you that you know what you’re going to be doing, going to get help. And it’s going to be simple. Other factors to consider and usability would be how the site map is set up. It’s super important that you think this through. Like you need to make sure that the site map makes sense to not just you, but other people that would be viewing the site. You need to lay that out first before you even start designing anything. You would want to put the pages in an order that makes sense. A whole bunch of people, so like you wouldn’t want to put a 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 to make sure that’s organized well and that it’s easier. It’s easy to see on both desktop, tablet and mobile. 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 and it compresses PNG so that they’re smaller and they’re still viewable on your site without being fuzzy in what? Losing resolution. Keeping all your costs in one file is super important for your speed. You don’t want it like 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 costs and make that a file, because that’ll make your site have more speed, you can run your site through a page speed test for each page, if you would like through metric, and 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 txt files that combine to make them have a faster page speed. So usability and design of your site both go hand in hand. In order to have a good user experience, you’ll need to have a good design and to understand it, the best way to accomplish this is to have a well thought out design and make sure it’s intuitive for everyone. If you have content play sporadically on the site, it’s going to be harder for users to know where they need to go. So you need to think that through. Also, if it’s not in a intuitive way or laid out nicely, people are going to think that it’s not trustworthy and trustworthy is a big factor in converting. If your site looks gimmicky or like cheap looking people aren’t going to trust your product, even if it is good. I have a few tips so you can create a sound website for both design and usability. First, you’ll want to remember the acronym Kice, which stands for Keep It Simple, Stupid. Make sure it’s simple. Like don’t overdo it. You want something that’s not super complex and it’s easy for everyone to use. Second, you will want to make sure you’re using best web design practices. You shouldn’t make all your text part of your images. You should make that success in HTML. It shouldn’t just be uploaded. Pieces of images plop together and hoping it will scale down well. You should create prototypes in Photoshop before you start building. So you know what you have what you plan on doing before you start building it. A good plug in for Photoshop to make sure everything’s falling. The grid would be God guide and it gives you like a set of guides that can you can use for your bootstrap plug in. Third, you would want to test it. You would want to test your site, 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 missed something, because it’s hard, it’s easy to overlook something. You could also test it. And Usability hub, which is super helpful if you want to see if something’s like designed well and 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 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 Success.