[Patternfly] Pagination - Conceptual Design

Wed Oct 19 16:38:37 UTC 2016

Is there a way for a user to say I want to go to Page 3 or a specific page.

Here's the scenario:

I page through several pages, and think I want to go back 3 or 5 pages, and
instead of clicking back button 3 or 5 times, can I just enter in the
[table] page number to get there quickly?

Thanks,
Ju

On Wed, Oct 19, 2016 at 12:24 PM, Dan Labrecque <dlabrecq at redhat.com> wrote:

> I agree with this needing to be less verbose. When multiple filters are
> applied, the bar will become crowded. Perhaps an icon instead of "select
> all 90 items in this table" would work better?
> Dan
>
>
> On 10/19/16 10:45 AM, Liz Clayton wrote:
>
> 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
>>
>>
>
>
> _______________________________________________
> Patternfly mailing listPatternfly at redhat.comhttps://www.redhat.com/mailman/listinfo/patternfly
>
>
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>

-- 
Ju Lim
Red Hat
Office: 978-399-0422
Mobile: 781-507-1323
Email: julim at redhat.com
IRC: julim
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/683e1f0a/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 164892 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/683e1f0a/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 170852 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/683e1f0a/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 170923 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/683e1f0a/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 171731 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/683e1f0a/attachment-0003.png>