Sound Mixer

Micro Interactions

With the app renaissance upon us, micro interactions have become a larger consideration. Apps depend on micro interactions a great deal in their UX. But what about Small to medium websites that do not have any app-like elements? Micro interactions might not be as key to their success but they are still important and can easily be overlooked in lieu of larger, more important, interactions.

Micro interactions to consider

A small to medium website like a blog, or a small retailer with an online store still need to think about their micro interactions.

Design

Design is the largest area for a typical website to nail small interactions. Any sort of link, from text, to a button, to an image is an opportunity to design a micro interaction. On a mouse capable device, the hover state becomes important, it tells the user that an element can be interacted with and will do something or take them somewhere. It is more difficult on touch devices that do not have a hover state, or even worse try to fake one (with an initial touch triggering a hover). Touch devices can still benefit from micro interaction in their design, like an element that changes itself or something around it when touched, a carousel with thumbnail navigation, for example. The thumbnails change their own state and the state of the carousel when touched.

On Engage Interactive‘s portfolio grid, an entry with a photo gets an overlay with logo and CTA, but an entry with just the clients logo has no overlay and just pushes the logo up for the CTA.

Search

Unless you are a search engine or large retailer, search is probably a single purpose micro interaction on your website. It is an important element that compliments your navigation. Search engines like Google have conditioned users to search for keywords and key phrases, so a prominent and well-functioning search can be a crucial tool to help users find the information they are looking for.

Tags & Filtering

Filtering allows users to find what they are looking for in an easy-to-understand way. Tags and other filtering methods can sometimes be an afterthought, or worse, not used at all. Tags can expedite a user to key information without putting strain on the main navigation.

E-Commerce filtering becomes incredibly important as your online store grows. Filtering allows users to zero-in on the product that is exactly right for them, unfortunately many online stores do a subpar job with e-commerce filtering.

Amazon uses some faux 3D effects to make the user feel like the product is a real book when interacting with the cover.

Social Media

Adding links to your facebook and twitter pages is not social integration. Making it simple for users to connect with you and open a two-way dialog with you is social integration. It’s important to find the moments where social media can be implemented and not crowbar it on to every page.

Identify places in a user’s flow where they might need help, or would actually want to connect with your business. It’s also important to think about where in the page hierarchy social tools fall. On an article, should the share tools be near the top of the article with the title, where the user can easily find and share? Or towards the bottom after the user has read the article and has a better understanding of whether or not they want to share?

Settings

If your users are creating accounts, they are probably also updating settings for that account. While settings for a mobile or web app is a larger consideration, a website with user accounts (or even a simple email subscription) still needs to think about how users interact with their own accounts. When a user is able to quickly change a setting they are not happy with (notifications for example) they are more likely to continue to use and enjoy that product or service. It’s easy to bury settings and other small features in the UI, especially if a user’s account settings is not a primary task.

For further reading on micro interactions you might want to check out Microinteractions: designing with details by Dan Saffer.