[Patternfly] Responsive Filtering/Pagination Bars Contribution

[Jenny Haines]

Update: Because there are larger design conventions around responsive text
and button sizing that still need to be determined before we get to
finalizing mobile views, this exact layout will be on hold until further
notice. For those who have provided feedback to me about these designs,
thank you- you have helped to determine some new needs that we'll need to
address before designing specific mobile views!

*Jenny Haines*
*UI/VISUAL DESIGNER*
(m) 443-889-2881
jhaines at redhat.com
jennyhaines10 at gmail.com

On Mon, Jan 23, 2017 at 2:07 PM, Jenn Giardino <jgiardin at redhat.com> wrote:

> Thanks for sharing, Jenny! These look great!
>
> I'm wondering if the text "Active Filters" is necessary, or if the act of
> filtering is enough for the user to understand what the listed filters are.
>
> It also looks like "Clear All Filters" and "150 Results | Select All" can
> display in the same line.
>
> Both of these changes would give you back two lines.
>
> For example:
>
> Browser: Firefox  X CSS Grade: A  X
>
> Clear All Filters 150 results | Select All
>
>
> Versus:
>
>
> Active filters:
> Browser: Firefox  X CSS Grade: A  X
>
> Clear All Filters
> 150 results | Select All
>
>
>
>
> Also, right now it looks like the separator between "150 results" and
> "Select All" is the pipe character "|", but in the toolbar above the
> filters, the separator is a gray border. I'm interested in seeing how you
> would handle the visual styling of that separator so that it's more
> visually consistent with the separators in the toolbar.
>
>
>
> Jenn Giardino
> Senior Interaction Designer
> User Experience Design Team
> Red Hat, Inc.
> 1-919-716-5045 <(919)%20716-5045>
> jgiardin at redhat.com
>
> On Mon, Jan 23, 2017 at 1:42 PM, Jenny Haines <jhaines at redhat.com> wrote:
>
>> Hello,
>>
>> I am curious what the PatternFly community thinks about how I've
>> translated filtering and pagination bars for the smallest possible mobile
>> screen size. (320px width!)
>>
>> I've attached an image of the new desktop-width filtering and pagination
>> bars. Using the content from this desktop layout, I've rearranged and
>> optimized it for the smallest possible screen width. (See also the three
>> attached mobile layouts.)
>>
>> Some points to note about the mobile screen translation:
>>
>>    - I have decided to hide the "Delete Rows" and "Restore Rows" buttons
>>    inside the kebab to save precious mobile space. (This is a very common
>>    solution to optimize content for mobile screens. The table content is
>>    paramount, so condensing additional functionality is a smart move to see
>>    more data.)
>>    - You'll notice a new "Filter" button at the top left (solely for
>>    mobile). This helps to save vertical screen space upon default screen load.
>>    If the user wants to create a filter, they simply select this "Filter"
>>    button to expose the filter form field. Selecting the same button again
>>    hides this form field.
>>    - Please ignore the actual table content on mobile, as we have not
>>    gotten to optimizing tables for mobile at this time. (That's why I've
>>    blurred it out.)
>>    - I have determined that the pagination bar at the bottom should
>>    become sticky for mobile, as the user shouldn't have to scroll far to see
>>    these controls.
>>    - I have decided to turn off the "15^ per page" functionality for
>>    mobile, for a couple of reasons.
>>       - It takes up additional vertical space, as it would need to be
>>       stacked above the rest of the pagination controls. Stacking it above the
>>       rest of the pagination controls would mean that we could not use a "sticky"
>>       pagination bar solution.
>>       - On a mobile screen, there is not a huge need for more than 15
>>       consecutive table rows. More than this number, and the scrolling would seem
>>       endless, as the user can probably only see about 4 rows "above the fold" at
>>       any given time.
>>
>> Thanks for your feedback on these mobile layouts!
>>
>> *Jenny Haines*
>> *UI/VISUAL DESIGNER*
>> (m) 443-889-2881 <(443)%20889-2881>
>> jhaines at redhat.com
>> jennyhaines10 at gmail.com
>>
>> _______________________________________________
>> 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/20170123/2ea2751e/attachment.htm>