[Patternfly] Pagination - Conceptual Design

Wed Oct 19 16:49:54 UTC 2016

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&>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161019/420e5f7b/attachment.htm>