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
10
  • 3
    The word "sent" in grey, unclickable.
    – Scott
    Commented Jul 19, 2020 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
    Commented Jul 19, 2020 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
    Commented Jul 19, 2020 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
    Commented Jul 19, 2020 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
    Commented Jul 19, 2020 at 19:21

1 Answer 1

Reset to default
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.

Improve this answer
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
    Commented Jul 20, 2020 at 19:46
  • Fair enough. I'm not a WhatsApp user.
    – Scott
    Commented Jul 20, 2020 at 19:51

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.