Website Usability Talk

Recently, my coworkers Chris De Jong and Bryan Larson and I gave a talk down at The Two Twenty. We had the privilege of being the presenters for the first installment of Saskatoon Design Meetup - a group that is currently slated to meet monthly and talk about all things design. It's no secret that I have an innate fear of public speaking... I tend to get flustered, speak quickly, get red-faced, and get this weird top-heavy feeling. So needless to say, I was both excited and dreading the idea of giving a presentation.

However, after all was said and done, I managed to jump through my section of the presentation without any of this, in fact, I experienced more of the above symptoms during our dry-run than during the actual presentation. I'd like to thank everyone that gave me support before the presentation - it was much appreciated.

The Talk

We broke the talk into three parts:

• Business (Chris' bit, green slides)
• Design (Bryan's bit, orange slides)
• Development (My bit, grey slides)

Chris' section mainly focused on:

• Ensuring you have a plan. "If you fail to plan, you plan to fail"
• Build things for your target audience. Research your target so that you are delivering what they want or what will be useful to them.
• Creating personas for use-cases.

Bryan's section talked about the different stages of the design cycle for him and how it played out with our latest project (the redesign of our corporate website). He also talked about stock photography vs. custom-made graphics and free vs. paid video hosting.

My section, as you can guess, was about the development portion of the project. However, instead of talking about my coding practices during the first stage (the initial development) of the project, I decided to focus on what took place POST launch.

Technological Upgrades

After the initial launch of our website, we were required by upper management to incorporate a corporate-branched version of the popular .less CSS library. If you've never heard of .less, it is a compiled CSS library that allows you to write custom functions, use mixins, declare variables, and do mathematical equations that get compiled down into a regular CSS file. If you haven't heard of .less, you may have heard of it's "rival" SASS. From what I've heard, both are fairly similar in their functionality. Either way you go, you should check compiled CSS out, its pretty sweet.

Now since I had to change the site to use different CSS anyways, I thought I'd take the opportunity to upgrade our website to be HTML5 compliant. I got the knowledge required to build an HTML5 page from the book: "Introducing HTML5 (2nd Edition)" by Bruce Lawson and Remy Sharp. The book is very simple to read and gets into the stuff you need to know right away. Best part is, its only like $35 CAD.
In order to ensure what I was putting out there was in fact HTML5 compliant, I made use of a couple of online HTML5 compliance checkers. In addition to ensuring your code is up-to-snuff, they check to ensure you not forgetting to do things as well (ex. Adding an 'alt' tag to your images):

• http://html5.validator.nu
• http://validator.w3.org/

Increasing CTRs and A/B Testing

As with any company on the internet trying to make money, increasing the number of interactions with your call-to-actions is very important. But before you can improve your CTR, you need to know how well your performing currently. Google Analytics is very useful at tracking button clicks (if you have it set to do so). Chris (I believe) also had another suggestion. He had heard of this site called CrazyEgg, a web tool like Google Analytics that gives you detailed graphical reports of where users are clicking on your site. For us, Heatmaps of where people are clicking were useful but we made the most use out of Scrollmaps. If you are unaware, a scrollmap shows where visitors who come to your page see the most. If you see the bottom screen from the pic above, you'll see the bright yellow/white area. That is where people see the most, and the darker areas are seen far less.

When it came to increasing our CTRs, we noted that on the first page we wanted to improve that the call-to-action was in the darker area of scrollmap. This helped us create an appropriate design with a better button layout in mind.

Next was to actually test a new set of page variations. Google has built into Google Analytics a section called "Experiments". It allows you to setup an A/B test and see the results within Google Analytics (If you've NEVER heard of A/B testing, read this). The only things you need to setup a Google Experiments test are:

1. A website using Google Analytics
2. A page you want to improve
3. At least one variation of the page to test
4. A Google Analytics goal for the test to track results against

As you can see for our test we ran two variations against the original. The difference between the variants is the text on the call-to-action. By looking at the "compared to original" column we can easily see that putting the button in the areas seen by consumers has a very large impact on the number of clicks a button receives (surprise! surprise!). From there we can see that the text in A was highly favored over B.

Remember, when running an A/B test simple variations, the more drastic the change, the longer it requires to get an accurate result. Here is a simple calculator to give you an idea of time lengths: http://visualwebsiteoptimizer.com/ab-split-test-duration/

Search Engine Optimization

SEO, for the uninitiated, is tweaking your website so that it sits as close to the top of a search engine's search results as possible. Since web technologies and standards are changing constantly, SEO is probably one of those things that I'm sure everyone will be battling forever. Not being an SEO expert myself, we made use of a tool called WooRank.

WooRank programmatically checks your website for many of the things that major search engines use to help determine the validity of your website. The site grades you on many different factors that can increase your SEO ranking and others that are nice-to-haves or old SEO factors that are simply good practice. In addition to that, WooRank also gives you an idea of how your website is stacking up from a mobile perspective, social media integration, and security. The service isn't free but you can generate a free report for your website once per week.

Other Useful Tools

Web Page Test
This site, while not pretty, is another site that programmatically evaluates your website. This time its for page load times, caching, CDN use, etc. All those fun things that a web host needs to think about.

UsabilityHub
A nifty Karma-based tool that allows you to submit your designs to be scrutinized by different people. You can do 5-second tests, click tests, and nav-flow tests. By completing tests for others, you earn slots for others to test your designs. During the presentation, one question we had was "how do you determine if your designs are good?", this can help with that. The feedback I've received on it has been pretty decent so far.

UserTesting
While we didn't use this too for this project, I've used it in the past to help us come up with designs for product redesigns. You can have people connect to your site and complete a number of tasks. While doing so, the software is recording their screen session as the user speaks into their microphone. I've had some FANTASTIC feedback from people using our products for the first time. But take that with a grain of salt, because you can just as easily get really bad responses. However, we've submitted the few really bad ones to the powers that be and they gave refunds. The users are paid to do the service, so its in their best interest to give meaningful feedback.

I hope any of these tips/tools can help you with your website improvements. They sure helped us.

Interactive HTML5 Video

So a good friend of mine who does video capture/editing for a living hit (Adam Kitter Media) me up the other day asking about interactive videos. In his opinion, they are the future of video online. Based on things I've seen online, I do not disagree. So he was asking me if I'd be interested in perhaps doing some of the programmatic work. Having no experience with video, I said I'd have to do some research on it. However, what I could say with certainty at that point was that there are two main video formats right now: Flash and HTML5. Since Flash is slowly being phased out, I told him the way to implement it should be HTML5.

Like video, my experience with HTML5 was almost zero so I had to learn some of things required. The first thing I learned was that putting a video on a page with HTML5 is very easy! Honestly, I spent more time trying to locate a video file in .mp4 and .ogg on my computer than getting the thing to work.

Code required to play a video in HTML5:
< html>
    < body>
        < video id="theVideo" width="480" height="360" controls="controls">
            < source src="fileName.mp4" type="video/mp4" />
            < source src="fileName.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        < /video>
    < /body>
< /html>

The keen observer will note, that there are two video files within the video tag above. In the perfect world, one file format would work for all browsers (hehe or there would one browser to rule them all), however we do not live in a perfect world and not every browser supports all file types. As of this writing, the HTML5 video player supports three file types: MP4, WebM, and OGG. A combination of two of those file formats should cover all the major HTML5-supporting browsers (IE 9+, FF 4+, Chrome 6+, Safari 5+, and Opera 10.6+). If I use the code snippet above as an example, Safari loads the .mp4 video just fine, but Firefox does not and it falls back on the .ogg file. If the browser supports none of video files or does not support HTML5 video, you will get the error message.

The code snippet above isn't very interactive (minus the play/pause button), so I began looking for ways to move about the video to make it "interactive". For a first-pass implementation, I decided to create a set of "buttons" that allow the user to jump around the video (read: colored divs with onclick events).

For this implementation, I made use of two important time fields: currentTime and duration (there are others). Both are fairly self explanatory, duration is the length of the video, and currentTime is the time index the video is currently on - both values are seconds as counted in floats.

From my research, I gathered that there are a number of ways to implement the "buttons" I wanted. However, I decided to use jQuery to handle the onclick events. Basically, I had each button adjust the currentTime attribute to a different point in the movie (beginning, 1/3, 2/3, end).

$('#link1').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = 0;
});

$('#link2').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.666));
});

$('#link3').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.333));
});

$('#link4').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = video.duration - 1;
});

Once I had the time index changing working I just slapped a little styling on the buttons and voila! My first pseudo-interactive HTML5 video player. In retrospect, the most difficult of building this was locating a place to host the videos for this blog post.

I still have a ways to go before I'm up to the likes of these videos but at least I have something to look forward to:

• Mercedes
• The Wilderness Downtown
• Survive the Outbreak

My Interactive Video

FYI: The buttons work even if the video hasn't buffered yet, just look at the progress bar.

Jump to Beginning of movie

Jump 1/3 of the way into the movie.

Jump 2/3 of the way into the movie.

Jump to End the movie.

For my next experiment into HTML5 video, I'm going to do some more research into the canvas to see if I can't make the buttons right within the video.