After a bit of a break I'm working on a new side project. It is in a very competitive space and I have decided that the user experience needs to be the core USP, for it to attract the kind of crowd - and content - required to establish a presence in the market.

This has made me think once again about what makes for a good user experience. Broadly speaking, it is pretty much all about reducing friction, to help people get from A to B in the most straightforward way possible. 

But is 'good' what we should all be aiming for? Why not aim a bit higher?

So what makes a great user experience? I'd say it was all of the above - a friction-free journey - as well as a smattering of pleasant surprises along the way; surprises that delight the user. They say good design is invisible, but I think that great design can leave quite an impression on people.

I'm constantly amazed by my own reaction to the little details in life. The smallest of things can have a disproportionate influence on how I perceive things, both positively and negatively. I'm a stickler for detail, and have been looking for examples of micro design, as a source of inspiration for my own project. 

To this end, two sites in particular have been particularly useful: Codepen, and CSSDeck. Many of these 17 examples can be found over there, and some are very lean indeed, using just CSS to achieve the desired effects. 

Ok, let's check them out...

Motion blur text scrolling

Play with the controls on the right to adjust the text and effects. Then scroll down the page...

Transform a thumbnail into a lightbox

Click on the thumbnail to make it bigger.

Direction-aware hover effect

Uses JS to identify which direction the cursor is coming from, and then CSS for the animations.

Various other hover effects

Choose from seven different animated hover states.

Sliding boxes - flat design

Thumbnail product details

Hover to reveal more details and expand options. Nicely done. 

A simple vertical menu

Uses CSS3 and Jquery.

A simple slide-out menu

Uses CSS only.

A bunch of lovely checkboxes

Look at them, they're delightful. And they're made purely in CSS3. 

Animated check inputs

From a cross to a tick…

Lock switches

Flat design social panel

With a bit of tweaking (a better call to action) this could be good for social sharing / follower growth. 

Loading animation

Everybody hates waiting, but loading animations are tolerated in small doses...

Percentage bars

These could be used to in the style of LinkedIn to show how complete a profile is.

Flat UI log in 

A rather pretty form for signing in, registration and password resetting. 

Flat design - sliders

Drag them left, drag them right...

A countdown timer

This is done on jQuery canvas. When is your next sale going to kick in?

If you like this compliation then you might want to check out my other posts on microscopic attention to detail in UX design, and the A-Z of design principles from the experts.

What other examples have you seen? Do let me know in the comments area below...

Chris Lake

Published 10 July, 2013 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

You might be interested in

Comments (8)

Save or Cancel

Peter Drakes, Business Analyst at Session Digital Ltd

Whilst I do not directly deal with user experience, there is a need to understand how users will complete certain journeys and we often have to argue against clients who want to add a lot of buttons and superfluous distractions to site. So I have come up with this soundbite:

"Don't make your customer think, but do allow them to think for themselves"

Some of these items point directly to that philosophy - the progress indicator for example - as a user I don't break my chain of thought of what I am trying to achieve, by wondering if the site is slow or my browser has crashed.

Your customer ( I dislike the impersonal 'user') is on your site to complete an action - to learn (about your product or brand), to check (on information/data) or to buy (don't think that one needs an explanation..!) so don't get in their way and remember, the devil is in the detail... ;)

about 5 years ago


Barry Day

Chris, really enjoyed the examples here. I've been in UX for 10 or more years now, and the challenge with online is connecting emotionally with customers. Research in the Customer Experience Management discipline is clear that loyalty and advocacy really only come from creating emotional connections between the customer and your brand.

I believe that creating emotional connections is really challenging with digital as the UI doesn't lend itself to this very well. Whilst we all exist in a multi-channel world now where the interactions in physical space and with front-line staff tend to have more of an emotional impact on customers, what you're are highlighting here are the exact things that you can do with digital to edge closer to an emotional connection.

about 5 years ago


Deri Jones, CEO at SciVisum Ltd

Peter - nice slogan:

> "Don't make your customer think, but do allow them to think for themselves"

Maybe just my browser - but the 'Lock Switches' example...

... failed the 'don't make me think' test.

The lock fails to toggle if you use a sliding motion with the mouse - (sliding is how the real-world switches like that work).

It only moved (for me at least) the slider if you click and release without moving the mouse.

Didn't have an ipad or Windows box to hand to try on - but seemed to be the same in both Firefox and Chrome.

about 5 years ago


Philip Bevan

Peter - also like your slogan...

Some really great little tricks here but we should all have at the back of our minds the capabilities of the browsers that our users/customers are using to view our sites. As is the case for most of these CSS3 examples, there still remains to be limited support in older browsers.

The question that needs to be asked is: With the introduction of JQuery plugins, additional CSS3 elements, would you be happy with a slow load for users who may never experience the benefit of the visual design/functionality of on-screen elements?

Otherwise, really great post. My favourite has to be the direction-aware hover, very neat.

about 5 years ago


singapore jobs

some great tricks are listed here, thank you for sharing all this stuff with us.


about 5 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

Hi Chris,
Just re-visiting this as I'm thinking about using the Kano Model here. It got me thinking, how about a follow up article on micro UX for mobile?

I know you guys have done plenty of posts on mobile sites, but it might be good to bring together specific UX elements. What can we do to take our sites beyond the basic, without adding clutter?


over 4 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Hey Stuart,

Good shout. I have a few ideas on mobile UI features and will try to cobble something together. Do fire over any observations.



over 4 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

Sent you an example from us via a twitter DM.

Another idea for a post would be the Kano model itself.


over 4 years ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.