select exact number widget?

5 Jan 2007 - 1:56pm
7 years ago
40 replies
730 reads
Victor Lombardi
2003

Has anyone seen effective UI widgets for selecting an exact number of
choices greater than 1? Radio buttons do this for 1, but it seems we have
no standard for "Select two and only two choices."

writeboard.com does this for comparing two versions of a document you'd
like to compare. They use check boxes, and if a third choice is made the
UI unselects the other two.

Conceptually, an option I'm considering is like selecting two apples from
a pile of apples at the market, as you select them they are moved away
from the group. So the shopper understands you can only pick two, the
apples are moved into an area just big enough for two apples. This
approach requires a way to unselect as well; with checkboxes that's
already familiar.

Thanks,
Victor

Comments

5 Jan 2007 - 2:47pm
.pauric
2006

Is this what you are thinking of?

http://demo.script.aculo.us/shop

I'm using it for grouping from a pool of 24 elements to sub groups of no
more than 6. There are also neat animations that enable me to show/hide the
master group.

regards - pauric

5 Jan 2007 - 2:50pm
josh5
2006

I don't recall seeing a widget that does this 'exactly' however your
conceptual example makes me think of something like to filling up "slots" or
a "basket"

Where people choose between a number of options and can move them into
bounded selection queue (the slots).
Some FTP clients or Install applications have a widget with two panes where
you a set of options on the left and you add them to the right. Sometimes
this is visualized by left and right arrows in between the two panes. If
you have an option on the right you use the left arrow to remove it and add
it back to the right.

Picassa and other apps have a "tray" that act like a selection queue.

-josh

On 1/5/07, Victor Lombardi <victor at victorlombardi.com> wrote:
>
>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document you'd
> like to compare. They use check boxes, and if a third choice is made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

5 Jan 2007 - 2:52pm
liyazheng
2005

Victor,

Do you have specific limitations to only using standard form widgets? If
this is a web application, what is the technical space you're working
in? Plain HTML? Flash? Ajax?

Without understanding the actual context of use for this design
problems, I'm not sure anyone can propose good solutions. But following
your apple analogy and assuming that you can only use standard widgets,
what about using a visual representation that actually shows the two
"buckets" you're talking about. One contain the bucket of apples, the
other object has the two empty spaces to drop the apples into. I've seen
applications use 2 list boxes to do this, and some just 2 visual spaces,
I haven't seen anyone in particular that did a great job, though they
seem to make an attempt to solve a problem similar to yours. When it
comes to returning items to the first bucket, there are multiple ways
you can put the apples back to the first space: drag and drop, select
and click a button with a return feature etc...

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Victor Lombardi
Sent: Friday, January 05, 2007 1:56 PM
To: discuss at lists.interactiondesigners.com
Subject: [IxDA Discuss] select exact number widget?

Has anyone seen effective UI widgets for selecting an exact number of
choices greater than 1? Radio buttons do this for 1, but it seems we
have
no standard for "Select two and only two choices."

writeboard.com does this for comparing two versions of a document you'd
like to compare. They use check boxes, and if a third choice is made the
UI unselects the other two.

Conceptually, an option I'm considering is like selecting two apples
from
a pile of apples at the market, as you select them they are moved away
from the group. So the shopper understands you can only pick two, the
apples are moved into an area just big enough for two apples. This
approach requires a way to unselect as well; with checkboxes that's
already familiar.

Thanks,
Victor
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 3:08pm
John Schrag
2005

Victor wrote:
> Conceptually, an option I'm considering is like selecting
> two apples from a pile of apples at the market, as you select
> them they are moved away from the group. So the shopper understands
> you can only pick two, the apples are moved into an area just
> big enough for two apples. This approach requires a way to
> unselect as well; with checkboxes that's already familiar.

If there must always be exactly two things selected, you could turn the
problem around. Imagine the list of choices is visible, and by default
two of them are labelled somehow (say, with tags that say "1" and "2").
The UI would then allow the user to move the tags to any position on the
list (except over top of each other), rather than moving the list items
themselves.

An advantage of this approach is that it ensures that there are always
two items selected; you don't have invalid intermediate states, where
zero or one items have been selected.

There are all kinds of refinements you could make on such a design, of
course.

-john

5 Jan 2007 - 4:04pm
Esteban Barahona
2006

2007/1/5, Victor Lombardi <victor en victorlombardi.com>:
>
>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document you'd
> like to compare. They use check boxes, and if a third choice is made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor

Why not use plain-old checkboxes with a clearly stated/written max number of
selections?

--
http://www.zensui.org

5 Jan 2007 - 4:37pm
Jeff Howard
2004

Hi Victor,

Two things come to mind.

In Tog on Interface, Bruce Tognazzini wrote about the development of
an idiom in-between checkboxes and radio buttons. Essentially an "at
least one but perhaps more than one" set of checkboxes. When you
deselected the last checkbox, it bumped the selection over to the
next checkbox. This works well for enforcing a minimum number, but
doesn't seem quite as good for restricting the maximum (though the
shifting idea could work there too).

What might be a better mapping in this case is something like what
John Schrag mentions. Think of how the Illustrator gradient palette
works. You need to select two colors, one for either end of the
gradient. The palette begins with an arrow on either end of a
continuum of colors. Those arrows always point to exactly two colors
(forget for a moment that you can add more arrows) and you can drag
either or both arrows to different values. In your example, imagine
the apples are in a row. Two arrows are beneath the apples. You
simply slide the two arrows left or right to point to the two apples
you want and enforce exclusive selection. Two apples would be
selected by default at the beginning, or there could be an empty
space to "park" the arrows.

// jeff

5 Jan 2007 - 2:04pm
Mark Roudebush
2007

Victor,

I like the metaphor of the apples.
Perhaps showing two open fields that are filled when selecting an
option from a list. As the user selects a third choice one of their
already filled in options is replaced. This would easily show there
are two available options.

/Mark

On Jan 5, 2007, at 10:56 AM, Victor Lombardi wrote:

