Ashley Nolan Senior Creative Technologist at MW

@AshNolan_

Know Thy Interaction

Hi, I’m Ashley Nolan. I’m a Senior Creative Technologist working at TMW, a digital agency based in London. !As my talk title suggests, I’m going to be talking about interaction today and how interaction has and is changing many aspects of how we design and develop websites… !…but I figure I should probably tell you a bit about myself first.

So first thing you should probably know about me is that I’m a massive fan of cake. Or pretty much any food with sugar in it for that matter. !I don’t always eat quite as seductively as this picture shows – I was kind of just in the moment and it caught me off-guard. !At the moment I’m actually a little bit worried as I’ve recently turned 30 and all my friends are convinced that that means I’ll now balloon to a size that reflects the amount of cake and biscuits that I eat. !I figure I should probably carry on the way I am and try and dispell the myth rather than giving in to what might never happen.

On a more professional note, I’ve been working in web for over 9 years. I was the lead developer on the BBC GoodFood redesign which launched last year and on the recently launched Lynx Peace campaign site. !I also do a bit of writing and as you are witnessing, occasionally do talks for those who are prepared to sit still long enough to listen me.

I also do a bit of Open source work – myself and Zander Martineau maintain a framework called Kickoff, which is a lightweight front-end framework for creating responsive sites. !We're always interested in making it better, so check it out and give us feedback – would be great to hear what projects it is being used on.

Ashley Nolan @AshNolan_

What is interaction?

Anyway, that’s enough about me – I’m here to talk to you about interaction. !So the first question I asked myself when writing this talk, was 'What is interaction?' !And so, like whenever I have a question that needs to be answered I went straight to google and typed in 'What is interaction'. !

Google's default answer was pretty lame, and so stage two in any search is always to find out whatever wikipedia has to say on the subject… …but again, it's definition of interaction was a bit broad for me, until I spotted a part under Computing, which took me into Human Computer Interaction. !And this was pretty much the definition as I think many people working on the web would describe it – probably in slightly more casual terms than this though. !"Human–computer interaction (HCI) involves the study, planning, design and uses of the interaction between people (users) and computers" !I also especially like how whoever wrote this thinks that a "classic case" of human-interaction problem is a major disaster like a nuclear meltdown, rather than choosing something a bit more light-hearted. Kind of makes you feel a bit better when running into problems like 'why aren't my users clicking on my menu button' or 'why is our bounce rate high'.

Ashley Nolan @AshNolan_

Interaction =

User + Machine

So stripping it right back to it's most basic level, an interaction is a user interacting in some way with a machine.

Ashley Nolan @AshNolan_

How has interaction on the web evolved?

So now we have the basis of what an interaction is, how has interaction on the web evolved? !In the earliest days of the web, visual interaction was much more straightforward; made simpler because there was very little in terms of what we could control. !CSS could style the colour and the size of our text, links and backgrounds to provide contrast, but was overall pretty limited…

So for example this was the Apple site back in 1997 when it launched…

…and similarly the BBC Sport site in 2001, also fairly simple in terms of what was possible in the visual design. !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. !The main difference today is we don't have such limitations and so what we can do with our interaction design is far less limiting.

But for a moment I want to play devils advocate and think about if it's necessarily a good thing that we now almost have limitless choice when it comes to how we can style and design our websites. !Are we sometimes trying a bit too hard to make our sites look good at the expense of the user? !

This is my favourite website. I visit it almost every day. It’s not responsive…or optimized for iPhone. It looks blurry on a Retina display. It doesn’t use the latest HTML5/CSS3 framework…or have a thoughtful vertical rhythm. The fonts are nothing special. It doesn’t use AJAX or node.js…and it hasn’t been featured on a prominent tech blog or won an award. !It tells me the soups of the day. That’s web design.

Dan Cedarholm

Dan Cedarholm wrote this about a year ago, and I think we can all relate to websites or services that even though they're not anything special to look at even today, they equally aren't putting any barriers in your way. The content is accessible and the interaction barrier is low. !You go to the site, you get your content. Job done. !When we add interaction to a site we need to make sure that we aren't simply adding barriers for our users. The interaction should serve a purpose.

I personally think there's one website most culpable for adding more interaction clutter to its website than any other over it's lifetime. !You've probably heard of them – a small company called Facebook?

If you look back at their site in 2005, so just a year after it launched, it did a few things and did them really well. !Back then, it looked like a slightly more organised version of the old myspace, but it's main goal was to connect people, and it was setup perfectly to do this.

