Anticipatory Design on the micro-interaction level
A closer look at the app nav bar collapse/expand behavior
Remember those times? You barely completed a full sentence but he/she totally knew what you were talking about and started responding to you right away.
He/she totally gets me!
It was such a pleasant and sometimes magical experience! With anticipatory design, similar things happen in the digital world as well. For me personally, that occurs every time I’m scrolling a page up and down using mobile Safari.
When I scroll past certain content, and want to scroll back, this is what happens on iOS Chrome and other content-heavy apps with collapsable navigation bar:
What about Safari?
If you want to review the previous content, it keeps the nav bar collapsed. If you do want to access the nav bar, it reveals it right away.
There’s a slight user input difference between the two scenarios at almost subconscious level. By distinguishing them, Safari is able to anticipate what user’s true intention is.
When someone wants to check back on what he/she just scrolled past, there’s minimum momentum involved at the end of the scrolling action, while in scenario 2, there’s a good amount of momentum left.
Try it yourself on this Framer prototype I made or grab an iOS device and test it out:
Demonstrating nuance interactions when expanding/collapsing the nav bar based on user input.framer.cloud
By examining the user behavior and discovering various intentions, such amazing, detail-oriented anticipatory design could definitely be achieved!
What’s your personal favorite moment in regards to anticipatory design?