[Patternfly] Pagination - Conceptual Design

[Allie Jacobs]

Hey SJ,

Great job thinking through the pros and cons. Option 1 seems familiar
(gmail) but I think option 2 is more elegant. It may not be as obvious /
familiar but the select all link is readily available in an area that makes
sense.

Allie

On Tue, Oct 18, 2016 at 2:36 PM, SJ Cox <sjcox at redhat.com> wrote:

> Hello fellow PatternFlyers!
>
> This sprint I'm working on the conceptual design for pagination across
> data tables (includes card and list view)
>
> I wanted to share my thoughts and progress and see if anyone had any
> concerns or feedback based on what is being done with tables in products to
> date.  What works, what doesn't?
>
> With the addition of pagination, all elements/controls related to
> pagination would be found on the bottom of the table.  This includes:
>
>    - See the number of items on a page and total number of pages
>    - See how many pages of data there is.
>    - View which page you are on (current location)
>    - Modify how many pages are being displayed.
>    - Skip to the next or previous page.
>    - Skip multiple pages.
>    - Navigate to the first/last page.
>
> With this story we wanted to add the ability to select all items across
> multiple pages. Initially, if you select all on a page, it will select all
> items only on that page. Then it would prompt the user to select all items
> across the table. I came up with two options for the "select all" option.
>
> *OPTION 1*
>
> [image: Inline image 2] [image: Inline image 3]
> The first option above shows a new row appearing within the table under
> the row headers, in the form of a message. This message informs you of how
> many items are selected and gives you the ability to select all.  Once all
> are selected, you have the ability to clear selection from the within the
> same message.
>
> Also, what would happen as you page through the table? I've seen it behave
> differently.  In google, as you page through, the selection is cleared. In
> this design I didn't think that would be a great experience.
>
> *Option 1 Pros*:  the addition of the message row is obvious and will
> draw the users attention.
> *Option 1 Cons:* Table height would have to adjust to accommodate new
> message row.  Also, does the placement of the message make sense under the
> row headers?  Furthermore, it's redundant to show the number of items shown
> twice (upper right, and in message)
>
>
> *OPTION 2*
>
> Option two addresses the cons of option 1.   When selecting all items
> within a page, you get prompted to select all items within the table next
> to where it shows you total number of items selected. Same with clearing
> selection.
>
> [image: Inline image 5]
> [image: Inline image 6]
>
> *Option 2 Pros*: No need for creating a new message row and shifting the
> table down.  No redundant info.
> *Option 3 Cons*:  Might not be obvious that you can select all items.
> Does is seem hidden?
>
>
> Let me know your thoughts, thank you!
>
>
> --
> *Sarah Jane Cox*
> User Interaction Designer
> User Experience Design Team
>
> Red Hat, Inc.
> <http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&>
>
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>


-- 

Allie Jacobs
UXD

calendar
<https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161018/0a57563d/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-10-18 at 11.08.11 AM.png
Type: image/png
Size: 164892 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161018/0a57563d/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-10-18 at 11.07.49 AM.png
Type: image/png
Size: 170852 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161018/0a57563d/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-10-18 at 11.07.41 AM.png
Type: image/png
Size: 170923 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161018/0a57563d/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-10-18 at 11.08.03 AM.png
Type: image/png
Size: 171731 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161018/0a57563d/attachment-0003.png>