[
http://jira.magnolia-cms.com/browse/MGNLUI-26?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Andreas Weder updated MGNLUI-26:
--------------------------------
Summary: Refine implementation of hybrid selection in lists and trees
(was: Change implementation of hybrid selection in lists and trees)
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 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.
was:
I'd like to refine our current implementation of hybrid selection in lists and
trees to fix some issues and clear up some of the misunderstandings it seems to
cause. Some of what I'm saying 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.
> 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 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.
--
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]>
----------------------------------------------------------------
