Wes Cutshall

Internic.ca, the Canadian domain name registration agency, has years going back to 1999 in the dropdown menu for selecting your credit card expiration date. There is no reason to ever allow someone to choose a year that will automatically make the card invalid.

I haven’t done real well keeping up with posting interface design issues I find on websites/software, but here’s one. It’s generally bad to have the same noun/verb/command name in two different places, especially when they do two different things. When creating an email in Thunderbird, the new email menu bar has an “Options” dropdown as well as an “Options…” item under “Tools”. This is not optimal and should be avoided to prevent confusion; “It’s under Options”.

Thanks to Stumbleupon, I discovered this service about a week ago. ClickTale utilizes JavaScript cursor position (X/Y coordinate) tracking to generate both website user interaction “videos” and interaction maps for your website. Where Analytics can tell you a navigation path (page A, then page B, then page C), ClickTale can show you exactly what a user did on a page in between the clicks. You can replay a user’s visit to your website. You see the content of your website with a cursor moving over the site just as the user navigated the website. You can see mouse movement, clicks, page scrolling, and in some cases the characters that were typed into form fields (this only works on some recordings, so I assume it’s browser or OS-dependent, the majority of recordingss showed “?” instead of the exact character) in real time. This service can be very useful for solving website interaction issues, some that you don’t even know you have.

If your conversion rate is low you can see exactly where users quit using your registration or order form. If only JavaScript could also record audio it would be just like being there (“Ahh, too expensive.” <exit>). I tested ClickTale on Naming Force and found it very intriguing to watch people using the website. I focused on users who visited the New Assignment page. You can narrow down the recordings to view users who viewed a certain page, among other parameters. The recordings start as the users entered the website, so you get to see how they navigated to the page in question, as well as what they did on that page.

One of the most shocking things I saw was that most of the users scrolled all the way down the home page, when the home page was the site entry point. With so much talk about Above the Fold I was a bit surprised that the content was engaging enough that most of the users scrolled down the whole home page before using any of the navigation items. Pleasant surprise. As far as conversions on the New Assignment page, I haven’t yet found anything that has lead me to modify the form. Many users visit the page briefly without scrolling, which shows that they simply are checking the site out without much interest in submitting an assignment (yet). Very few users started to fill out the form only to exit the page. Of the users that started to fill out the form and then exited, most of them (less than a handful with my small one-week sample size) seemed to do so after viewing the (very affordable) prices. This has brought up the question of whether the package options should be moved to the top of the page, but in regards to conversions, I don’t see how this would matter one way or the other. The only interface change that has been made at this point due to watching ClickTale videos happened to be on a somewhat unimportant page. But, it revealed some interesting UI issues. Naming Force has a Random Name Generator for users to use. It consists of a large white box with a button underneath. You click the button, repeatedly, to generate random names that appear inside the white box. I watched one user visit this page and click 20-30 times inside the white box, in various spots, never clicking the bright orange button underneath, only to (I assume, frustratingly) leave the page. So, I added “click button below” inside the white box, as somehow it wasn’t obvious to at least one person. Hopefully I’ll find enhancements I can make to some of the more important pages based on these interaction videos.

One of the other features of ClickTale is the Heatmaps. Heatmaps take all the data collected, mouse move, click, scroll, etc and chart them on an overlay of your website. This gives you an idea of where people are concentrating their focus on your pages. Mouse move and click are pretty straight forward, you can see a heatmap of the most concentrated areas (see image below). Scroll reach is another heatmap that might need some explanation. This heatmap maps the percentage of users who scrolled down where the part of the page was in the browser window. This is where the Above the Fold theory can be tested for your site without watching hundreds of videos.

Mouse Move and Scroll Reach Heatmaps

