List Management screens - what do you think?

[cPanelAdamF]

Greetings from the x4 theme team!

We would like your comments on a design we're considering. This design will be reused on every cPanel page that requires creating, updating, deleting, searching and paginating items in a list. Below you'll find a near-final draft of our design for you to comment on.





Things of note:

1. The grayed out area in the left sidebar is reserved for account navigation (we'll be iterating on this section of the design at a later date).
2. The item with a white background characterizes what will happen when you hover your mouse-cursor over a list-item on mouse-driven devices. For touch interfaces, the white will be the "highlight flash" after a user taps.
3. After you select a list-item, the interface will slide over to become a focused management panel specific to your selection. When you manage an email address, you'll be able to change the account's password, tweak its mailbox quota, delete the account, etc., from that interface. We drew inspiration from the 'Github Contributors' example found at Example: GitHub Contributors - YUI Library.
4. If you chose to delete the email account directly from this list (without using the Manage panel), the entire list-item will switch modes to confirm your deletion. (See the second attached screenshot for how that will look).
5. The account tracker box, next to the "+ Add Account" button, keeps track of the number of email accounts that have been created. For cPanel accounts that have an account creation limit, the number of accounts left available is also shown.
6. Almost all of the interactions on this page will be achieved via AJAX, so that the overall experience is fast and responsive.
7. We haven't yet settled on a good default page-size. Let us know what you're preferred page size might be (10, 20, 50 items?). We are anticipating offering a 'View All' link for those of us who just want to see everything and are willing to take whatever performance penalty might be required to load up the whole list.

Let us know what you think, good or bad, by replying below.

 

[cPanelFelipe]

*) The Mail Delivery Reports UI has an “advanced” filter section. Are filters like that going to be a part of this design?

*) It would be helpful to show how many results match the filter versus how many exist.

*) The paginator controls look good. The only potential drawback is that skipping ahead/back by more than one page in the proposed design would require typing in the text box. Not a big deal, of course, but perhaps something like:

1 … 4 5 6 [ 7 ] 8 9 10 … 14

… which easily allows you to skip ahead by two or three pages as well as showing intuitively which is the highest page number. The downside, of course, is that you then have to “aim” for the correct page number.

*) Also, with the paginator, it *might* be helpful to show “Records #6-10 of 23” somewhere. Maybe not, just a thought.

 

[cenourinha]

I have some suggestions:
- Make it possible to select multiple e-mail accounts or other items in this tables in order to do bulk actions, like new password generate, delete, etc.

This way, if a hosting account is compromised, the customer will be able to change all the e-mails, etc.

 

[cPanelAdamF]

I have some suggestions:
- Make it possible to select multiple e-mail accounts or other items in this tables in order to do bulk actions, like new password generate, delete, etc.

This way, if a hosting account is compromised, the customer will be able to change all the e-mails, etc.

Great idea, cenourinha. Currently the underlying API we're building against doesn't support batch operations like that so I'm afraid we're out of luck right now. The cPanel APIs are always evolving so batch operations may get implemented in the future. After they become available, we'll be able to implement batch update or batch password expiration like you're talking about.

 

[cPanelAdamF]

*) The Mail Delivery Reports UI has an “advanced” filter section. Are filters like that going to be a part of this design?

*) It would be helpful to show how many results match the filter versus how many exist.

Currently the only filtering options we're making plans for is text search, however other list pages than email accounts may require more advanced filtering. We'll fight that battle when we get there. Until then, however, we made sure to leave available spots in the UI where such features can be placed.

*) The paginator controls look good. The only potential drawback is that skipping ahead/back by more than one page in the proposed design would require typing in the text box. Not a big deal, of course, but perhaps something like:

1 … 4 5 6 [ 7 ] 8 9 10 … 14

… which easily allows you to skip ahead by two or three pages as well as showing intuitively which is the highest page number. The downside, of course, is that you then have to “aim” for the correct page number.

*) Also, with the paginator, it *might* be helpful to show “Records #6-10 of 23” somewhere. Maybe not, just a thought.

You're right about the targets for the windowed pagination controls being much smaller than the dedicated first/previous/next/last buttoned approach we took. Since one of the main goals of the X4 Theme project is to bring cPanel administration to mobile devices, we opted for the approach that would offer bigger targets for users fingers to tap, as well as for user's mice to click.

We do realize that there are lots and lots of opinions out there about pagination so we tried to find a good approachable device-agnostic middle-ground.