Closed Bug 1560344 Opened 6 years ago Closed 6 years ago

Accounts should be listed on the left

Categories

(Thunderbird :: Account Manager, defect)

Product:
Thunderbird
Component:
Account Manager
Type:
defect
Priority:
Not set
Severity:
major

Tracking

(Not tracked)

Status:
RESOLVED FIXED
Milestone:
Thunderbird 69.0

People

(Reporter: BenB, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(8 files, 2 obsolete files)

Without accounts, default window
88.60 KB, image/png
Details
Account manager in a tab, with accounts - Actual preferences are partially hidden
111.10 KB, image/png
Details
AM in tab.png
63.45 KB, image/png
Details
Move accounts list and account categories into left category pane
6.06 KB, patch
aleca
: feedback-
Details | Diff | Splinter Review
Screenshot
110.48 KB, image/png
Details
accounts.png
67.31 KB, image/png
Details
Sample of a tidy account list without tabs/panes per group
3.93 KB, image/png
Details
mockup.jpg
56.75 KB, image/jpeg
aleca
: feedback-
Paenglab
: feedback+
BenB
: feedback-
Details

Build: TB trunk from 2019-06-20 with patch for bug 1096006

Reproduction:

  1. Open Edit | Account manager

Actual result:
The account list is another list to the right of the preferences sections.

a) That creates another level of hierarchy, which is difficult for users.
In effect, you have 3 levels now:

  1. Preferences section
  2. Account
  3. Preferences section

b) It reduces the horizontal space a lot. It consequently reduces the complete space available for the actual preferences a lot. As a result, the preferences pane has scrollbars, and some prefs are not visible.

This is unnecessary. There is enough space. The account and prefs categories list should be integrated with the list on the left.

Expected result:
I don't remember where I saw it, but I saw a screenshot (IIRC of actual running code in TB) where each account was listed on the left, on the same level as the "Display", "Privacy" etc. preference panes. Below, there was "Account", followed by an entry for each account directly below. That account entry should then have the preference sections, so that it is all in the left pane and the right pane is free for actual preferences.

The button to add an account should also be in the left pane, as a [+] button directly underneath the account list (not at the bottom of the window!). If there are no accounts, the [+] should be directly underneath the "Accounts" section header.

The default window, in a new profile.
I didn't make it deliberately tall. That's the default for a new profile on my system.

It's very ugly.
Notice that the way to add an account is hard to find.

The actual prefs have so little space that they cause scrollbars. That should never happen in UI dialogs.

Note that there are more settings after the [Advanced] button on the screenshot. One could easily thing that the [Advanced] button is the last.

But there are important other preferences hidden, like "Clean up on Exit" and "Empty Trash on Exit". These are important: You have no idea how often my mother goes over quota and all her mail bounces. ;-)

Attachment #9073037 - Attachment description: tb-accounts-tab-1.png → Without accounts, default window
Severity: normal → major
Keywords: regression
OS: Unspecified → All
Regressed by: 1096006
Hardware: Unspecified → All
Version: unspecified → 68
Attached image AM in tab.png —

Looks reasonable to me. I didn't try on a new profile so I didn't see anything too tall.

Yes the space for the preferences section is too narrow, there is a hardcoded width of 800px somewhere (wasting at least half the screen width on proper HD screens). I also objected to that. If we can't make the prefs span the full width, we could at least change the rule to 80% or so. Yes, there are some textboxes, that span the full width and then those could become a bit ugly. But better too long, than cut off, as I have also seen, e.g. chat panes (if the account name is a bit longer).

Looks reasonable to me

We have different definitions of reasonable.

To me, that looks like Helmut Kohl from the back :-)

We have:

  • Tabs
  • Preferences sections on the left
  • Accounts in the second column
  • Preferences sections underneath the accounts in the second column
  • Actual preferences in the third column
  • Which are scrolled away

If you see nothing wrong with that, you're a geek :-).

This desperately needs simplification. Only the left column, all preferences sections and accounts are listed there. On the right, there are only the actual preferences. The widgets on the right side should never scroll.

I hope Alessandro knows what I mean.

Flags: needinfo?(alessandro)