>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems
> we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document
> you'd
> like to compare. They use check boxes, and if a third choice is
> made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two
> apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 3:17pm
Mark Roudebush
2007

Nice John.
That's really good.

On Jan 5, 2007, at 12:08 PM, John Schrag wrote:

>
> Victor wrote:
>> Conceptually, an option I'm considering is like selecting
>> two apples from a pile of apples at the market, as you select
>> them they are moved away from the group. So the shopper understands
>> you can only pick two, the apples are moved into an area just
>> big enough for two apples. This approach requires a way to
>> unselect as well; with checkboxes that's already familiar.
>
> If there must always be exactly two things selected, you could turn
> the
> problem around. Imagine the list of choices is visible, and by
> default
> two of them are labelled somehow (say, with tags that say "1" and
> "2").
> The UI would then allow the user to move the tags to any position
> on the
> list (except over top of each other), rather than moving the list
> items
> themselves.
>
> An advantage of this approach is that it ensures that there are always
> two items selected; you don't have invalid intermediate states, where
> zero or one items have been selected.
>
> There are all kinds of refinements you could make on such a design, of
> course.
>
> -john
>
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 2:16pm
Olly Wright
2007

Haven't seen one but here's an (ajax ofc) idea that might work? Drag
the first item you want onto the second, which would select both.
Drag a third onto one of them and the one not involved is de-
selected. Needs all the items visible to work. Maybe more intuitive +
fun than checkboxes? and less steps and Fitt's law problems than
dragging two items into a separate ring-fenced area.

For inspiration you might do better with computer games than sites /
apps? There's lots of this action in stuff like RTS games and simple
games (like but not) bejeweled.

Olly Wright
Media Catalyst

On FridayJan 5, at 7:56 PM, Victor Lombardi wrote:

>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems
> we have
> no standard for "Select two and only two choices."
>
> Thanks,
> Victor

5 Jan 2007 - 4:52pm
mtumi
2004

it's also a bit awkward to force multiple selection with only a
single clicking device. one could imagine a touchscreen using a
chording version of the radio buttons, where you can actually touch
multiple selections at once to make a selection...

for now I would think checkboxes with some kind of progressive
feedback (1 of 3 selected, 2 of 3 selected, etc) would be easy enough
to use and probably more space efficient and easier to use than some
sort of drag and drop custom widget.

Michael

On Jan 5, 2007, at 4:37 PM, Jeff Howard wrote:

> Hi Victor,
>
> Two things come to mind.
>
> In Tog on Interface, Bruce Tognazzini wrote about the development of
> an idiom in-between checkboxes and radio buttons. Essentially an "at
> least one but perhaps more than one" set of checkboxes. When you
> deselected the last checkbox, it bumped the selection over to the
> next checkbox. This works well for enforcing a minimum number, but
> doesn't seem quite as good for restricting the maximum (though the
> shifting idea could work there too).
>
> What might be a better mapping in this case is something like what
> John Schrag mentions. Think of how the Illustrator gradient palette
> works. You need to select two colors, one for either end of the
> gradient. The palette begins with an arrow on either end of a
> continuum of colors. Those arrows always point to exactly two colors
> (forget for a moment that you can add more arrows) and you can drag
> either or both arrows to different values. In your example, imagine
> the apples are in a row. Two arrows are beneath the apples. You
> simply slide the two arrows left or right to point to the two apples
> you want and enforce exclusive selection. Two apples would be
> selected by default at the beginning, or there could be an empty
> space to "park" the arrows.
>
> // jeff
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 4:54pm
Victor Lombardi
2003

On Fri, January 5, 2007 4:04 pm, Esteban Barahona wrote:
> 2007/1/5, Victor Lombardi <victor at victorlombardi.com>:
>>
>>
>> Has anyone seen effective UI widgets for selecting an exact number of
>> choices greater than 1? Radio buttons do this for 1, but it seems we
>> have
>> no standard for "Select two and only two choices."
{snip}

> Why not use plain-old checkboxes with a clearly stated/written max number
> of
> selections?

That is often how it's done, along with an error message if the selections
are the wrong number. But I'd like to provide more support for the user to
do it right the first time, similar to the reasoning behind having radio
buttons in addition to check boxes.

Incidentally, 'Tog on Interface' is a wonderful book that describes the
invention of check boxes and radio buttons.

Victor

5 Jan 2007 - 4:57pm
Victor Lombardi
2003

On Fri, January 5, 2007 2:52 pm, Liya Zheng wrote:
> Victor,
>
> Do you have specific limitations to only using standard form widgets? If
> this is a web application, what is the technical space you're working
> in? Plain HTML? Flash? Ajax?

It's for the web, and Ajax is a possibility.

Incidentally, this is an area where IxDA could play a leadership role, by
developing interfaces that fill gaps in our standards, testing them, and
promoting them. Just saying.

Victor

5 Jan 2007 - 6:42pm
Lorne Trudeau
2006

I think I might get shunned from the community for this one, but if you
want to go really low-tech you can actually just use a series of radio
button groups. If you have all your selectable items as rows in a table,
you can have each radio group take up a single column. Label each column
"Choice One", "Choice Two", and so on. It's accessible, usable, simple,
and cheap!

Lorne

5 Jan 2007 - 7:01pm
liyazheng
2005

I hear ya. Did you look at Yahoo's pattern library for inspiration?
They've updating it quite a bit with Ajax examples, some of these
examples could be inspirational:
http://developer.yahoo.com/ypatterns/index.php#

Have a good weekend =)

-----Original Message-----
From: Victor Lombardi [mailto:victor at victorlombardi.com]
Sent: Friday, January 05, 2007 4:58 PM
To: Liya Zheng
Cc: discuss at lists.interactiondesigners.com
Subject: RE: [IxDA Discuss] select exact number widget?

