2 years ago I wasn’t thinking as UX experience as a way to improve my earnings. It seemed to be only a waste of time and money. But one of my friends told me that I should try on one website. I got more engaged users and of course more money.

Today, with CSS3 and HTML5, it’s easier to create good UX experience as you told in your post.

Fantastic article: inciteful and provoking!

Nice to read how current technologies give us the power to really make a user’s experience a better than good one, in quietly cool ways.

But I am struggling with the subtleness of your “Revealed content pre-loading” demo: I can see no performance difference between the two at all. Is this down to my very fast connection negating your hard work?

Thanks again.

I love that last bit, “it’s the logic and the concept of designing everything.” I know for a lot of us that will serve as a seed to a plant, hitherto undiscovered, that will yield some wonderful fruit. Thanks for sharing, Chris!

The devil is in the details. I don’t think it is obsessive to focus on the details. A good user experience makes the difference between an authority website and the other websites. Only the authority website will make it in de big leagues.

I love the idea of giving the user feedback after clicking on a button or link, but sometimes things don’t go the way we expect them to go.

In first demo you provided the post-active state remains the same even if the loading failed somehow (via the stop button, back (when using anchors), …). I don’t think there’s a way to detect whether the loading of the page has actually started or aborted, so it might be a good idea to use them on asynchronous actions, such as ajax loading or anything that provides a callback, really.

I really liked the first demo with chrome button. Indeed it can be useful for AJAX actions that take time, and bringing together both a change in text and animated image in the button allows the user to understand what is happening, and think the interface much faster.

I love articles like this that look into the minute details of what a great user experience should actually be, especially when they cover something we all take for granted, like the humble button.

On iCloud, the login button changes text and grows a little spinner when clicked. This is a great indication that the user has filled in the forms right and something is happening.

I will certainly start to use these techniques.

2 things: you could have disable the click on the Chrome demo button – trying it out took me to Google’s Chrome download page. The Safari one did not take me to Safari’s download page. I assume that was an oversight on your part and not something I’m missing.

In the demo for disabling draggable buttons, I could drag the right button, using FF 7.

Great article! “…covering for human error should be a designer’s job, not that of our users” – so true!

@Federico – of course, that’s the nature of the web. Nothing is perfect and it’s always going to be a matter of weighing up benefits vs pitfalls with this sort of thing.

You could pull a few tricks to lower the chances of a glitch like what you describe, such as onunload, but it’s always going to be a case-by-case scenario. For me, the UX improvements outweigh the potential for visual “breakage”.

That said, the demos in this article were only that; examples. The message behind it all applies to much more than just these few case studies.

Your basic philosophy is spot on. We just need to be aware not to break default browser behaviors. In your Button (mis)behaviour example, the enhanced button is broken and weird because of your javascript enhancement. For example, a user wanting to right-click the button to copy the link address or open the link in a new window, is not allowed to do so. And if I select a paragraph of text on the page and accidently release the mouse over the button, I will be sent away from the current page.

It may not be an issue for most users, but as you say, we must provide fallbacks and error resolutions in even the rarest of scenarios

“it’s the logic and the concept of designing everything.”

I think the examples are where this article falls over. Obviously incredible detail has been put into the progress loader in the first example, but by doing so it breaks the basic browser accessibility of showing which element has tab-focus for keyboard users. Also something to consider is that buttons with loaders like this are best used for ajax calls, but if the progress meter is done via CSS active state alone, you could end up in the situation where the call has failed but the active state is still telling the user something’s happening. It’s much safer to make progress meters programatic, so that you can set timeouts for failed calls etc.

Both user-drag and user-select properties are new to me, coming in just when I almost desperately needed them.

Great article, thanks!

I was reading your article then decided to check out these comments. Once done, I thought I would check something on the article. As I was at the bottom of the list, I just used the back button but that took me to the homepage.

Funny how an article about UX was on a site with a bit of UX clearly lacking. :)

James: get off my lawn.