November 29, 2010
User Experience Design
I have to admit, the active state of links and buttons and whatnot was not something I was interested in setting until recently. For many years I didn’t even give this state a second thought, as the people I learned that from didn’t use it very much, either. What was most important was what “Cool Thing” the links or buttons did on hover.
Never mind that buttons on things in real life don’t change color, or dance around, when you hover your finger over them.
Without doing an intensive poll, I’m pretty comfortable saying that most designers, when creating the look of a webpage, aren’t thinking about what happens when a user actually clicks things, save where the user navigates to or what modal window that action opens up. Or maybe not even that. I believe that for far too long the small favor of giving users adequate feedback has been overlooked. No, I don’t mean we haven’t been complimenting their wonderful webpage-surfing skills, or their hairdo. I mean small reassurances that, when they’ve performed an action, that they’ve actually done it. And the slower it takes the page to load, or reload, once something is clicked, the more this is needed. What I mean is add a subtle, but visible, change to the element the user is clicking during the actual click. In real life and on most devices, when you push a button, it depresses, or changes color, or both, in addition to the tactile response. Of course on a webpage you normally can’t give the user tactile feedback, but you can still change the size, shape, and/or color of a button when the user clicks it.
Now I know some might be thinking “So what? Big deal. How long does a click last, a millisecond? Whatever.” But think about it. As we often have to do as web designers and developers, remember how you feel when you’re on the other end: a user. Don’t you feel a little better about the web experience when you click a button that it actually reacts in some way? Doesn’t it feel good to not be ignored? Really think about it: isn’t a little like being rebuked when you click something and nothing happens, even if your wait for the ultimate results is only a few seconds, or even a fraction of a second? And doesn’t it briefly give you a sense of unease, like you feel like you must click it again? I’m sure we’ve all had this experience: you click a link, the page is slow to react, and you click it again. And again. And again. Even though you know in the back of your mind that you have indeed clicked it, you still feel a need to do it more, just to be extra sure. If the button had initially reacted in some way to acknowledge your click, you would have been sure.
This experience isn’t just limited to the web. What actually got me thinking about this was a gas pump. There’s a local chain of convenience gas station stores that I love in almost every way except one: when I pay at their pumps, the buttons don’t do anything. It’s annoying. They barely react at all: there’s nearly no tactile response, and no sound at all emanates from the buttons as you choose which kind of gas you want or enter your PIN. It leaves me with a very slight uneasy feeling every time until the gas actually starts pumping.
How will your users know when your webpage’s gas will actually start pumping? Like I’ve already said, setting active states will usually do the trick. Sometimes there are cross-browser issues – i.e. IE – aren’t there always? There’s an issue if the webpage you’ve developed is brought into .NET and your buttons have been converted into .NET – the active states may not work in IE. And if you slightly change the size of a button to simulate a depression, say, 1 pixel, it’s a good idea to put the element in a container with a fixed height and/or width, otherwise you might have side-effect shifting of other elements around it.
For far too long I think we’ve been too obsessed with what our elements do on hover. Buttons in real life don’t have hover states. So, while still doing hover states if you like, give your users some feedback, an active state, when they click stuff. Set a link, or button’s, active state to slightly reduce the font size, or box size, or color, something, to give the users that extra little reassurance that they are making the webpage do something, give them that tiny reward. I believe if you do this, even though it’s a tiny thing, it will significantly enhance the user’s delight when using your product.
comments powered by