Overall the ability to record user mouse movement and play it back is pretty incredible. The only problem I see with ClickTale is that the prices are a bit unrealistic for the majority of us smaller website owners. In order to view details for pages that are not my top URL on Naming Force, for example, I had to sign up for the subscription that is $290 / month. I don’t see myself continuing this service past a month, which is a real shame for ClickTale. I’d happily pay $30-$50 a month, but I can’t find $290 worth of modifications to make each month to make the subscription worth sticking with. I feel like this service’s business model should be to get users to sign up for an insignificant amount and allow them to “forget” that they have the subscription, or technically just to not care enough to cancel it and allow it to recharge them for years. Users won’t want to cancel a $50/month subscription, just in case they want to look through the collected data in the future, and ClickTale could make a lot more through long-term subscriptions, IMO.

What is it?

In short, jQuery is a JavaScript library that makes it easier to do some of the things you do in JS every time you create a new website. If you adopt jQuery for even one website you will end up adopting it for every website after that.  JQuery changes the way you select and modify HTML elements in JavaScript.

I’ve never been big on JavaScript libraries, since I feel that I can just about write anything in JS that I need. Although I will Google for code from time to time, I’ve just never found much of a need for a JS library. I will admit  that I’ve used Yahoo’s drag’n'drop controls on LeagueAce.com, though. I had heard of jQuery, or at least seen mentions of it in forum posts, but never tried to discover what it was. Then one day, when I had absolutely nothing to do, I Googled “jQuery”. Now, jQuery’s website isn’t the best place to figure out what it does, IMO. I had to read a few blog posts and then read through the jQuery documentation before it made any sense. I think that jQuery could do a much better job of explaining what it is to newbies on their website.

JQuery Example Usage

The most common use of jQuery is to easily select and modify HTML objects in JavaScript. Please note that the following code examples are not tested, are from my memory, and might need slight changes to actually work. Where we normally code “document.getElementById(element).className = class” we can now code “$(element).addClass(class)“. Where we normally have to write a loop in order to get the value of a selected dropdown item with standard JS, in jQuery we can instead code “var test = $(element).val()“. JQuery simplifies the process of selecting the correct HTML element, changing its properties, getting it’s value, etc. JQuery allows you to select elements in different ways, which is one of the coolest features. You can select an element via it’s HTML ID ($(“#id”)), via the tag type ($(“:input text”)), via CSS class ($(“.class”)), etc. JQuery can also select elements based on parent-child relationships. So you could select every text input element inside of a DIV with the ID of “divTest” ($(“:input text”, “$divTest”)), for example. As mentioned in the dropdown menu example jQuery has foreach ability for looping through elements that are selected. JQuery allows you to string together methods so you could make multiple changes to one object by simply adding “.method1(value1).method2(value2)” to the end of your command.

Summary

JQuery has some other features, like transition effects, that are “nice” but far from the reason why I started using it on all my new websites. The simplicity of how you can select HTML elements makes you wish that JavaScript had been written like this from the beginning.

Google AdWords is riddled with interface design faux pas. Below are two images representing one of them. Image 1 shows the page when the mouse is not over the “Enabled” label. Is there anything about “Enabled” that makes you think it might be an interface control? No. Then if you happen to mouse over it it suddenly becomes a custom interface control dropdown. What!? Why? Why would it not just always be a dropdown? AdWords is full of “hidden” controls like this that appear to just be text until you mouse over them. The usability suffers at their attempt to “keep the page clean”. This is what is known as a “false goal”.

Image 1:

Image 2:

I want to start chronicling interface design oversights, or mistakes, that I run into on websites. Hopefully creating these entries can help people to create websites and applications that are easier to use.

Mixing Positive and Negative

On the Petfinder.com’s search page you can select advanced options in the form of three checkboxes at the bottom of the search form. See Image 1 below. The first option is “Only (show) special needs pets”. The second option is “Only (show) declawed pets”. Both of these options are positive in the manner that they are worded. The terminology is positive, even though the option would technically exclude listings if checked. This is fine by itself. What’s not fine is the third option saying, “Exclude pets not recommended for children”. Suddenly we’re using negative terminology, “exclude”. Although all three options exclude listings, two of them say “Only (show)…” and one says “Exclude…”. Why wouldn’t this third option be “Only (show) pets recommended for children”? The inconsistent wording makes the interface confusing.

Image 1: