[Patternfly] Examples of Shuttle Selector

[Joe Sniezek]

A couple armchair design comments. ;)

The Dual Pane Selector pattern puts two same-looking list boxes next to
each other. Visually, this implies that each list equal weight. From what
I've seen, in practice, it's usually a case of moving things or people
to/from an "*in*" group; one of the lists is generally more important/elite
than the other.

When there is nothing selected in the given list to move, it might be nice
to disable the outgoing "shuffle" button, make it less of a mental effort
to choose the right button (not that it's a huge mental effort, but every
bit counts).

Do the ">" and"<" buttons need to be where they are, hanging out in space?
Maybe it would be worthwhile considering incorporating the ">" and "<"
action as part of the appropriate list itself.

Thanks,
Joe

On Thu, Nov 3, 2016 at 10:50 AM, Liz Blanchard <lsurette at redhat.com> wrote:

> Thank you all for the examples of how this control is being used if your
> applications currently. We took some time over the last few days to do a
> design and write up some guidelines. Just a note, after researching it a
> bit more and discussing, we decided to rename this to be the "Dual Pane
> Selector". The PR is here if you'd like to join in on the conversation:
> https://github.com/patternfly/patternfly-design/pull/36
>
> Liz
>
> On Tue, Nov 1, 2016 at 12:33 AM, June Zhang <junzhang at redhat.com> wrote:
>
>> HI, Liz
>>
>> One example In PELC, we did like these:
>>
>> Cheers
>> June
>>
>> On Oct 27, 2016, at 12:22 PM, Gabriel Cardoso <gcardoso at redhat.com>
>> wrote:
>>
>> Hi Liz,
>>
>> Found this design I did a couple of years ago for Keycloak:
>>
>>
>>
>> Thanks,
>> Gabriel
>>
>> On 26 Oct 2016, at 13:39, Matt Carrano <mcarrano at redhat.com> wrote:
>>
>> I'm currently working on this design that uses a shuttle selector.
>>
>> <Bricks.png>
>> ​
>>
>> On Wed, Oct 26, 2016 at 10:57 AM, Ken Wilson <ken at dynamicsitedesign.com>
>> wrote:
>>
>>> here is a drag n drop solution we created.
>>>
>>> <Screen Shot 2016-10-26 at 10.54.25 AM.png>
>>>
>>>
>>>
>>> On Oct 26, 2016, at 10:39 AM, Liz Blanchard <lsurette at redhat.com> wrote:
>>>
>>> Hi All,
>>>
>>> Another pattern that we are considering looking at next week is the
>>> shuttle selector [1]. We have a few places in our products where the user
>>> needs to view a large list of items and choose/mark a number of those items
>>> for use. This could even include being able to filter down one or both of
>>> these lists.
>>>
>>> Does anyone have examples or uses of a shuttle selector in their
>>> products that they would like to share?
>>>
>>> Thanks!
>>> Liz
>>>
>>> [1] Note this is just a random screenshot I found on the web and is not
>>> our recommendation :)  https://mockupstogo.mybalsami
>>> q.com/projects/controls/Dual%20Select.jpeg?version=3&etag=d_
>>> .WlcKkT9mh_WSdZWR6NisHdfjrl5BC
>>> _______________________________________________
>>> 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
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>> Gabriel Cardoso
>> UX designer @ Red Hat
>>
>>
>>
>> _______________________________________________
>> 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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161103/9607e520/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-01 at 12.31.14 AM.png
Type: image/png
Size: 159996 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161103/9607e520/attachment.png>