[Patternfly] Pagination - Conceptual Design

Wed Oct 19 13:29:28 UTC 2016

"Clear selection" doesn't seems hidden to me. I prefer option two for it's
simplicity and use of space. I love that idea to select all items across
the table.

I wonder what it might look like with the "x of x items selected | Select
all..." text aligned to the left? It might have a stronger visual tie with
the selection column all the way to the left, and might mitigate that worry
about the text not being seen. The user might see it more readily if it
were closer to that top checkbox that they just selected.

*Jenny Haines*
*UI/VISUAL DESIGNER*
(m) 443-889-2881
jhaines at redhat.com
jennyhaines10 at gmail.com

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/61c277c3/attachment.htm>
-------------- 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/61c277c3/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/20161019/61c277c3/attachment-0001.png>
-------------- 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/61c277c3/attachment-0002.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/61c277c3/attachment-0003.png>