I was asked recently what's exciting about web design right now. For me, it's that we're able to put more focus on interaction design and animation.
The evolution of CSS (short for Cascading Style Sheets – the coding language used to define how content looks on a website) means interaction animations can be built in a much more lightweight, accessible way than previously possible.
What is 'interaction design'?
In basic terms, interaction design is when consideration is given not only to the design of a 'thing' itself but the way people will use it.
In the context of what we do at Supercool, that 'thing' is usually a website. And an interaction is something that happens because of something you, as a user, do on that website.
Examples from recent websites we've created:
Theatr Clwyd
Subtly effective, Theatr Clwyd's ticket buttons do a neat little shimmy when you hover on them. It helps to draw the eye, and is a bit of fun.
Farnham Maltings
There's some nifty loading happening on Farnham Malting's website, which helps to increase perceived load speed (i.e. it seems to be loading even quicker).
Theatre Royal Wakefield
Content animating onto the page guides your eye around; cunningly revealing 'Book now' at the end.
Bishopsgate Institute
Inspired by the Netflix interface, this 'layered' set up with pop-up detail box allows people to find out a little more about each course, while still technically browsing the What's On page.
English Touring Opera
The idea of animating the tagline came from ETO's Director, James Conway 👏. It's a neat way of perking-up the foot of the page, at the same time as giving a flavour of the company.
What makes interaction design so powerful?
😃 It's delightful!
Purely and simply, it can add 'delight'. An element of detail that looks great, raises a smile, or elicits some kind of emotional response. So, it can help add to the sense of personality on your website.
🛎️ It gets your attention
It can help guide you through a page – or entire sections of a website – by making it clear what to do next, without you really having to think about it. (Press the arrow / Open the drop-down / Click 'Book now'.)
✅ It tells you when something's gone right (and when it hasn't)
A website giving you feedback is really helpful – for example, if you hover on a button and it moves a little, you know you can click it. When a green tick and 'Thank you!' message appear, you know you've successfully signed up to the mailing list. A red error message can point out that you've typed your email address incorrectly.
🔎 It gives you power over what content is on the page
It can give you the ability to change what's shown on the page – for example, filter a list of events to just display 'Comedy'. Or search that provides instant results as you type. Or clicking an arrow moving to the next image in a gallery.
⏳ It changes your perception of speed
Showing a totally blank page while content loads in the background will seem to take longer than if something happens on that page immediately. Even if both pages actually take the same time to load fully. Interaction design can be used to alter your perception of speed.
🤓
Next time you visit a website, as it loads, notice what's being done to alter your perception of speed …
Do you see a 'skeleton' of blank rectangles appearing before content loads? Does text appear straight away, with a brief wait for images? Is your brain being distracted from waiting by a cute, branded animation?
📨 For more of this kind of thing join Supercool's mailing list
