Below, here are some notes I’ve taken from Apple’s conference presentation about fluid design.
Fluid design is described as smooth, natural, even magical. We have evolved in a particular way in the way that we use tools – starting all the way from cavemen using sharp rocks to extract bone marrow, to using typed out interfaces to initiate computer commands, to using a mouse, to now where we’ve started to return to using natural gestures with our fingers in the iPhones of today.
The aim of fluid design is to provide an interface that is an extension of our mind. Because the way we process information and act upon it is dynamic and responsive, so too should our design most closely reflect how we are already predisposed to think: with things performing in the way that we expect them to perform.
Look for delays everywhere
Emphasise instantaneous responsiveness wherever possible.
Allow for redirections and interruptions (10:13)
When performing actions, we actually change our actions constantly. For example, if we wanted to turn around, we can start to perform the act of turning around – but then something would catch our eye and we might turn towards that instead.
The iPhone X gesture bar allows for one to switch between apps, peek at other apps, go to home whilst peeking (if they wanted to), or return to the app they’re on.
Layering gestures is an important design element to responsiveness. For example: with the gesture bar, you can return to your home screen, and then swipe to the next page of your apps. However, even before you’ve fully returned to your home screen and the page has loaded, the iPhone allows you to swipe immediately – accounting for your muscle memory.
Responding to redirections (11:30)
Timers are too slow. Respond to the human movement itself.
Maintain spatial consistency throughout movement (13:00)
In real life, objects that exit right are expected to emerge from the right hand side. Otherwise there’s a disconnect.
Hint in the direction of the gesture
Initial state > Hinting state > Final state
For example, pressing slightly harder on the top right square grows it until it pops out.
Amplify lightweight motions
For example, scrolling amplifies the “energy” so even a small swipe up can make the interface travel far. The opposite of this is laborious 1:1 gestures (e.g. if you had to swipe to scroll where 2cm of swipe equaled 2cm of scroll).
Softly indicate boundaries
Like rubber banding on scrolling. Don’t let jarring movements happen.
Soft transitions (18:00)
Use curves of motion.
Avoid excessive visual change between frames
Excessive visual change between frames results in a “strobing” effect.
Motion blur and motion stretch can be other tricks to improve this.
Think about mass of UI elements
Conceptually make “heavy” UI elements move with more gravitas. They should be “harder to move”.
Designing with dynamic motion
Characteristics of the physical world make great behaviours
A decelerating car can have its trajectory plotted smoothly. We understand this intuitively and easily, because it is something we observe every day in our physical world. Likewise, our interfaces should aim to mimic the patterns of how objects move in the world.
Scrolling is an example: it’s extremely intuitive to understand how the page of an iPhone will move when scrolled. Not only this, but it behaves like a piece of paper being thrown: there is momentum and the scroll interruptible by putting our finger back on an already moving object.
The property that a material will return to its resting state when the strain is removed. UI objects have a place that they “belong” to, and then think about how they will gently and gracefully snap back to those places when someone navigates through your UI.