Hasta La Motion!

Before using an application, the user needs to understand how it works. This can be done with the use of good design and animation which, if done right, can provide the user with a pleasant experience while learning how to use it as well as navigate it. Each interactive feature of a mobile phone comes with an animation attached to it. Whether the animation is minimal or complex, it can provide a great deal of feedback and a smoother interactivity experience to the end-user. Animation can help guide the user, this element transforms the animation from just a decorative feature to a practical one as well.

User control and visual feedback

All animation should be able to provide some sort of feedback to inform the user if the action has been registered. Animations need to provide the user with a sense of control and to do this, animations are created in a way that would mimic a person interacting with objects in the real world. Animators need to consider aspects found in real life to include when creating the animation such as physics, sound, and responsiveness. To make animations appear to have a more natural movement and interactivity, real-life physics should be included in the animation whenever possible, together with smooth changes and maintaining momentum during the transition. This is to somewhat combat the lack of feedback that people used to get when pressing real buttons. While pressing a button, users could feel resistance to that button and even a subtle sound. With touchscreens, this is no longer the case and so, much emphasis has been put on animation feedback.

A normal animation needs the only duration, it begins and ends after a set amount of time, every time. It consists of a start value, end value and an interloper. No external force can be used to interact with the animation and nothing can impact its progression. In contrast, physics-based animations such as spring animation and fling animation are governed by force. Playing Pool on mobile, we can see this animation working. The player decides how much force to apply to the animation by how much the cue is being drawn after which is instantly released.

Familiar visual feedback would be the swipe animation. If the swipe action is done fast, the images quickly switch to the next one, however, when swiped very slowly, the images move sideways at the same speed as the swipe action. The loading animation is another great example. It tells the user that the application is working, however, but before using it, it has to first load its contents. There are many times when an animation accompanies the loading process to make it less boring such as a moving illustration. This can especially be seen in gaming apps. Checking and un-checking functions such as turning on WiFi adds color to the previously gray button telling the user that the function is now active.

Having so many options and ways to create animations, it is easy for a designer to go overboard. This is maintaining a good balance between functionality and creative design so that it does not distract the user from using the application for what it was built for. Overuse of animations, especially long ones can lead to the user’s frustration if the application is used regularly. Having the same long animation play out a few times tends to get boring and irritating, therefore, animation should be used in ways and places where it makes sense and does not impede the user in any way.

Google and material design

When designing animations for a mobile phone or application, an important thing is to consider the current landscape of mobile design. Using material design as the base for animations is a great first step. Google has come up with material design back in 2014 that emphasises good interface design. The design philosophy is based on the idea to mimic real-world objects and materials, textures and physics to be used when designing and animating icons and an interface, be it an application or a website. Featured here is also the idea of material design animation, an example described above would be the physics-based animation to mimic how objects work in the real world. The language was developed further in 2018 to provide designers with more flexibility to create complex and creative geometry, colors, topography. The language suggests that all components of the interface should be consistent in their design as well as animation and developed to allow fully gradual user flow.

After the material design language has been released to the public, it has been embraced by many designers, with many loving the idea saying that the language seems very cohesive and thoughtful with the motion design aspect serving a major role in the core idea of material design. The animation offered by Google in material is all done realistically, each of them being consistent and with good timing. The mobile version of a web interface should be designed in such a way to not lose sight of the core elements. Many online casino websites, for example, have been able to take this into consideration s that navigating their website on mobile remains easy and the casino games themselves are in full view of the user. Traditional desktop sites only are out of the question as much more emphasis is being put on mobile with cross-platform support on multiple devices.

Casino websites have been around for many years, since the early days of the internet and have been quick to adapt to the constantly-changing technology. This included adapting their websites to mobile. The same principles apply to casino websites as well, designing it to comfortably fit the screen of the device and some functional animations to the interface to guide the player. All in all, the main purpose of good animations is to provide a sense of personality and functionality to the end-user, making them feel in control of their actions and providing pleasant feedback while using the application or navigating the website. It is used for either helping or informing the user about a process while at the same time guiding them and drawing their attention to the important features.

The post Animation design for mobile devices appeared first on AnimationXpress.