On Fri, January 5, 2007 2:52 pm, Liya Zheng wrote:
> Victor,
>
> Do you have specific limitations to only using standard form widgets?
If
> this is a web application, what is the technical space you're working
> in? Plain HTML? Flash? Ajax?

It's for the web, and Ajax is a possibility.

Incidentally, this is an area where IxDA could play a leadership role,
by
developing interfaces that fill gaps in our standards, testing them, and
promoting them. Just saying.

Victor

5 Jan 2007 - 7:16pm
Mark Schraad
2006

We have implemented a solutions that, as the first "over the limit"
box is checked, we display a dhtm layer with a message (which would
you like to deselect) and the selected choices shown. It anything but
elegant... but it works as a stop gap.

On Jan 5, 2007, at 1:56 PM, Victor Lombardi wrote:

>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems
> we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document
> you'd
> like to compare. They use check boxes, and if a third choice is
> made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two
> apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 7:49pm
.pauric
2006

Scorned Lorne (o;
To me, what you are suggesting is perfectly acceptable for a given user,
technically savvy maybe, on a project with requirements that fit that need,
tight budget possibly? As someone pointed out, we weren't given the
technical requirements. What I'm surprised about is that no one has asked;
for what level of user is this for? Myself included.

The original analogy of taking only as many apples from a cart that you
could carry struck me as something everyone can interpret and accept as a
feasible interaction constraint. At least anyone who's been shopping.

For those who don't spend all day interacting with 'infernal machines'. An
array of little white circles with various spots in them isn't that far off
the street trickster with his three cups and a ball... smoke and mirrors and
to be approached with caution until you can figure out whats going on.

On 1/5/07, Lorne Trudeau <lorne.trudeau at number41media.com> wrote:
>
> I think I might get shunned from the community for this one, but if you
> want to go really low-tech you can actually just use a series of radio
> button groups. If you have all your selectable items as rows in a table,
> you can have each radio group take up a single column. Label each column
> "Choice One", "Choice Two", and so on. It's accessible, usable, simple,
> and cheap!
>
> Lorne
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
Jnr. designabilityhitect & interinfofaceactioneer.
The more I learn, the less I seem to know.

5 Jan 2007 - 10:31pm
Mark Schraad
2006

No doubt... not so much a solution... but a temporary work around.
We'll fix it in iterative releases. Scrum/agile/extreme and all
that... right?

On Jan 5, 2007, at 10:17 PM, Mona Singh wrote:

> It would be better to prevent the user from selecting more than the
> limit. Way too many extra steps here.
>
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
> Mark Schraad
> Sent: Friday, January 05, 2007 7:17 PM
> To: Victor Lombardi
> Cc: discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] select exact number widget?
>
> We have implemented a solutions that, as the first "over the limit"
> box is checked, we display a dhtm layer with a message (which would
> you like to deselect) and the selected choices shown. It anything but
> elegant... but it works as a stop gap.
>
>
> On Jan 5, 2007, at 1:56 PM, Victor Lombardi wrote:
>
>>
>> Has anyone seen effective UI widgets for selecting an exact number of
>> choices greater than 1? Radio buttons do this for 1, but it seems
>> we have
>> no standard for "Select two and only two choices."
>>
>> writeboard.com does this for comparing two versions of a document
>> you'd
>> like to compare. They use check boxes, and if a third choice is
>> made the
>> UI unselects the other two.
>>
>> Conceptually, an option I'm considering is like selecting two
>> apples from
>> a pile of apples at the market, as you select them they are moved
>> away
>> from the group. So the shopper understands you can only pick two, the
>> apples are moved into an area just big enough for two apples. This
>> approach requires a way to unselect as well; with checkboxes that's
>> already familiar.
>>
>> Thanks,
>> Victor
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> List Guidelines ............ http://listguide.ixda.org/
>> List Help .................. http://listhelp.ixda.org/
>> (Un)Subscription Options ... http://subscription-options.ixda.org/
>> Announcements List ......... http://subscribe-announce.ixda.org/
>> Questions .................. lists at ixda.org
>> Home ....................... http://ixda.org/
>> Resource Library ........... http://resources.ixda.org
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

5 Jan 2007 - 10:40pm
Esteban Barahona
2006

2007/1/5, Mark Roudebush <markroudebush en mac.com>:
>
> Victor,
>
> I like the metaphor of the apples.
> Perhaps showing two open fields that are filled when selecting an
> option from a list. As the user selects a third choice one of their
> already filled in options is replaced. This would easily show there
> are two available options.
>
> /Mark

That may work, but which option should be replaced?

Why not use a container with a list of empty spaces (maybe with stripes, so
that users can count easily the total number of options... or a numbered
empty list)?

It can be filled just clicking at the option. But it won't accept more
options (than the predetermined max) once filled. At the right (...or left)
of each item there's an 'x' or '<' or 'trash can' to delete the item and
have one empty space.

--
http://www.zensui.org

6 Jan 2007 - 10:34am
Todd Warfel
2003

We did something similar to this on the Bankrate.com redesign. The
customer can select up to four different providers to compare. We had
a "meter" that included four dots. As they selected on, the first dot
in the meter filled in. They picked a second, and the second dot
filled in and so on. Once they selected all four, the checkboxes
became disabled until the deselected one.

The key difference here is that the choices can be made across a
series of tabs (5 year, 15 year, 30 year). The contents of each tab
is siloed from the others. To compensate for this, we indicated on
each tab how many the customer had selected - recognition rather than
recall.

It works pretty well.

On Jan 5, 2007, at 10:40 PM, Esteban Barahona wrote:

> Why not use a container with a list of empty spaces (maybe with
> stripes, so
> that users can count easily the total number of options... or a
> numbered
> empty list)?
>
> It can be filled just clicking at the option. But it won't accept more
> options (than the predetermined max) once filled. At the right
> (...or left)
> of each item there's an 'x' or '<' or 'trash can' to delete the
> item and
> have one empty space.

Cheers!

Todd Zaki Warfel
Partner, Design & Usability Specialist
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

6 Jan 2007 - 11:29am
lachica
2006

