UX: Should we keep message in textbox after uploading a photo?

[compulim]

Repro:

1. Type "Hello" in the chat textbox, without pressing ENTER
2. Click "Upload" button
3. Select a file to upload

After the file is selected and being uploaded, the textbox is emptied. In additional to upload file, the textbox is also emptied when clicking on an action button.

Should we keep "Hello" in the textbox?

[danmarshall]

I'm thinking that we should keep it. Imagine if I was on a mobile device, I would not want to type again.

[billba]

Here's an alternative (for discussion, I don't actually like it): on "Upload" send the text as well as the attachment.

[corinagum]

@DesignPolice @mewa1024 @tomlm Can we get input on this? Not sure who most appropriate person is.

Attachments with text in a single activity is not yet supported. Implementing this might affect that.

[corinagum]

Assigning @seaen for tracking purposes.

[mewa1024]

@corinagum @compulim @DesignPolice I think we have two options: 1 - If we don't automatically send the text with the image, then we should not clear the text box. 2- If we do send the text with the image, then we should clear the text box.

In my super scientific survey of a few messaging apps, Slack, Teams, iMessage, and Facebook Messenger seem to follow option 2. Telegram and Snapchat follow option 1. For Web Chat, I think option 2 is more appropriate, since we're not expecting users to alter the image like you might in Telegram or Snapchat. But if we can't copy the image into the message, then we should definitely not clear the text box (option 1).

Another thing that I think is slightly jarring in WebChat is that selecting the image also sends the image, whereas in the apps I looked at the user selects the image first and then has to hit a separate send button to send it. When you select and send in one action, the user doesn't preview the message.

-- Details from other apps:

Slack (on desktop):

1. start typing a message
2. press "+" button to attach a file
3. choose the file
4. Slack shows a dialog window with the text your entered and the photo below it, as one message
5. hit send
6. the message is sent with the text above the image.

Teams (on desktop and mobile) - similar to Slack:

1. start typing a message
2. press paperclip button to attach a file
3. choose the file
4. Teams copies the photo in the send box below the text.
5. hit send
6. the message is sent with the text above the image.

iMessage also sends the image with the text, but as separate messages, and it sends the image first:

1. start typing a message
2. press Photos button
3. choose the Photo
4. iMessage copies the photo in the send box above the text.
5. hit send
6. the image is sent as a message bubble and the text is sent as another message bubble.

Facebook Messenger - Similar to iMessage: places image in the message window above the text your previously typed but haven't yet sent and then when you hit send it sends the image message first then the text message.

Telegram sends the image:

1. start typing a message
2. press paperclip button
3. choose the Photo
4. Telegram opens the image in a takeover modal that allows you to caption or edit it.
5. hit up arrow which sends the file and closes the modal.
6. Your text is still sitting in the textbox and has not been sent.

Snapchat is has UX similar to Telegram.

[DesignPolice]

@mewa1024 not sure how you had time to work this into your life. Thank you. I agree that having the extra step before sending an image with a message is nice and expected. Also to add a message with it would be cool. I'm starting a new Sketch file with all of these different situations and will see if we can get a look and feel that makes sense across them all.

[seaen]

Read through the alternatives. Two options:

[COMPLICATED] Use the same UX model we introduced with Microsoft Teams:

• Open Web Chat, type in "Hello". Click on file attachment, select a file.
• Result: attachment shows as a thumbnail in the "Send" window next to the text. Text still can be edited. Image can be deleted from the message. When the user is happy with text and image, then can hit the send button. Both text and attachment are transmitted in the same message. => Complicated because the bot developer would need to know to parse text and the attachment.

[SIMPLE] Use the same UX model with introduced with Skype on mobile:

• Open Web Chat. Type in "Hello." Tap on attachment icon, select attachment.
• Result: attachment is sent into the chat stream right away. "Hello" is still in the chat box. User can still edit text.

To answer the question in the title of this issue, in either option, do not clear the the text box when the user selects the attachment.

To decide on when to sent the attachment - we should give a user a chance to undo selection of attachment before sending. Can the same message transmit both the text and the attachment? If so, solution #1 results in the better user experience.

[corinagum]

Confirmed with @compulim that keeping text and attachment in the same activity is trivial implementation-wise, we just need design specs. Two scenarios I haven't discussed with @DesignPolice yet is, how do we handle multiple attachments? What if there is a mix of attachments where some are images and some are documents?

[corinagum]

Related to #1265

[DesignPolice]

yes. will just roll in with #1265