Recently in User Interface Category
Picking the time
There’s been a bit of interest in a time picker control from Maxime Haineault. Nice piece of work but I for one hope this particular interaction style doesn’t catch on.
As a user I have to move my mouse halfway across the screen aiming at little boxes in order to input the time. If I decide to change that time then I need to go back across the screen aiming at other boxes. Hello carpal tunnel. Further, I could be alone in this but I don’t find the control simple or intuitive at all. I’d probably rather be typing.
Not wanting to simply disagree with the merit of that format for a time picker and leave it there, I thought it would be sensible to provide something of an alternative. So, in the spirit of shamelessly ripping-off a UI convention from elsewhere I’ve coded up the standard OS time selector (with the exception of the little up/down arrows on the right-hand-side.)
Have a look at the example time picker. Click on the hours, minutes, seconds or AM/PM and use your scroll wheel.
Sure, I could probably get roughly the same result using four select boxes (scroll wheel worked on a select box last time I checked) but what would be the fun in that?
Constraints
In the physical world designs are bound by the constraints of space, time, money and the laws of physics.
The impact of the physical laws on creating an object is inversely proportional to the technological advancements available to the designer. Leonardo may have been able to conceive of a flying machine but the actual flying machine, that people could use, took some four-hundred years appear.
In some ways this is a good thing.The required investment and risks associated with the physical world means that, for example, most people will not try to fly a helicopter with no training. It also used to mean that objects were made by people who knew how to make those objects because they did that for a living. You know, cobblers, carpenters, tailors… engineers. Now though, we live in an age of empowerment where any monkey can go to the local hardware store and purchase the means to create a real disaster. We also live in a time where the requirements on the things we create can sometimes have little bearing on their intended use so we end up with things like beer with added vitamins and a nine button mouse. Luckily, the constraints of space, time, money and the laws of physics still prevent Average Joe from going ot the local hardware store and purchasing the means to destroy the solar system.
These physical constraints do not not apply to software… well, they do (things such as memory and processor limits), but not with anything near the same degree of impact. This added a degree of importance to the degree of training that professional programmers required. Most people would fear for their lives if attempting to fly a helicopter without adequate training. If somebody is writing software for the helicopter though, that connection is not so easy to make.
It’s also easy for anybody to design the user interface for software without knowing anything about user interface design. Visual development environments made it easier to create ridiculously complicated desktop applications. The investment in creating a user interface is small and often the thinking is that easy-to-do equates to should-do.
Java Swing provides an environment for creating a user interface that is intended to make sense to Java programmers. As it turns out, Java programmers (and indeed Java language designers) are not the best people to be deciding on the design of the user interface and moreover are probably not the best people to be deciding on the programming model for writing them at all.
Java failed on the client. Instead the ragamuffin collection of HTML, CSS and JavaScript used for the web succeeded. There were good reasons for this.
The web as HTML over HTTP has always been strong for document delivery and interlinking between those documents. It is good for text content delivery, albeit in a paged, one-large-chunk-of-text-at-a-time, manner. With JavaScript, the content chunking can be controlled so that content delivery can be more finely controlled and more reactive (or proactive) to the needs of the user.
I think the content-oriented nature of the web is leading us to better user interfaces.
Programmers who do not know JavaScript complain that the language sucks. Programmers who do know JavaScript compain that whilst the language is elegant and powerful (warts aside) the API for controlling the UI (the DOM) sucks.
Yes, the DOM sucks. However, the suckiness of the DOM has actually imposed a useful constraint on programmers. If the web had from the start been really good for creating applications then there’s a good chance we would have had more applications and less content. Further, despite its shortcomings, CSS has helped to shift custodianship of the presentation layer away from application programmers and GUI toolkit developers.
So… much as I might bemoan the weaknesses of the DOM I actually think that the difficulties that it has imposed may have actually played a part in reducing the amount of administrative debris attributable to JavaScript on many websites.
With that said, as the emphasis on good usability on the web increases I think we’re all about due for some unshackling. My only request would be that people actually learn how to fly before jumping into that helicopter.
Intentionality & adverse effects
After my post on perceived speed the question was posed to me as to whether it was possible for a response to a user action to happen too quickly.
The classic example given here is a CSS and/or JavaScript powered dropdown menu which triggers immediately onhover or onmouseover causing problems for users as they move their mouse past the menu - triggering it to open unintentionally. The solution occasionally offered is to place a delay on the menu opening.
The user does not want a delay on the menu any more than they want their computer to take a long time to boot up or to have a slow internet connection. I’m happy to be proved wrong by some actual user testing on this but I don’t think it would make any difference to the point I’m trying to illustrate. The user has not asked for a delay. No matter how cute the transition, there is ultimately no pleasure in waiting for a menu to appear, time and time again.
The delay on the menu in such an instance is put in place to avoid having the UI respond to a user action in a way that the user did not intend. It is imperfect in that it does not actually try to decide whether the user wants the menu to open or not but instead says “if the user keeps the mouse of the menu for more than this amount of time then we assume that they intend for the menu to open.”
In technical terms - a guess.
The problem with an unrefined guess is that it’s a shotgun approach. It might hit the target but there’s likely to be collateral damage or, as they call them in pharmaceuticals, adverse effects.
This happens too often on the web. Users have been slipped roofies by way of popup windows, broken URL’s, back button trickery, slow pages and a plethora of other embarrasments that were dreamt up by people thinking that they were only solving the problem at hand when in fact they were simultaneously creating other problems. All too often, JavaScript has been one of the tools used to do so.
The problem for JavaScript runs deeper too, with the programming environment (the DOM) inflicting pain on programmers at the other end. Here’s a cute one from IE that you may have seen:
document.body.onbeforeunload = function() {
alert("about to unload");
}
The onbeforeunload event will actually fire in IE if a pseudo-protocol link href="javascript:" is clicked or one is pasted into the address bar. The problem with this, and with too many DOM quirks in various browser is that it goes against how the programmer rightly thinks what they do influences the universe. It goes against intentionality - just like the exampes inflicted on website users. Links lead to content - having the browser open a popup window is a side-effect, introducing effects on the user that they did not ask for. Any JavaScript developer can feel a real sense of empathy for their users on that point alone.
So, back to the dropdown menu, what’s a better alternative than a delay?
One option is to poll the mouse position to determine mouse velocity. Something like this:
(function() {
var nav = document.getElementById("nav"),
vector = [],
lvector = [],
velocity = 0,
t,
interval = 25,
threshold = 0.5,
fire = function() {
// display the dropdown
},
load = function() {
vector = [];
lvector = [];
// remove the dropdown
return function() {
fire();
trigger = function() {};
};
},
trigger = load(),
sample = function() {
velocity = vector[2]/interval;
if (lvector.length == 3) {
if (lvector[2] === vector[2] || threshold>= velocity) {
trigger();
}
}
lvector = [].concat(vector);
};
//
nav.onmouseover = function(e) {
document.onmousemove = function(e) {
vector[0] = (e || window.event).clientX - (lvector[0] || 0);
vector[1] = (e || window.event).clientY - (lvector[1] || 0);
vector[2] = Math.sqrt(Math.pow(vector[0], 2) + Math.pow(vector[1], 2));
};
t = window.setTimeout(function() {
sample();
t = window.setTimeout(arguments.callee, interval);
}, interval);
};
//
nav.onmouseout = function() {
document.onmousemove = null;
clearTimeout(t);
// re-cock the trigger
trigger = load();
};
});
The example above helps to reduce a “delay when the user doesn’t want a delay” effect at the expense of introducing more work for the CPU. The reader may, or many not, find this an acceptable trade-off in individual circumstances.
Note that this code currently handles the mouse velocity only. It would need to be extended to correctly handle a dropdown menu completely. I may provide an update when I get time.
This example is provided in a slightly altered form as a download: nolib.velocitor.js.
Perceived speed
Ten years ago my most commonly used operating system was BeOS (with *nix second and windows third). I’ll try not to wax nostalgic about that particular OS (as much as I’d like to) but I vaguely remember a quote from the Be CEO Jean-Louis Gassée that it was not so much the actual speed of the OS that mattered but the perceived speed of the OS to the user. Of course, research into thresholds for computer responsiveness goes back at least to Robert Miller’s 1968 paper Response Time in Man-Computer Conversational Transactions but the quote from Gassée was more about the way that the BeOS had been built to in such a way that the UI responsiveness was maintained regardless of what other processes were running at the time.
Still, whilst responsiveness thresholds have been known for a long time, it took my first dual processor system for me to be able to use Windows without the frustration of random processes temporarily locking-up the UI. Anybody who ever used Windows 95 will surely remember the dreaded “floppy drive selected UI lockup.” Usually what would happen is that if the floppy drive was accidentally selected in the drive dropdown then the UI would lockup whilst some other part of the OS did the disk seek. Not a good user experience.
The same problem is still apparent today in devices ranging from expensive LCD and plasma televisions, mobile phones and set top boxes to ATM’s… given a selection of ATM’s my choice is always the one that isn’t St George. Whilst this aversion could partly be attributed to some other quirks in the UI, I think the primary reason is that these St George ATM’s respond to my key presses slow enough that I’m often never sure if it’s registered my input or not. Not a good user experience. Trying to use one of these ATM’s is not only slow but also annoying in the same sense that a poorly dubbed movie is annoying.
Web browsers have usually been reasonably good at feeling responsive even though it often takes a long time for them to fetch the actual UI and content of the site I’m trying to visit. It’s been a long time since I’ve used mosaic so I can’t be sure but every browser I can remember using has usually kept the UI responsive and provided feedback to me for what it was doing. There have been exceptions to this in most browsers I’ve used but in general, one of the aspects I’ve liked in every browser I’ve used is that if a website is loading too slow, I can hit stop, refresh, or simply leave the site and go elsewhere.
So, browsers have usually done this stuff pretty well by default. The websites they serve have varied wildly in how they handle things internally though. Hidden PDF downloads, Flash loaders that bear no relevance to how long things will actually take and poorly implemented iframes (the browser says something is loading but nothing is happening) are some of the offenders. JavaScript code has been another offender, not due to the nature of the language itself but simply because it gives the power to create interaction other than page loads, which means that good UI responsiveness and feedback of the browsers can be subverted.
So, to JavaScript then. What are some things that a UI developer working in JavaScript and interacting with the DOM can and should do to maintain UI responsiveness? I’m going to look at this in terms of the three basic thresholds from Miller’s paper.
One tenth of a second is the limit for the user to think the system is responding immediately.
This generally means that ajax requests will usually not feel instantaneous unless you are caching, memoising or predictively prefetching the responses.
Ajax requests aside, if a JavaScript event handler has to do some processing you should handle the processing after providing feedback to the user. So, instead of this:
something.onclick = function() {
// do some intensive processing
alert("UI response");
}
It’s better to do this where possible
something.onclick = function() {
alert("UI response");
// do some intensive processing
}
Of course, processing can often be done well in advance of the event hander being fired in many instances, which is also good. Additionally, whilst JavaScript is single threaded, functional techniques (and setTimeout) can be used to fork processing in terms of how the user perceives the UI.
Selecting the most appropriate event to fire on is also important. In many cases it’s better to use onmousedown than onclick due to the former firing earlier than the latter by something like 80 milliseconds.
Another point is to avoid querying the DOM repeatedly to determine state of the UI. In many cases the current state can be modelled in code - many UI responses are based on simple mathematical formulas (or can be approximated) which means it’s possible to avoid repeatedly, and expensively, querying DOM elements for their current state. In Gang of Four terms we’re basically talking about a mediator.
1.0 second is about the limit for the user’s flow of thought to stay uninterrupted
If the UI is responding to user action somewhere between one tenth of a second and one second then the user’s flow will not be interrupted, but they will not feel that they are acting directly on the system. For many UI controls like tabs and accordions I’ve found it important to have the response right down near one tenth of a second important. This also applies to image galleries - whilst a cross fade can be cute, it is cutting into the time for the user getting the response action they want - a long transition for user initiated switches will diminish the user feel for acting directly on the system. Transitions longer than one second should be avoided for anything user initiated.
Personally, I tend towards user initiated actions responding within one tenth of a second and either completing immediately or transitioning to completion in under one second.
10 seconds is about the limit for keeping the user’s attention focused on the dialogue
For anything above one second, the user needs to know that the UI has registered their input and is doing something. This applies whether the delay is caused by processing or by the fetching of data in some ajaxy fashion. I personally find that one second doesn’t feel quite zippy enough to make a loading indicator of some sort useful but the specified time would need to be tested for a given application. For the purposes here I will be using half a second.
One way to approach the crossover into loading-message-required territory would be something along the lines of this (incomplete) code fragment:
(function() {
var showLoader = function() {
// some code to show the user that something is happening
};
var hideLoader = function() {
// some code to hide that same loader
};
something.onclick = function() {
var t = setTimeout(showLoader, 500);
// a call to some myapp.doProcessing function that
// accepts a callback for when it completes
var myCallback = function() {
// just in case we return immediately,
// stop the loader from appearing
clearTimeout(t);
// remove the loader in case it was there.
hideLoader();
};
myapp.doProcessing({"data": ""}, myCallback);
};
}());
In the example above, we will display a loading message if the UI control hasn’t finished after half a second. If the loader is displayed, it is removed as soon as the UI control returns.
It should be noted that single threading means the accuracy of timers in JavaScript is inversely proportional to the amount of processing that is happening. So, if a transition needs to complete in under one second it’s best to shoot for something less than one second. In addition, it’s important to understand how timers work and the difference between setInterval and setTimeout but instead of also covering that here, I’ll refer to a post from John Resig.
In the example above, adding a further timeout at 10 seconds to handle longer response times (and possible errors) is an exercise left up to the reader.
More than 10 seconds
Anything that takes more than ten seconds will need to allow the user to interact with some other part of the UI whilst the user input is being acted upon. There are a number of ways to achieve a file upload progress bar but if it’s going to take more than ten seconds, the UI should allow the user to get on with it and let them know later when it’s done. Modeling this on browser download managers would be a good start.
Knowing how long it should take to generate a response
There’s a large amount of variation in responsiveness for different users depending on their individual connection and configuration. If you’re profiling the performance of your UI then for any given action, it’s possible to have a baseline responsiveness. From there, you’re able to compare that baseline to something like the page load time for the given user, and adjust the feedback provided by the UI accordingly. Comparing the page load time would be something along these lines:
(function() {
var baselineLoad = 1800,
startTime = (new Date()).getTime(),
diff;
window.onload = function() {
diff = baselineLoad - ((new Date()).getTime() - startTime));
};
}());
The diff will give some indication of the performance of the client relative to tests. In addition to this comparison, an average of response times for specific UI components could be kept throughout the page session. That is also left as an exercise for the reader.
Hopefully there were a few useful tips in there around UI performance and applying responsiveness thresholds to JavaScript powered UI’s.
