Skip to content
CultureHive
  • About culturehive
  • Submit a resource
  • Latest resources
  • Authors
About the Arts Marketing Association Join us
 

How interaction design can make your website more effective

How interaction design can make your website more effective

By Katie Parry

SUMMARY

Over and above the look of a website, it’s important to consider the way people can interact with it. Katie Parry from digital agency and arts sector specialists, Supercool, explains what makes interaction design so powerful, and shares some nifty examples.

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.

Daliso Chasponda smiles on a page of Theatr Clwyd's website
Watch the video 

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).

Farnham Maltings website
Watch the video 

Theatre Royal Wakefield

Content animating onto the page guides your eye around; cunningly revealing 'Book now' at the end.

An animation takes us around a page on Theatre Royal Wakefield's website ending on the Buy Now button

Watch the video 

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.

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.
Watch the video 

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.

An animated tagline on English Touring Opera's website
Watch the video 

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?


Katie Parry, Creative Director, Supercool

Note: This article may be updated over time and was first published on the Supercool blog.

 

📨 For more of this kind of thing join Supercool's mailing list

Browse by learning pillars
Websites that Work
Browse by smart tags
Design Digital Digital engagement Website
Resource type: Articles | Published: 2021
How interaction design can make your website more effective
Image by Gerd Altmann from Pixabay
RELATED RESOURCES
 

10 ways to make your website more accessible

 
 

17 ways to make your website more energy efficient

 
 
Hands on a braille reader for a computer

Accessible websites and delivery — getting started

 
 
Computer screen with website stats and graphs.

Analytics — using data to plan content and engage audiences

 
 

How to build a WordPress website

 
 

How to create an effective website project plan

 
 

How to expand the functionality of your WordPress website

 
 

How to…make sure your website is user friendly

 
 
An illustration of an open laptop, a notebook, a phone, a pair of specs and a cup of coffee

The AMA MicroDigital Guide to writing a website brief

 
 

The AMA MicroDigital Guide to working with a digital agency

 
 
An arrow points at a a circle of radiating lines

How to… create engaging, effective calls to action

 
 

A digital Autumn season with Opera North

 
 
A man opens a large case in a darkened store room

A guide to running digital heritage wellbeing projects

 
 
Wall of screens

5 key stages of a successful content marketing process

 
Who we are
  • Board & Governance
  • Meet the AMA Team
  • History & Values
  • Regional associates
What we do
  • Membership
  • Training
  • Events
  • CultureHive
Work with us
  • Join the Board
  • Partners & Projects
  • Trainers
  • Sponsorship
Find out more
  • AMA Newsletter
  • AMA Training
  • Accessibility
  • Sector jobs
  • WEBSITE ACCESSIBILITY
  • PRIVACY POLICY
  • TERMS AND CONDITIONS
  • CONTACT US
  • © 2022 Arts Marketing Association
@amadigital | info@a-m-a.co.uk | Arts Marketing Association, Cambridge | Registered in England 2814725

facebook    Twitter    Vimeo    LinkedIn    insta    thedots

ace-funding