How Does it Hang
Getting the Hang of Motion Design
Objective
Apply the principles of motion design to a past project with the aim of enhancing the user’s experience.
Process Overview
- Review previous project How Does it Hang.
- Research motion design.
- Form ideas to implement meaningful motion into design.
- Create animations and motion in Principle.
How Does it Hang Project
The How Does it Hang mobile application was the result of a project with a goal to find a solution for shoppers who are hesitant to shop online due to their lack of knowledge regarding quality and fit of unfamiliar brands.
A main feature of the app is called My Fit, which allows users to enter their measurements by logging clothing items from brands they already know fit them well.
The screens below were the ones I took to look at from a motion design perspective.
Research
To understand more about the reasonings behind what motion can do for a design and how I could enhance this part of the user’s experience, I looked at several resources.
Looking at the 12 Principles of Animation gave me a great foundational framework of things to keep in mind when adding motion. Its all about mimicking real life physics to give digital products a more human feel. Google’s Material Design dives into this concept as well. When reading what they had to say about motion design specifically, it’s clear that the motion is not about aesthetics and looking cool. It’s about what adding motion to a design can do for the user.
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. — Google Material Design
During my research I also discovered Microinteractions. These are contained product moments that revolve around a single use case — they have one main task. They are the little things that turn a good digital product into a great one. What’s important to take away from microinteractions is that it’s all about the details. A feature may bring users to your product, but it’s the details that keep them there.
Ideation
After filling my brain with all this interesting research, I started thinking of ways these concepts could be implemented into How Does it Hang.
Along with this research I found myself keeping in mind Nielsen’s 1st heuristic of Visibility of system status, and I brainstormed ways to keep the user informed on how far along in the logging process they are.
I realized early on was the way users toggled through sizes. Currently users tap a small + or - icon. Instead, I tried incorporating something a little more interactive and try to hint at the act of browsing clothing items on a clothing rack through a carousel.
After forming these ideas I took to Principle, a program used to design animated and interactive user interfaces.
Feedback
I handed off an interactive prototype to users and talked with them after about their experience using the app. I also made silent observations of user’s reactions to animations. It was interesting to see how simple motion can affect a user’s interpretation of an app.
Below are some key takeaways from testing:
Observation 1:
Some animations appeared to be interactive when they weren’t.
Solution 1:
Don’t distract the user. Static elements aren’t a bad thing.
Observation 2:
Users were thrown off by different speeds of certain animations and where the were coming from.
Solution 2:
Refine animation speeds and screen transitions to create a fluid screen-to-screen.
Observation 3:
Users tried interacting with item images to select size rather than tapping ‘Save Item’.
Solution 3:
Prominent elements that appear tappable should be tappable.
Observation 4: Users were sometimes unaware how to toggle through item sizes.
Solution 4:
Create an intuitive interface where swiping is the obvious user action.
Iterations
These problems discovered through testing were generally a simple case of tweaking things in Principle, however to create a more intuitive interface for toggling through clothing item sizes, I modified some screens in Sketch.
Through some more testing, it was clear these changes did a much better of hinting at a carousel swiping interaction than the previous rendition.
Final Prototype
I added a few more clothing selection options to create a prototype that would provide a more complete experience and allow users to really get the feel of navigating the app.
The instance arose during testing where a user wanted to change an clothing entry they’d logged. In response to this I also experimented with how such an interaction would be communicated through motion.
The left animation shows a far too elaborate approach I started out with. That was quickly simplified into the animation you see on the right.
Lesson to reiterate, keep things simple and don’t distract the user!
Concluding Thoughts
From the time spent researching and crafting a motion design experience, there were a few things that really stuck with me that I believe are incremental to a successful implementation of motion.
Keep it Functional: Motion in design should have a clear, logical purpose. It is never just for aesthetics.
Think Material: Convey how objects move, interact, and exist in space and in relation to each other.
Be Delightful: Entertain users and help them relate to the product.
