“Here’s the moment that blew my mind,” said Carolyn Chandler. She cued a short screen clip of productivity app Clear, with two on-screen reminders parting to allow a third to be inserted. “When you add a to-do item like this, you experience a new standard in interface response.”

Chandler, Co-Founder of the School for Digital Craftsmanship at ADMCi, spoke at the October 23 Chicago Interactive Design & Development meetup group session. But her presentation—entitled On Reaction: The Power of Mobile Transitions—wasn’t really about technology.

It was about human behavior.

Mobile Transitions Mimic These 7 Behaviors

“There’s a lot going on in our brains,” said Chandler, who called herself a “sci-fi geek” with a background in psychology and anthropology. She stressed the importance of active interaction with the mobile interface—the feedback and “feedforward” that mimics how our brains process information.

She highlighted seven behaviors as models for new and unusual transitions:

1. Stepping. Getting from one point to the next is the most basic transition there is, but it’s still essential. Chandler cited language app Duolingo for employing the “bounce” technique as great feedback that a swipe can go no further.
2. Riffling. Yahoo! Weather and Facebook Paper are two examples of apps where we can explore the third dimension of “Z-Space”—like flipping through file cards on our screens.
3. Glancing. Humans love to keep an eye on multiple things at the same time. Intuitive transitions like page-turning help us switch our attention while we maintain context and position.
4. Pivoting. The sliding panels of your everyday Google search help us keep one mental foot planted while the other goes in a new direction.
5. Drilling into Detail. Install the grocery shopping app Instacart, and watch how the images fade, change sizes and pin themselves to the screen as you request information about individual food items. Hungry yet?
6. Immersing. Duolingo and Facebook Paper are two great examples—sizes change, colors shift and pages “fold” as we tunnel deeper and deeper into a topic.
7. Changing. Chandler pointed to the “spreadable” lines of Clear and the color shifting of Mailbox as two apps where transitions help us quickly change focus. The playful animation of Tumblr’s “breaking heart” got a good laugh out of the room as well.

Suggestions for Inspiration

“Mobile interfaces have become a playground for new and unusual transitions,” said Chandler.
“Developers and designers can add playfulness, meaning, and interest to the mobile experience—but we can also frustrate users by going overboard with animations, or by obscuring the relationships between elements of our designs.”

Remember when iOS 7 was making people dizzy and sick?

Chandler made four strong suggestions:

• Be subtle
• Be mindful
• Be consistent
• Be playful—when it’s playtime.

Where can we find inspiration for unique, intuitive transitions? Chandler pointed to Johannes Tonollo’s Meaningful Transitions website, along with the work of Pasquale D'Silva and Antonio DePasquale.

And she suggested we collect verbs—from the subtle (ease, shiver and zoom) to the redonkulous (shatter and explode). When we think about transitions as their own little bits of active content—and not just a way to get from one screen to the next—we’ll inform, surprise and delight our users.

Check out Carolyn’s presentation below:

You can also view the entire presentation on YouTube here.