1138445 - [UX] Hello conversation design refresh

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P3)

Comment 1

[Sevaan Franks [:sevaan]]

Attachment: Conversation WIndow

v1 attached.

Comment 2

[Romain Testard [:RT]]

This looks good!
When popping out the conversation window we had feedback that brand presence was needed. What are your thoughts?

Comment 3

[Mark Banner (:standard8)]

Comment on attachment 8571509 [details]
Conversation WIndow

I think there's a few things missing from the description:

- Styles of the microphone/camera buttons when they are muted.
- Tooltip descriptions for the newly added buttons - for example, I had to think about a couple of them to work out what they were.
- Tooltip for the cog icon
- Need an explaination of and tooltips for the buttons on the toolbar
- If the leave button on the toolbar is pressed, does it just close the window or...? (does it matter what state the window is in, e.g. if feedback form is displayed)
- What happens when the "Submit Feedback" option is pressed - do you remain connected to the room? does it open in a new tab? (if you don't remain connected, then it seems a bit weird, but also, if we're replacing the whole view, then its likewise weird that you're still connected).
- For the "technical difficulties" I'm assuming this could be replaced by different messages. If so, it might be worth having a link option available so that we can point to support if there's something that we can help the user with.

Comment 4

[Mark Banner (:standard8)]

Also there's a question on what the popped-out window will look like, as that does have a title bar.

Comment 5

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #1)

Updated to include Chat UI

Comment 6

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #2)

Added popped-out state.

Comment 7

[:shell escalante]

will need to determine when we do a visual refresh in our work backlog - but this has chat in it..

Comment 8

[Romain Testard [:RT]]

Sevaan, my comments/questions:
- How does the IM history work? It looks like the current area allows seeing 2 lines of text so the user has a small scroll bar?
- "Chat slides open when user enters text" - so the user has no visual cues that he can type text? The text window remains there until the end of the conversation?
- How about a time tag for each message? I think it's useful to know if a message was sent a second ago or 10 minutes ago.
- I quite like the speech bubble designs we see in Whatsapp, Viber or Skype where a message or group of messages I send without other people sending messages in-between get grouped in a single speech bubble. Display. Also using the left hand side for "messages from other people" and the right hand side for "messages from me" could help visualization of messages?

Comment 9

[Mike de Boer [:mikedeboer]]

(In reply to Romain Testard [:RT] from comment #8)
> - How about a time tag for each message? I think it's useful to know if a
> message was sent a second ago or 10 minutes ago.

+1

> - I quite like the speech bubble designs we see in Whatsapp, Viber or Skype
> where a message or group of messages I send without other people sending
> messages in-between get grouped in a single speech bubble. Display. Also
> using the left hand side for "messages from other people" and the right hand
> side for "messages from me" could help visualization of messages?

I agree, with this for 1:1 chats. In the - hopefully - near future we'll be having multi-person rooms (conversations) and in that case the chat messages need to stay left aligned (in LTR mode).
Colored speech bubbles are quite distracting when multiple people are messaging. I'd vote for timid color for the bubble itself and apply a natural color scheme to the arrow/ username in this case.
I've worked on an algorithm that generates & selects distinctive natural colors based on an identifier, like the users' email address or other. This we can use here and use it combined with a color picker, which may be implemented later.

At this point I'd like to propose to not re-invent the wheel wrt to emoticons, but instead just use Emoji. In code we can detect the Unicode range and format an emoji using an image or font on Mac.

Comment 10

[Romain Testard [:RT]]

(In reply to Mike de Boer [:mikedeboer] from comment #9)
> (In reply to Romain Testard [:RT] from comment #8)
> > - How about a time tag for each message? I think it's useful to know if a
> > message was sent a second ago or 10 minutes ago.
> 
> +1
> 
> > - I quite like the speech bubble designs we see in Whatsapp, Viber or Skype
> > where a message or group of messages I send without other people sending
> > messages in-between get grouped in a single speech bubble. Display. Also
> > using the left hand side for "messages from other people" and the right hand
> > side for "messages from me" could help visualization of messages?
> 
> I agree, with this for 1:1 chats. In the - hopefully - near future we'll be
> having multi-person rooms (conversations) and in that case the chat messages
> need to stay left aligned (in LTR mode).
Skype/Viber/Whatsapp group chats work well that way - your message on the right hand side and messages fomr other people in the group on the left. People are also trained to see things this way through these products.
> Colored speech bubbles are quite distracting when multiple people are
> messaging. I'd vote for timid color for the bubble itself and apply a
> natural color scheme to the arrow/ username in this case.
> I've worked on an algorithm that generates & selects distinctive natural
> colors based on an identifier, like the users' email address or other. This
> we can use here and use it combined with a color picker, which may be
> implemented later.
Other chat products use color A for the user's messages and color B for anyone else's messages in the group
> 
> At this point I'd like to propose to not re-invent the wheel wrt to
> emoticons, but instead just use Emoji. In code we can detect the Unicode
> range and format an emoji using an image or font on Mac.
+1!

Comment 11

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #3)

Comment 12

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #4)

Updating with new chat styling.

Comment 13

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #5)

Comment 14

[Romain Testard [:RT]]

Thanks Sevaan, a few minor comments:
- We had a checkbox to capture active tab as context in https://bug1115342.bugzilla.mozilla.org/attachment.cgi?id=8563685, is it voluntary to take it out now?
- What is the UX to add a contact to the conversation?
- The error message says "Retry call", we need to move away from the call paradigm, "rejoin" seems more appropriate

Comment 15

[Sevaan Franks [:sevaan]]

(In reply to Romain Testard [:RT] from comment #14)
> Thanks Sevaan, a few minor comments:
> - We had a checkbox to capture active tab as context in
> https://bug1115342.bugzilla.mozilla.org/attachment.cgi?id=8563685, is it
> voluntary to take it out now?

Not necessary anymore.

> - What is the UX to add a contact to the conversation?

Not sure. Monica is working on that bug, so I am waiting to see that before updating this.

> - The error message says "Retry call", we need to move away from the call
> paradigm, "rejoin" seems more appropriate

Will change to Rejoin.

Comment 16

[Sevaan Franks [:sevaan]]

Attachment: Conversation Window (Update #6)

Updated design, cleaned up by Vicky from Telefonica.

Comment 17

[Sevaan Franks [:sevaan]]

Attachment: Hello Elements

All the individual elements.

Comment 18

[Victoria Gerchinhoren [:vicky]]

Thanks for posting it Sevaan, please everyone if there's any clarification needed or something missing, please do not hesitate to need info me [:vicky]

Comment 19

[Victoria Gerchinhoren [:vicky]]

Attachment: Conversation window interaction and visual design specs

Comment 20

[Victoria Gerchinhoren [:vicky]]

Attachment: Hello Common elements (update #1)

Comment 21

[Mike de Boer [:mikedeboer]]

Vicky, could you attach SVG assets for the common elements? I'm thinking about the icons and style parts that can not be drawn with CSS:

 - the chat bubble arrows,
 - user thumbnails,
 - window decorations (minimize, detach, leave conversation)
 - pointer arrows

It could be that you're not the one I'm supposed to ask for this, so after forgiving me for that, could you forward this request?

Comment 22

[Victoria Gerchinhoren [:vicky]]

Attachment: Hello Common elements (update #2)

Update, mainly the style of the conversation buttons has changed in order to pop out more when having a white background such as a screen.

Comment 23

[Victoria Gerchinhoren [:vicky]]

(In reply to Mike de Boer [:mikedeboer] from comment #21)
> Vicky, could you attach SVG assets for the common elements? I'm thinking
> about the icons and style parts that can not be drawn with CSS:
> 
>  - the chat bubble arrows,
>  - user thumbnails,
>  - window decorations (minimize, detach, leave conversation)
>  - pointer arrows
> 
> It could be that you're not the one I'm supposed to ask for this, so after
> forgiving me for that, could you forward this request?

Hi Mike, i am the person who'll provide this assets. Would you please indicate how would you need the chat bubble arrows to be? I tried to export it but I am not sure how it will be built... with white background or none?

Comment 24

[Mike de Boer [:mikedeboer]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #23)
> Hi Mike, i am the person who'll provide this assets. Would you please
> indicate how would you need the chat bubble arrows to be? I tried to export
> it but I am not sure how it will be built... with white background or none?

Ah, I should've mentioned that :/

I'd prefer the chat bubble arrows to be a single path or a group of paths without fill color. The arrow must fit in a square within a view-box of 16x16px or 10x10px; this way I can scale them respective to the font size.
I will apply a color to them and the browser renderer will take care of the anti-aliasing.

Comment 25

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] Hello User thumbs (colors)

Comment 26

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] feedback faces - sad and happy

Comment 27

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] Hello window icons

Comment 28

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] Input area chat cons

Comment 29

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] hello-logo-feedback

Comment 30

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] conversation-buttons-icons

Comment 31

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] chatbubble-arrow

cannot make it fit in the exact pixel, sorry, sketch issue. Let me know if this works. Thanks.

Comment 32

[Mike de Boer [:mikedeboer]]

Vicky, is it possible for you to export SVG paths without the `transform="translate(x,y)"` stuff? I understand that it makes sense to have that in the editor (Sketch), but for us it's not necessary.

Comment 33

[Victoria Gerchinhoren [:vicky]]

(In reply to Mike de Boer [:mikedeboer] from comment #32)
> Vicky, is it possible for you to export SVG paths without the
> `transform="translate(x,y)"` stuff? I understand that it makes sense to have
> that in the editor (Sketch), but for us it's not necessary.

Hi Mike, I am not veteran of Sketch, so you're talking about the metadata added by the program? Should I do this to avoid the extra info you mention?: http://www.bohemiancoding.com/sketch/support/documentation/13-preferences/

Comment 34

[Mike de Boer [:mikedeboer]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #33)
> Hi Mike, I am not veteran of Sketch, so you're talking about the metadata
> added by the program? Should I do this to avoid the extra info you mention?:
> http://www.bohemiancoding.com/sketch/support/documentation/13-preferences/

That might help, let's try it for one of them!

Comment 35

[Mike de Boer [:mikedeboer]]

There's also this: http://stackoverflow.com/a/13333075

Comment 36

[Victoria Gerchinhoren [:vicky]]

Attachment: test>>>>>userthumb_grey.svg

Let me know if this works

Comment 37

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] Hello User thumbs (colors) - updated

Comment 38

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] Chat icons

Comment 39

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] convo buttons

Comment 40

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] bookmark icon for chat window

Comment 41

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] dropdown-arrow

