Design Exercise 1
Challenge: Rethink how an iOS user rearranges app icons.
Currently, the interaction can feel as if there’s a hesitation to rearranging app icons. My goal was to explore a new behavior that incorporates a more fluid and natural interaction.
There was no intention to match iOS's design language for this exploration.
I’ve aimed to make this interaction more seamless, direct and natural for the user. It was also a goal to make this experience responsive and fun.
User presses and holds app icon to activate rearrangement mode. Hero app icon expands larger than other app icons to indicate reshuffle mode.
When hero app icon bumps other icons, the user would feel haptics feedback.
My approach was inspired by physics and magnetic push & pull behaviors.
There’s secondary animation and subtle residual bounce on other icons as the main chiclet settles in. These nuances helps convey physical behaviors while emphasizing the end of an action.
As a small detail, apps in the radius of the hero app can subtly loosen up in anticipation of moving out of the way.
There’s no lag or hesitation for app icons to move out of the way. I believe this approach is more direct. They immediately start moving themselves when the hero app icon is near.
Instead of abrupt snapping, other app icons flow around the hero app icon in to their new positions. It’s almost as if the other icons glide around the app that’s being moved.
The movement is fluid and effortless, and the physics gives the user a natural feel to moving apps around.
This is before I added physics. I like how instant and fluid this is starting to feel but discovered that physics would add a more intuitive and dynamic interaction.
I eliminated text. It’s not as clean and begins to look clunky when physics is added. My logic is that most users are familiar enough with their app icons that fading text down while in this mode would be worth the sacrifice.
I find that jiggling is a great indicator that the rearrangement mode has been activated. However, I found it unnecessary when physics is added.