How to approach animation design in mobile sport apps

What is animation?

Animation, otherwise known as motion design, could include any design feature that entails movement and draws the eye to key sections.

Animation types can include:

• Informative motion to highlight relationships between design elements

• Focused motion to highlight an important section

• Expressive motion to celebrate moments in user journeys or express a brand’s personality

Why is animation used in sports apps?

1. To boost usability

Animation is used to improve an app’s usability and ensure the user is directed to the most relevant information quickly and efficiently. An app should be regarded as a complete story, with the animation driving users to chapters in a relevant order. “Ultimately, animation is design that enhances a user’s experience,” says Jack.

2. To build excitement

“Animations are usually used in sports apps to simulate the pace of a live game,” says Christopher. “They allow key content to be featured or help to reveal detailed stats in an exciting way.” Well implemented animations will help create the same anticipation and excitement that surround games outside of the app experience.

Three questions to ask yourself before you begin:

1. Is it needed?

Animation is there to support an app’s story, so if you can’t answer ‘why’ it’s being used, avoid it. “Especially in a sporting app situation, you need to ask yourself, ‘what’s the context? What’s the reason for adding an animation? Is it to showcase a footballer? Is it to highlight how the football moves? Is it to give a sensation of being on a football pitch?’ You need to have a clear ‘why’ for every animation you use,” says Jack.

2. Does it enhance the experience?

The best stop animation should be there to support a vital piece of information within an app, otherwise you run the risk of frustrating the user and increasing churn. “I look to animation as being there to promote something important rather than being there to grab a user’s attention,” says Jack. “Animations shouldn’t distract from the raw energy of live games, particularly during playback,” says Christopher. “The placement and timing of animations become crucial to creating a fluid flow from browsing to viewing.”

3. Are the timings correct?

Following the s-curve in motion, design helps to ensure the timings follow a considered structure. Each design s-curve is displayed within an X, Y axis, with the meanings of X and Y varying based on their use. For example, within linear ease spacing, an animation travels consistently throughout its duration and within ease-in spacing, the animation is more condensed at the beginning before it starts to expand. You can read more about this theory here. “With the s-curve, it’s important to get the timings right, otherwise it can look tacky and devalue the brand,” says Jack.

What’s the process at Deltatre?

1. The immersion phase

The process begins with discovering and understanding the current landscape, business objectives and goals of the service. It’s commonly achieved through high-level workshops, personas and user goals.

Gone are the days when branding focused on a font and logo. These days, the use of motion is just as important to a brand’s look and feel, so working with the client to understand their requirements is key. “The motion animation principles and how those interactions work must come from the core of the brand,” says Jack.

2. The conceptual phase

“The key is to sketch early and often,” says Jack. It’s also essential for motion designers to work alongside visual designers to ensure the animations can complement the visuals and design in place. Building in silos can run the risk of creating animations that don’t place user experience front and center. Finally, comprehensive style guide and UX/UI specs are delivered.

3. The design phase

The process begins by identifying opportunities within our services and defining the objective of the animations. Opportunities are then conceptualized, and interactions and timings are fine-tuned. Animations are implemented into prototypes for user testing and further iterations are added if necessary.

“We strive to create premium experiences for all levels of fandom,” says Christopher. Careful consideration must be made to ensure we provide tailored team content and a spoiler-free experience for our hardcore users whilst still allowing casual users to feel welcomed via featured content and recommendation.

At Deltatre, usability testing is completed on the build and analytics are recorded shortly after the app’s launch. Results are then used to further enhance the app in later hardening sprints.

What’s next for motion design?

“AR augmented approaches,” says Jack. “Whether that’s being able to see players in a 3D aspect or seeing them live walking onto the app’s screen just before the game starts. From there, you could see the games they've played, press match, and then watch the game unfold in front of you.”

image source: deltatre AG