Tech

Introduction

Recently I have been experimenting with better ways to implement UITableView cell swipe mechanism in my apps. In the past I’ve always taken the lazy route and just implemented a simple linear division function. In my experience this does not bring a very delightful experience to the user. It seems like even bigger tech companies can fall into this trap – like the Facebook Messenger app for example:

Here I want to share a method that worked (for me) to design a more natural and intentional swipe – using maths and graphs.

The problem

The slide physics I wanted for the swipe can be described by the following properties:

✔︎ At beginning of swipe the cell would expand linearly
✔︎ Once the cell is fully expanded the swipe friction increases exponentially
✔︎ The swipe resistance will not stop movement abruptly
✔︎ The transition should be smooth throughout the entire interaction (no abrupt change)

In short, if I were to graph this behavior, x would be swipe distance and y would be the actual button distance traveled.

As I am not a math expert I began tackling the problem by trying to visualize different math functions and their curves.

I came across a great free online graphing website that helped me explore functions: Desmos.com. Using this tool I was able to prototype a few simple math functions through trial and error in an attempt to produce a similar curve to the one above.

Linear Function

The baseline for a drag swipe gesture is a linear function. This behavior can be expressed by the function: y = x/3

Where swipeDistance would equal the distance swiped by the user. The scaledDistance would then be the actual distance traveled by the button.

This is how this algorithm looked when executed:

There was a lot less tension built up than I intended, and it actually allowed my cell to slip off the screen of the app if a user continued to pull on it (much like the Facebook Messenger example).

Logarithmic

So how do we add more tension to the swipe gesture once the swipe has been actioned? The options would be to either implement a piecewise function (do this until this value, else do something else); or implement a function that approaches an asymptote value.

I decided to try using a logarithmic function and adjusting the parameters to create a curve to match my initial goal. The constants +30 and /30 were added through trial and error in order to get my log curve to match the swipe behavior parameters I set for myself.

With the above code implemented the new swipe gestures looks like so:

This was better since the function was able to stop the user from completely swiping off the button, but it would stop at about 50% of the bar, instead of 30%; It needed more dramatic tension.

Trigonometric

It would seems the key was the slope of the curve. The log(x) function slope was not sharp enough thereby still behaving similar to a linear curve. The level of resistance I was looking for needed to increase exponentially once we crossed the active threshold distance.

An arctan function looked more promising (notice how the slope becomes considerably more horizontal, compared to the logx slope):

Using our fancy arctan function we are able to get the closest function to our rough paper idea which looks like so when implemented:

I was happy with the arctan solution and ultimately implemented this in my swipe to delete pan gesture.

Conclusions

I found it much more effective to take a moment to think about what kind of behavior I want my UI to have before implementing anything.

To create engaging and delightful user experiences in your apps it’s important to be deliberate with your choices and think about what the user interactions your app implements are conveying to the user. Adding tension to a swipe gesture and haptic feedback when the swipe threshold is crossed creates a very tactile metaphor for users using your app.

Happy coding!