Let me begin with what Jeremy Clarkson would in no uncertain terms call ‘a bombshell’.

Interaction on the web has evolved.

A razor-sharp observation, I’m sure you’ll agree. Obviously, interaction hasn’t changed in the way that people still can’t get enough of cat related GIF’s – or cat related anything for that matter – but the way we now think about visual interaction and design on the web has evolved beyond recognition.

Considering interaction in the formative years of the web, while not simple, was more straightforward; the user had a limited choice of devices, with the overwhelming majority using the web on a desktop. Today, it’s impossible to assume virtually anything about how or where someone may be accessing the web.

At the same time as this change in behaviour has come major advancements in the open web technologies that we use to create websites. Gone are the glory days where web animation lay in the hands of the blink and marquee tags; we’re now so spoiled for choice that it’s easy to forget where we’ve come from. CSS3 makes adding visual flourishes simple and accessible to any developer and the pace of innovation in this area is astounding.

But before we take a look at all the great things we can do to enhance interaction on the web today, let’s take a step back and make sure we understand where we’ve come from.

Simple days to glory days

In the earliest days of the web, visual interaction was more straightforward; made simpler because there was very little in terms of what we could control. CSS could style the colour and size of our text, links and backgrounds to provide contrast, but was overall pretty limited. Ajax didn’t exist and so functionality such as form validation was restricted to the server side, meaning form interaction mostly consisted of positioning and copy. Dynamic loading of content was just the stuff of dreams.

The web may have been simple, but it no doubt helped those making websites at the time to focus on important interaction decisions as well as ensuring the content helped facilitate these interactions; much like the mobile web has shifted our thinking back to a content first approach today.

From these early days the web moved on. Like many things in the world, the web runs in cycles and this has been true regarding interaction on the web.

Much of what we can do now visually with open technologies has been seen before. Talk to any of those individuals who worked with the mythical technology that was Flash; in-between mutterings about how Javascript could do with a strict compiler, they will be able to show you any number of visual interaction techniques that were possible 10 years ago.

A lot can be learned from looking back at what Flash achieved on the web. It’s no coincidence that many of the techniques that were capable with Flash are re-emerging now; many developers who worked with Flash are now using JavaScript and CSS, passing on their learnings. You only have to look at the work of people such as Ricardo Cabello, Seb Lee-Delisle, Carlos Ulloa or Grant Skinner – to name just a few – to see how they have helped push what is capable with JavaScript to the next level.

It’s also important to remember that with great power also came great responsibility. This can be shown in no small measure by those who abused our eyes during those years. We should remember how important it is that our visual design isn’t simply covering up bad content or poor interaction decisions. It may sound obvious, but we should always be thinking about how someone will interact with the sites that we build.

Surprise and delight

MapBox recently wrote about the design principles they created during their redesign, detailing that:

Interactions should be delightful and surprising. Design these interactions so that they’re enjoyable to perform again and again.

With CSS3, SVG, JavaScript and WebGL, among other open web technologies, we now have the tools to create visual interactions that can truly delight and surprise our users.

So let’s look at some of the great work being done in interaction design at the moment on the web, as well as some emerging work that I think takes this further and shows new ways in which we can interact with information on the web.

Elegant transitions

Transitions and transforms in CSS3 have opened up a whole new realm of possibility when it comes to progressively enhancing our sites in simple, elegant ways. They are starting to see widespread implementation, partly due to how easy they are to experiment with and put into practice, but mainly due to the fact that they can be implemented as enhancements to our sites, falling back elegantly when not supported. They also have the added benefit of performing well across devices, which other emerging technologies can suffer from.

There are many uses for transitions, but the most widespread usage seems to be in giving more meaning to state changes on the web. So for example, when a user hovers over a button, the background could transition smoothly into a different colour, or perhaps animate an icon to give more meaning to the action being performed. If the user then presses on the same button, transitions could then be used to visually aid how the state has changed or is in the process of changing.

Another widespread example of enhancing state change is the transition of an off-screen navigation; instead of snapping the menu out into place, it slides gradually into view. This can help to visually aid the user as to how the state of the page has changed based on the actions they have performed.

