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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> >> 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 <[email protected]> >> 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 <[email protected]> >> 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 <[email protected]> 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 >> > [email protected] >> > https://www.redhat.com/mailman/listinfo/patternfly >> > >> > >> > >> > >> > -- >> > >> > Allie Jacobs >> > UXD >> > calendar >> > >> > >> > _______________________________________________ >> > Patternfly mailing list >> > [email protected] >> > https://www.redhat.com/mailman/listinfo/patternfly >> > >> > >> > >> > _______________________________________________ >> > Patternfly mailing list >> > [email protected] >> > https://www.redhat.com/mailman/listinfo/patternfly >> > >> > >> > >> > >> > -- >> > Matt Carrano >> > Sr. Interaction Designer >> > Red Hat, Inc. >> > [email protected] >> > >> > >> > >> > -- >> > Sarah Jane Cox >> > User Interaction Designer >> > User Experience Design Team >> > >> > Red Hat, Inc. >> > >> > _______________________________________________ >> > Patternfly mailing list >> > [email protected] >> > 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&;>
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
