Closed Bug 1138445 Opened 10 years ago Closed 9 years ago

[UX] Hello conversation design refresh

Categories

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

defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: RT, Assigned: sevaan)

References

Details

(Whiteboard: [UX])

User Story

This is a bug to refresh the conversation window design refresh in alignment with the panel redesign from bug 1130074 to include:
- Style call control buttons
- Style gear button
- Style URL management buttons (Copy, E-mail, Share)
- Style "remote party face muted" indicator
- Style empty room screen
- Style Error screen
- Style context edition screen
- Style "URL expired" screen
- Remove camera indicator in the title bar
- Popped-out conversation window uses link clicker UI

Attachments

(9 files, 17 obsolete files)

3.33 MB, image/png
Details
1.18 MB, image/png
Details
12.11 KB, application/zip
Details
75.95 KB, application/zip
Details
10.48 KB, application/zip
Details
1.66 KB, image/svg+xml
Details
515 bytes, image/svg+xml
Details
4.10 KB, application/zip
Details
2.42 KB, application/zip
Details
      No description provided.
User Story: (updated)
Blocks: 1082944
Assignee: nobody → sfranks
Summary: [UX] Hello conversation window redesign → [UX] Hello conversation design refresh
User Story: (updated)
Whiteboard: [UX]
Attached image Conversation WIndow (obsolete) —
v1 attached.
Attachment #8571509 - Flags: ui-review?(mmaslaney)
Attachment #8571509 - Flags: review?(standard8)
Attachment #8571509 - Flags: review?(rtestard)
Attachment #8571509 - Flags: review?(dmose)
This looks good!
When popping out the conversation window we had feedback that brand presence was needed. What are your thoughts?
User Story: (updated)
Blocks: 1137197
Blocks: 1081336
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.
Attachment #8571509 - Flags: review?(standard8) → review-
Also there's a question on what the popped-out window will look like, as that does have a title bar.
Attachment #8571509 - Flags: review?(dmose)
Attached image Conversation Window (Update #1) (obsolete) —
Updated to include Chat UI
Attachment #8571509 - Attachment is obsolete: true
Attachment #8571509 - Flags: ui-review?(mmaslaney)
Attachment #8571509 - Flags: review?(rtestard)
Attached image Conversation Window (Update #2) (obsolete) —
Added popped-out state.
Attachment #8579687 - Attachment is obsolete: true
Rank: 35
Flags: firefox-backlog+
Priority: -- → P3
will need to determine when we do a visual refresh in our work backlog - but this has chat in it..
Rank: 35 → 33
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!
User Story: (updated)
Attached image Conversation Window (Update #3) (obsolete) —
Attachment #8580164 - Attachment is obsolete: true
Attached image Conversation Window (Update #4) (obsolete) —
Updating with new chat styling.
Attachment #8583408 - Attachment is obsolete: true
Attached image Conversation Window (Update #5) (obsolete) —
Attachment #8585661 - Attachment is obsolete: true
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.
Attached image Conversation Window (Update #6) (obsolete) —
Updated design, cleaned up by Vicky from Telefonica.
Attachment #8587058 - Attachment is obsolete: true
Attached image Hello Elements (obsolete) —
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]
Attached image Hello Common elements (update #1) (obsolete) —
Attachment #8608752 - Attachment is obsolete: true
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?
Flags: needinfo?(vpg)
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.
Attachment #8612218 - Attachment is obsolete: true
Flags: needinfo?(vpg)
Flags: needinfo?(vpg)
(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.
Attached file [Assets] Hello User thumbs (colors) (obsolete) —
Flags: needinfo?(vpg)
Attachment #8616002 - Attachment description: Hello window icons → [Assets] Hello window icons
Attachment #8615998 - Attachment description: feedback faces - sad and happy → [Assets] feedback faces - sad and happy
Attachment #8615997 - Attachment description: Hello User thumbs (colors) → [Assets] Hello User thumbs (colors)
Attached image [Assets] chatbubble-arrow (obsolete) —
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.
Flags: needinfo?(vpg)
(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/
Flags: needinfo?(vpg)
(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!
Attached image test>>>>>userthumb_grey.svg (obsolete) —
Let me know if this works
Flags: needinfo?(mdeboer)
Attached file [Assets] Chat icons
Attachment #8615997 - Attachment is obsolete: true
Attachment #8615998 - Attachment is obsolete: true
Attachment #8616002 - Attachment is obsolete: true
Attachment #8616006 - Attachment is obsolete: true
Attachment #8616007 - Attachment is obsolete: true
Attachment #8616036 - Attachment is obsolete: true
Attachment #8616046 - Attachment is obsolete: true
Attachment #8616653 - Attachment is obsolete: true
Flags: needinfo?(mdeboer)
FYI I updated the US to align with the latest on conversation windowl design refresh.
User Story: (updated)
Blocks: 1179164
(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.
Blocks: 1136365
I am closing this now since the UI spec is complete and we're now implementing it.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: