1130074 - [UX] Hello panel design refresh

Status: RESOLVED FIXED

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

Comment 1

[Romain Testard [:RT]]

Sevaan, I NI you so it remains on your radar as a high priority - this is the top priority for Fx39.

Comment 2

[Sevaan Franks [:sevaan]]

Attachment: Conversation Panel

Conversation Panel redesign attached.

Comment 3

[Sevaan Franks [:sevaan]]

Attachment: Contacts Panel

Contacts Panel attached.

Comment 4

[Mark Banner (:standard8)]

Comment on attachment 8567995 [details]
Conversation Panel

Looks reasonable to me.

The undo might be a bit tricky to implement - we'll have to not actually delete it on the server until 10 seconds have passed, and ensure we delete anything before shutdown. However, I think its technically doable.

Comment 5

[Mark Banner (:standard8)]

Actually, something I've just thought of:

Are L10n going to struggle to fit the "Conversations" and "Contacts" strings into the "tab" buttons? If so, do we just use ellipses?

Comment 6

[Mark Banner (:standard8)]

Comment on attachment 8567996 [details]
Contacts Panel

It'd be useful to have the layout for the gravatars permissions here as well - if any of that needs changing (or just refer to it being the same).

Otherwise looks fine I think.

Comment 7

[Sevaan Franks [:sevaan]]

