UX in Motion usability principles at work in iOS app switcher
(View 12 Principles of UX in Motion article on Medium.com (225k views!): https://goo.gl/nq9ZKh)
- Dimensionality: notice how the objects separate dimensionally and create a cognitive spatial framework. This is effective.
- Obscuration: notice how as objects ‘recede’ spatially, they sort of recede cognitively and cease competing visually with foreground objects. This is effective (my caveat here is they are too obscured yet still fundamentally interactive, which impacts usability).
- Parallax: notice how the rate of movement of the layers communicates to the user the hierarchy of importance. Also effective.
- Parenting: notice how at the extreme ends, the text description fades from the icon. I think this could have been handled better. Not totally effective.
- Easing: notice how the easing feels clean and crisp. Not too mushy and not too abrupt. Effective.
Here we are in the app switcher in iOS and you can see there’s a lot of things done right here, using the UX In Motion usability principles.
One of the first thing you notice is this the dimensionality that creates the spatial cognitive narrative.
Also notice the obscuration when the layers are kind of like falling off and it kind of pulls your attention back to the foreground. This also works well.
The third Principle you’ll notice is the parallax effect that’s happening. It’s really clean, and again reinforces the visual by calling your attention and your cognitive awareness towards the object that’s moving the quickest, which in this case is also the foreground.
There’s a lot of effective things going on from usability and motion standpoint. Apple is using motion to convey meaning and to solve problems which is great.
Now the thing I want to call out that wasn’t really working for me that felt like a pretty easy opportunity, is when the text description sort of fades in and out and there’s really no purpose or method.
It’s not solving a problem, it’s not really conveying meaning, it’s sort of an added a motion that’s happening in real-time that feels unnecessary and it’s sort of sort of breaking the narrative of the text being associated with the icon.
My recommendation would be to not have it fade.
I personally feel like it’s creating sort of unnecessary cognitive load for users and it really doesn’t add much to the whole experience.
If you wanted to fade, I might fade it with the icon itself when the whole thing goes out but I would have these to be attached. I find that designers, when they dis-attach the text and the icon, it sort of breaks the fundamental narrative and starts to feel a little weird.
You start to question what you’re seeing, and the motion just adds to the whole cognitive load in the experience when you want to be focusing on simplifying to keep it really clean and and simple.
So anyway I love love to know what you think in the comments, if you agree or what sort of recommendations how you would have for how to solve this problem with motion.