v1 attached.

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

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.

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

Updated to include Chat UI

Added popped-out state.

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

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?

(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.

(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!

Updating with new chat styling.

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

(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.

Updated design, cleaned up by Vicky from Telefonica.

All the individual elements.

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]

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?

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.

(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?

(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.

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

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.

(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/

(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!

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

Let me know if this works

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

(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 )

(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?

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.

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