A.K.A Testing Your Web Design – How to be sure what we paid for is good when we are not experts.
Summary:
A common question we get from website owners with existing sites is whether their site is any good. A new website design can be a big investment and they want to be reassured that their money was well spent. This article describes seven steps you can use for testing your web design for quality.
1. Compare to your branding.
It is important to think about your website as your online storefront. The website should represent your company and not the designer’s vision. The styling of the site should feel familiar to brand elements of your business. Not a separate look.
Make sure your logo is prominent and easy to read. Include tag lines and other images or text that help users recognize your business, before you had the new website. You may not be able to match colors online perfectly to print colors. Some specific fonts used in print materials may not be available online. But you should be able to find close substitutions
We have found that some of the most successful website projects happen when the business has taken the time to create a branding guide. The style definitions that make up your guide give very specific direction to your web designer. If online substitutions are needed you can decide ahead of time and be prepared for what needs to go on your web pages.
2. Do the images match the rest of the styles?
There is nothing wrong with using stock photography on your website. Some businesses do not have obvious opportunities for a photo shoot. But they still need some imagery to represent them. You can use your branding guide to help define what types of images work with your brand.
When picking photos, we would recommend images that use a similar color palate to your brand. For example, if you have an image that uses a bright blue color for the background. This is the only blue used on the webpage. It will really stick out. And if its a stock photo, you won’t want that.
Or if you have photos of different styles, especially on the same page. For example, you might have a banner image that shows a photo of a landscape. But the rest of the photos on the page are pictures of people or clip art icons.
3. Minimize Font Variations
Fonts are one of the things that look best on screen if you keep them simple. Best practice is to have one font style for headings and one for the body text. Within those 2 styles, try to keep the different size variations as few as possible. This is one of the areas of branding where your online brand should not be that far off from your print pieces.
A design will look very cluttered if every piece of text on the site has its own style. Using the the 2 font style rule helps visitors read your web pages easier. Keeping the font styles consistent allows the eye to group text together easier. If a site feels easier to read to the visitor, the site seems faster. They are more likely to return to a site that is easy and fast.
4. Links and Clicks are Easy to Find
Visitor will not take time to hunt for things on your webpages. If there is something you want people to click on, make it obvious. Remember no one is there to explain to users how to use their site. They have to figure it out on their own.
You will want your links and button clicks to pop out on the page. Visitors scan for the clicks. The color should be a contrast to your regular text. Buttons should stand out from other content or photos. Easy to find is easy to use.
Here is a good test. Have someone who didn’t work on the site look at the page. Give them 3-5 seconds and ask them to count the numbers of links and buttons on the page. See if they get it right. Pay attention to what they miss.
5. What is the brightest item on the screen?
Pair the brightest colored item on the screen with the motion of scrolling your webpage. You will create the most visible item on your page. Some of the same science behind the search lights used to highlight car sales. Knowing this is how the human eye works, use it to your advantage.
Pay attention to the brightest colored items in your page designs. Are they important content? Like buttons you click to create a sales lead? Or is it a stock photo or a background color? Make the brightest items also the most important content. The “buy now” button or “contact us”. Its easy to tweak the styling of a button to make this happen.
When reviewing your design, I would be more worried if I could not identify a bright item on the screen. Or too many bright items. If the content seems to all the same colors and same level of brightness.
Here is an interesting test. Take a screen shot of your webpage. Use the photo editor on your device to change the colors to only black and white. Does your design still look good? What is full black and what is only white? Are those the primary content items you want people to see?
6. Measure your White space
White space is something I am always trying to emphasize with our team. White space or absence of content helps visitors understand your content. The space helps organize the page and gives eyeballs a place to stop and land when they scan your page. Because web visitors do a lot of scrolling these days, if White space is off, you notice it.
Easiest way to test this with your design is to get a ruler out. Hold the ruler up to the screen while you are looking at your web page. Check to make sure edges are straight, especially on the left side, as you scroll down the page. Make sure space between content on the page is consistent. Look at the size of content elements. For example, you will want all buttons styled the same way to also be a consistent size.
7. Don’t forget testing web designs in Mobile View.
Take the time to visit your own website on a mobile device. I had one Customer actually take it one step further. Trying to access content on their website, while on their phone. Sitting in a grocery store parking lot. Since this was a likely scenario for their users, she wanted to see how easy it was. The test resulted in major changes to their website.
Many businesses under estimate how many visitors will see their site on mobile. Don’t let this lack of attention to detail be the reason you lose a customer.
Testing Web Designs- Tools you can use to gather input.
- Heat Maps = Crazy Egg – We use this tool a lot. This will be useful once the website is live. The reports will give you visual evidence of the performance of your design.
- A/B Testing = A/B Testing is great if you have two elements or designs you are trying to choose from. Or you are trying to test if a change in one area of your page will improve performance. Google has a tool. There are lots of others to choose from. Here is a list to review.
- Cross-Browser/Responsiveness = Check out how your site is working on other devices and browsers. Here is a list of tools you can use to check your mobile design.
Would you like to learn more about website design and how it effects performance? Check out our upcoming webinar.
