uxdesign.cc – User Experience Design — Medium | Sridhar Rajendran
UX case study to make recording and sending audio messages easier on Whatsapp
Whatsapp is the default messaging app on my phone and I use it at least a couple of times every day. I like the no-frills UI that lets me get the job done as soon as possible. While I mostly text, I prefer audio messages at times; when I am in a hurry to head out of the door or have to type long messages. But unfortunately, the Whatsapp interface leaves me in a lurch. I need to press and hold the mic button till the recording is complete. There are two issues with it
FAQ on Whatsapp site
To avoid getting my messages truncated, I record in 10 second bytes but this gets annoying after a while. Sometimes I record messages using a voice recorder app and then send it on Whatsapp.
Whatsapp — Android app
But in the iOS app, the mic button is located right next to camera button. It is possible to hit the camera button by mistake.
2. When user is typing only the send button is on the right side but otherwise two buttons are listed on the right side(mic and camera). This contradicts the mental model of the users.
Options while typing a message
Redesign Whatsapp to make recording and sending audio messages easier.
Both FB Messenger and Apple Messages have similar interface and expect users to hold the mic button while recording.
The mic button is moved to the left and only thumbs up button is on the right.
FB Messenger
The mic button is on the right and no other buttons are nearby, preventing accidental touches. The less used features are relegated to the left.
Apple Messages
Apple gets extra brownie points for letting users preview the recording before sending it. Don’t they just think about everything? 🙂
Preview audio recording in Apple Messages before sending
I checked with a couple of my friends and they found the audio recording feature quite inconvenient to use. An interesting revelation was old parents use voice messages a lot to communicate with their kids. They find typing on mobile screen difficult and also do not know/prefer English.
Based on this information I crafted a new persona.
Persona
The mic button is moved to the left to prevent accidental clicking. Display only camera button on the right of the text box as photos are shared more often than audio messages. On clicking the mic, the button turns into a stop button and a prompt message is displayed. The voice recording proceeds and user need not hold the mic button. When done, tap the stop button and the message is sent.
Concept 1 — designConcept 1 — interaction
Remove the mic button from the compose message screen and add it under the ‘+’ menu. On selecting “Audio recording”, a modal window is displayed with a stop button and the time elapsed. When done, tap the stop button and the message is sent.
Concept 2 — designConcept 2 — interaction
Both the versions evoked different reactions in users. While version 1 was easy and fast, there was no option to preview the message. Also the chance of accidentally pressing the mic button still persists. Version 2 did not fare well in accessibility. Users found it difficult to find the audio recording option. But they loved the window showing a ‘big stop button’ and the time elapsed. So we have a hung jury.🤔
So why not combine the best of both?
Placing the mic near the text box makes it easily accessible. On clicking it, show a modal window (from concept 2) displaying the audio recording progress. Also provide a cancel button to cancel the audio recording and return to message screen.
Concept version 2.0
I hope this redesign makes audio recording much easier. Share your thoughts in the comments section below.
Disclaimer: I do not work at Whatsapp and this case study is just an exercise for me to improve my design thinking.
If you liked reading this article, please do “Recommend” it. Thanks!
Making audio recording easy on Whatsapp was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community
