The Elements of User Experience: Motion
As human’s, we are constantly moving. Whether we’re taking a typing paper, taking a jog or dancing, there’s always some sort of movement going on. Similar to a dance, logical and precise movements are integral to providing a user with a good user experience.
Kinesthetic Empathy
Have you ever watched a performance that made you feel like you were in the performance, even if you’re just watching? That’s the basics behind kinesthetic empathy.
Spectators of dance experience kinesthetic empathy when, even while sitting still, they feel they are participating in the movements they observe, and experience related feelings and ideas. As dance scholar Ann Daly has argued: “Dance, although it has a visual component, is fundamentally a kinesthetic art whose apperception is grounded not just in the eye but in the entire body” (Daly 2002). Spectators can ‘internally simulate’ movement sensations of ‘speed, effort, and changing body configuration’ (Hagendoorn 2004). An important source for the concept of kinesthetic empathy is Theodor Lipps’ theory of ‘Einfühlung’. Lipps (1851-1914) argued that when observing a body in motion, such as an acrobat, spectators could experience an ‘inner mimesis’, where they felt as if they were enacting the actions they were observing.
This is most commonly seen among dancers, as there’s a lot of movement going on, as well as a captivating rhythm for the audience to follow. This concept can be expanded to almost any type of movement though. For example, when you’re watching a fight in an action movie, there’s often times where you can “feel” the punches, often to show how strong a character is and establish the sense of intimidation he may bring. For some, they may even feel they’re in the fight, swinging their own fist and cheering on their favorite.
Drago's punches early on are super intense, showing how out of his league Rocky seems to be
Movement as a whole inspires imitation. When you see someone or something moving around in a certain way, there’s an inherent sense of empathy that brings just from observation.
Movement in a digital space
In a digital space such as a poster or logo, movement can be a little tricky. Since objects like these don’t have actual movements going on, it’s often up to the designer to give the illusion of movement. While most will immediately start thinking of full on optical illusions, this article by Rob Hooks of 99Designs shows that there’s quite a few different ways to present the perception of movement
Here, we’ll detail 9 techniques which can be employed to generate the illusion of movement...motion lines...medium disturbance...anticipated movement...multiple images...transparency...blurred outlines...lines of force...optical movement...optical illusion.
Despite all being used to display movement, all of these techniques often provide different results. Motion lines for example are very simple and common, with kids as young as kindergarten often implementing them into their drawings. Anticipated movement relies more on the original object itself, as something like a wave in mid movement brings the perception of movement since we know it has to crash eventually.
Similar to the concept of kinesthetic empathy, we often perceive movement even if it’s not there due to the sense of empathy a design can provide. That’s how we can take things as basic as crashing waves and straight lines and turn them into movement. This adds a whole new layer to the design, taking what should be a static image and adding a whole new layer of depth to it with it’s perceived movement
Motion in user experience
When applying motion to user experience, what’s interesting compared to other areas of design is that you actually can see the movement. Animations such as screen transitions and button transformations are common in apps. When you consider the psychology behind movement in humans, it begins to make more sense why this is the case.
Due to how natural movement is for a human, it actually ends up decreasing the cognitive load when motion is applied correctly. Part of that is how we’re instinctively more drawn to an object moving. If it’s moving, it must be important, bringing our focus immediately to it. A great example of this would be when you click on the wrong button to complete a task, so the screen shakes. While a bit unpleasant, this subtly but clearly tells you that something went wrong.
The words shaking help show the input didn't properly process (source via CleverTap)
Proper movement can also help bring comfort to a user. Ever notice how during downloads, you often see a loading bar with a percentage? While it’s nice to let the user know the status, the main appeal to this is it tells the user the process is continuing smoothly. While it’s extremely complex, our basic understanding of these screens is that the device needs to load everything, which can take some time. By having the percentage, it makes us quickly think “alright it’s 40% done, everything must be going along then”. They could just as easily not have the percentage and it wouldn’t technically change much. The device is still loading, you’re just completely in the dark on the process, bringing uneasiness.
By having each percent shown, it gives the user a sense of comfort knowing the app is working (source via Fabien Dorville)
This is but a small sample of how much motion can enhance a user’s experience. Nearly every movement will bring a different perception, making it important to use them properly. The biggest mistake you can run into is having too much movement. Unnecessary movement in a design is an easy way to give your user cognitive overload. Instead, minor, well thought out movements are the best way to go about it, similar in a way to a dance routine.