Hi Victor,

How about a pie chart that shows how many pieces you can possibly pick and
then allows the user to select directly from the graphic? For example, if
you want to allow the user to pick up to three items you would have a circle
divided into three pieces and they could select any or all of the pieces.

Best,
Julie

On 1/5/07, Victor Lombardi <victor at victorlombardi.com> wrote:
>
>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document you'd
> like to compare. They use check boxes, and if a third choice is made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

8 Jan 2007 - 9:36am
Brett Williams
2006

Thats a great idea John.

I use this technique quite a bit in content management interfaces for
websites - particularly portal/informational ones. AJAX makes it even
easier and more elegant.

bw

On Jan 5, 2007, at 3:08 PM, John Schrag wrote:

>
> Victor wrote:
>> Conceptually, an option I'm considering is like selecting
>> two apples from a pile of apples at the market, as you select
>> them they are moved away from the group. So the shopper understands
>> you can only pick two, the apples are moved into an area just
>> big enough for two apples. This approach requires a way to
>> unselect as well; with checkboxes that's already familiar.
>
> If there must always be exactly two things selected, you could turn
> the
> problem around. Imagine the list of choices is visible, and by
> default
> two of them are labelled somehow (say, with tags that say "1" and
> "2").
> The UI would then allow the user to move the tags to any position
> on the
> list (except over top of each other), rather than moving the list
> items
> themselves.
>
> An advantage of this approach is that it ensures that there are always
> two items selected; you don't have invalid intermediate states, where
> zero or one items have been selected.
>
> There are all kinds of refinements you could make on such a design, of
> course.
>
> -john
>
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

8 Jan 2007 - 9:44am
adamya ashk
2004

I've been following this thread with some interest.

The solutions with check boxes are not always the best since there can be as
many checks as there are check boxes. So any action which causes the check
boxes to become disabled say after n checks can cause confusion based on the
intention. It works in the writeboard example because we're simply comparing
(delta between two) snapshots. However, if the list of snapshots was long
and scrolling there would be chances for confusion.

There are issues with showing empty slots as well. It is often difficult at
one glance to figure out how many options can be chosen if the number is
above 5 or 6.

How about (since Ajax is a possibility) if we turned the problem on it's
head and made the action of choosing the limiting factor. So on one side you
could have the choices and on the other, n flags that the user had to use
(drag-drop?) onto the choices?

Would that work?

HTH,

-Adamya
IA and usability | Staples Inc.
http://www.staples.com

On 1/5/07, Victor Lombardi <victor at victorlombardi.com> wrote:
>
>
> On Fri, January 5, 2007 2:52 pm, Liya Zheng wrote:
> > Victor,
> >
> > Do you have specific limitations to only using standard form widgets? If
> > this is a web application, what is the technical space you're working
> > in? Plain HTML? Flash? Ajax?
>
> It's for the web, and Ajax is a possibility.
>
> Incidentally, this is an area where IxDA could play a leadership role, by
> developing interfaces that fill gaps in our standards, testing them, and
> promoting them. Just saying.
>
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

8 Jan 2007 - 10:36am
Victor Lombardi
2003

Thanks all for the great responses, I'll summarize once the thread loses
momentum.

On Mon, January 8, 2007 9:44 am, adamya ashk wrote:
...
> How about (since Ajax is a possibility) if we turned the problem on it's
> head and made the action of choosing the limiting factor. So on one side
> you
> could have the choices and on the other, n flags that the user had to use
> (drag-drop?) onto the choices?
>

That's an intriguing idea. Though I'll probably avoid drag and drop for my
application, which is for a general audience tending toward less
expertise. I think, with the exception of the desktop, drag and drop
hasn't entered the general UI consciousness yet.

Thanks,
Victor

8 Jan 2007 - 11:41am
Dean Wilson
2007

Great thread! And just the kind of stuff to keep an interaction designer
distracted for days :)

Here's a crazy thought that follows on from Adamya's suggestion of making
the action of choosing the limiting factor...focusing on the basic
requirement that we want the user to select two options(no more no less),
what if you were supply two drop-down menus prompting the user to select an
option for each?
However, might be unwieldy for long lists of options and would probably not
scale beyond 3 selections. Ideally, you would also want to remove each
selection from its opposite list.

Dean Wilson

Senior UEA, MRM Worldwide
http://www.mrmworldwide.co.uk/

On 1/8/07, adamya ashk <adamya at gmail.com> wrote:
>
> I've been following this thread with some interest.
>
> The solutions with check boxes are not always the best since there can be
> as
> many checks as there are check boxes. So any action which causes the check
> boxes to become disabled say after n checks can cause confusion based on
> the
> intention. It works in the writeboard example because we're simply
> comparing
> (delta between two) snapshots. However, if the list of snapshots was long
> and scrolling there would be chances for confusion.
>
> There are issues with showing empty slots as well. It is often difficult
> at
> one glance to figure out how many options can be chosen if the number is
> above 5 or 6.
>
> How about (since Ajax is a possibility) if we turned the problem on it's
> head and made the action of choosing the limiting factor. So on one side
> you
> could have the choices and on the other, n flags that the user had to use
> (drag-drop?) onto the choices?
>
> Would that work?
>
> HTH,
>
> -Adamya
> IA and usability | Staples Inc.
> http://www.staples.com
>
> On 1/5/07, Victor Lombardi <victor at victorlombardi.com> wrote:
> >
> >
> > On Fri, January 5, 2007 2:52 pm, Liya Zheng wrote:
> > > Victor,
> > >
> > > Do you have specific limitations to only using standard form widgets?
> If
> > > this is a web application, what is the technical space you're working
> > > in? Plain HTML? Flash? Ajax?
> >
> > It's for the web, and Ajax is a possibility.
> >
> > Incidentally, this is an area where IxDA could play a leadership role,
> by
> > developing interfaces that fill gaps in our standards, testing them, and
> > promoting them. Just saying.
> >
> > Victor
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> >
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
DW

