Rethinking Chats— WYSIWYG and Swipe to Send
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.
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.
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.
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.
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:
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.
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
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!