Moving to 2007, you can see that not much has changed – this was around the time when I joined Facebook (although clearly that's not my profile!). !So things were growing, they'd added photo sharing and events, but this made sense with what the direction they were going in.

…and this is the Facebook we live in today.

Personally, I enjoyed Facebook when it concentrated on a few areas that naturally fitted together and it did them really well. Today you loads of advertising, game invites, event invites to things you don't even care about – there's much more noise. !You could even argue that the early Facebook did so well because it was uncomplicated, and that it is now losing some popularity because it's moved away from that simplicity; but that's a whole can of worms to open up.

Interestingly, the trend of simplicity of content still applies today, and has been pulled into sharper focus by the rise of mobile and small screen devices. Many of the most successful apps on our phones or tablets try to do one thing; and ensure they get the interaction for that one thing spot on. !I think one of the best recent examples that proves this point is WhatsApp.

I remember downloading it sometime last year wondering why some of my friends were using it to message each other, and remember feeling like I'd been transported back to the days of how old chat clients used to look. !But it hasn't stopped people using it, because it's so simple to use. It's not cluttered. It just sends messages, and doesn't get it the way of you doing it, and that's why people enjoy using it.

It's also no coincidence that GOV.uk has had so much praise since it launched last year. !They chose to simply let the content speak for itself and put as few barriers between the user and their goal. !The interaction design has clearly benefited from the content design. They aren't mutually exclusive.

Ashley Nolan @AshNolan_

Interaction design isn’t just about how it looks. !

The most important part of the approach is understanding, predicting, and facilitating how people will use what you’ve created – and what they will want to accomplish with it.

John O'Nolan

I think John O'Nolan put it well when he said "". !WhatsApp gets this spot on, just like Instagram did before. It strips away the barriers and designs for simplicity of use. !And so I think that although it's now great that we can do pretty much what we like style wise on the web, we should always be thinking like this in terms of the users interaction with our site. !Whether you're creating a simple site or a complex web-based or native app, it helps to really understand how people will be using the things we create on the web.

Ashley Nolan @AshNolan_

Never underestimate simplicity

In short, never underestimate simplicity.

Ashley Nolan @AshNolan_

Invisible?

So how simple should we be looking to go? Should we be aiming for invisible design. !Some people might say that great interaction design is invisible; you shouldn't really even notice that the design is there because nothing gets in your way of your task. !I don't completely agree with this. !The reason I don't necessarily agree with this is because there are so many different types of interaction, which I'll come to a bit later on.

Ashley Nolan @AshNolan_

Visual complexity ≠

bad

I also don't think that visual complexity is always a bad thing, even though it's important to make sure you aren't adding complexity for the sake of it. !It's the nature of the web that some sites and applications benefit from being visually simpler while in other situations we really do benefit from being able to use the new technologies at our disposal.

Ashley Nolan @AshNolan_

Mapbox design principles https://www.mapbox.com/blog/redesigning-mapbox/

In terms of what I think good interaction design is, I remember reading the Mapbox design principles in a blog post on their site, and agreeing with a lot of what they said. !This isn't the whole set of principles, but the main points I think worth remembering are the parts I've highlighted.

Ashley Nolan @AshNolan_

‣ Interaction is the basic unit of design.

Mapbox design principles https://www.mapbox.com/blog/redesigning-mapbox/

‣ Transitional interfaces are easier to learn and more pleasant to use.

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

‣ Focus the user on one primary action at a time.

• Interaction is the basic unit of design. A successful design makes every step along the way clear while keeping the user focused on their goal. !• Transitional interfaces are easier to learn and more pleasant to use. Take advantage of animation and conditional visibility to guide users between steps and to add rhythm and

momentum to interactions. !• Interactions should be delightful and surprising. Design these interactions so that they’re enjoyable to perform again and again. Minimise the effort required to complete tasks,

enable users to recover from mistakes, and ensure that they receive feedback after taking any action. !• Focus the user on one primary action at a time.

Ashley Nolan @AshNolan_

The no-swear test

I also believe in something that I like to call the 'no-swear' test. !The principle is pretty simple – if at any point using a service you feel the need to throw your computer or phone or tablet, or whatever you're using through the window, the interactions of what you're using need to be reconsidered. !So a couple of examples of things I've come across that fail this no-swear test.

I'm not sure how many people have seen this one on their iPhones, but very occasionally when you're using maps, your phone will request that you wave your phone in a figure of eight motion. !I've had this happen to me a few times, and there's literally nothing I'd rather do in a public place than start waving my phone around in a figure of 8, especially when I just want to find out where I am or where I want to be going. !Whoever designed this interaction I don't think actually tried it out in context in the real-world.

CONTEXT IS EVERYTHING

As this photo demonstrates, context is everything, and it's no different in terms of interaction on the web. !Considering the possible interaction context when developing sites 15 years ago, while not simple, was more straightforward; the user had a limited choice of devices, with the overwhelming majority using the a desktop. !Today, it’s impossible to assume virtually anything about how or where someone may be accessing the web.

Ashley Nolan @AshNolan_

Interaction =

User + Machine

Going back to one of my earlier slides, I mentioned that interaction at it's most basic level is a user interacting with a machine. !On the web today that can mean many things…

This could be a person on their mobile, tablet, computer, a smart TV, consoles, even cars, watches and wearables are able to connect in some way to the web now. !This number of devices will only continue to expand in the future.

Ashley Nolan @AshNolan_

Changing behaviour

The most apparent impact this has had in terms of interaction is peoples behaviour on the web. !I’m sure everyone here has heard a similar story to this one: one of my close friends, they've got a young daughter, and have regularly let her loose with their iPad. But because this is one of her first experiences with technology, she now tries to interact with other screens as if it’s touch enabled. !More bizarre is that I heard the exact same story about one of my friends Mum’s doing exactly the same thing recently. !I think stories like this, the experiential effect of interaction, will really start to impact the design decisions we make now and in the future.

Ashley Nolan @AshNolan_

What is interaction on todays web?

Ashley Nolan @AshNolan_

Visual Interaction

Physical Interaction

Immersive interactive experiences

Visual Engagement

So what is interaction as we know it today on the web? !Interaction can be such a broad spectrum it can be many things: !

• Visual interaction, like how something reacts when you hover or click on it, or how something is displayed on a device • Physical interaction, like many of the wearables coming out now are starting to take advantage of • Interaction experiences, in which the interactions immerse you fully into the world, like games or movie websites !

I'm not going to have time to go through all of these in detail, but I did write an article on a similar topics a few months ago that's worth a read if you're interested in seeing lots of example of great interaction on the web http://12devsofxmas.co.uk/2013/12/day-3-interaction-evolved/

Ashley Nolan @AshNolan_

Visual Interaction

Visual interaction is probably the most relevant at the moment in terms of how designers and developers are improving simple interactions by harnessing the improvements in CSS and JS over the last few years. !So what I mean by this is just subtle animations or effects that help the user in some way. This could be how a form reacts when you submit it or buttons when you hover or click on them. !Personally, CSS3 makes adding visual flourishes simple and accessible to any developer and the pace of innovation in this area is astounding. !I'm sure everyone here has heard of it…

…but sites like Codepen are brilliant for showing the kind of things people are trying out with interaction. It's like dribble for code snippets.

http://codepen.io/2013/popular/

Codepen top pens of 2013 !http://codepen.io/2013/popular/ !

Codepen ExamplesLadda – Progress indicators

Loading Indicators Alternative Text input boxes

Shadow effects 3d Dropdown concept

Opening Type Falling petals animation Direction aware hover

Navicon Transformations Perspective Button

One of my other personal favourites that showcases unique takes on interactions is Codrops…

Insert Codrops examples in here of buttons or visual examples.

Codedrops Examples !Just a list of cool examples that I think are great for inspiration on Codedrops

Codrops ExamplesDot Navigation Styles

Creative Buttons Icon Hover Effects Grid Loading Effect Morphing Buttons Progress Buttons

More Progress Buttons Minimal Form

Border Animations Shape Hover Effects

3D Offscreen Navigation

Ashley Nolan @AshNolan_

Effeckt.css http://h5bp.github.io/Effeckt.css/

Another good

Viewing these effects separately is great for inspiration, but it's great to see the impact it can have on a site as well. !If you look at the Wacom website, you can really see that a lot of effort has been put into the interaction design and it all of the interactions feel really nice to use and not out of place.

Ashley Nolan @AshNolan_

Interaction experiences

Cursor Monster

National Geographic 2013 review example

Moon

Happy

Watchdogs

Ashley Nolan @AshNolan_

How do we apply this to our work?

The final thing I really want to cover is it's great having all of these new ideas, but if you want to make your own interactions, or if you want to prototype your interactions how would you go about it without building the whole thing. !Well you could use something like Codepen if you know code, but there a a few other tools appearing that are more accessible to people who don't.

or

Macaw and Webflow

Origami is actually a tool made for a program called Quartz composer, which comes free on Mac as long as you sign up to have an Apple developer account. !It was developed by the team at Facebook to help prototype interactions and is a good way for virtually anyone to mock up interaction quite quickly, by simply linking images and transitions together in the GUI. !I've had a play around with it and it's actually really easy to get started with, and would recommend for anyone who is interesting in mocking up complex interactions quickly.

Origami is actually a tool made for a program called Quartz composer, which comes free on Mac as long as you sign up to have an Apple developer account. !It was developed by the team at Facebook to help prototype interactions and is a good way for virtually anyone to mock up interaction quite quickly, by simply linking images and transitions together in the GUI. !I've had a play around with it and it's actually really easy to get started with, and would recommend for anyone who is interesting in mocking up complex interactions quickly.

Ashley Nolan @AshNolan_

The next generation…

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.

There are also far more physical devices being developed and I expect to see these start to shape the web in ways that are only really being explored right now. !So bleeps bleeps make parenting tools, such as motion alarms for buggies and ear thermometers.

You might have seen these as well, but Phillips now have LED lighting that connects wirelessly, and you can actually hook into the API for this and make things with it. !So the ligths can run off of your location for example.

Ashley Nolan @AshNolan_

LinksOn my site

ashleynolan.co.uk/blog/know-thy-interaction !

Interaction evolved article – 12devs http://12devsofxmas.co.uk/2013/12/day-3-interaction-evolved/

Ashley Nolan @AshNolan_

Icons by: !Car by Nurutdinov Timur from The Noun Project Television by Piero Borgo from The Noun Project Computer by Patrick Morrison from The Noun Project Printer by John Caserta from The Noun Project Tablet by Megan Hillman from The Noun Project Video Game Controller by Félix Péault from The Noun Project FuelBand by Olive Q Wong from The Noun Project

Credits slide !

Ashley Nolan @AshNolan_

ashleynolan.co.uk

Thanks