Why Tangible ‘Tactility’ is so Important for Mobile Apps

A key objective of transitions and animations is to “blur” the line between virtual and real-world interaction in the user’s perception. These dynamic features are not just about enhancing visual appeal; they fundamentally improve user interaction, making it more intuitive, engaging, and reminiscent of interactions in the physical world.

Most designers create their animations from personal preference without knowledge of how their animated transitions affect the user experience, which increases the risk of them becoming distracting.

Here, Yaroslav Zubko, New York-based visual creative, founder of design studio “Zubko Studio”, ex-lead product designer in the revenue team at Tinder Yaroslav Zubko shares his thoughts on his perception on the right balance in creating seamless motion design for mobile apps.

The feel of a real world

People are meant to interact with physical things. Knobs, toggles, those light switches in your room, typing on physical keyboards (have you noticed how Apple increased the key height on a MacBook to make it feel more satisfying to type?).

There’s also a reason some vehicles are still sold with stick shifts although it’s been long proven that automatics have far more superior gear shifting. It all feels weirdly good to interact with. Some of it is subconscious.

In environments, such as mobile interface, where physical feedback is limited, its role is substituted by visual elements. This approach is key in creating an intuitive and engaging user experience, especially in digital interfaces where tactile interaction is minimal, founder of design studio “Zubko Studio”, ex-lead product designer in the revenue team at Tinder Yaroslav Zubko says.

While technology has definitely made a lot of things simpler for us, bridging the gap between the digital and physical worlds is still one of the most important UX practices. Since Zubko moved from Ukraine to the USA in 2017, taking on more and more ambitious projects and advancing my professional design competencies, this belief only grew stronger with him.

Interaction Library – the Swiss Knife for UX/UI

There are various types of animations used in mobile apps, such as scroll-triggered animations, transition animations, loading animations, gestural animations, parallax scrolling, feedback animations, and animated icons. Each of these serves a specific purpose in enhancing user interaction and experience​.

For example, transition animations smooth out the shift between different app states or screens, providing an intuitive user experience. Loading animations are often used during data processing. They keep users informed about the ongoing activity, reducing perceived wait times and maintaining their interest.

In 2016, Zubko began working on the Interaction Library, a solo side-project during his tenure at Ukraine-based company Soft Serve. The library encompasses a collection of interaction samples and interface behaviors, serving as a reference tool when presenting ideas to clients, fellow developers, or other stakeholders.

The main value and usefulness of the Library lie in its curated collection showcasing various human-machine interaction examples. It fosters exploration and learning by presenting diverse and interesting interaction patterns. Zubko admits that he likes to think of it as the simplicity of a user flow in focus  within the confined space of a mobile screen.

In 2017, the Interaction Library was published on Dribbble, a platform for visual creatives and gained extensive coverage on social media. Some elements of the library that resonated with Tinder’s interface components, primarily involved the card-based layout, swipe gestures, and the overall simplicity in the user flow, caught the attention of Jonathan Badeen, one of the company’s founders. Soon after that, Zubko received an offer to take the position of Lead Designer at Tinder.

Reinventing the Swipe

When he first started at Tinder, he worked on the navigation of the app. It was necessary to preserve the uniqueness and simplicity of the product, but at the same time, do so while considering new pieces of functionality. When the application was first released, a simple right-left swipe was sufficient. But with the increase in the number of features, the initial ideology began to ‘crack.’ 

For the whole first month at work, Zubko thought about a solution even in his sleep. “I explored more than twenty different unconventional ways users would interact with the Tinder mobile UI and created about ten different animated concepts. The best elements from them were gathered and composed together. It was a very intriguing process. And the Interaction Library served as the very “treasure map” that guided me in my quest”, he recalls.

After two months at Tinder Zubko took the position of Lead Product Designer on the Revenue team, shifting his focus solely to developing areas like paid features, subscriptions, advertising, and various other revenue-generating streams, which presented me with challenges of a somewhat different nature.

However, the same principles were applicable – a sequential, logical interaction with the interface, where each subsequent action was intuitively understood. If a user taps a button, he moves to another button. Each subsequent one increases the likelihood that he will spend money. Features for which the user pays statistically help many achieve what they want from the app. And our goal was for people to meet in the real world”, Zubko explains.

As a result of this work, few handy features have been introduced, and the application became noticeably easier to navigate. Zubko’s work, along with the efforts of the entire Revenue team, received the highest appraisal from users: in Q1 2019, app’s revenue reached $260.7 million making it the #1 ranked revenue app on the AppStore.

Motion Design in User’s Perspective

Zubko states that motion design is effective in capturing and retaining user attention. It adds a dynamic element to the app experience, making it more engaging and interactive. For example, Instagram Stories use motion design to create an interactive experience where users tap through animated slides, keeping them engaged with the content​.

“Smooth transitions and interactive feedback provided by motion design are vital as well. They help to bridge the gap between different screens or states in an app, making transitions feel more natural and intuitive. This is exemplified by Tinder’s swipe animation, which provides clear feedback on user actions​,” he continues.

The use of visual elements in mobile app interfaces, designed to create an illusion of tactile interaction, is a key aspect in modern UX/UI design. These elements aim to replicate the subtleties of real ”touch“, making the digital experience more intuitive and engaging for the user.

Achieving this level of feedback in a digital interface is a testament to an interface designer’s skill. When users feel as though they are interacting with something tangible, it signifies that the designer has truly excelled in their work, masterfully blending form and function.