17 delightful micro UX effects and transitions for your website

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…

Read more here:
17 delightful micro UX effects and transitions for your website

Share/Save/Bookmark

Tags: , , , , , , , , , , , , , , , , ,

Leave a Reply

You must be logged in to post a comment.