Attachment: Contacts Panel (Update #1)

Updated Contacts Panel with Gravatar permissions.

Comment 8

[Sevaan Franks [:sevaan]]

(In reply to Mark Banner (:standard8) from comment #5)
> Actually, something I've just thought of:
> 
> Are L10n going to struggle to fit the "Conversations" and "Contacts" strings
> into the "tab" buttons? If so, do we just use ellipses?

I think everything should fit okay. Is there a place I can see the L10n strings so I can try out the longest ones?

Comment 9

[Romain Testard [:RT]]

My comments:
* What would the conversation panel look like for a non registered user?
* Can we add the FxA avatar picture when the user is signed-in?
* Can we add a way to identify / filter out FxA contacts in the contact list?

Comment 10

[Mark Banner (:standard8)]

(In reply to Sevaan Franks [:sevaan] from comment #8)
> (In reply to Mark Banner (:standard8) from comment #5)
> > Are L10n going to struggle to fit the "Conversations" and "Contacts" strings
> > into the "tab" buttons? If so, do we just use ellipses?
> 
> I think everything should fit okay. Is there a place I can see the L10n
> strings so I can try out the longest ones?

http://mxr.mozilla.org/l10n-mozilla-aurora/search?string=rooms_tab_button_tooltip&find=&findi=&filter=^[^\0]*%24&hitlimit=&tree=l10n-mozilla-aurora
http://mxr.mozilla.org/l10n-mozilla-aurora/search?string=contacts_tab_button_tooltip&find=&findi=&filter=^[^\0]*%24&hitlimit=&tree=l10n-mozilla-aurora

Note that not everyone has localised these yet. xh is pretty long for the "Contacts" translation.

Comment 11

[Sevaan Franks [:sevaan]]

Hmm, that is a long one. Could we make it so that if the text runs off, it disappears instead, just leaving the icon centered?

I tried all the other long strings and they fit...but that's a super long one. I'll keep it in mind as I work on the next iteration of the design.

Comment 12

[Romain Testard [:RT]]

Sevaan, when you get a chance could you please include the design from https://bug1081336.bugzilla.mozilla.org/attachment.cgi?id=8557327 to this since we probably have an opportunity to address it together?

Comment 13

[Sevaan Franks [:sevaan]]

That UX is old. Monica from Tef is working on that bug. I will mark that attachment obsolete.

Comment 14

[Sevaan Franks [:sevaan]]

Attachment: Conversation Panel (Update #1)

Included "tile" in Context section

Comment 15

[Sevaan Franks [:sevaan]]

Attachment: Updated Panels

Updated visuals attached (prepped by Vicky from Telefonica).

Comment 16

[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 17

[Victoria Gerchinhoren [:vicky]]

Attachment: Link clickers Desktop interaction and visual specs

Comment 18

[Victoria Gerchinhoren [:vicky]]

For assets needed when implementing please refer to this dropbox folder and if anything is missing please NI me.

https://www.dropbox.com/sh/8vcfyks1xkb8jty/AAAXhtGqdp2UWlDfbWckmlA8a?dl=0

Thanks!

Comment 19

[Romain Testard [:RT]]

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

Comment 20

[Romain Testard [:RT]]

(In reply to Sevaan Franks [:sevaan] from comment #15)
> Created attachment 8608739 [details]
> Updated Panels
> 
> Updated visuals attached (prepped by Vicky from Telefonica).

Sevaan, a couple of comments:
- the gear menu icon should not let users provide feedback
- what does the panel footer look like if the user is not signed in?
- Do we need to have "RECENT CONVERSATIONS" written at the top of the panel? There is nothing about how recent they are, we just dispolay them all. It feels we could do without "RECENT CONVERSATIONS" ?

Comment 21

[Romain Testard [:RT]]

Also it seems the "Add a contact" form visual refresh is missing?

Comment 22

[Sevaan Franks [:sevaan]]

> - what does the panel footer look like if the user is not signed in?

http://i.sevaan.com/image/0f2H171K1m3o

> - Do we need to have "RECENT CONVERSATIONS" written at the top of the panel?
> There is nothing about how recent they are, we just dispolay them all. It
> feels we could do without "RECENT CONVERSATIONS" ?

Let's make it so there is something about how recent they are. The last accessed conversation should be at the top of the list.

> Also it seems the "Add a contact" form visual refresh is missing?

Vicky, can you add this form in?

Comment 23

[Romain Testard [:RT]]

Thanks, also copying over the comment from the implementation bug to make the sure updated design includes the camera icon on contact hover:
https://bugzilla.mozilla.org/show_bug.cgi?id=1179210#c2

Comment 24

[Victoria Gerchinhoren [:vicky]]

Attachment: PanelUI_ConversationAndContacts.png

Addition of the "Add contact" form
Panel UI design is updated in this link: https://www.dropbox.com/s/g0qrg6egtn7gh0u/PanelUI_ConversationAndContacts.png?dl=0

Comment 25

[Victoria Gerchinhoren [:vicky]]

Updated panel UI design with contact addition form: https://www.dropbox.com/s/g0qrg6egtn7gh0u/PanelUI_ConversationAndContacts.png?dl=0

Comment 26

[Victoria Gerchinhoren [:vicky]]

Attachment: PanelUI_ConversationAndContacts.png

Comment 27

[Mike de Boer [:mikedeboer]]

(In reply to Victoria Gerchinhoren [:vicky] from comment #26)
> Created attachment 8630392 [details]
> PanelUI_ConversationAndContacts.png

Vicky, what are your thoughts behind the default contact avatars in different colors? Do we already need to support this and if yes, how should we determine which color should be assigned to a contact?

Comment 28

[Victoria Gerchinhoren [:vicky]]

(In reply to Mike de Boer [:mikedeboer] from comment #27)
> (In reply to Victoria Gerchinhoren [:vicky] from comment #26)
> > Created attachment 8630392 [details]
> > PanelUI_ConversationAndContacts.png
> 
> Vicky, what are your thoughts behind the default contact avatars in
> different colors? Do we already need to support this and if yes, how should
> we determine which color should be assigned to a contact?

Mike, I am uploading here an ordered list of the thumbs. The idea is to use them randomly but for the sake of distinction I just set up this order. The color doesn't respond to anything else that having a less monotonous list, taking into account that at first many users won't have a picture, this gives the UI more color and a bit of personality. IN the near future, this colors will also be linked to the users pointers when having a web sharing session.

PLease, find the blue one asset updated to the brand blue here: https://www.dropbox.com/sh/bz53sr5wkv15auf/AADf4lbwW0bvG9Ln0nibqHpla?dl=0

Comment 29

[Victoria Gerchinhoren [:vicky]]

Attachment: thumbs-order.png

color assignment order

Comment 30

[Victoria Gerchinhoren [:vicky]]

Comment on attachment 8630392 [details]
PanelUI_ConversationAndContacts.png

There's an update on this file here: https://www.dropbox.com/s/g0qrg6egtn7gh0u/PanelUI_ConversationAndContacts.png?dl=0

Comment 31

[Mike de Boer [:mikedeboer]]

(In reply to Sevaan Franks [:sevaan] from comment #22)
> > - what does the panel footer look like if the user is not signed in?
> 
> http://i.sevaan.com/image/0f2H171K1m3o

Vicky, can you also put this state in one of the screens?

Comment 32

[Victoria Gerchinhoren [:vicky]]

(In reply to Mike de Boer [:mikedeboer] from comment #31)
> (In reply to Sevaan Franks [:sevaan] from comment #22)
> > > - what does the panel footer look like if the user is not signed in?
> > 
> > http://i.sevaan.com/image/0f2H171K1m3o
> 
> Vicky, can you also put this state in one of the screens?

Done. Check the updated file in Dropbox.

Comment 33

[Romain Testard [:RT]]

I am closing this bug since the UX is now completed for visual refresh. Minor changes can be discussed on relevant implementation bugs.