Icon Button
Icon buttons help people take supplementary actions with a single tap.
Motion Functions
Icon buttons are often used to represent a specific action or function and are designed to provide a visual cue to the user about its purpose. The primary function of an icon button is Identification. Animations and motion within an icon button can give the user an idea of the button's task.
The icon buttons can convey a sense of delight with their aesthetic design choice and emotional appeal. Motion Principles can be used to arrive at these functions of the animation.
Examples
The icon button here leverages the principle of transformation and dimensionality to change shape from a person to a camera. Along with the direction arrows, this icon helps the user identify what state the camera is in and shows a change of state by moving the arrow and transforming the shape from the front of the screen to the back of the phone. The action mimics rotating a phone, and the added dimensionality to the microinteractions helps ground it in reality.
The bookmarks show dimensionality and a state change when pressed, helping the user identify the action performed and a way to undo the action. The stylistic interpretation of the examples are different, but convey the same information.
The like animation microinteraction leans heavily on aesthetics to convey the emotion of having "liked" something. It leverages the principles of offset and delay along with an accelerated easing curve to pack emotion into a tiny, liked-sized package.
This search microinteraction uses a morphing interaction to transform from a magnifying glass to an x-icon to communicate to the user the change in state. The handle of the magnifying glass conveys the idea that the glass has transformed into a button and the interaction state has changed.
Last updated