Comment 42

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] share icons

Comment 43

[Victoria Gerchinhoren [:vicky]]

Attachment: [Assets] feedback faces

Comment 44

[Romain Testard [:RT]]

FYI I updated the US to align with the latest on conversation windowl design refresh.

Comment 45

[Romain Testard [:RT]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #19)
> Created attachment 8611261 [details]
> Conversation window interaction and visual design specs
Here are my comments:
- "EMPTY CONVERSATION WINDOW (CREATOR)" should be removed since it does not match a real use case. 
- The ability to Submit feedback from the gear icon should be removed since it's not something we want to do now
- "Share a link over social networks" should be updated based on bug 1178304 
- The feedback form should be removed and replaced by the NPS form (bug 1171415 )

Comment 46

[Sevaan Franks [:sevaan]]

(In reply to Romain Testard [:RT] from comment #45)
> - The ability to Submit feedback from the gear icon should be removed since
> it's not something we want to do now

Is this back in, considering this morning's conversation about submitting call log information?

Comment 47

[Romain Testard [:RT]]

It won't apply for the visual refresh since we won't deliver the call log data submission in Fx42.
Also we may want to use a different string for this.
So maybe simpler to keep it separate and remove the ability to submit feedback from the visual refresh visuals.

Comment 48

[Romain Testard [:RT]]

I am closing this now since the UI spec is complete and we're now implementing it.