----------------------------------------------------------------------------------------------------------------------------------------
"really we are just a whole lot of nothing with a bit of everything thrown
in for goodmeasure"
Christopher Manson esq. President, Newcastle Institute of Pataphysics

----------------------------------------------------------------------------------------------------------------------------------------

http://del.icio.us/badgerboy69
http://www.flickr.com/photos/badgerboy69/
http://www.itchyballistic.co.uk

8 Jan 2007 - 11:54am
.pauric
2006

"I think, with the exception of the desktop, drag and drop hasn't entered
the general UI consciousness yet."

I do not think a single page drag and drop between two 'bins' can be
compared with desktop drag and drop between two windows. You're able to
illustrate the functionality in a single window with some text and/or
graphics. I feel many desktop users have not yet discovered drag/drop,
drag/select etc because the desktop is unable to explain this capability in
any way.

Here is a very early version of a grouping feature used to bulk config dumb
devices. In relation to this thread, items in the top panel can be selected
one at a time and dropped in to the bottom bin which has a fixed capacity.

http://web.mac.com/pauric_ocallaghan/wapmimic.jpg

My users are technical (to say the least) but I feel its fairly obvious what
you can do on this screen. This wireframe was rendered in to a prototype
with the scriptaculous libraries.

regards - pauric

8 Jan 2007 - 2:07pm
Esteban Barahona
2006

2007/1/8, pauric <radiorental en gmail.com>:
>
> "I think, with the exception of the desktop, drag and drop hasn't entered
> the general UI consciousness yet."
>
> I do not think a single page drag and drop between two 'bins' can be
> compared with desktop drag and drop between two windows. You're able to
> illustrate the functionality in a single window with some text and/or
> graphics. I feel many desktop users have not yet discovered drag/drop,
> drag/select etc because the desktop is unable to explain this capability
> in
> any way.
> (...)

I'm not too "fond" of drag 'n drop. But for lists that are selected from a
major list, some apps use 2 boxes with 2 arrows (one selects, the other
deletes/deselects). It may be useful if the box with selected items is
numbered or has some way of illustrating "full".

--
http://www.zensui.org

8 Jan 2007 - 2:07pm
Esteban Barahona
2006

2007/1/8, pauric <radiorental en gmail.com>:
>
> "I think, with the exception of the desktop, drag and drop hasn't entered
> the general UI consciousness yet."
>
> I do not think a single page drag and drop between two 'bins' can be
> compared with desktop drag and drop between two windows. You're able to
> illustrate the functionality in a single window with some text and/or
> graphics. I feel many desktop users have not yet discovered drag/drop,
> drag/select etc because the desktop is unable to explain this capability
> in
> any way.
> (...)

I'm not too "fond" of drag 'n drop. But for lists that are selected from a
major list, some apps use 2 boxes with 2 arrows (one selects, the other
deletes/deselects). It may be useful if the box with selected items is
numbered or has some way of illustrating "full".

--
http://www.zensui.org
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss en ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists en ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

This message and its attachments may contain legally privileged or
confidential information. It is intended solely for the named addressee. If
you are not the addressee indicated in this message (or responsible for
delivery of the message to the addressee), you may not copy or deliver this
message or its attachments to anyone. Rather, you should permanently delete
this message and its attachments and kindly notify the sender by reply
e-mail. Any content of this message and its attachments which does not
relate to the official business of the sending company must be taken not to
have been sent or endorsed by that company or any of its related entities.
No warranty is made that the e-mail or attachment(s) are free from computer
virus or other defect.

This message and its attachments may contain legally privileged or confidential information. It is intended solely for the named addressee. If you are not the addressee indicated in this message (or responsible for delivery of the message to the addressee), you may not copy or deliver this message or its attachments to anyone. Rather, you should permanently delete this message and its attachments and kindly notify the sender by reply e-mail. Any content of this message and its attachments which does not relate to the official business of the sending company must be taken not to have been sent or endorsed by that company or any of its related entities. No warranty is made that the e-mail or attachment(s) are free from computer virus or other defect.

8 Jan 2007 - 11:54am
.pauric
2006

"I think, with the exception of the desktop, drag and drop hasn't entered
the general UI consciousness yet."

I do not think a single page drag and drop between two 'bins' can be
compared with desktop drag and drop between two windows. You're able to
illustrate the functionality in a single window with some text and/or
graphics. I feel many desktop users have not yet discovered drag/drop,
drag/select etc because the desktop is unable to explain this capability in
any way.

Here is a very early version of a grouping feature used to bulk config dumb
devices. In relation to this thread, items in the top panel can be selected
one at a time and dropped in to the bottom bin which has a fixed capacity.

http://web.mac.com/pauric_ocallaghan/wapmimic.jpg

My users are technical (to say the least) but I feel its fairly obvious what
you can do on this screen. This wireframe was rendered in to a prototype
with the scriptaculous libraries.

regards - pauric
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

This message and its attachments may contain legally privileged or
confidential information. It is intended solely for the named addressee. If
you are not the addressee indicated in this message (or responsible for
delivery of the message to the addressee), you may not copy or deliver this
message or its attachments to anyone. Rather, you should permanently delete
this message and its attachments and kindly notify the sender by reply
e-mail. Any content of this message and its attachments which does not
relate to the official business of the sending company must be taken not to
have been sent or endorsed by that company or any of its related entities.
No warranty is made that the e-mail or attachment(s) are free from computer
virus or other defect.

This message and its attachments may contain legally privileged or confidential information. It is intended solely for the named addressee. If you are not the addressee indicated in this message (or responsible for delivery of the message to the addressee), you may not copy or deliver this message or its attachments to anyone. Rather, you should permanently delete this message and its attachments and kindly notify the sender by reply e-mail. Any content of this message and its attachments which does not relate to the official business of the sending company must be taken not to have been sent or endorsed by that company or any of its related entities. No warranty is made that the e-mail or attachment(s) are free from computer virus or other defect.

