944068 - [e.me] Collection style improvements

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Everything.me, defect)

Description

[Ran Ben Aharon [:ranbena] EverythingMe]

Patryk:

1. Translucency feels strange here since I can still read the home screen header VERY clearly.
Ran: Make it opaque. Advise Fade how what the opacity value should be.

2. Not sure that little arrow below “Social” is necessary, we don’t have these types of 
elements anywhere else in the UI. 
Ran: Remove it plz.

3. The vertical divider between the “X” and “Social” is not needed, we don’t have this convention in our UI anymore.
Ran: Please remove the vertical separators in all E.me headers and make sure the "X" is the right size.

Comment 1

[Ran Ben Aharon [:ranbena] EverythingMe]

Patryk, for #3 what should we take as a reference for the right size and icon?

Comment 2

[Patryk Adamczyk [:patryk] UX]

Our icons our 58x58px on a 60x60px canvas, the PNG file is 60x60px.
In the app, our icons appear to be 54x54px. So they are being shrunken down a little, hence the lowered quality.

Comment 3

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Patch - redirect to github PR

Comment 4

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Collection view - offline

Comment 5

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Collection view - online

Comment 6

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Collection view - Fullscreen Image

Comment 7

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8339850 [details]
Patch - redirect to github PR

Hi, during two weeks if you don't touch anything in homescreen please my review is not needed. Thanks a lot for your help

Comment 8

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Search results - Fullscreen image view

Comment 9

[Evyatar 'Tron' Amitay (everything.me)]

Hi Patyrk - I prepared a patch to address all these issues. I have two open ones:
1) The exact size of the Close icon (the X left of the collection name - attachment 8339854 [details]). Currently it's set as 3.5rem = 35px. Is there a standard size to use, or is that OK?
2) The fullscreen view in search results (attachment 8339859 [details]), that's the last remain of the old design. We need to see how we incorporate the image source (a URL) in there.

Comment 10

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Search results - Fullscreen image view

Comment 11

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Collection - results

After a UI session with Fade, we decided to make the design more streamlined with the latest UI changes. Please see new screenshots attached.

Comment 12

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Collection - Image view

Comment 13

[Evyatar 'Tron' Amitay (everything.me)]

Attachment: Search Results - Image view

Comment 14

[Patryk Adamczyk [:patryk] UX]

Overall the design looks better. A few comments.
1. The status bar in app, can we keep it opaque #121212, we want to reserve the translucent look only to the homescreen, app grid and lock screen. Seeing the home screen wallpaper in the app feels less elegant and less focused.
2. The header in app, can we keep it opaque #333333, this is the same colour as keyboard word suggest, which makes sense since e.me has a huge word suggestion component.
3. The white divider line below the header is not needed once the header goes opaque.
4. I noticed some inconsistencies with how we clear input fields in the input fields, so I created a bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=944796, the mock ups have the incorrect X to clear the words, but its inline with what is in the app. So we'll revise this early next week.

Comment 15

[Patryk Adamczyk [:patryk] UX]

Attachment: Everything_Dot_Me_Spec_Nov28_page1.jpg

Comment 16

[Patryk Adamczyk [:patryk] UX]

Attachment: Everything_Dot_Me_Spec_Nov28_page2.jpg

Comment 17

[Fade Rudnitsky]

Patryk,

1. The way we see it, collections are not apps. They are more of a glimpse you take into content as an integral part of the home screen. Acknowledging this should help understanding the logics behind this design better and see that folders are actually open in visual context of the home screen instead of as full screen apps.
2. If by "app" you mean the search results screen, your comment and suggested implementation seems legit to me.
3. Re: divider - I agree that it can be more seamless. However, I think it's needed to prevent a potential clash between user's wallpaper and collection's background image.
4. Totally agree.

On mockups you provided, you suggest treating collections as shortcuts and using same search result screen layout for both collections and manually initiated search. This concept is worth researching and debating. However, knowing the deadlines given for 1.3, I suspect making such a huge behavior change would be out of scope for this version. 

Ran, correct me if I'm mistaken.

Comment 18

[Ran Ben Aharon [:ranbena] EverythingMe]

You're not mistaken

Comment 19

[Patryk Adamczyk [:patryk] UX]

Attachment: Preferred Header Treatment

Fade,
By "apps" I was referring to visual treatment of the status bar and header, not philosophically question what collections are and how they function. We want to reserve transparency of the status bars solely for lock screen, home screen and app grid. It looks pretty messy seeing multiple wallpapers in the collections.

So I am proposing 2 options. Preferred is the opaque header / status.

Comment 20

[Patryk Adamczyk [:patryk] UX]

Attachment: Option 2

Option 2, has a translucent status bar and header. I believe it needs to be darker than the home screen for better legibility. The e.me collection wallpaper would then be painted on the entire screen, beneath the status bar and header as well.

Comment 21

[Ran Ben Aharon [:ranbena] EverythingMe]

Patryk, Fade, did you get a chance to discuss this?

Comment 22

[Fade Rudnitsky]

Discussed w/Patryk. Agreed to darken collection's header, assuming 1.3 will have opaque status bar.

Comment 23

[Ran Ben Aharon [:ranbena] EverythingMe]

Patryk, I've updated the patch in attachment 8339850 [details].
Let me know if it's good to merge.

Comment 24

[Patryk Adamczyk [:patryk] UX]

Attachment: One more thing...

Looks MUCH better thanks. One thing we missed, is the divider line between the input the field and check mark.
1. Ideally we'd remove the vertical divider line. But if I am missing something... then...
2. Can we just center the [check mark] icon within the rectangle space created by the divider.
Thanks!

Comment 25

[Ran Ben Aharon [:ranbena] EverythingMe]

1. Oops.
2. Done.

Comment 26

[Ran Ben Aharon [:ranbena] EverythingMe]

Landing it on master as soon as it passes the tests.

Comment 27

[Amir Nissim (:amirn)]

landed: https://github.com/mozilla-b2g/gaia/commit/4575b2d