When we interact with someone, feedback lets us know that what we said or did has been processed. Often, visual cues are just as important of a response as statements: a nodding head, raised eyebrows, and a smiling mouth, all convey meaning. The visual cues help us understand the information that is directed back at us. Without these movements, these motions, we’d wonder if our input really got through and we might not know how to react or what to do next.
Visual feedback through Motion Design.
It’s very similar when we interact with software. When we open an app, click a button, or transition from one screen to the next, we expect feedback as recognition that we did something. Otherwise we might think that the system has frozen up or crashed. One of the more subtle but powerful means of providing visual feedback is through animation. Movement let us know that the system acknowledges our input and is doing something about it. Likewise, animated indications help us to determine what we might want to do next. Thus, motion carries meaning and contributes to a delightful user experience. But just how is motion used? Let’s look at some of the reasons why and how animations are used in UI design.
It’s animation that turns a sequence of individual picture frames into a video. When the illusion of motion fills the gap between frames, the story comes to life and becomes more understandable. A great story has a beginning, middle, and an end. As such, motion facilitates comprehension by creating the full picture for us, while holding our attention.
In a video, objects appear in one place in one frame and then, in small increments, appear in another place in the next frames to create the illusion of motion. Motion in user interfaces (UIs) works in a similar manner: each screen, each individual state, is connected to the next through movement. When we navigate through screens, motion indicates transition from one screen to the next, guiding us through the system.
Animations intuitively communicate where we should focus our attention, what to do next, or what is most important to view. Motion also facilitates our sense of spatial awareness: where we are and where we have gone in the system.
Animations can acknowledge that an action has happened, is happening, or will happen. This provides reassuring feedback and helps to keep our attention. Visual feedback can be provided until content has been loaded, for example.
The above example shows placeholder loading, which provides visual feedback until content is loaded.
These three reasons show how motion is an important aspect of a delightful user experience. Motion helps to connect not only the screens of the UI, but helps the UI connect to its users.
For information on Fiori motion design, please see the animation article in the SAP Fiori Design Guidelines.
Credits: James Edenstrom, Sebastian Moreno, Dragomir Ralchev
Visual feedback through Motion Design.
It’s very similar when we interact with software. When we open an app, click a button, or transition from one screen to the next, we expect feedback as recognition that we did something. Otherwise we might think that the system has frozen up or crashed. One of the more subtle but powerful means of providing visual feedback is through animation. Movement let us know that the system acknowledges our input and is doing something about it. Likewise, animated indications help us to determine what we might want to do next. Thus, motion carries meaning and contributes to a delightful user experience. But just how is motion used? Let’s look at some of the reasons why and how animations are used in UI design.
Comprehension and Guidance
It’s animation that turns a sequence of individual picture frames into a video. When the illusion of motion fills the gap between frames, the story comes to life and becomes more understandable. A great story has a beginning, middle, and an end. As such, motion facilitates comprehension by creating the full picture for us, while holding our attention.
In a video, objects appear in one place in one frame and then, in small increments, appear in another place in the next frames to create the illusion of motion. Motion in user interfaces (UIs) works in a similar manner: each screen, each individual state, is connected to the next through movement. When we navigate through screens, motion indicates transition from one screen to the next, guiding us through the system.
Animations intuitively communicate where we should focus our attention, what to do next, or what is most important to view. Motion also facilitates our sense of spatial awareness: where we are and where we have gone in the system.
Provide Feedback
Animations can acknowledge that an action has happened, is happening, or will happen. This provides reassuring feedback and helps to keep our attention. Visual feedback can be provided until content has been loaded, for example.
The above example shows placeholder loading, which provides visual feedback until content is loaded.
These three reasons show how motion is an important aspect of a delightful user experience. Motion helps to connect not only the screens of the UI, but helps the UI connect to its users.
For information on Fiori motion design, please see the animation article in the SAP Fiori Design Guidelines.
Credits: James Edenstrom, Sebastian Moreno, Dragomir Ralchev
- SAP Managed Tags:
