Back when I studied architecture in Sydney, one of the most important tenants that was drilled into us was the quote from Mies van der Rohe, “God is in the details”.
The most common context was that a design that looked beautiful from a distance can be ruined by crappy details up close.
Think of all the times you have pressed an elevator button. Such a simple task.
- Sometimes you press the button and nothing happens, then you press it even harder and it finally lights up.
- Sometimes there is that weird touch panel with numbers – you touch a number and then remove your fingers to see if something happened, like the number lighting up.
- Sometimes you press the button lightly, it gives a satisfying click and you see the edges of the button light up.
Pressing an elevator button is a microinteraction
Microinteractions are a special type of detail – they are the small tasks that a user wants to complete, with specific rules for how the task can be completed, plus the feedback that comes from engaging in the task.
For the elevator button, my task is to press (or try to press) the button, the rule is that you need to press the button with a certain amount of force, and the feedback is that the button lights up to indicate success. When it all works well, I probably don’t even notice that it happened.
Microinteractions are important: the experience of the beautiful lobby of a building can be spoiled by a stupid elevator button. The user remembers that they had to press the button 3 times, rather than the great lighting or wall finishes.
Microinteractions are super important for web design
- Most websites are meant for interaction – we want the user to complete a series of tasks.
- Most websites are fairly easy to change. Tweaking a web design is much easier than installing new elevator panels.
Let’s take one common example of web design – forms. A beautiful form is easy to fill out. A crappy form makes you give up, costing leads or sales.
But while the marketing manager and designer agonised over which main image to put on the home page, or the font for the menus, the form is probably whatever the developer slapped on.
A form is not just a form, it is a series of microinteractions that begin with clicking in the first field, and end with clicking/tapping the submit button. The user’s overall impression of the form (how intuitive or annoying it is) is developed from the set of microinteractions.
Here are some micro interactions to think about
1. If I make a mistake in one of your form fields, does it tell me straight away, or wait until I click submit (and wonder why the form doesn’t work)?
2. How about positive feedback – if I fill the field correctly, does it give me feedback on the spot? (perhaps a green tick mark?)
3. If I make a mistake, does it tell me how to fix the mistake, or just say “invalid response”? (if a phone number must be a certain number of digitals, tell me)
4. If I have to create a password, does it give me stupid limitations that guarantee I won’t remember it?
5. Are your field labels next to the field, or in the fields? If I click in the field, and the label disappears, how will I know what to write? (This can be OK if there are just a few fields, but terrible when there are lots). If next to the field, are the labels aligned with the field box?
Easy to fill, due to label alignment and font:
Hard to fill, due to label alignment and font:
6. In an address form, if the state or city dropdowns depend on the country, does the country dropdown come first? Or did you put it at the bottom (like a mail address) so that I have to scroll up and down the form?
7. Are your fields vertical, in a single column? (Don’t do horizontal forms, or multiple columns)
8. Is it clear which fields are compulsory vs optional? Or do I only find out after I submit the form.
9. If I submit the form, and there is an error in one field, do my entries in other fields magically disappear?
10. Does the button explain what will happen when I click it (i.e. not ‘submit’)
11. Is there a ‘reset’ button that I might click accidentally (and then want to kill you)?
If you think about it – most of these points are common sense. There are some micro interactions, especially in mobile design that are revolutionary (pull down to refresh, Tinder’s swipe left and right etc). But most UX, especially in web design, can be handled with a bit of additional thought, some research on best practices, and actual user testing before the site goes live.
For this article, I’ve given examples for a form, but the same principles apply to every part of your website – can the user easily and intuitively complete their tasks, whether navigating, gathering information, logging in, or completing forms.
One thing we tell our clients is that their website has to be organic – developing over time in response to both conversion experiments and user feedback. Redesigning a sales brochure every 3 months, but leaving the website unchanged for years = fail.
Tips to get started
- On your website, chart out the paths that you want users to follow.
- For example, home page – product page – contact us page – thank you page.
- Examine the process in detail. How will the user know to take that path? What do the buttons look like? What language do you use? Does the form break any of the rules I laid out above?
- Look for anything confusing or annoying and fix it. Over the next day/week/month (according to how many visitors you get) measure the results.
- When in doubt, look at your competitors pages. How are they managing the same process? Is it better than yours?