Codrops have some really creative examples of state transitioning, whether for icons on hover, more traditional buttons, or revealing captions. Their examples for how to enhance buttons for favouriting or deleting using neat transition effects really do assist with the interaction, helping to visualise the action that the button represents.

A number of good examples of what can be achieved visually for representing state changes can also be seen by taking a look at the Effeckt.css project. I especially recommend checking out their ideas around button states and captions, among all the great work that they’re putting together.

Viewing these examples in isolation is one thing, but if you want to see how all of this can come together, take a look at the Wacom website. It uses transition effects liberally across the site to enhance the experience. The most striking example comes from following the ‘About Wacom’ link at the bottom of their menu to show how they visually transition between their sales and about sections. The transition really gives the feel of moving to a completely different part of the site.

There are a whole host of tutorials already on the web to help you understand what is possible with transitions, but as ever the MDN site is a great place to start. Remember though – don’t just throw transitions at a site just because they’re simple to implement. It’s important that they assist the users interactions and to ensure that the transition degrades gracefully so that understanding isn’t lost when the effects aren’t present.

Interacting with visual cues

As well as CSS transitions, CSS Animations are also being utilised to provide visual cues. Similar to transitions, they perform well across devices, but don’t degrade as gracefully. If they aren’t supported then an alternative solution needs to be provided as a fallback, or alternative content.

They are more often seen in games or interaction heavy experiences rather than more traditional sites, but can also be useful for simple animations such as loading effects or looping a background to provide perspective.

One useful tactic can be seen in the Persil ‘Be Mighty’ online storybooks. It uses a very simple looping animation to show hot-spots, which the user is encouraged to press, to trigger actions and animations through the storybooks. This subtle animation helps draw the eye and show when interactions are available to the user. This method has been similarly employed by websites that utilise gestures, such as swiping, to navigate. Animating the gesture onscreen when the page loads encourages the user to interact with the page in the way suggested.

Animation can be used in other ways to provide understanding. SVG has staged a renaissance in recent times, despite being mature as a technology for a reasonable amount of time now. One particularly handy use of SVG was highlighted by Jake Archibald, in which he showed how a simple line drawing can be animated, instead of it being drawn onscreen all at once. This technique could be used in a variety of different ways, perhaps to visually construct diagrams piece by piece or even for use in tutorials when showing someone how to draw.

Visual cues aren’t just limited to animation though. If the user is trying to complete a more complex process, such as typing a large amount of data into a form, cues are important to guide users through the process. Consider the use of transitions between steps to help assist the user; revealing extra steps in the process or multiple error messages all at once can be quite jarring when displayed straight to the page. This small effect could be the difference between the user successfully completing their goal or giving up halfway through.

Interaction experiences

Moving on from more subtle interactions, open web technologies are now capable of providing rich, immersive interaction experiences.

CSS3 animations really come into their own in providing a richer visual experience while still maintaining a good level of support. The end goal of any animation is to submerge the viewer into the experience – how can you knock down the wall between the interactions and the animation? This was beautifully illustrated by Simurai’s cursor monster; designed to truly encourage you to interact with what is animating on the page.

The most eye catching of interaction experiences come from the most graphically rich websites. These have notoriously been the realm of Flash over the years, but we are now starting to see more sites being made with open technologies such as JavaScript, canvas, SVG and WebGL.

Google are leading the way in this area, having partnered with a number of brands to create unique interactive experiences. The latest of these was for The Hobbit, and uses a huge range of the latest technologies to enhance the experience. What sets their latest example apart is that the interactions don’t feel unnecessary; they feel like they are an integral part of the experience. The way you navigate the site feels natural and blends into the experience, when sometimes it can feel like the the interaction has been sacrificed for the visuals.

Of course, support for high-end visual productions like this is a bit more sketchy, but this will continue to improve and we are likely to see more great examples of companies enhancing experiences online in this way. As these do become more prevalent, it’s important that we don’t lose sight of how the user actually interacts with these experiences; if it simply looks good but is impossible to navigate, you have ultimately failed the user.

Interaction for learning

Fairly dry subject matter can be enhanced by a great interaction experience, and this is an area which open technologies can now really help with.