(In reply to Ben Bucksch (:BenB) from comment #0)

I don't remember where I saw it, but I saw a screenshot (IIRC of actual running code in TB) where each account was listed on the left, ...

You saw it on a mailing list where this was advertised:
https://bug1468167.bmoattachments.org/attachment.cgi?id=8985174
https://bug1468167.bmoattachments.org/attachment.cgi?id=8985554

(I suggested to contract the person to do the work in C-C ;-))

Hey, thanks for pulling me into this, I just pulled the latest changesets and saw the implementation.
First of all, great work in moving towards a more cohesive experience, now that the Account manager dialog has been integrated into the main preferences, we can improve it a lot.

The first issue I noticed is the font size. It's a bit too large and it doesn't scale like the elements in other sections. I'm on a 4K monitor with scaled up font, BTW.

The other issue I see is in terms of navigation, as having basically a 3 columns UI doesn't work well for the amount of strings, options, and call to actions packed in this section.
I know we have the same layout for the Attachments section, but in there we're not dealing with long strings and multiple options.

We should definitely translate the Account manager UI to adopt the paradigms currently used in the Preferences Panel:

  • Main section listed in the right sidebar
  • Sub sections listed as tabs

This change opens other questions, like where to display the various Account Actions.

I might have some capacity to create mock-ups to improve this section.
Thoughts?

Flags: needinfo?(alessandro)

having basically a 3 columns UI doesn't work well for the amount of strings, options ... packed in this section.

Yes, that's my point here.

However, I would suggest to avoid using tabs. Remember that we already have tabs here (this is the "account manager in a tab", after all). If we have top-level tabs, continue on the left, and then continue further with tabs, we have said good bye to any sense of logic :-).

Somebody made a mockup or real implementation that had the accounts listed on the left, below "Accounts". The sub-sections for each account then naturally integrate on the left as well. We would have general prefs sections, and per-account pref sections, and they would be in the same list. That would be logical and simple for users.

I would also think that it's not too hard to implement.

https://bug1468167.bmoattachments.org/attachment.cgi?id=8985174

No, that's not the screenshot I have in mind. I remember a large [+] button at the end of the accounts list on the left. Anyway...
I hope you got my idea.

I think my suggestion would be both easier to implement (we just need to integrate the 2. columns in the 1.), and much simpler for the user (all categories in a single list).

Attached patch 1560344.patch (obsolete) — — Splinter Review

Ben, you can play with this one :)

Assignee: nobody → acelists

...and I did. :-) Your patch didn't do at all what I meant, but at least I found the code and it got me on the right path. More importantly, after playing with it, I can see that your work on bug 1096006 was great. It's all in the same window, and I could fairly easily move the widgets as I wanted to.

I managed to integrate the accounts list on the left, as I had intended.

I've did some very basic styling to make it fit in, but this could be done much much nicer. I'm sure once Alessandro gets his hands on it, it will look awesome.

It also works, mostly. I thought I had the pane switching working, but then I broke it again. You'll probably figure out what I did wrong fairly quickly, but I'm too tired right now. Due to that, I had to fake the screenshot. The left pane (list of categories and accounts both on the left) is real, but the right pane is pasted in to show how it's supposed to look like.

Attachment #9073114 - Attachment is obsolete: true
Attachment #9073136 - Flags: feedback?(alessandro)
Attached image Screenshot —

Left pane is real, right pasted in

TODO:

  • Fix accounts pane switching. I thought I had it working, but it doesn't work anymore. Hopefully just something small and stupid. (-> aceman?)
  • Improve style (-> Aleca?)
Comment on attachment 9073136 [details] [diff] [review] Move accounts list and account categories into left category pane aceman, can you help me fix the account pane switching, please?
Attachment #9073136 - Flags: review?(acelists)

@Aleca: Why I think this approach is superior to tabs:

  • It avoids switching from content pane tabs to categories/accounts on the left, back to tabs for categories on the right. I think that would be highly confusing and not be a logical flow.
  • The "Copies & Folders" etc. sections of the accounts are prefs categories like "Composition" etc. above. The difference between the 2 types of categories is not inherent, but technical: For certain, we allow them to be set per-account, for others we have only a global preference. The difference is implementation specific. I think it's therefore very logical to have all these categories in the same list, no matter whether they are on per-account or not.

I think the way it's shown on the screenshot is very logical, simple, and beautiful.

