[Patternfly] Pagination - Conceptual Design

[Catherine Robson]

Option 2 makes more sense around having consolidated content about your
selections, but when does that bar show up?  Is that bar always there and
has 0 out of 90 items selected by default, and then just updates as
selections change?

On Tue, Oct 18, 2016 at 6:01 PM, Allie Jacobs <ajacobs at redhat.com> wrote:

> 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>
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/8ad34f5a/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/20161019/8ad34f5a/attachment.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/20161019/8ad34f5a/attachment-0001.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/20161019/8ad34f5a/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/20161019/8ad34f5a/attachment-0003.png>