8 Jan 2007 - 2:59pm
Mona Singh
1969

Has anyone done much research on the two boxes with the arrows in
between to add and remove selections. I had done some testing almost 10
years ago and at that time it was hard for users to grasp the concept. I
think they are quite commonplace now.

Google uses the two box paradigm to select items from lists but they
have "add" and "remove" on each line and not between the two boxes. In
some respects this seems better because it lets users know that you can
take the add action on every item. It also reduces the number of clicks
by 1 because the user doesn't select, select, select and click add.
However, I wonder about the focus of the user when he clicks "add". In a
big box, where Google uses it you can't see the box that the item gets
added to. In the box with the arrow metaphor you are done selecting and
when you click on the arrow you are all focused on seeing the items move
from one box to the next.

Any thought?

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Esteban Barahona
Sent: Monday, January 08, 2007 2:07 PM
To: discuss at lists.interactiondesigners.com
Subject: [IxDA Discuss] Fwd: select exact number widget?

2007/1/8, pauric <radiorental at gmail.com>:
>
> "I think, with the exception of the desktop, drag and drop hasn't
entered
> the general UI consciousness yet."
>
> I do not think a single page drag and drop between two 'bins' can be
> compared with desktop drag and drop between two windows. You're able
to
> illustrate the functionality in a single window with some text and/or
> graphics. I feel many desktop users have not yet discovered
drag/drop,
> drag/select etc because the desktop is unable to explain this
capability
> in
> any way.
> (...)

I'm not too "fond" of drag 'n drop. But for lists that are selected from
a
major list, some apps use 2 boxes with 2 arrows (one selects, the other
deletes/deselects). It may be useful if the box with selected items is
numbered or has some way of illustrating "full".

--
http://www.zensui.org
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

8 Jan 2007 - 4:41pm
.pauric
2006

My take on the google implementation is that it is better that the '2 boxes
with arrows in between' solution because of the explicit nature of the
add/remove labels. However is does not scale to multiple selection and
they've used links, not buttons, which can cause a double take on what
clicking on 'add' will do or where it might take me. It would have been
nice if they'd used a little graphic and made both boxes the same size at
the start, the 'add>>' points out in to white space at the start. Not to
mention they have a real link starting with the word Add not very far away.

I question the 2-boxes-with-arrows-in-between interaction. Is it a solution
based on what I'm trying to achieve, i.e. picking and grouping a selection
from a larger group, or is it a solution based on a limited set of building
blocks i.e. list boxes and buttons. With the exclusion of FTP clients, I
generally think its the latter.

8 Jan 2007 - 5:00pm
AlokJain
2006

While this depends on the context in which solution is applied, I
think we should focus on what user wants - which is just those
selected widgets. So if we show an interface with just two empty
slots/buckets , with links to show available options and add to those
buckets , I think it bring clear focus on only having two choices.

I had applied this model to a long Data input form and it came out
very successful in user tests.

Here is a simplified (partly functional as it does not populate the
buckets with user selection) recreation of the same:
http://alok.ajain1.googlepages.com/2selections.html

Cheers
Alok Jain
-------------------------------------
http://www.iPrincipia.com

8 Jan 2007 - 5:09pm
Jack L. Moffett
2005

On Jan 8, 2007, at 4:41 PM, pauric wrote:

> My take on the google implementation is that it is better that the
> '2 boxes
> with arrows in between' solution because of the explicit nature of the
> add/remove labels.

I've been using this pattern in my company's software for many years.
However, I prefer to use icons that combine + and - symbols with the
arrows to make the action more explicit. I also tend to make the
"add" button green and the "remove" button red.

Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

Charles Eames was asked the question,
"What are the boundaries of design?"

He answered,

"What are the boundaries of problems?"

- Charles Eames

8 Jan 2007 - 5:22pm
Robert Hoekman, Jr.
2005

> Has anyone done much research on the two boxes with the arrows in
> between to add and remove selections. I had done some testing almost 10
> years ago and at that time it was hard for users to grasp the concept. I
> think they are quite commonplace now.

Being commonplace has little to do with ease-of-use. I don't have a
suggestion for this particular issue at the moment, but standards
should always be questioned. Vinyl records used to be standard. :)

-r-

8 Jan 2007 - 10:36am
Victor Lombardi
2003

Thanks all for the great responses, I'll summarize once the thread loses
momentum.

On Mon, January 8, 2007 9:44 am, adamya ashk wrote:
..
> How about (since Ajax is a possibility) if we turned the problem on it's
> head and made the action of choosing the limiting factor. So on one side
> you
> could have the choices and on the other, n flags that the user had to use
> (drag-drop?) onto the choices?
>

That's an intriguing idea. Though I'll probably avoid drag and drop for my
application, which is for a general audience tending toward less
expertise. I think, with the exception of the desktop, drag and drop
hasn't entered the general UI consciousness yet.

Thanks,
Victor
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

This message and its attachments may contain legally privileged or
confidential information. It is intended solely for the named addressee. If
you are not the addressee indicated in this message (or responsible for
delivery of the message to the addressee), you may not copy or deliver this
message or its attachments to anyone. Rather, you should permanently delete
this message and its attachments and kindly notify the sender by reply
e-mail. Any content of this message and its attachments which does not
relate to the official business of the sending company must be taken not to
have been sent or endorsed by that company or any of its related entities.
No warranty is made that the e-mail or attachment(s) are free from computer
virus or other defect.

This message and its attachments may contain legally privileged or confidential information. It is intended solely for the named addressee. If you are not the addressee indicated in this message (or responsible for delivery of the message to the addressee), you may not copy or deliver this message or its attachments to anyone. Rather, you should permanently delete this message and its attachments and kindly notify the sender by reply e-mail. Any content of this message and its attachments which does not relate to the official business of the sending company must be taken not to have been sent or endorsed by that company or any of its related entities. No warranty is made that the e-mail or attachment(s) are free from computer virus or other defect.

