CWS Blog » Usability

Please Your Audience First

Sam Bishop — Wed, 22 Dec 2010 05:54:13 +0000

I want everyone to take a step back from their website. Think about who the site is for and what the objective is. For most business owners and professionals, they look to their website as a sales tool ultimately. While the objectives (generate more leads, increase awareness, educate consumers, etc) might be slightly different, your website is usually providing information to others (as opposed to yourself).

With this in mind, most of us (including CWS at times) design sites and content for ourselves before considering the audience and users. We become so wrapped up in our own content and source material that it becomes hard to distinguish what is actually important to the users of the site. We think about what looks good to us and stop there. Obviously we all want to be proud of our websites but we must be careful not to look past the audience in the process.

By establishing your typical web user/lead/client you can cater to their needs first, followed by your own.

QUICK FIXES

Look at your analytics and figure out where most of your users are leaving and optimize those pages first
Ask your current users/clients if there is anything your website can have to be more useful to them
Spend $39 to have a recorded user session at usertesting.com and find areas of improvement in your site
Take some time to learn as much as you can about your current audience
Don’t assume you know what your users want/need. Ask them!

Q & A

Do users keep calling/emailing you asking the same question?
Provide the answer prominently on your site…in multiple places if necessary. Take advantage of size, color and font weight (boldness) to dictate priority.

Does your audience have an accessibility issue? (ex. you sell eyeglasses so there is a vision accessibility concern)
Based on the example above, you would increase the size and weight of your fonts to cater to your users first. Just because you think the font size is fine with your 20/20 vision, your users will struggle to read the small fonts. Did you check your site’s compatibility with color blindness? As much as 8% of your users could not be seeing the colors accurately.

Are you not getting as many form submissions as you like?
Think about what information is a essential and trim your form to just that. Nothing turns off ANY web user more than a long complicated form with too many fields. When it comes to web forms, less is more.

Is your bounce rate incredibly high? (Users don’t make it past your home page)
Clearly state your call to action on the home page and provide something of value to the user. This can be as simple as highlighting a product/service that is requested most and why it’s better than the competition with links to more information or directly to contacting you.

So again take a step back and evaluate who your site is for. Happy users lead to a happy business.

Goodbye to em’s…Welcome back pixel font sizes!?

Sam Bishop — Fri, 10 Jul 2009 03:52:34 +0000

Happy days to web designers and developers across the world. There have been quite a bit of posts lately about dropping em values as font-sizes and switching back to pixel sizes. This will definitely save headaches for lots of us. Cameron Moll’s article explains some of the reasoning behind this but it makes all the sense in the world to us.

I also heard on a recent Boag World podcast that this would probably be adopted for the host’s company as well in their future developments.

Yes, em values as font sizes will scale the text larger when you set the browser’s text size larger but many modern browsers have replaced the shortcuts for this with page zooming instead. Yes you run the risk of zooming in so much there is horizontal scrolling but I think if your text size is large enough overall you can eliminate this problem.

No need to go into further detail but you can read the full article and listen to the podcast using the links above in the page copy.

What are you other designers/developers going to do out there? Stop using em values and revert back to pixel font sizes? Or stay with the headaches of em valued font sizes?

jQuery for added enhancements

Sam Bishop — Thu, 18 Jun 2009 16:33:53 +0000

I thought I would write a little post about how jQuery can be used for little usability enhancements and effects. Now I would never recommend using jQuery without some prior Javascript knowledge but you can definitely jump right into jQuery if you want. I was fortunate enough to learn enough Javascript over the past year (see DOM Scripting by Jeremy Keith) where I have really been able to use jQuery to its full potential. For those of you that don’t know jQuery is a Javascript library that takes out a lot of the tedious coding that is required in Javascript. The packed version is only 19kb so the added functionality is definitely worth it. Now onto some examples.

One of our most recent clients, MVP Software Inc., wanted to make use of some scrolling and fading elements. Now a year ago I would have used some simple flash elements. I know now that this is just overkill. Using jQuery and the InnerFade plugin we were able to successfully rotate the client testimonials (RANDOMLY) in the header (see the header on any page) and rotate the images on all the module pages (see rotating images here).

Another example would be the simple reveal that is used here for our FAQs for one of our clients. We cannot disclose who this is for but look at this simple function.

$(“h3″).click(function () {
if($(this).next(‘div’).is(“:hidden”)) {
$(this).next(‘div’).slideDown(“slow”);
}else {
$(this).next(‘div’).slideUp(“slow”);
}
});

This simple function basically will reveal the div following immediately after the h3 that is clicked. Once revealed, clicking the h3 again will slide it up and hide it. This makes things very easy if you have the answer wrapped in a div following the h3 that is your question. Now you must make sure the initially hide those div’s in the css but this function would require a ton more code to do strictly in Javascript with using jQuery. This just makes things a lot easier to digest and to code. See the basic reveal in action. UPDATED: 11/2009 for proper graceful degradation. If Javascript is disabled the answer will automatically display.

These are just some basic enhancements to websites that are not really necessary but do add a nice touch. Do I think jQuery is necessary in every project? No. But do I think jQuery can make your life a lot easier when adding simple behavior details to web projects? ABSOLUTELY.