Week #2
A Veristic Swipe
Designing an unconventional way of viewing your mobile wallet
Use Case

The user shall swipe through the different cards added in the application to view the details and history.

Defining the interaction

The idea was to define an unconventional, natural, and very delightful interaction. I wanted to work with swiping cards up or down instead of sideways and breaking the typical layout. This interaction gives a more human way of sorting/distributing cards, something that we do in real life a well. Now, the trick was to experiment with possible solutions so I picked up my gear and started prototyping low-fidelity designs. The best solutions were tested with real users to get feedback on what they considered as the most human interaction.

After testing with 10 people with personas suited for using financial apps, 8 out of 10 preferred bottom to top swipe over top to bottom. All these eight people found this interaction more delighting as they could completely see the card going into the place. Some of these commented that the top to bottom interaction was a little weird because the cards were not placed in the thumb reachable area and had to operate using two hands to get it done for large mobiles. Some of them also pointed out that operating hand/thumb blocks the screen and the succeeding animation. The two who preferred top to bottom gave the reasoning that it was natural for them to swipe down as most of us do to bring down the notification panel of our mobiles.

Designing and Testing

Since the idea was to design something that would be unconventional that breaks the layout (the entire point of the series), Aesthetic Usability Effect was utilized. The law states that:

Users often perceive aesthetically pleasing design as design that’s more usable.

Once the screens were designed, the interactions were prototyped and tested on real device with real users who were delighted with the interaction.

Once the screens were designed, the interactions were prototyped and tested on real device with real users who were delighted with the interaction.

Tags: mobile, interaction, animation
Posted on: January 14, 2021