[Patternfly] Pagination - Conceptual Design

Wed Oct 19 17:45:31 UTC 2016

Hello again,

Just wanted to share the new blog post with you all.  I tried to address
most of the comments and feedback you all shared.  Thank you again!

https://blog.patternfly.org/data-view-pagination-options-conceptual-design/

SJ

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

> Liz,
>
> I like that suggestion, especially since this can stay consistent even
> when no items are selected (Selected: 0 of 90).  I updated the design to
> reflect this language and will see what feedback I get.
>
> Thank you!
>
> Thomas, that is an interesting suggestion.  I will also bring up that
> suggestion with the team and see what they think.  I do agree with you that
> it would make more sense to have the selection data right about the
> checkbox.  Just not sure if we need a whole row for that info.
>
> Thank you!
> SJ
>
> On Wed, Oct 19, 2016 at 7:58 AM, Thomas Maas <tmaas at redhat.com> wrote:
>
>> How about introducing a bar that has the sole purpose of showing
>> selections (and only appears, probably underneath the filter bar, when
>> there is a selection)? That way it would not interfere with filters and its
>> content could be left aligned at the left side of the bar, be more visible,
>> closer to the initial toggle of the page items and less jumpy on toggle.
>>
>> -Thomas.
>>
>>
>> > On 19 Oct 2016, at 16:07, 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?).
>> >
>> > 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
>> >
>> > <Screen Shot 2016-10-18 at 11.07.41 AM.png> <Screen Shot 2016-10-18 at
>> 11.07.49 AM.png>
>> > 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.
>> >
>> > <Screen Shot 2016-10-18 at 11.08.03 AM.png>
>> > <Screen Shot 2016-10-18 at 11.08.11 AM.png>
>> >
>> > 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.
>> >
>> >
>> > _______________________________________________
>> > Patternfly mailing list
>> > Patternfly at redhat.com
>> > https://www.redhat.com/mailman/listinfo/patternfly
>> >
>> >
>> >
>> >
>> > --
>> >
>> > Allie Jacobs
>> > UXD
>> > calendar
>> >
>> >
>> > _______________________________________________
>> > 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.
>> >
>> > _______________________________________________
>> > Patternfly mailing list
>> > Patternfly at redhat.com
>> > https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>
>
> --
> *Sarah Jane Cox*
> User Interaction Designer
> User Experience Design Team
>
> Red Hat, Inc.
> <http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&>
>
>

-- 
*Sarah Jane Cox*
User Interaction Designer
User Experience Design Team

Red Hat, Inc.
<http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/3fe99919/attachment.htm>