[
http://jira.magnolia-cms.com/browse/MGNLUI-26?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Andreas Weder updated MGNLUI-26:
--------------------------------
Description:
I'd like to refine our current implementation of hybrid selection in lists and
trees first of all to complete the picture. I'd also like to address the issue
of always ticking the check box. Some of what I'm describing here, has already
been implemented. Please read and verify it all to ensure we get the concept
right. Especially *important now* are the behavior when multi-selecting items
using a modifier key, the behavior when starting a drag and the fact that we
only toggle-select an item, once another one has been toggle-selected as well
(see explanations below).
Hybrid selection is *intuitive to use*, if done right, but unfortunately is
*very hard and tedious to describe*. Please make sure you understand all of the
following, before trying to implement any changes. Should this not be clear
enough, please get back to me.
To begin with, here's the two terms I use frequently below:
* to _object-select_ an item, you click or tap anywhere in the row that
represents the item. That's anywhere but in the column, where the checkbox is
to toggle select the item. You may also object-select it by hitting the SPACE
key on the keyboard while the keyboard focus is on that row.
* if you _toggle-select_ an item, you tick its check box in order to select it.
* hybrid selection is the term used to describe the combination of object with
toggle selection to create a meaningful, consistent selection model with the
best of both these worlds: object selection supports intuitive selection of
single objects, toggle selection represents a visually clear way to
multi-select items.
Here's how I suggest we implement hybrid selection in our case:
* to start off, you may select any item by either object-selecting or
toggle-selecting it.
* if you object-select an item while another item has already been
object-selected, that item is first de-selected and the new one is then
selected. *Object selection thus always de-selects all currently selected items
first*, then selects the item you object selected. It clears the selection set
and starts a new set containing only the item you object-selected.
* if you toggle-select an item, any item that has already been selected
previously - whether it has been object- or toggle-selected - gets
toggle-selected as well. *Toggle selection thus adds the newly toggle-selected
item to the set of already selected items*; it does NOT de-select any currently
selected item or items.
To take into account the results of some of the discussion we had, I'd also
like to make the following change:
* if you object-select an item, do not also toggle-select it.
* if you then toggle-select another item, also toggle-select the first,
previously only object-selected item.
The last step is important to keep the interface consistent.
To de-select an item:
* un-tick its checkbox, if it has been ticked (and thus is member of a set of
selected items)
* if only a single item has been object-selected, simply object-select it again
to de-select it
So far so good. Things get hairy, since we can also *multi-select items using a
modifier key*:
* if you object-select multiple items using a modifier key (I think it's SHIFT
by default in Vaadin), then all these objects get also toggle-selected in
addition, if at least two items got selected like this.
And they get even hairier, if we also include *drag and drop*. This is
difficult, since the last item you mouse-down or touch-start on when you start
the drag looks like it's being object-selected, but as a matter of fact, it is
not:
* when you start dragging a single or multiple items in a list or tree, the
item you start the drag on/with, is first added to the list of already selected
items, if any. It is object- and toggle-selected. The drag then starts with all
those items, the previously selected one(s) as well as the one you've started
the drag with.
I'm not making this up, by the way. This is pretty much how things are
described in UI design books such as the famous [Designing Web Interfaces by
Bill Scott and Theresa Neil|http://is.gd/6uM2Bc].
was:
I'd like to refine our current implementation of hybrid selection in lists and
trees first of all to complete the picture. I'd also like to address the issue
of always ticking the check box. Some of what I'm describing here, has already
been implemented. Please read and verify it all to ensure we get the concept
right. Especially *important now* are the behavior when multi-selecting items
using a modifier key, the behavior when starting a drag and my remarks on
implementing a variant of hybrid selection towards the end of this text.
Hybrid selection is *intuitive to use*, if done right, but unfortunately is
*very hard and tedious to describe*. Please make sure you understand all of the
following, before trying to implement any changes. Should this not be clear
enough, please get back to me.
To begin with, here's the two terms I use frequently below:
* to _object-select_ an item, you click or tap on it or select it with a
keyboard anywhere in the row that represents the item. That's anywhere but in
the column, where the checkbox is to toggle select the item.
* if you _toggle-select_ an item, you tick its check box in order to select it.
* hybrid selection is the term used to describe the combination of object with
toggle selection to create a meaningful, consistent selection model with the
best of both these worlds. While most of such a combined model is fixed, an
actual implementation nevertheless has to be tweaked a bit to take into account
the specific circumstances in which it is used.
Here's how I suggest we implement hybrid selection in our case:
* to start off, you may select any item by either object-selecting or
toggle-selecting it.
* if you object-select an item, always also toggle-select it.
* if you object-select an item while another item has already been
object-selected, that item is first de-selected and the new one is then
selected. Object selection thus always de-selects all currently selected items,
then selects the item you object selected. It clears the selection set and
starts a new set containing the item you object-selected.
* if you toggle-select an item, any item that has already been selected
previously - whether it has been object- or toggle-selected - gets
toggle-selected as well. Toggle selection thus does NOT de-select any currently
selected item or items, but adds the newly toggle-selected item to the set of
already selected items.
To de-select an item:
* un-tick its checkbox, if it has been ticked (and thus is member of a set of
selected items)
* if only a single item has been selected, simply object-select it again to
de-select it
So far so good. Things get hairy, since we can also multi-select items using a
modifier key:
* if you object-select multiple items using a modifier key (I think it's SHIFT
by default in Vaadin), then all these objects get also toggle-selected in
addition, if at least two items got selected like this.
And they get even hairier, if we also include drag and drop. This is difficult,
since the last item you mouse-down or touch-start on when you start the drag
looks like it's being object-selected, but as a matter of fact, it is not:
* when you start dragging a single or multiple items in a list or tree, the
item you start the drag with, is first added to the list of already selected
items, if any. It is object- and toggle-selected. The drag then starts with all
those items, the previously selected one(s) as well as the one you've started
the drag with.
I'm not making this up, by the way. This is pretty much how things are
described in UI design books such as the famous [Designing Web Interfaces by
Bill Scott and Theresa Neil|http://is.gd/6uM2Bc].
Ok, now to the discussion we had. Some of us don't like the fact that, in the
current implementation, if you object-select an item, it immediately is also
toggle-selected. I like it, because it it's consistent and I do know that it
works well (e.g. check out the web interface of the "Remember the Milk" TO-DO
list).
But there is indeed a *variant which does NOT check the check box of a single,
object-select item*:
* if you object-select an item, do not also toggle-select it.
* if you then toggle-select another item, also toggle-select the first,
previously only object-selected item.
The last step is important to keep consistency. I'm fine with this
implementation as well.
My suggestion is the following:
* since we now have styled check boxes, they are not as visually alien than
native check boxes in our design. We thus first stick with always object- and
toggle-selecting items.
* if we find that this does not feel well, we implement the variant I described
above.
Changed the issue do only implement the new variant of hybrid selection to
reduce its complexity.
> Refine implementation of hybrid selection in lists and trees
> ------------------------------------------------------------
>
> Key: MGNLUI-26
> URL: http://jira.magnolia-cms.com/browse/MGNLUI-26
> Project: Magnolia UI
> Issue Type: Improvement
> Security Level: Public
> Reporter: Andreas Weder
> Priority: Major
> Fix For: 5.0
>
>
> I'd like to refine our current implementation of hybrid selection in lists
> and trees first of all to complete the picture. I'd also like to address the
> issue of always ticking the check box. Some of what I'm describing here, has
> already been implemented. Please read and verify it all to ensure we get the
> concept right. Especially *important now* are the behavior when
> multi-selecting items using a modifier key, the behavior when starting a drag
> and the fact that we only toggle-select an item, once another one has been
> toggle-selected as well (see explanations below).
> Hybrid selection is *intuitive to use*, if done right, but unfortunately is
> *very hard and tedious to describe*. Please make sure you understand all of
> the following, before trying to implement any changes. Should this not be
> clear enough, please get back to me.
> To begin with, here's the two terms I use frequently below:
> * to _object-select_ an item, you click or tap anywhere in the row that
> represents the item. That's anywhere but in the column, where the checkbox is
> to toggle select the item. You may also object-select it by hitting the SPACE
> key on the keyboard while the keyboard focus is on that row.
> * if you _toggle-select_ an item, you tick its check box in order to select
> it.
> * hybrid selection is the term used to describe the combination of object
> with toggle selection to create a meaningful, consistent selection model with
> the best of both these worlds: object selection supports intuitive selection
> of single objects, toggle selection represents a visually clear way to
> multi-select items.
> Here's how I suggest we implement hybrid selection in our case:
> * to start off, you may select any item by either object-selecting or
> toggle-selecting it.
> * if you object-select an item while another item has already been
> object-selected, that item is first de-selected and the new one is then
> selected. *Object selection thus always de-selects all currently selected
> items first*, then selects the item you object selected. It clears the
> selection set and starts a new set containing only the item you
> object-selected.
> * if you toggle-select an item, any item that has already been selected
> previously - whether it has been object- or toggle-selected - gets
> toggle-selected as well. *Toggle selection thus adds the newly
> toggle-selected item to the set of already selected items*; it does NOT
> de-select any currently selected item or items.
> To take into account the results of some of the discussion we had, I'd also
> like to make the following change:
> * if you object-select an item, do not also toggle-select it.
> * if you then toggle-select another item, also toggle-select the first,
> previously only object-selected item.
> The last step is important to keep the interface consistent.
> To de-select an item:
> * un-tick its checkbox, if it has been ticked (and thus is member of a set of
> selected items)
> * if only a single item has been object-selected, simply object-select it
> again to de-select it
> So far so good. Things get hairy, since we can also *multi-select items using
> a modifier key*:
> * if you object-select multiple items using a modifier key (I think it's
> SHIFT by default in Vaadin), then all these objects get also toggle-selected
> in addition, if at least two items got selected like this.
> And they get even hairier, if we also include *drag and drop*. This is
> difficult, since the last item you mouse-down or touch-start on when you
> start the drag looks like it's being object-selected, but as a matter of
> fact, it is not:
> * when you start dragging a single or multiple items in a list or tree, the
> item you start the drag on/with, is first added to the list of already
> selected items, if any. It is object- and toggle-selected. The drag then
> starts with all those items, the previously selected one(s) as well as the
> one you've started the drag with.
> I'm not making this up, by the way. This is pretty much how things are
> described in UI design books such as the famous [Designing Web Interfaces by
> Bill Scott and Theresa Neil|http://is.gd/6uM2Bc].
--
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
http://jira.magnolia-cms.com/secure/Administrators.jspa
-
For more information on JIRA, see: http://www.atlassian.com/software/jira
----------------------------------------------------------------
For list details, see: http://www.magnolia-cms.com/community/mailing-lists.html
Alternatively, use our forums: http://forum.magnolia-cms.com/
To unsubscribe, E-mail to: <[email protected]>
----------------------------------------------------------------