Comment on attachment 9073136 [details] [diff] [review] Move accounts list and account categories into left category pane Review of attachment 9073136 [details] [diff] [review]: ----------------------------------------------------------------- Well, it may look OK on initial load but there are a ton of small problems that you will have to fix. E.g. the accounts are still shown even when you switch to other pane than Accounts. Then clicking any account or its subpane does no longer do anything (right pane contents stays stuck). ::: mail/components/preferences/aboutPreferences.xul @@ +47,5 @@ > <hbox id="prefBox" flex="1"> > <vbox id="pref-category-box"> > <radiogroup id="selector" orient="vertical" class="paneSelector chromeclass-toolbar" > + role="listbox" /> <!-- Expose to accessibility APIs as a listbox --> > +#include accounts.inc.xul I don't know, this calls for problems to have this anomaly of having something here outside of preferencesContainer and it also is something else than a label (and radiobutton) of a prefs pane. @@ +72,4 @@ > #include applications.inc.xul > <prefpane id="paneLightning" label="&paneLightning.title;"/> > #include advanced.inc.xul > + <prefpane id="paneAccount" label="&paneAccount.title;" flex="1"> You have duplicate id here, maybe that's why you have problems with switching panes. ::: mail/themes/linux/mail/accountManage.css @@ -42,4 @@ > } > > treechildren::-moz-tree-cell-text(isDefaultServer-true) { > - text-decoration: underline; You can't deemphasize the default account, it is important information. ::: mail/themes/shared/mail/incontentprefs/aboutPreferences.css @@ +117,4 @@ > background-color: transparent; > background-image: none; > border-bottom: none; > + padding: 20px 0 0; What is this? @@ +132,4 @@ > border-radius: 2px; > margin-top: 0; > margin-bottom: 0; > + margin-inline-start: 15px; What is this?

What is this?

Style

E.g. the accounts are still shown even when you switch to other pane than Accounts

FWIW, that's intended. The list of accounts should always show. The "Accounts" thing should be simply be a label without function.

You can't deemphasize the default account, it is important information.

The list of accounts needs to look homogeneous. The underline looks terrible. We should find another way to show that information.
For example, the default account should always be shown as the first one. That would be logical for users, and it matches our internal logic: If we don't have a default account, we pick the first one.
Or we could make it a checkbox "[x] Default account" in the account pane. That would also avoid the extra menu item in the account actions.

Attached image accounts-Windows.png (obsolete) —

I like alta88's proposal with the accounts on the left in the categories pane and tabs for the sub categories better. It makes the categories pane less tall. With this you can directly click on the account you want and don't need first to click on "Accounts", then the tree appears below and the pane on the right is empty, very ugly.

With more accounts and a less tall window only the tree is scrollable until it is too small and nothing is visible.

Only a styling issue but on Windows it looks not very well.

With a long list of accounts already at the moment you have to scroll a lot to find the account and pref you want to change. If the account list would be limited to the small area on the left side below all other preference categories this would make the account maintenace more difficult than now.

Only a styling issue but on Windows it looks not very well.

Yes, given that the theme files are unfortunately split between platforms, I adapted the style only for Linux, which I worked on. That's trivial to fix.

you have to scroll a lot to find the account

The accounts lists scrolls in even TB 60. Scrolling a list is fine.

tabs for the sub categories

I explained above why that is conceptually broken.

Imagine a website would open 4 tabs at once. Would you like that? That's effectively what we do to the user here.
Tabs for content are good.
Tabs for UI widgets are just wrong.

But sometimes, there are no words:
http://hallofshame.gp.co.at/images/mewtab.gif
http://hallofshame.gp.co.at/images/tcpip2.gif
http://hallofshame.gp.co.at/images/mewtab.gif
"Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs"

To make it worse, we would have nested tabs here, because the preferences themselves are already a tab.
Tabs are the top level organizer. We cannot also use tabs for the 3. level organization.

  1. level content tabs (top)
  2. level categories (left)
  3. level dialog tab (top again)

I know you understand the concepts and flow perfectly fine, there's no problem at all for you, but you're developers. Think of a 73 year old mother who knows nothing about computers, but just wants to read her mail. She, too, should be able to use preferences.

With tabs aren't the normal tabs meant but the tabs we have already for example in the Advanced pane (General, Data Choices etc.). They don't look like normal tabs.

Yes, I understand that. You understand that. My dad will not.

