{"id":129,"date":"2006-08-30T11:27:41","date_gmt":"2006-08-30T15:27:41","guid":{"rendered":"http:\/\/unitstep.net\/blog\/2006\/08\/30\/website-usability-and-the-double-click\/"},"modified":"2006-08-30T11:29:29","modified_gmt":"2006-08-30T15:29:29","slug":"website-usability-and-the-double-click","status":"publish","type":"post","link":"https:\/\/unitstep.net\/blog\/2006\/08\/30\/website-usability-and-the-double-click\/","title":{"rendered":"Website usability and the double-click"},"content":{"rendered":"

For most of us who are accustomed to using computers and their interfaces, the use of the mouse (or other pointing device; for the sake of brevity I’ll call them all “mice” for this entry) is nothing short of second nature. Indeed, for many actions required in a modern user interface (UI), a mouse is required, or at the very least, it makes performing the task much quicker. For the most part, the mouse is quite intuitive to learn and use; move it in a direction, and the on-screen pointer moves similarly. The concept of the single-click vs. the double click may also seem<\/em> simple as well, but for newcomers, things can often be confusing; this gets even more complicated when websites change how the double-click functions on their site, and can even confuse experienced users.
\n<\/p>\n

Complicated!?! How?<\/h3>\n

Now, I know what some of you may be thinking – just how can using a mouse be complicated?<\/em>. Well, it’s not that it’s compliated per se<\/i>, but rather that the patterns of usage associated with the mouse take time to learn before they become instinctive. I can’t really remember the first time I used a mouse, (it was many years ago, and I have since filled and emptied my brain many times), but I suspect that I didn’t “get it” right away.<\/p>\n

Take the example of the single-click vs. the double-click when performing actions in an operating system, such as Windows XP, for example. Even if you don’t have problems with fine-motor-skill and control, you still have to learn when to use what – and by learn, I mean to have the distinction ingrained in your mind so that you don’t have to consciously<\/em> think about it when you want to perform some action that requires a single or double-click. <\/p>\n

Will that be a single or a double?<\/h3>\n

The distinction between a single and double-click for actions may seem arbitrary, and, sometimes it is, and sometimes they can even perform a similar action, in different contexts. If you stop to think about it, there really are quite a few rules about clicking<\/a> that can only really be learnt through time spent using a computer.<\/p>\n

Usually, the double-click is used for opening<\/em> things that are represented by icons, at least when they’re on your desktop or in a folder. This is to distinguish between the single-click action on these items, which selects<\/em> them. This is a pretty easy difference to understand. For menus, the double-click usually has no meaning – a single-click opens the item. In this case, there’s no need to select anything, usually, so there’s no need for a separate double-click action to separate selecting from opening.<\/p>\n

For text, a single click places the cursor at the location, while a double click can serve to select the entire word. Notice that here a double-click<\/em> is the action that performs the selection function, and though this is the logical way of setting things up, it’s all part of a set of subtle nuances of mouse use that take time to learn.<\/p>\n

Context<\/h3>\n

But, where things get complicated is on a medium such as the web, where the context is a blend of the two basic situations described above. As mentioned before, with icons, a double-click<\/em> performs the open or “browse to this folder” action. However, on the web, almost all actions are performed with the single-click<\/em>. To follow a hyperlink, the link is single-clicked, not double-clicked, following the guidelines of a text document rather than those of a icon-environment or context. (This also makes selecting hyperlinked text more difficult)<\/p>\n

At first, this makes sense, since most of the documents on the web consist mainly of text. But, what happens now if the link consists not of text but an image, rather like an icon? The action remains the same, but the look has changed, almost to that of an icon – thankfully, most web-browsers change the look of the pointer when it’s over a link to remind the user that it’s a link, and hopefully, they will be adjusted enough to use a single click for all links and not be confused.<\/p>\n

But where things get really tricky and confusing is in modern “web applications”, which are just websites heavily enhanced with JavaScript (or other client-side technologies) so that the experience of using the website is closer to that of a desktop application than a regular website. Some of these applications have really tried to emulate not only the functionality, but also the look and feel<\/em> of desktop applications, resulting in some usability issues with clicking.<\/p>\n

Take this comment<\/a> by about the new Yahoo! Photos site; the user laments about the interface requiring a double-click to open a full-size image rather than just a traditional single-click as on most other websites. (The double-click detection is done via JavaScript)<\/p>\n

I’ll admit that while I was first confused by this action, I thought little of that user’s comment – I mean, how hard can it be to learn a simple action like that? But, after some more thinking, I’ve come to agree with the comment – breaking the pattern of how a user navigates on a website is not a good idea, even if it’s done to try to make your website feel more like a desktop application.<\/p>\n

Change is not always good<\/h3>\n

As long as the user realizes they’re on a website, they’ll continue to use it like one, with single-clicks performing actions. If you’re designing a web-application, you need to realize this, and shouldn’t break this functionality to try to “trick” your user into believing they’re using a desktop application. Even if you provide many warnings and notices, they’ll still be slowed down by this change if they don’t continually use your site – and you always want to keep the learning curve as flat as possible. And, let’s face it – while making interactive web applications is cool and I’m all for it, most people (e.g., mainstream) don’t really care and just want something that’s easy to use.<\/p>","protected":false},"excerpt":{"rendered":"

For most of us who are accustomed to using computers and their interfaces, the use of the mouse (or other pointing device; for the sake of brevity I’ll call them all “mice” for this entry) is nothing short of second nature. Indeed, for many actions required in a modern user interface (UI), a mouse is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,49,50,94],"tags":[],"_links":{"self":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/129"}],"collection":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":0,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"wp:attachment":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}