This week’s lecture was dedicated to looking at both inspiration and techniques we could use to make our project as immersive as possible. We explored both macro and micro interactions and looked at what users expect in today’s environment of highly dynamic web content. Features like live data, scroll effects, animations and interactive maps are all readily available on many websites, and can add to not just the visuals but also the overall user experience of a website.
As I am now getting deeper into the planning phase of this project I thought it would be a good idea to dedicate my blog post this week to what animations I could look to create for firstly my immersive Figma Prototype and then moving forward my website build. If I decide to look at the e-book option this will rule out using motion and I will need to concentrate on other methods of storytelling, but for now I want to explore the possibilities.
For this blog post I really wanted to delve deeper into what is possible when using web animations as this will help me decide what animations I might want to include within my prototype and final project build. I started by simply looking online for some articles discussing web animation and I found these three:
All Last Accessed 28/02/24.
Firstly, I felt it was worthwhile to look at why we would look at using animations in this project in the first place as well as any downsides that might come with animation use.
The main reason to use animations is to help convey a narrative, animation can help to guide users through the available information on a page as well as to convey complex ideas in a manner that is easier for users to digest. As my project this module is all about telling the story of the Apollo Space Missions any technique, I can use to help to teel that story and guide users through the narrative will be very powerful and useful to me. Another reason to use animation is that it helps to keep users engaged I have looked at research around how users read web content and it is clear people very commonly skip content. By using animations, I can capture users’ attention and direct them to my content keeping them engaged and stopping them simply getting bored with simple text and imagery and leaving the story before the end.
While animation has many benefits it also comes with issues, too much or poorly executed animations can cause the opposite effect to those above causing a disconnect with users, causing them to be distracted and lose interest in the narrative. Animations can also be difficult to create taking up significant time and skill to create, they can also slow down the loading speed of a web page or Figma prototype causing the experience to be unpleasant and potentially losing users.
With this in mind and looking at some inspiration it is clear that subtle and effective animations are key to making the best use of animation in my project. Simply including animations without a clear purpose is a recipe for a mismatched and messy final product.
I now wanted to look at websites, especially narrative websites that used animation techniques successfully to tell a story to gain inspiration and ideas for my own design.
The first example I found was *https://50-jahre-hitparade.ch/ (Last Accessed 28/02/24)* this charts fifty years of the Swiss music charts (niche subject) but it has a wonderful way of taking you through the years as you scroll with your mouse wheel you move forward in time with each year approaching you before fading before the next appears. This alone is an amazing piece of design but as you pass each year you see song titles next to what look like star constellations what is happening is you are scro0lling through an interactive infographic. The shape of the constellation showing the songs rise and fall in the charts. But that is not all the song’s position on screen also relates to its mood, with horizontal positioning indicating on the left sad and on the right happy. This is an interesting design which makes a topic I have no interest in, a website I explore. While I feel some of the scroll function on this might be beyond my technical skill, I can say it is inspiring and I feel I could investigate including some of the logic involved in the design in my own design.
Another inspiring example I found is *https://www.wsj.com/ad/cocainenomics (Last Accessed 28/02/24)* developed by The Wall Street Journal (alongside Netflix) to tell the story of the Medellin Drug Cartel. This website takes you through the story of the Cartel as you scroll from top to bottom over a single page. What I really like on this site is how information like blockquotes slides in as you scroll down the page. We also have videos, interactive maps and even a simple animated line to link the story together. All these animations add to the experience of travelling through the narrative and would be something I would love to include in my design.
What I have learnt from taking this look at web animations is while animations may be a very powerful tool that can help a narrative when used correctly, they can also harm the experience when overused or poorly thought out. I will really need to consider each animation I use and whether it does truly add to the experience and immersivity before adding it.
Web animations can definitely add to how immersive my project is and how well I communicate the narrative, but I need to be very selective in how and where I use them. The line between successful and unsuccessful use is very thin and I need to remain on the right side of it. Subtle seems by looking at sites that use animation successfully seems to be a key component as does limiting the animations on the screen at any one time, having two things moving at once is very distracting. I also need to remember it does not all have to be about animation, using video and sound are also techniques that can add immersivity to my website and the mix of these with animation will lead to the best overall outcome.