8 Jan 2007 - 6:39pm
Mark Schraad
2006

Like I said - it is not elegant, but it does give the user an
indication of the limit (we also message this proactively) and the
ability to correct it. Unfortunately we do not have the luxury of a
rich graphic environment or long development cycle. As we do
iterative updates this is one of the first issues to be reviewed and
upgraded.

On Jan 5, 2007, at 10:17 PM, Mona Singh wrote:

> It would be better to prevent the user from selecting more than the
> limit. Way too many extra steps here.
>
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
> Mark Schraad
> Sent: Friday, January 05, 2007 7:17 PM
> To: Victor Lombardi
> Cc: discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] select exact number widget?
>
> We have implemented a solutions that, as the first "over the limit"
> box is checked, we display a dhtm layer with a message (which would
> you like to deselect) and the selected choices shown. It anything but
> elegant... but it works as a stop gap.
>
>
> On Jan 5, 2007, at 1:56 PM, Victor Lombardi wrote:
>
>>
>> Has anyone seen effective UI widgets for selecting an exact number of
>> choices greater than 1? Radio buttons do this for 1, but it seems
>> we have
>> no standard for "Select two and only two choices."
>>
>> writeboard.com does this for comparing two versions of a document
>> you'd
>> like to compare. They use check boxes, and if a third choice is
>> made the
>> UI unselects the other two.
>>
>> Conceptually, an option I'm considering is like selecting two
>> apples from
>> a pile of apples at the market, as you select them they are moved
>> away
>> from the group. So the shopper understands you can only pick two, the
>> apples are moved into an area just big enough for two apples. This
>> approach requires a way to unselect as well; with checkboxes that's
>> already familiar.
>>
>> Thanks,
>> Victor
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> List Guidelines ............ http://listguide.ixda.org/
>> List Help .................. http://listhelp.ixda.org/
>> (Un)Subscription Options ... http://subscription-options.ixda.org/
>> Announcements List ......... http://subscribe-announce.ixda.org/
>> Questions .................. lists at ixda.org
>> Home ....................... http://ixda.org/
>> Resource Library ........... http://resources.ixda.org
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
>
> This message and its attachments may contain legally privileged or
> confidential information. It is intended solely for the named
> addressee. If
> you are not the addressee indicated in this message (or responsible
> for
> delivery of the message to the addressee), you may not copy or
> deliver this
> message or its attachments to anyone. Rather, you should
> permanently delete
> this message and its attachments and kindly notify the sender by reply
> e-mail. Any content of this message and its attachments which does not
> relate to the official business of the sending company must be
> taken not to
> have been sent or endorsed by that company or any of its related
> entities.
> No warranty is made that the e-mail or attachment(s) are free from
> computer
> virus or other defect.
>
>
> This message and its attachments may contain legally privileged or
> confidential information. It is intended solely for the named
> addressee. If you are not the addressee indicated in this message
> (or responsible for delivery of the message to the addressee), you
> may not copy or deliver this message or its attachments to anyone.
> Rather, you should permanently delete this message and its
> attachments and kindly notify the sender by reply e-mail. Any
> content of this message and its attachments which does not relate
> to the official business of the sending company must be taken not
> to have been sent or endorsed by that company or any of its related
> entities. No warranty is made that the e-mail or attachment(s) are
> free from computer virus or other defect.
> <mime-attachment>

9 Jan 2007 - 12:29am
Anonymous

Hi,

Why stick to icons only? Would the user learning process be simpler and
faster if the choices are spelt out and numbered?

Using the apple analogy, the empty bucket could be numbered indicating
the number of choices open to the user, with an instruction stating
minimum X number of options that are required to be selected. In case of
two and only two options, the size of the empty bucket could be limited
to hold only two selections.

Shalini

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Jeff Howard
Sent: Saturday, January 06, 2007 3:08 AM
To: discuss at lists.interactiondesigners.com
Subject: *SPAM* [IxDA Discuss] select exact number widget?

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

!-- Virus-Free Mail Using PostMaster Express AvAc & QuickHeal Engine --!

-------------------------------------------------------------------
Uttaranchal Infrastructure Development Company Ltd, Dehradun, India

9 Jan 2007 - 1:38am
livlab
2003

Victor Lombardi wrote:
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems we have
> no standard for "Select two and only two choices."

I suggest presenting all options (in a list or whatever works for the
number of elements you have); when an option is selected, it's visually
emphasized (i.e.: bold, color, etc).

Once the second option is selected, it is also highlighted and the
rejected options are de-emphasized (color subdued or whatever form of
visual contrast).

De-selecting any of the two choices would reveal the rest of the
rejected options in regular format (standard emphasis), until the limit
choice is reached again.

Having the choice selector be the choice itself (your apples) rather
than a check box or a radio button associated with the choice probably
removes the larger challenge of this not being a very standard
interaction (multiple choice equal to 2) - check boxes and radio buttons
already have an established model and expectations. This same model can
work with any scenarios of selections 'up to n'.

I like this approach because it respects a very basic usability
guideline allowing the user to "do and undo" - and without the sense of
there being an error, just a change of heart. I also like it because it
does not involve any error scenarios or messaging.

I imagine it would be an elegant solution - I can visualize it in Flash
or just basic HTML/CSS.

5 Jan 2007 - 6:07pm
Charles Zicari
2007

I really like John's solution. Very elegant.

The scenario in which I can see it not working is when all selectable
options do not appear in the viewable area of the screen. In fact, this
is one of the areas where comparison shopping sites generally do a
pretty lousy job. For example, if you have multiple pages of results
from which you are selecting how does the user a) track what they have
already selected as they move from page to page and b) how many
selections they have left to make to reach the max allowed.

I faced a similar problem recently when working on a project where the
user could compare up to 4 items side by side. We proposed a tray with 4
slots for thumbnail images that would always be visible when the user
was on a page where one (e.g., product detail page) or more items (e.g.,
search results) could be added to the comparison set. Once an item was
in the tray it could be removed by simply clicking a remove link.