Examples such as the The Planetarium or MrDoobs Periodic table illustrate how building interaction into learning experiences can naturally enhance the experience. This is especially true for those individuals who have better recall through visualising information rather than reading or being told about about the subject.

Mathematics, while by no means a new invention, has seen some interesting new applications recently as the power of preprocessors and 3D visualisation tools has started to be harnessed. Ana Tudor has done some remarkable work using Sass to represent polygons and algorithms – anyone interested in what you can achieve with just CSS and a knowledge of Maths should check out her examples on Codepen; it’s pretty remarkable stuff.

In the 3D world, Steven Wittens’ work in visualising mathematics is also pretty extraordinary. Well known for creating 3D visual effects using mathematical algorithms (think Winamp visuals turned up to 11), he is also in the process of creating MathBox, a library for visualising mathematical diagrams in WebGL. This library could potentially open up a whole new dimension to how people can interact with and learn about Maths.

If you truly want your mind blown, set aside some time to watch either of their presentations at Full Frontal and CSSConfEU – Steven’s on Making things with Maths or Ana’s on Maths powered transforms for creating 3D shapes. Just seeing what is capable already in these areas is pretty inspiring for how these technologies could be used in the future online.

Visualising and interacting with Data

Data comes in many forms, and there are plenty of amazing examples of visualising data in creative and engaging ways.

In it’s most basic representation, raw data can be visualised in graphs, but that doesn’t mean that they have to just be any less engaging. Whether it’s transitioning between state with CSS3, or animating the data represented in SVG, there are a number of examples already on the web that turn what could otherwise be fairly unengaging data into a much more visual representation.

Of course data doesn’t just stop at graphs; there’s so much data readily available on the web now that your own imagination is the only thing limiting you. My favourite recent use of data was by the ‘We Are Data’ website, created by UbiSoft to promote the game Watchdogs. Taking data that is publicly available, the site creates an interactive experience that is as eerie as it is intriguing, showing the cities represented in terms of its data.

Using real data in this way can make an experience much more personal, evoking emotions that may not be otherwise possible. A slightly more dated example is the ‘Museum of Me’ by Intel, in which they take the users data and display a museum personalised to them and their life.

Technologies like Node.js has made realtime data streaming accessible to a much wider array of developers. Hooking into streaming API’s has never been easier and seeing how this will be used by developers to create unique experiences will be fascinating to see.

Visual Engagement

A key tool in interaction is to simply engage the user in a unique way. Film trailers and billboards have been doing this for years, mixing bold typography with visual style to draw people into watching or looking at them, and subsequently remembering and acting on what they represented.

One industry that has particularly experimented with using open web technologies to provide visually engaging experiences has been the music industry; the most recent example being 24 hours of Happy from Pharell. Arcade Fire have also massively pushed this area forward with the recently released Reflecktor site and probably the first such project of its kind with The Wilderness Downtown. These campaigns set out to create an experience that is memorable and fun through the way you interact with the visuals.

Due to the success of some of these campaigns, it’s perhaps surprising that other similar industries haven’t followed suit. Most surprising perhaps is the film industries lack of experimentation into this area with more visually striking online experiences. Tyler Gaw’s The man from Hollywood is a great demo of the sort of work that could be done creatively in this area; bold typography creating an experience that is both memorable and engaging.

It’ll be interesting to see how these experiences continue to grow in the future with better support for these technologies paving the way for more mainstream use.

The next generation of interaction

As you can see, the web has matured massively in terms of interaction; from simple effects all the way through to high profile, immersive experiences. Open web technologies are now capable of a huge amount and, creatively, it’s never been a better time to develop on the web.

Whatever type of websites you design or develop on the web, it’s important to know how these technologies can help enhance the interaction experience. Adding them if they provide little value is fairly pointless and so weigh it up; does an effect enhance the experience or potentially just confuse the user?

For the vast majority of the sites that we build, we could do a lot worse than to remember the early days of the web. Focus on what can be achieved with elegant, subtle effects, enhancing the experience where you can. Of course, if you’re lucky enough to be working on more immersive experiences, remember that interaction should still be considered at the core of the experience. Without doing so, the experience will be inaccessible and likely frustrating to use.

As long as we keep these simple principles in mind, interaction on the web has an exciting future; I personally can’t wait to be part of it.