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.

10
  • 3
    The word "sent" in grey, unclickable. – Scott Jul 19 '20 at 0:49
  • Or change the black check mark to something else, like the paper plane or an arrow-based icon; then have that change into a check mark once the message is successfully sent. – Janus Bahs Jacquet Jul 19 '20 at 7:04
  • @Scott I'm trying to avoid using actual words due to concerns with potential future localization issues. I want to stick with symbols. – AlanSTACK Jul 19 '20 at 19:15
  • @JanusBahsJacquet I really like the paper airplane idea. But not the fact that it switches back into double check marks afterwards. If we represent the "before" with a paper plane, do you have any ideas how we should represent the "after"? (That is also paper plane related) – AlanSTACK Jul 19 '20 at 19:17
  • I would just use a single check mark for the success state; if you animate the change, it could look quite neat, I think. There’s also the question of why the message composition window (which, judging by the X in the top left, is a pop-up/overlay in the app?) even remains once the message is sent? If you take a look at how mail apps work, they usually just slide out the entire composition window once the sending succeeds. – Janus Bahs Jacquet Jul 19 '20 at 19:21
1

Keeping it simple, and without any actual text....

...a black, right-pointing, arrow (intuitively meaning "next")...
...... and a grey check mark (intuitively meaning "done")...

enter image description here

Although.. I'd also maybe want to alter the text at the top and screen that back as well....

enter image description here

As for "other areas" outlined in the question.. I'd change the "message read" from √√ to simply √. If an "unread" icon is needed, then an empty square or circle.

2
  • A double check mark to mean ‘message read’ is common enough (e.g., WhatsApp uses one check mark for ‘sent’ and two for ‘read’). I wouldn’t necessarily change that. An empty circle is more commonly used to mean ‘offline’, which might prove ambiguous, depending on what the app looks like. – Janus Bahs Jacquet Jul 20 '20 at 19:46
  • Fair enough. I'm not a WhatsApp user. – Scott Jul 20 '20 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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