Education through motion
Educating Android users can be subtle by using motion
Material Design
The material design system will be familiar to most, as one of the most widely used design systems. It’s a visual language that represents good design principles whilst allowing expressive branding.
Foundationally, it is based on the physics of the world. This makes it natural and familiar to users. It models the way objects move and how they interact with each other.
Motion
Motion can celebrate the completion of a task, delight the user, or help to drive the user through a flow. The way objects move and interact can bring a touch of class and express your brand.
You can also use motion to help teach the user how to interact with an element. Often subtle bounces, shakes, and elevations can improve user experience and understanding.
Animations
On Android, animation API’s have been re-written and changed over time. Currently, there are two main ways. The Animation API’s are the older API’s, but they allow you to use the anim resource files. The Animator API’s are the newer API’s which typically are a little easier to work with. Animator’s change the properties of an object/view. Whilst Animation’s only change the visual representation of them.
Examples
I have created some examples which give a flavour of what is achievable using motion on Android. There are many ways of creating the same animations, so I have tried to showcase a variety. Hopefully, these examples will inspire you to experiment with motion in your apps.
Clickable
Some elements may not appear clickable to some users. For example the items within a list. Although changing the static visual may help, using motion can be more powerful.
Lists commonly will utilize a RecyclerView with an accompanying adapter. If a list item is clickable, you may want to set a background of selectableItemBackground. This provides a ripple effect upon user click, giving visual confirmation of a click.
You can also trigger this effect manually, thus giving a visual clue to the user.
Firstly, I ensure that the background is a RippleDrawable as a safety measure.
Then I post a runnable on the animation queue of the itemView. I delay it to ensure it’s after the screen has loaded and so visible to the user.
Then I set the hotspot. This is the epicenter of the ripple effect. For the goal of educating a user, this should be in a natural place where the user would interact with the element.
Then to trigger the ripple I set the state of the drawable to pressed and enabled.
To clean up after the effect has finished, we set the state back to an empty array.
Swipe up to unlock
This motion might be familiar to you. With this bouncing motion, Android is trying to show the user that you can swipe up to unlock the screen.
I define two ObjectAnimator’s. One for the motion upwards and one for downwards. I create an AnimatorSet to control their behaviour together.
The key to this motion is the Interpolator’s. The upwards motion has a linear speed. The downwards motion uses the BounceInterpolator. This simulates the dropping of an object and it bouncing on the ground.
Shake
A shaking motion can help draw the immediate attention of the user. You can use it to inform the user of an error or that a button needs to be urgently clicked.
I create an anim resource that represents the shake. I start this anim by calling startAnimation() on the TextView.
Then I fade the TextView to an alpha of 0, after a short delay, to hide the error.
Summary
Experiment with simple motion. It can have a huge impact on the usability of your app. It can delight users and give a sense of polish and quality.
Sources
Previous Post
Originally published at https://www.brightec.co.uk.
