Anticipatory Design on the micro-interaction level

A closer look at the app nav bar collapse/expand behavior

Photo by Eye for Ebony on Unsplash

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:

It expands the nav bar for you, assuming that’s your intention, to access the nav bar.

What about Safari?

It knows your intension, and acts accordingly.

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.

Scenario 1: with minimum momentum left
Scenario 2: with good amount of momentum left

Try it yourself on this Framer prototype I made or grab an iOS device and test it out:

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?

InVision gets what I’m trying to do when right clicking on their logo :D