841512 - Email Layout and Font Revisions

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::E-Mail, defect, P1)

Description

[Eric Pang [:epang] UX]

Attachment: Before/After Mock ups of Email Screens

Hi Pavel,

Created before and after mock ups of what the email screens should look like.  Mainly layout and font size changes.  Refer to the following bug for specs:

https://bugzilla.mozilla.org/show_bug.cgi?id=839220

Thanks!

Comment 1

[Andrew Sutherland [:asuth] (he/him)]

Nice!  It's great to have all the before and afters in one place!

A few comments from skimming.  In general, it looks like you tested on a gaia/v1-train build rather than a gaia/master build, and your build seems to pre-date the uplifts from gaia/master to gaia/v1-train of a few days ago.  In some cases, this might mean the 'before' is wrong but the 'after' is still a reasonable target...

- Account creation "before" images are out-of-date.

- Folder list.  I'm not sure if you're saying we need to shift everything over a fixed amount, or we should flatten the hierarchy.  If it's the former, stop reading now.  Otherwise: The server provides us with a folder hierarchy.  We do have a bug in sorting which will have a fix land very shortly (bug 829520), but otherwise, we need to display the hierarchy the server provides to us.  We can do things to make the hierarchy prettier, but if we just left-align everything it's going to look really messed up when presented with an actual hierarchy.  Some specializations (ex: for gmail, see bug 841019) are possible as enhancements, but not the general case.  The wire-frames are harmful here in that they are really only showing the most trivial list of folders conceivable.

- Email sending.  We up-lifted a fix for this too; this one may simply be addressed already.

- Delete confirmation.  We up-lifted a fix for dialogs that might already have fixed this.


And when manipulating the CSS for the message list card, please be very careful if the height of anything changes.  Because the scroll region goes under the bottom toolbar, we need to make sure we have whitespace padding at the end of the scroll list so things don't get stuck under there.  In the past we have not been careful about this and things got stuck under there.  There is also possible interaction with the search pull-down in the list.

Comment 2

[Eric Pang [:epang] UX]

