Interactive prototype developed using Sketch and Framer

Since the dawn of chat apps on handheld devices, many have come and gone, and few have managed to stay. Over time, UIs and features have evolved, but the basic interactions have essentially remained the same.

Similar UI patterns among most chat apps today.

These interfaces have evolved from our classic desktop messaging apps. They used to have designs which were inspired by real world objects. The input methods on desktop computers are also different — keyboard and mouse. But now, we live in an era, where the first interaction of a person with digital world is through a touch interface.

Once upon a time. Can we see where our interactions have evolved from?

We now interact with screens itself. There is no ‘hover’ state. On screens, swiping feels more natural and intuitive than pressing a virtual button.

Take the example of keyboards where you can swipe to type (iPhone users: Gboard) or slide to answer a call. Swiping feels intuitive because we get a much better feedback to see some UI element moving in the direction of interaction. Also, while holding a device, our thumb rests in a position where swiping takes lesser effort.

Swipe to answer the phone call feels more natural, comfortable and fun.

Transactions as easy as Chats

A few months back, I was planning the flow and interactions for Trestor’s mobile app. I wanted users to feel ‘sending money’ as easy as chatting. A huge chunk of smartphone users are now using chat apps and they would find it familiar. So, I started my research with chat apps.

WYSIWYG Chat

While designing interactions for the chat screen, I realised a broken experience between sending and viewing chats. Chats look different while composing and after sending. So, I merged these views — WYSIWYG. It also makes it obvious to the user, that which side is theirs.

Chats change structure once you send them in most chat apps today.

Swipe to Send

Next step was sending the composed chat. Of course, the first thing to come to mind was a send button. After a number of weird experiments in search of a more intuitive and natural interaction, I came across swipe-to-send:

Swipe up to send composed chat

Micro-interactions

Now was the turn to figure out the micro-interactions for a seamless experience.

Just enough time to reconsider

Can you remember the times when you accidentally hit the send button? Or, realised it just after hitting the button that you missed something. Well, in case of a chat, it doesn’t cost you most of the times. But in case of money, just a few extra milliseconds is all that you need. Swipe-to-send interaction gives the user just enough time to glance through the message before sending. Also, it puts the user in control.

Just enough time for a user to assure before sending money.

Visibly Hidden Extras

Back then, there wasn’t all the fuss ‘bout who’s got the funniest stickers and what file types can you send.

These days, messaging apps have so many additional options. Trestor’s app doesn’t have much, apart from the secretly sending a transaction. The secret-send-icon peeks-in gently to let the user know. For a chat app, this could include options like stickers or to attach a file.

Swipe up for new chat

This interaction is analogous to pull-to-refresh — a user trying to pull down the list to get the latest content. Here, the user tries to pull up to fetch latest chat (as chats are sorted in reverse order, newest at the bottom). It’s an alternate to tapping a button to compose a chat. Also, as mentioned above, swiping feels more natural than to tapping.

This interaction might sound competing with swipe-to-send interaction. Well, there’s a simple solution to it. Hint: help text below chat input box.

Variants

Some variants to this interaction can be built which can enhance usability even further, like:

Adjusting the required length, duration or velocity of swipe action Keep WYSIWYG chats but use a button for send on larger screens

Anything else that came to your mind? Would love to know in comments.

Is this better than the button send?

Short answer, not enough data. We are excited about how people respond to it. We are implementing this in Trestor’s Android App, but a better answer will be there when it rolls out. And, one thing for sure — it would need some more tweaks.

Conclusion

Swipe-to-send interaction feels fun, natural and better suited for handheld devices, but there’s not enough data to say if it’s better. There’s much more that we can build on top of this idea. I would love to know your feedback and opinion on these interactions.

Also, I would really love to know if there are any other similar interactions already being worked. In case you like this and want to implement, I’d love to help you. Also, I will share some data as that will help everyone to make better interactions.

Framer JS Prototype

http://bit.ly/swipe_to_send

To try out the interaction on your phone, open this link in Framer for Android, Frameless for iOS (Free) or Framer for iOS (Official, Paid).

PS: This post is my first attempt to write (not counting those design/product documentations 😄). While writing, I was also discovering my style. If you have an interaction design problem that you’d like me to work on , I’ll be happy to!