Elegant Micro-Interactions to Enhance Your Website’s User Experience (UX)

May 6, 2016

1. Transitions

Be sure to use transitions when changing elements on a page. This will help your users focus their attention on exactly what you want them to. Transitions also create a feeling of elegance and consistent flow.

2. Use Toggles Instead of Multiple Buttons

When you are at home and you want to turn on a light, you don’t want to walk to a completely different area of the room to turn the light off. This concept also applies to toggle buttons on your website. If you click on a button to trigger a new state of an element – that same button should remove that state.

These such controls should require close to zero effort to switch between states.

3. Use Natural Timings

This can be quite tricky because there is no “magic wand” to get it right.

If your transitions are too fast they will feel unnatural, they might even go unnoticed. On the other hand if your transitions are too slow it will create a pain point for users that are repeating the same interaction often.

You just have to play around and use your gut to achieve the correct transition timings for the different elements on your website.

4. Always Auto-Focus on the Next Action

This will help to guide your users as to what they need to do next and prevent them from feeling lost.

5. Always Let Your Users Know When They are Done

Users should always be able to recognize when a certain interaction is complete. To do this you can simply implement some kind of visual feedback that lets the user know when they are done.

For example: Once a user has submitted a form – create a success message that lets them know that the form has been sent.