Of course, if everything is only selectable from a single screen, I'd go
with John's idea.

Charlie Zicari

John wrote:
> If there must always be exactly two things selected, you could turn
the
> problem around. Imagine the list of choices is visible, and by
default
> two of them are labelled somehow (say, with tags that say "1" and
"2").
> The UI would then allow the user to move the tags to any position on
the
> list (except over top of each other), rather than moving the list
items
> themselves.
>
> An advantage of this approach is that it ensures that there are always
> two items selected; you don't have invalid intermediate states, where
> zero or one items have been selected.
>
> There are all kinds of refinements you could make on such a design, of
> course.
>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
This email is intended only for the person or entity to which it is
addressed
and may contain information that is privileged, confidential or otherwise
protected from disclosure. Dissemination, distribution or copying of this
email or the information herein by anyone other than the intended recipient,
or an employee or agent responsible for delivering the message to the
intended
recipient, is prohibited. If you have received this email in error, please
immediately notify us by calling our Help Desk at (415) 581-5552 or
by e-mailing us at helpdesk at organic.com.

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

This message and its attachments may contain legally privileged or
confidential information. It is intended solely for the named addressee. If
you are not the addressee indicated in this message (or responsible for
delivery of the message to the addressee), you may not copy or deliver this
message or its attachments to anyone. Rather, you should permanently delete
this message and its attachments and kindly notify the sender by reply
e-mail. Any content of this message and its attachments which does not
relate to the official business of the sending company must be taken not to
have been sent or endorsed by that company or any of its related entities.
No warranty is made that the e-mail or attachment(s) are free from computer
virus or other defect.

This message and its attachments may contain legally privileged or confidential information. It is intended solely for the named addressee. If you are not the addressee indicated in this message (or responsible for delivery of the message to the addressee), you may not copy or deliver this message or its attachments to anyone. Rather, you should permanently delete this message and its attachments and kindly notify the sender by reply e-mail. Any content of this message and its attachments which does not relate to the official business of the sending company must be taken not to have been sent or endorsed by that company or any of its related entities. No warranty is made that the e-mail or attachment(s) are free from computer virus or other defect.

5 Jan 2007 - 10:17pm
Mona Singh
1969

It would be better to prevent the user from selecting more than the
limit. Way too many extra steps here.

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Mark Schraad
Sent: Friday, January 05, 2007 7:17 PM
To: Victor Lombardi
Cc: discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] select exact number widget?

We have implemented a solutions that, as the first "over the limit"
box is checked, we display a dhtm layer with a message (which would
you like to deselect) and the selected choices shown. It anything but
elegant... but it works as a stop gap.

On Jan 5, 2007, at 1:56 PM, Victor Lombardi wrote:

>
> Has anyone seen effective UI widgets for selecting an exact number of
> choices greater than 1? Radio buttons do this for 1, but it seems
> we have
> no standard for "Select two and only two choices."
>
> writeboard.com does this for comparing two versions of a document
> you'd
> like to compare. They use check boxes, and if a third choice is
> made the
> UI unselects the other two.
>
> Conceptually, an option I'm considering is like selecting two
> apples from
> a pile of apples at the market, as you select them they are moved away
> from the group. So the shopper understands you can only pick two, the
> apples are moved into an area just big enough for two apples. This
> approach requires a way to unselect as well; with checkboxes that's
> already familiar.
>
> Thanks,
> Victor
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

This message and its attachments may contain legally privileged or
confidential information. It is intended solely for the named addressee. If
you are not the addressee indicated in this message (or responsible for
delivery of the message to the addressee), you may not copy or deliver this
message or its attachments to anyone. Rather, you should permanently delete
this message and its attachments and kindly notify the sender by reply
e-mail. Any content of this message and its attachments which does not
relate to the official business of the sending company must be taken not to
have been sent or endorsed by that company or any of its related entities.
No warranty is made that the e-mail or attachment(s) are free from computer
virus or other defect.

This message and its attachments may contain legally privileged or confidential information. It is intended solely for the named addressee. If you are not the addressee indicated in this message (or responsible for delivery of the message to the addressee), you may not copy or deliver this message or its attachments to anyone. Rather, you should permanently delete this message and its attachments and kindly notify the sender by reply e-mail. Any content of this message and its attachments which does not relate to the official business of the sending company must be taken not to have been sent or endorsed by that company or any of its related entities. No warranty is made that the e-mail or attachment(s) are free from computer virus or other defect.

9 Jan 2007 - 9:50am
.pauric
2006

Mark, I wouldn't discount the newer design patterns as necessarily mandating
a heavy use of graphics. I do accept that there is little to hold back a
designer from going too far, resulting in interfaces that are too 'wow'
resulting in a lot of focus on the interface, not what can be accomplished
with it.

That said, they're light. They don't require images, you can simply
manipulate divs & their basic html content if you want. I must confess that
I've only started using them, I don't want to come across as a huge
proponent only using 'web 2.0' elements, I find the new yahoo mail quite
unwieldy and switched back quickly. However they are a welcome set of new
building blocks with little overhead if you implemented them with care.

I do not sign up to the thinking that people are used to existing
interactions and there's a usability hit when you put something new in their
way. I feel the newer design libraries can enable us to build less
intimidating interfaces that have the potential to invite users in to
explore & learn, opening the door to more intuitive flows. In short, they
can add an element of delight, earning us some forgiveness for the times we
implement a workaround or constraint.

Regarding long development cycles, I feel its quite the opposite. These
libraries shorten the bridge between design/presentation and
development/implementation.

regards - pauric

On 1/8/07, Mark Schraad <mschraad at mac.com> wrote:
>
> Like I said - it is not elegant, but it does give the user an
> indication of the limit (we also message this proactively) and the
> ability to correct it. Unfortunately we do not have the luxury of a
> rich graphic environment or long development cycle. As we do
> iterative updates this is one of the first issues to be reviewed and
> upgraded.

Syndicate content Get the feed