How might we justify implementing custom interactions?

Platform presets or library-based components and interactions are a great way to build for efficiency, but what about quality, continuity and intuition?

One IOS default interaction is to tap and move to a new view by sliding the new page in overtop, or laterally on the same level.

Typically I wouldn’t push for anything *but* the defaults for navigation, because typically we’re dealing with simple navigation from a link to the page that the link directs to. Think standard button rows and list items that preview the content of the linked page.

It could be something like a “Settings” button directing to the settings page, or a card previewing the weather directing to a page with a more complete weather report. In the former, basic defaults will almost always work… but what about the latter?

What if there were some value in transitioning more seamlessly from the card state to the expanded full page view?

Is there value?

I’m not exactly convinced, but I want to explore that thought. Gun to your head, how might you justify implementing the navigation in that way, knowing that it will cost the team more money to build?

1. There’s something about keeping visual context of where things were, that have now moved out of view.

Where possible, sliding elements out of view to be replaced by other new elements can create a more natural familiarity with a page. It’s like you have this single page - almost like your phone screen - where the data you’re interacting with is changing, rather than having many separate, layered pages that you are flipping thru to access what you need.

There is a line where this becomes overkill I imagine, but up to that point it can be helpful in knowing what to expect when navigating between page states.

If we take the card example (see image above), there is a preview of the weather for Toronto in the card so that you have an idea of what will appear on the next page once you tap on it. It may even be an exact copy of the component used on the subsequent page. In that case, it might make more sense to transition that component to its new position (using custom interactions) on the subsequent page instead of making it disappear and then reappear within the new context (using the default ‘slide-in’ page navigation)

2. No re-orientation required from the user.

When done correctly, users can follow the movement of the data that they’ve already consumed and quickly move on to additional information that may be provided in the subsequent view - making scanning for information that much quicker.

3. Create opportunity for specific piggy back interaction (scroll up and down to close for ex)

In the same way a slide-in interaction for navigation might provide the option to swipe right to navigate back, we can provide the option to swipe up or down (at the top or bottom of the page) to close the new view. Usually that the swipe back (direction: left-to-right) gesture is provided by the OS and so by creating the vertical swipe back we now enable a 3rd, and possibly 4th, way for users to return to the previous screen. I’m a fan of providing multiple ways for users to access the same thing, so this kind of thing is a win for me.

To wrap up

Despite this being somewhat of a luxury item to me, I think these types of interactions make a positive difference when applied tastefully. Your basic usability and value-add should probably be nailed down first. But in a world where you have those boxes checked, or maybe you’re building a fresh new product, I think there is space for these details to matter.

And for any developers out there shaking their fist at me, just know that this is simply a mental exercise and I would never dare 🙃

Some examples

Honestly, it was difficult to find examples, but I’ve provided a few along the lines of what I’m getting at. (See below) In the Google case they’re kind of faking it, but what really matters is the illusion anyway. The idea is for things to dynamically move in and out rather than simply flying in on a completely new sheet. I think Airbnb, Apple and Google demo this idea effectively.

Until next time,

Nat.