0117 329 0380

Gather Round, Cigar Factory, 127-131 Raleigh Rd, Bristol, BS3 1QU

Want to chat about a project?

hello@fiasco.design

Want to share your work?

work@fiasco.design

Improving UX through the use of animation

I have always had a love of the moving image, whether that be in blockbuster films, indy shorts, animation or stop motion and gifs. This continues to be an inspiration to me and since getting more into coding, I have found a place for my interest to expand, which has since grown into an opportunity for me to test my own skills in the field of moving image.

Smooth tile animation revealing more information on hover. Found on uimovement.com

Smooth tile animation revealing more information on hover. Found on uimovement.com

Movement in websites is nothing new. Not in regards to modern CSS anyway. People have been adding subtle movement to websites for years and years in the form of hover effects with slight transitions. From subtle hover effects to fully animated logos, interfaces and loaders – animation is now playing a much larger role in the user experience of a website.

We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.ZURB Foundation

I find that things get really interesting when boundaries are being pushed. New technologies, and ones that are now well supported like SVG, allow designer–developers to get really creative and produce fantastic animations that can have a real affect on a user’s experience of a website and work across a wide spectrum of both desktop and mobile browsers.

blogtest

Gif of UI animation created by InVision

Where animation can be useful

Animation can have very practical purposes as well as improve the look and feel of websites. For example, it can make a typical website loading experience feel much faster by convincing users that things are loading when in fact they might not be yet. The Facebook feed is a testament to this idea.

facebook-load

The Facebook feed loading animation helps to tell users that something is happening in the background

Balance is key to success

There is a delicate balance of animation that needs to be struck in website design and interaction. It doesn’t take much for a website to go from a graceful user experience to a mad cacophony of movement that is a horror to use. As designers and developers it is important to know where the level of movement can improve an experience and where it can become a distraction and actually hinder the usability of a website. There is no clear definition or level to measure against though, so putting this into a real life situation is occasionally trial and error, or in most cases a judgement of common sense and listening to your gut.

Animations are just one tool in a designer’s arsenal for improving a website’s experience and interaction. It’s not the be all and end all of a website. It can be tricky to get the right balance and can harm a website’s usability if done wrong. This is because animations can weigh heavy on a browsers processing power and therefore really slow down a website’s loading speed. They can also potentially distract users to the wrong area of the site, meaning a user could miss important information. Done right however, it can really help to make a website stand out from the crowd.

I always strive to create the best UX I can when designing and building websites for clients, and with the learning curve always on the move and browser compliance always improving, I’m positive that animation will play a larger part in website design in the future.

Or of course, you could just make animations for fun like this guy I created recently…

character-1-gif

A quick character animation test for an upcoming self-initiated project. Shh…

Do you love animation and UX? Why not get in touch on Twitter with your thoughts on animation in websites. We’d love to hear what you think!

 

7 Mins

Apps & Art: How Digital Design Helps Immersive Gallery ExperienceFor years, exhibitions in galleries and museums around the world were standalone offerings. They took place between certain dates, at certain times, in one place, and once you’d paid your money and visited, the experience was over. They were one time events showcasing work and exhibits to only those who came through the door. However, […]

5 Mins

The American Election: Designing a Presidential CampaignAmerican elections inevitably attract attention from across the world, and this year’s intoxicating and occasionally offensive juggernaut has finally reached its dramatic conclusion. It feels as if the collective political anxiety of the world is concentrated on a few hours and one, potentially world changing announcement. But, we all know that a successful election campaign, […]

3 Mins

Learning to be a ‘Yes’ ManI was drinking my morning cup of coffee and realised that rather than feeling excited about what the day might bring, I was feeling anxious. As I get older I’m learning more and more about myself. One thing that I’ve learnt, in what would seem like quite a sad epiphany, is that I’m not the […]

5 Mins

