[Patternfly] Pagination - Conceptual Design

Wed Oct 19 14:45:52 UTC 2016

Hi,

On Wed, Oct 19, 2016 at 10:07 AM, SJ Cox <sjcox at redhat.com> wrote:

> Thank you for all the feedback!
>
> And I agree with option 2 as well.  Catherine, to answer your questions,
> that bar is always there. That bar is shared to show filters and selection
> and just updates as filters are added and selection changes.
>
> This is also the reason that selection is on the right as opposed to the
> left.  When filters are added, they appear under the filter field, which is
> on the left. That is another con with this design is that it could
> potentially run out of room in that bar when a certain amount of filters
> are added.  In that case should we add another row for filters of just
> truncate the filters with a ... and then have a way to show all (Which
> would still add another row, or perhaps a drop down?).
>

Just wondering about the table selection labels themselves. Do we have a
standpoint on the language used? They seem more narrative ("Select all 90
items in this table."), versus something less verbose like:

Selection: 18 (of 90) | Select All

Selection: All (90 of 90) | Clear

or something like that... Something more concise might be useful when the
applied filters are in view.
Liz C.

>
> Also Matt, item selection should be consistent across all data views so
> thanks for bringing that to our attention!
>
> Thank you!
> SJ
>
> On Wed, Oct 19, 2016 at 6:37 AM, Matt Carrano <mcarrano at redhat.com> wrote:
>
>> I also like option 2 as I don't see a need to insert a new row.  But I
>> have a similar question to Catherine's.  My expectation is that this Select
>> All action is always there (no need to prompt).  I also think you could
>> shorten this to drop the "in this table" from the end.  So the row would be
>> something like:  18 of 90 Items Selected | *Select All 90 Items  *I've
>> done something similar to this in my Storage designs.
>>
>> I'm also wondering why this text is on the right rather than the left
>> (I've been putting it on the left).  Looking at the PF library, I notice
>> this is on the left for list view but on the right for table view.  Is that
>> inconsistency intentional?
>>
>> Matt
>>
>> On Wed, Oct 19, 2016 at 9:25 AM, Catherine Robson <crobson at redhat.com>
>> wrote:
>>
>>> 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
>>>>
>>>>
>>>
>>> _______________________________________________
>>> Patternfly mailing list
>>> Patternfly at redhat.com
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>>
>>
>>
>> --
>> Matt Carrano
>> Sr. Interaction Designer
>> Red Hat, Inc.
>> mcarrano at redhat.com
>>
>
>
>
> --
> *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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/36568690/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/36568690/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/36568690/attachment-0001.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/36568690/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/36568690/attachment-0003.png>