What is the main feature of a good app? It enhances customers’ lives through the set of well-conceived steps in user experience (UX) design. Proper UX speeds up interactions and makes activities simply and orderly organized. On the surface, the easiest way to arm the users with a clear vision of the product functionality is to give comprehensive guideleines. But the more complex tasks the app performs the more time you spend on learning how to use it properly. Complexities of manuals create tension and distract users.
That’s why, when creating a Gunnebo Security Solution app, we paid special attention to the development of user-friendly instructions for our clients. Gunnebo app is aimed at remote management of our security products. Since it has many functions, including alarm control, cash operation, data analysis, and devices coordination, it takes some time for the users to study all the functions. How can one make this boring and complicated task fun? We set our sights at animations as a nice way to entertain, attract attention and make instructions illustrative.
Our next concern was about the practical implementation of this decision. Everybody who has ever dealt with animations knows that it may take a lot of time and effort to create them. Even behind a small and seemingly simple animation, there may hide long lines of code. So, we decided to try Lottie, a relatively new animation library created by Airbnb. And it turned out to be the right choice.
Lottie is an excellent library for rendering Adobe After Effects animations for Android, iOS, MacOS, TvOS and UWP. It uses animation data exported as JSON files from Bodymovin extension and renders Adobe After Effects animations in real time. So, engineers don’t need to re-create them by hand and can work directly with animations as they are created by designers. Another good thing is that the size of animations is small no matter how complex they are.
Lottie supports numerous flexible after-effects, like solids, masks, shape layers, etc. And it allows various manipulations with an animation (resize, loop, reverse, scrub, change color, and other). You can play just some fragment of animation or loop it if you need and do lots of other things.
For the Gunnebo app, we have developed a set of animations which familiarize users with the app’s interface and functions. These include dashboard use, calling attention, data processing, etc.
Animations created with Lottie have a lot of perks. Created slides show up only if user haven’t seen them. Thus, we don’t nag users with directions, they are only shown on the first use of a specific function.
The slides load from a solution folder. That is, the person who adds/edits new slides doesn’t need to be a developer and doesn’t have to edit the code. Files are added to GIT in Azure DevOps. Folder structure in Azure DevOps and folder names determine where slides will be shown. Slides load into Telerik SlideView, so, users can swipe or tap to go through the slides.
The text is stored in html, so, the style is localized and modified easily. Gunnebo uses Crowdin for localization.
The picture below represents the structure of the project in general:
Gunnebo developers have used the following libraries for the implementation:
https://github.com/martijn00/LottieXamarin
https://github.com/azchohfi/LottieUWP
https://docs.telerik.com/devtools/xamarin/controls/slideview/slideview-overview
