Nowadays, from business to consumer, every eye is on customer experience. The reason is simple. Customer experience has become a decisive factor in gaining and retaining customers. In fact, according to a PwC survey, consumers are willing to pay up to 16% more for better customer experience.

So, what do app animations have to do with this? Great animations can get you a long way in delivering mobile app experiences that feel and behave flawlessly for your customers and end-users. They are a key element to make your app more user-friendly and delightful. But why are app animations important?

Good app animations will help:

• Make your apps more predictable and intuitive to use
• Increase the control of users over what they want to achieve
• Provide faster, more convenient navigation, where animations hint at what the user’s trying to do
• Deliver a delightful experience, as recent studies show that users that have an experience conveniently animated with taste are more likely to go back to the app.

When designing an app, there are several types of animations you can use to take your user experience to the next level. Some of the most common types include:

• Giving feedback: Animations that drive the user’s attention to what the app is doing, allowing them to clearly understand the results of their actions.
• Educating users on how to use the app: Animations that introduce contextual suggestions for how to use the application, such as explaining the most common operations with hints on gestures and touch interactions that provide an increased depth of interaction.
• Establishing relationships: Animations that allow end-users to understand the hierarchy of elements and the relationship between them while preventing blindness to the change of state in the application with natural navigation transitions. You can use, for example, horizontal sliding transitions to show same-level interfaces and volume, and 3D animations to convey parent-child relationships between elements.
• Reducing perceived delays: Entertaining animations that convey progress of the users’ requests and make wait times feel shorter and more natural.
• Preventing errors: Animations that assist the end-user in successfully interacting with the application, highlighting any errors and signaling associated alerts through contrasting animations and color transitions.

In the next section, I’ll show you how you can make your apps even more engaging by creating animations easily and quickly using low-code—no hand-coding required. Let’s take a look.

Building Great Animations with Low-Code

OutSystems already provides many animations out-of-the-box. Screen navigation controls, feedback messages and loading screens as well as screen content updates. These already go a long way in providing standard type animations and transitions. So, if you’re familiar with OutSystems, you might have heard of OutSystems UI.

The OutSystems UI Framework provides UI patterns for web and mobile applications and beautiful built-in responsive screen templates for you to use. It also allows you to create your customized templates.

Now, many OutSystems UI patterns already come with built-in animations. This way, OutSystems abstracts some CSS concepts allowing anyone to build animations with low-code. But you can always add your custom code to provide an extra level of animations.

Some of the constructs of OutSystems UI abstract concepts like animation sequences in appearing elements, or add touch interactions to any widget on the screen. While these lower level elements allow you to compose many different types of animation patterns, we’re working on wrapping the most complex patterns in a ready-to-use low-code library of patterns that you can use to push the boundaries of what you can do.

If you want to see how easy it is to do this with low-code, I invite you to take a look at my recent demo, How to Build Smooth Animations for Web and Mobile using OutSystems. There, you’ll learn how to build:

• Animations between pages
• Entry animations
• Exit animations
• Lazy load animations
• Eye candy animations
• Touch integrations.

Here’s an excerpt of the end result:

If you’re interested to learn more about animations and see the exact steps I took to create them, check out the entire demo here, and be sure to look under the hood here.

Now that you have a good understanding of how to create amazing application animations with the OutSystems platform, why not give it a try? Get started with your own free personal environment on the OutSystems cloud, including full and free access to all our e-learning and documentation. You’ll be surprised how easy it is to create amazing applications, fast.