(In reply to Andrew Sutherland (:asuth) from comment #1)
> Nice!  It's great to have all the before and afters in one place!
> 
> A few comments from skimming.  In general, it looks like you tested on a
> gaia/v1-train build rather than a gaia/master build, and your build seems to
> pre-date the uplifts from gaia/master to gaia/v1-train of a few days ago. 
> In some cases, this might mean the 'before' is wrong but the 'after' is
> still a reasonable target...
> 
> - Account creation "before" images are out-of-date.
> 
> - Folder list.  I'm not sure if you're saying we need to shift everything
> over a fixed amount, or we should flatten the hierarchy.  If it's the
> former, stop reading now.  Otherwise: The server provides us with a folder
> hierarchy.  We do have a bug in sorting which will have a fix land very
> shortly (bug 829520), but otherwise, we need to display the hierarchy the
> server provides to us.  We can do things to make the hierarchy prettier, but
> if we just left-align everything it's going to look really messed up when
> presented with an actual hierarchy.  Some specializations (ex: for gmail,
> see bug 841019) are possible as enhancements, but not the general case.  The
> wire-frames are harmful here in that they are really only showing the most
> trivial list of folders conceivable.
> 
> - Email sending.  We up-lifted a fix for this too; this one may simply be
> addressed already.
> 
> - Delete confirmation.  We up-lifted a fix for dialogs that might already
> have fixed this.
> 
> 
> And when manipulating the CSS for the message list card, please be very
> careful if the height of anything changes.  Because the scroll region goes
> under the bottom toolbar, we need to make sure we have whitespace padding at
> the end of the scroll list so things don't get stuck under there.  In the
> past we have not been careful about this and things got stuck under there. 
> There is also possible interaction with the search pull-down in the list.

Hi Andrew,

About folder list,

We're suggesting that top level folders should be left aligned.  The folders nested under inbox in the before screen (starred, important, drafts, sent mail, etc.) should be on the same level as the inbox folder and not nested within it.  bug 829520 seems to address this :)

Comment 3

[Andrew Sutherland [:asuth] (he/him)]

(In reply to Eric Pang [:epang] from comment #2)
> We're suggesting that top level folders should be left aligned.  The folders
> nested under inbox in the before screen (starred, important, drafts, sent
> mail, etc.) should be on the same level as the inbox folder and not nested
> within it.  bug 829520 seems to address this :)

Bug 829520 won't change the indentation levels; it just will avoid breaking the hierarchy.

If we're talking about gmail, quoting from bug 841019, this is what gmail gives us:
XLIST (\HasNoChildren \Inbox) "/" "Inbox"
XLIST (\Noselect \HasChildren) "/" "[Gmail]"
XLIST (\HasChildren \HasNoChildren \AllMail) "/" "[Gmail]/All Mail"
XLIST (\HasNoChildren \Drafts) "/" "[Gmail]/Drafts"
XLIST (\HasChildren \HasNoChildren \Important) "/" "[Gmail]/Important"
XLIST (\HasChildren \HasNoChildren \Sent) "/" "[Gmail]/Sent Mail"
XLIST (\HasNoChildren \Spam) "/" "[Gmail]/Spam"
XLIST (\HasNoChildren \Starred) "/" "[Gmail]/Starred"
XLIST (\HasChildren \HasNoChildren \Trash) "/" "[Gmail]/Trash"

Starred, important, drafts, and sent mail are all nested under the synthetic [Gmail] folder.  There are various things we can do like specializing gmail or re-grafting parts of the folder hierarchy, but a coherent plan needs to be created since mail accounts have more than those few core folders.

Comment 4

[Eric Pang [:epang] UX]

Hey Casey, what do you think about this?(In reply to Andrew Sutherland (:asuth) from comment #3)
> (In reply to Eric Pang [:epang] from comment #2)
> > We're suggesting that top level folders should be left aligned.  The folders
> > nested under inbox in the before screen (starred, important, drafts, sent
> > mail, etc.) should be on the same level as the inbox folder and not nested
> > within it.  bug 829520 seems to address this :)
> 
> Bug 829520 won't change the indentation levels; it just will avoid breaking
> the hierarchy.
> 
> If we're talking about gmail, quoting from bug 841019, this is what gmail
> gives us:
> XLIST (\HasNoChildren \Inbox) "/" "Inbox"
> XLIST (\Noselect \HasChildren) "/" "[Gmail]"
> XLIST (\HasChildren \HasNoChildren \AllMail) "/" "[Gmail]/All Mail"
> XLIST (\HasNoChildren \Drafts) "/" "[Gmail]/Drafts"
> XLIST (\HasChildren \HasNoChildren \Important) "/" "[Gmail]/Important"
> XLIST (\HasChildren \HasNoChildren \Sent) "/" "[Gmail]/Sent Mail"
> XLIST (\HasNoChildren \Spam) "/" "[Gmail]/Spam"
> XLIST (\HasNoChildren \Starred) "/" "[Gmail]/Starred"
> XLIST (\HasChildren \HasNoChildren \Trash) "/" "[Gmail]/Trash"
> 
> Starred, important, drafts, and sent mail are all nested under the synthetic
> [Gmail] folder.  There are various things we can do like specializing gmail
> or re-grafting parts of the folder hierarchy, but a coherent plan needs to
> be created since mail accounts have more than those few core folders.

Hey Casey, what do you think about this?

Comment 5

[Casey Yee]

Looking much better!
Here's a couple notes I have made:

New account setup:
We should emphasize the manual setup.    The instruction above the button is unnecessary if we keep the manual setup simply as a link.

Folder view:
We should maximize the amount of space for the subject and text excerpts.   In the case that the message does not have a attachment or flag we should have the lines span to the margin extents.   Doing this we would probably want the date/time to align to the rightmost margin as well.

Search field is way too big.  Slimmed down in the same visual styling I think would be good.

Load more messages:
Do you think a button would be more clear?

Loading messages:
I think that the spinner alignment is a bit awkward.  

Message view:
Much improved!  I think we could get rid of the horizontal ruler under the subject & date/time.

Folder view:
We need to maintain the indentation for folder views.

Accounts selection button should be [ < ] -- This has been filed as another bug elsewhere.

Mail settings:
The synchronization button is huge.  I think we should try for the left/right alignment that we have in the original with updated visual styling.  The Delete account button is also visually very similar which could be a bad thing.

Comment 6

[Eric Pang [:epang] UX]

(In reply to Casey Yee [:cyee] from comment #5)
> Looking much better!
> Here's a couple notes I have made:
> 
> New account setup:
> We should emphasize the manual setup.    The instruction above the button is
> unnecessary if we keep the manual setup simply as a link.
> 
> Folder view:
> We should maximize the amount of space for the subject and text excerpts.  
> In the case that the message does not have a attachment or flag we should
> have the lines span to the margin extents.   Doing this we would probably
> want the date/time to align to the rightmost margin as well.
> 
> Search field is way too big.  Slimmed down in the same visual styling I
> think would be good.
> 
> Load more messages:
> Do you think a button would be more clear?
> 
> Loading messages:
> I think that the spinner alignment is a bit awkward.  
> 
> Message view:
> Much improved!  I think we could get rid of the horizontal ruler under the
> subject & date/time.
> 
> Folder view:
> We need to maintain the indentation for folder views.
> 
> Accounts selection button should be [ < ] -- This has been filed as another
> bug elsewhere.
> 
> Mail settings:
> The synchronization button is huge.  I think we should try for the
> left/right alignment that we have in the original with updated visual
> styling.  The Delete account button is also visually very similar which
> could be a bad thing.
(In reply to Casey Yee [:cyee] from comment #5)
> Looking much better!
> Here's a couple notes I have made:
> 
> New account setup:
> We should emphasize the manual setup.    The instruction above the button is
> unnecessary if we keep the manual setup simply as a link.
> 
> Folder view:
> We should maximize the amount of space for the subject and text excerpts.  
> In the case that the message does not have a attachment or flag we should
> have the lines span to the margin extents.   Doing this we would probably
> want the date/time to align to the rightmost margin as well.
> 
> Search field is way too big.  Slimmed down in the same visual styling I
> think would be good.
> 
> Load more messages:
> Do you think a button would be more clear?
> 
> Loading messages:
> I think that the spinner alignment is a bit awkward.  
> 
> Message view:
> Much improved!  I think we could get rid of the horizontal ruler under the
> subject & date/time.
> 
> Folder view:
> We need to maintain the indentation for folder views.
> 
> Accounts selection button should be [ < ] -- This has been filed as another
> bug elsewhere.
> 
> Mail settings:
> The synchronization button is huge.  I think we should try for the
> left/right alignment that we have in the original with updated visual
> styling.  The Delete account button is also visually very similar which
> could be a bad thing.

Thanks for the feedback Casey!

Comment 7

[Eric Pang [:epang] UX]

Attachment: Before/After Mock ups of Email Screens

Comment 8

[Eric Pang [:epang] UX]

Attachment: Before/After Mock ups of Email Screens

Reduced spacing of search bar.

Comment 9

[Eric Pang [:epang] UX]

Attachment: Before/After Mock ups of Email Screens

Updated before screens and affected mock ups

Comment 10

[Eric Pang [:epang] UX]

Part of LG's request for font updates.

Comment 11

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 13

[Eric Pang [:epang] UX]

Closing meta bug since all bugs have been worked on and completed.