The Rebranding of the British CountrysideThe way we view the British countryside has changed. The identity of our green and pleasant lands have shifted, and over the past few years the digital and print design communities have transformed the outdoor lifestyle sector, bringing it into the 21st century and revolutionising our experience of this growing market. Here are a few […]

4 Mins

Why Words Matter for BrandsOn the 7th of September we were luckily enough to attend West of England Design Forum’s most recent event – and it left us at Fiasco Design feeling very inspired and even more in love with words than we were before. This is without a doubt the most intimidating post that we’re going to do. Non-copywriters […]

4 Mins

How the Stranger Things identity lured the Netflix generationIf you’ve been on another planet, you probably won’t have heard of Stranger Things, the Duffer Brother’s enigmatic, spooky, 1980s adventurethon that has taken Netfix by storm. For everyone else, you’re probably aware that it is uncompromisingly and unapologetically a Netflix original, and has all the attributes that lure in a certain generation with looming […]

3 Mins

Teamwork Creates the DreamworkOver the past couple of years the team here at Fiasco Design has been steadily growing – and more importantly evolving. We started as a partnership back in 2010 and since then we have organically grown into a creative, and passionate, team of like-minded individuals that I’m personally very proud of. As a creative agency […]

3 Mins

What is it like to work within Client services?“An idea can only become reality once it is broken down into organised, actionable elements.” – Scott Belsky. In my naivety, I thought that to work within the creative industry I’d have to be a ‘creative’ myself. I wasn’t graced with the creative talents that my colleagues exude on a daily basis. This posed itself […]

3 Mins

Brand identity projects: why communication is keyAs illustrators, designers, coders and artists, we perpetually live in a visual world at Fiasco Design HQ. New ideas are part of our day to day life, and we often get asked to provide advice and designs that help small and medium businesses establish their visual identity or help with the process of rebranding. With […]

3 Mins

Why we decided to incorporate CodePen into our workflowIn the last few months my development technique and processes have changed. In fact, it’s constantly changing. I am always chopping and changing certain developer tools and apps trying to create the most functional, efficient workflow I can. Enter CodePen, the self-proclaimed playground for the front end web. The small team at CodePen have created […]

fiasco design why we need to change creativity in education

3 Mins

Do we need to radically change our perception of creativity in education?Choosing a Career I was first asked ‘What do you want to do when you grow up?’ when I was in primary school. It seems somewhat incomprehensible that we’re asked to form a decision on want we want to do with our lives at such a young age. This question is almost always met with […]

fiasco design studio

5 Mins

Advice and insight on setting up an agency after six years in businessThis May marks our sixth year in business. In 2010, myself and fellow co-founder Jason Smith embarked on a journey to start our own design agency with no client base and a total of zero combined years’ experience either working in or running an agency. With no experience of running a business and no business […]

3 Mins

Small fish in a big ocean: My advice to illustration graduatesI’m not going to lie, it’s going to be a rocky ride initially. At college you are a big fish in a small pond, after graduation you become a rather small fish in a rather large ocean. So stay classy ladies and gents. A lot of it is about longevity and trial and error. It’s not […]

3 Mins

Hello pen and paper my old friend, good to see you againOne of my favourite things to do when I was younger was draw. I’d lose myself for hours freely sketching whatever ideas came into my head. I didn’t care when or where. Whether it was at the kitchen table, on the living room floor or in the middle of a family gathering, I was as […]

4 Mins

Perfectionism and 12 steps to recovery“God saw what he had made and it was good… …next time, it will be perfect!” Imagine this… your massive project is coming to an end. It’s cost you blood, sweat and tears. This is the moment you’ve been waiting for: the pay off. “Yes!” it finally launches! But instead of pride, satisfaction and closure…it’s […]

3 Mins

The great escape: Why getting out into the great outdoors is good for the mind, body and soulI am very fortunate to have grown up in the countryside of the South West. It is something that has helped to mould me as a person, giving me an appreciation for the outdoors and the wildlife that resides within. The importance of taking time out and escaping at the weekends is very important, with […]