Hjörtur Hilmarsson explains when to use Animations

Hjörtur Hilmarsson is a creative Web Developer and ​CEO of 14islands​, a Stockholm based web development studio that loves to build great user experiences. 14islands designs and builds elegant experiences using a human-centric approach and cutting edge technologies - their go-to stack currently is Gatsby + Prismic + Netlify.

Hjörtur stopped by the Prismic studio to discuss the topic of Animations and how his team uses them as part of their design strategy. Even though animations can be fun for designers, developers, and visitors, the key to the 14islands approach is to only use them when they serve a clear purpose on the website.

Animations are great for drawing a visitor's attention to a certain area, making the browsing experience feel natural, or serving as a transition between two different actions, but they can also distract a visitor and hijack the scrolling experience.

← View other episodes

We had Hjörtur Hilmarsson in our Paris office in September. Interviewed in Prismic's Studio by Sadek Drobi

I mean, we can easily go overboard with animations because we really love to work on them. I think they have a purpose. They serve a purpose, an important one, it's all about telling a story. There are three types of animations that I can think of.

Sadek:

For people who just joined us, we did two other videos where we talked about how you guys at 14islands prepare the strategy for your projects and then also we talked about how you choose your frameworks, Gatsby and Netlify. Basically we do these videos so that we deliver the best practices of agencies like 14islands to our users so that they can deliver better quality websites, we think that it's important. I'm repeating myself here, but it's important to know that good quality comes with decisions and with practice. It's a lot of little things that make you deliver good quality work. Now, we are down to the topic of Animations. I guess, there's a lot of debate about: Should people use Animations? Transitions? Is it too much? So what do you guys think about it?

Hjörtur:

Yeah, I mean we can easily go overboard with animations because we really love to work on them. But I think they have a purpose. They serve a purpose, an important one, it's all about telling a story. There are three types of animations that I can think of. I think one is basically just like calling attention to things. You want to tell a story when you're on a website or something or a product. And one thing that animations can be useful for is to call attention to things. Like you're scrolling and there might be some fact, a number that you want to point out, there might be some product image or something that you want to kind of push forward: that's kind of one purpose, I would say. Just to call attention to it.

Sadek:

To emphasize something, to call attention.

Hjörtur:

Exactly, exactly. Another purpose I would share is basically to have smooth transitions between different stages in an experience, you know? So it's not like a hard cut between stages. So it provides, you know, this more natural feeling of using a product or a website.

Sadek:

So yeah, the experience isn't suddenly like: Woom! Something happened.

Hjörtur:

No, exactly, it's unnatural. Like if something just like shows up, you know? Or yeah, or goes somewhere and you don't know what happened. So Animations can give you this kind of more natural feeling of things. In nature, things don't just appear and disappear. That would be scary, right? You'd be like 'What happened?'.

And then I think the third types of animations and probably the most interesting one is to use animations to also enhance the story, to do animations that show how a product works. As an example, if you're doing a video game, it's all about storytelling, using animations to tell, to enhance the story. Those kinds of Animations are maybe the most fun to work on sometimes.

I don't think you should be just looking at other sites and picking cool animations that you just want to try out. Like if you're building something real then there should be a purpose behind.

Sadek:

And that's maybe the problem. That's why we abuse them because it's fun to work on them, right?

Hjörtur:

It is really fun to work on it. But I would say, as a word of warning maybe: I don't think you should be just looking at other sites and picking cool animations that you just want to try out. Like if you're building something real then there should be a purpose behind. It can be connected to the brand. Maybe the brand moves in a certain way and behaves in a certain way or it can just be simply functional. How you get from one place to another. Don't just look around and say, 'oh I like this animation, I will put it.' Think about the purpose: Why are you using it? What is the purpose? What are you trying to solve or to emphasize or to smooth out?

There are some websites where each section when it appears, it appears with a transition and it feels heavy because it's moving all around and you can't focus on any of the sections because everything is moving all the time. That's very hard

Sadek:

Whereas I saw recently a website where, actually, when you are scrolling, there is a section that is the Call to Action. There is some content before it, you read about the product, the company, and then there's some kind of Call to Action. It's a section that's supposed to be important, that emphasizes some things. So only that section appears by coming on top of the previous one instead of just like scrolling normally. It appears as if it was put on the other and that was just to emphasize it. As you say, that the reason there was 'Let's emphasize that section smoothly' yet we need to catch the attention that there's something new happening because when you scroll a lot, at some point you're bored of scrolling content, that serves that purpose.

So you said Animations should either emphasize or make the experience smoother or sometimes an Animation is simply telling the story as in video games, right?

Hjörtur:

Yeah, I could give you one example, maybe.

We were working on this site, antler.com. It's a start-up generator. I mean, what they do is: People can apply for the program and it's usually people that are interested to become entrepreneurs. What they do is they pick out people that fit really well together to work together to start a company. They will get some Seed money and they will kind of help them through the process. We had this discussion about how can we tell this story and what became the solution was that we had these images of the people that are in the program, those founders. It's not that prominent but they are on different lines, and when you scroll on the page, they all align into place. So they form the team on the page.

Sadek:

Ah okay, so the whole thing is you're aligning people to form a team. That's telling the story in an Animation. That's a good example.

Hjörtur:

Yeah, that animation is on the front page and I don't think, maybe a lot of people don't notice it even but still, I think people feel it when they're there. Especially when you read, maybe if you look at it without reading maybe you'll not notice it but when you read, that animation will serve the same purpose as the content that you're reading. It fits with the content. It fits with the story. More or less like in the background music when you're watching a movie. You don't exactly notice it but it gives you that feeling that things are coherent.

Just to explain a little bit further, it's usually a discussion between designers and developers, for us. I mean, in some cases, if it's small animations, we can just create them in After Effects and export them but when it's more complex animations, it usually has to be a close collaboration between designers and developers. The designers might come up with an idea and then the developer will try it and then we'll feel it and then we'll improve it until it feels right.

There's a lot of websites out there that are just hijacking your scroll and you get mad using it. So it needs to be done in the right way. We all have our experience with websites, we learned it, we have habits. If you start scrolling and things start moving and not as you expect them, that might be too much for a user.

Sadek:

That's very important because I notice that sometimes you have an idea of an animation, you do it, but when you start interacting with it, it feels completely different and it doesn't work. Or when you implement it, because of other performance issues or other elements interacting together, it doesn't feel as it should have felt when you designed it. That's why it's important that they collaborate together on making that work for the purpose that you chose to do it for.

Hjörtur:

It is actually hard to do it properly and to do it well. There's a lot of websites out there that are just hijacking your scroll and you get mad using it. So it needs to be done in the right way.

We all have our experience with websites, we learned it, we have habits. If you start scrolling and things start moving and not as you expect them, that might be too much for a user. You don't know how to function anymore with that website, how to interact with that website. You lose that experience.

Sadek:

So who pushes more for animations? Designers, developers, the client? Who buys more into animation?

Hjörtur:

It's not the client, I can tell you that. You have to convince them. To be honest, we sometimes just do it, we will just make it happen as part of the quality that we deliver. I think that's the right way to think about it. We will even spend time on it that is unpaid time just to make it look like. Because it matters to us, you know? We want it to feel right.

Sadek:

Sometimes you can even ask the client and they might not even notice it. They feel it, they experience it, but they will not tell you 'Oh, I like that animation', they tell you 'I like the overall work'. It's best when it's subtle.

Hjörtur:

Yeah, we care about how the site is going to perform when it's out, it's important I think. But I would actually have to say, developers. Our developers, I think are the ones who push for more animations. It's a lot of fun, that's the thing. So we actually always try to put an end somewhere because we know we, developers, are maybe a little bit too enthusiastic about Animations so we also need the art direction perspective to do it properly.

Sadek:

Yeah of course. I am developer, I can understand.

Hjörtur:

Yeah, right? Do you enjoy doing animations?

Sadek:

Yeah, of course. Everyone enjoys it. I mean, every developer at least. It's fun.

Cool, well maybe we'll move to the next video.