I really think it's not a good idea to try to squeeze the account settings in the options tab. When you put the accounts on the left below the other listitems, the list can become way too long when you have more accounts and you have opened their options. When you put the accounts in the right pane, you get three levels of information next to each other, where the leftmost level does nothing except help you steer away again from the account settings.
It would make much more sense to put the account settings in their own Tab, with the accounts on the left and the settings on the right. Maybe put the account actions somewhere on top, much like the gear icon in the Add-ons manager.
This way you can also handle the fourth layer more naturally, where you have advanced settings popping up, just like you can in the options screen.
Then add the Account manager as a tab to switch to, to the bottom of the selectors in the Options tab and in the Add-on Manager tab, just like you can switch/open those from each other. Those popups would have a much more logical position on the screen as with the three levels next to each other, where the popup would either be small or block important information, like the account you are working on.
I hope I explained my idea, if you don't understand what I mean, I can try to create a mock-up.

Attached image accounts.png —

Side-by-side comparison of new (left) and old (right) and it looks absolutely fine to me. We might make the font a little smaller, but that's all I'd change.

Moving the accounts to the left could create a very long scrollbox for people with many accounts.

For me this bug is WONTFIX ... Edit: ... apart from adjusting margins and font sizes.

I agree with Onno, it would be much preferable to have the account settings in their own tab instead of cramming everything into the options.

If the text is the same size as in other pref panes, then we probably need to keep it. Wasn't the whole point of it that the prefs are all the same design now? And that the accounts are merged with the other Preferences ? I think there are some bugs claiming there was confusion if they are split. So a separate tab isn't a solution either.

