0

Currently, I am designing a mobile screen where the user can send a message to their friends.

enter image description here

In order to show that their message has been sent, the upper right hand corner check-mark goes from black to a greyed out double check-mark (i.e. from a pressable button to a non-pressable icon).

However, I am not really that happy with this design – I feel that it is not intuitive enough. I am wondering what I can do to improve it and better convey the idea of "message sent" to the user.

CLARIFICATION EDIT:

I have already used ✗ to represent "back/cancel", ✓ to represent "okay/confirm", and ✓✓ to represent "message read" - in other parts of my application design. Also this is not mean't to be a modal popup.

Improve this question
1
  • You can use popup to show a message "Message submitted successfully!" With ok button. When user will press ok button then you can close popup and show the main/send message screen to user after reset it. (Reset means clear last message and show himt text like "Write your message" or "Type you message")
    – Muhammad Bilal
    Commented Jul 20, 2020 at 12:49

4 Answers 4

Reset to default
1

If you're thinking only in terms of icons, then I guess you could use a paper plane for the "send" icon; this way, you can reserve the "check" icon for representing the "Sent" status.

Paper plane icon

Improve this answer
3
  • This screen is not a modal popup. In fact, it is a full screen activity. Are we not supposed to use an X in this scenario? Also, one of the primary reasons why I am asking this question is because I have already used the ✓ to represent "saving/okay" and ✓✓ to represent "message read". Thus I cannot use ✓✓ for "sent" status.
    – AlanSTACK
    Commented Jul 20, 2020 at 4:01
  • I really like your idea for the airplane. However, I was hoping for an alternative to ✓ and ✓✓, since they have already been used to represent other concepts. Also what font are you using in your example?
    – AlanSTACK
    Commented Jul 20, 2020 at 4:15
  • I would be wary of using something different than "✓" and "✓✓" to communicate "sent" status since they became prevalent among different apps to communicate the same idea ("whenever you see this kind of icon again, trust me that I'll mean the same thing"). This consistency would be great for the user's expectations. Whenever they are in a new context of messaging and see these icons again (but not necessarily with the same style), they will trust that they represent the same thing. By the way, the fonts are Roboto and FontAwesome. ;)
    – jamalchk
    Commented Jul 20, 2020 at 10:51
2

Once user hit send(Checkmark in your design), you should move to a sent messages screen or a conversation view. Also, hide keyboard.

Improve this answer
1
  • Sorry, but I am specifically asking about the usage of icons/symbols here. What can I replace the double check marks with?
    – AlanSTACK
    Commented Jul 19, 2020 at 19:20
2

Judging by the context of the title bar, this seems to be a modal-type interface. When the user hits "send", you should wait until confirmation that the message has been sent. If it was, close the modal (and hide the keyboard) and add a small alert that it was successfully sent. The closing of the dialog signals to the user that something has happened, and the alert would signal what that was.

If it fails to send, don't close the modal. The user would lose their work, and would create a feeling of distrust in the app. Instead, give a small alert on top of the keyboard, signaling that the message failed to send.

Improve this answer
1

I like the way WhatsApp resolves this:

1- sent 2- received 3- read

enter image description here

I think it's in the user's mental model when the color changes then it means "READ" so I would do it the other way around: from light grey to dark grey, or better change the color to green or blue to be even more explicit and you make sure something happened there. I think it's subtle the way you are doing it. It's just a personal opinion...

Usability testing is a great way to see which option is the best..

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.