(In reply to Magnus Melin [:mkmelin] from comment #28)

I agree with Onno, it would be much preferable to have the account settings in their own tab instead of cramming everything into the options.

Well, that discussion should have happened in bug 1096006 in 2014, not when we're about to ship this five years later. As Jim noted in bug 1096006 comment #5, this discussion goes back to 2010: https://mail.mozilla.org/pipermail/tb-planning/2010-December/000632.html.

I wouldn't mind a separate tab, but not for being crammed - which it is not as my screenshot shows, but not to overload a single tab with three levels of control.

I'm really sorry that I missed the discussion and the bug in 2014 and that I'm very late to the party. The same is probably true for aleca.

If you do want to stuff everything in one screen, you could only put the Account Settings in the list on the left, and the make the right side more like the add-ons manager. In the add-ons manager, you can select an add-on and click on the More button.
In the account settings pane, you could do the same: when you click on the account, the settings for that account open. Instead of making all the panes that you have to select on the left side, you could just put all the panes above each other and make all the settings available in one place, much like about:preferences is in modern Firefox. And if you put the same searchbox on top, you make it easier for users to find a certain setting.

Of course you could also do this with the other approach in my comment 26, so that you only get a tidy list of accounts on the left side and all the settings on the right side.

We could at least increase the width of the content pane to make the AM options fit.

Attached image mockup.jpg —

I've discussed this a bit with Richard. How about this then?

I don't think you can solve this by just moving a few things around. The preferences and the account settings look totally different and have completely different structure. You can't just put them in the same tab this way without serious re-design. The account settings has an older feel, but that's not so disturbing when it's not mixed with a newer kind of design.

Re https://bug1468167.bmoattachments.org/attachment.cgi?id=8985174, slightly better, but can't say I'm sold on that either.

Comment on attachment 9073382 [details] mockup.jpg (In reply to Ben Bucksch (:BenB) from comment #23) > I know you understand the concepts and flow perfectly fine, there's no problem at all for you, but you're developers. Think of a 73 year old mother who knows nothing about computers, but just wants to read her mail. She, too, should be able to use preferences. This is about the categories on top as proposed in attachment 8985174 [details] and attachment 9073382 [details]. BenB, your 73 y/o mother will use all the smarts that come with account creation, she won't need to change the options. There is a large portion of our users who never use options. Besides, **ALL** preference panes with the exception of "General" and "Privacy" **ALREADY HAVE** the proposed layout. Surely something a little more complicated pane like account settings will need it, too. I'm asking for feedback so we can go and implement something here. Oh, I forgot the "account actions" button, that would also need to go somewhere onto the left.
Attachment #9073382 - Flags: feedback?(richard.marti)
Attachment #9073382 - Flags: feedback?(alessandro)
Attachment #9073382 - Flags: feedback?(acelists)
Assignee: acelists → nobody
Comment on attachment 9073382 [details] mockup.jpg It's like I had it in mind. One question would be, should we still show the "Accounts" selector and not only the accounts itself? When removing it, this would gain space for one account. When we leave it, would we initially hide the accounts and show them when you click on the "Accounts" as sub-categories like it looks in the mock-up? Then we could, when the "Accounts" category is selected, also use the empty space of the right pane for the account actions in a nice presentation (something like the Account Central when you click on a account in the main tab).
Attachment #9073382 - Flags: feedback?(richard.marti) → feedback+

There is a large portion of our users who never use options.

Yes, but that's for a reason. That's because options have such a horrible UI that they cannot find things themselves. Instead of accepting that options are broken for large parts of our user base, I'd rather fix them.

when you click on the account, the settings for that account open. Instead of making all the panes that you have to select on the left side, you could just put all the panes above each other and make all the settings available in one place.

And with headings between the sections. I could live with that.

Comment on attachment 9073382 [details] mockup.jpg No tabs. We already have content tabs. Too confusing for normal users.
Attachment #9073382 - Flags: feedback-
Attachment #9073152 - Attachment is obsolete: true

Ben, ALL preference panes with the exception of "General" and "Privacy" ALREADY HAVE the proposed layout. What do you say to that?

That this is broken, too, and needs to be fixed as well, given that prefs are in a content tab now. You cannot have 2 levels of tabs. Firefox also fixed this. Compare comment 31.

I agree with Magnus that, due to the complexity and amount of options of the Account Manager, having it to open in a dedicated Tab would be the optimal solution. I understand that this is not doable due to the tight schedule in release the next beta and the fact that it should have been discussed previously in the original bug.

I would like to suggest to slow things down a bit.
We can't rush these changes by moving stuff around to hopefully make them fit. We need time and a thorough UX prototyping to prevent downfalls.
This is a big and extremely important section that needs careful thinking.

In my opinion, we should open a dedicated bug to improve the font size and spacing of the AM area. The differences in style with its siblings elements in the preferences tab is very noticeable, and a quick fix to that may improve the situation and buy us more time.

Regarding this bug, adding the list of accounts to the left panel is not a great solution for these reasons:

  • It bloats that panel with even just few accounts
  • It forces us to introduce an inconsistent behaviour for the Accounts label (dropdown? clickable? remove it completely?)
  • It removes the important visual separation we currently have. Having 5 accounts with the same envelope icon is visually confusing.

Ben, we understand tabs are not the best solution, maybe we should remove them at one point, and maybe follow what FF did, but this is not the place and time to do it.
Our preferences panel is based on Tabs, having a section with an inconsistent navigation doesn't bring any benefit.
Without a Search Box like FF did, we can't have the full list of options all at once. That's a massive scrollable area and a nightmare to navigate.

Thoughts?
Once again, apologies for being late to the game.

Attachment #9073136 - Flags: feedback?(alessandro) → feedback-
Attachment #9073382 - Flags: feedback?(alessandro) → feedback-

@Aleca: I'm OK with slowing things down, but then bug 1096006 cannot ship in Thunderbird 68.
Please compare attachment 9073045 [details] with attachment 9073137 [details]. The first screenshot (TB 69) has 3 columns, and scrollbars everywhere. That is completely and obviously broken and cannot ship. I think the second screenshot (my patch, plus a few additional fixes) looks a lot more professional and would be shippable IMHO.

I propose:

  • Leave everything on trunk. Do not put bug 1096006 in TB 68. - or -
  • Remove the subsections (neither as tabs or in list) and make them headings on the same page, like in Firefox - or -
  • Take my patch and improve upon it

I respect that Aleca is the UX lead and has the final decision. But PLEASE do not ship status quo on trunk as TB 68. The 3 columns are totally broken. They are hideous and extremely unprofessional.

Fixed by backout of bug 1096006. There is no need to have a feature that doesn't have majority approval and will cause endless merge conflicts when maintaining TB 68. Let's try again for TB 76.

Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 69.0
Attachment #9073136 - Flags: review?(acelists)
Attachment #9073382 - Flags: feedback?(acelists)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: