Multi-select on the web

6 Nov 2008 - 2:30pm
5 years ago
9 replies
1552 reads
ckarbass
2008

Hi All,

Imagine you have a web page that displays 100 thumbnails of 100px by 100px
pictures. Futhermore, let's say the user is a non-technical person in their
thirties. What is the best way to enable the described user to choose the
majority of the thumbnails excluding certain ones? For example, let's say
the user wanted to select 95 of the 100 pictures.

Explorer Paradigm:
Our first thought is to recreate the explorer paradigm on the web. In order
to select the pictures, the user could rubber band select the 100 pictures
or press [ctrl + a]. The user could then [ctrl + click] to deselect
pictures.

Check box paradigm:
Another option would be to turn the thumbnails into "checkboxes" such that
if the thumbnail was clicked, it would be selected. If the thumbnail was in
a selected state and then clicked, it would be deselected. This is somewhat
similar to what SmugMug does at their buy pictures page:
https://secure.smugmug.com/cart/batchadd.mg?url=http%3A%2F%2Fwww.moonriverphotography.com%2Fgallery%2F634937_G88Gj%23104246074_2sxSN

- Has any research been done on this topic and are the results publicly
available?
- Do non-technical people get [ctrl+click] to deselect? If so, do they
understand that on the web?

Thanks for any thoughts on the topic.

Comments

7 Nov 2008 - 8:39am
Danny Hope
2008

2008/11/6 Cyrus Karbassiyoon <ckarbass at gmail.com>:
> Explorer Paradigm:
> Our first thought is to recreate the explorer paradigm on the web. In order
> to select the pictures, the user could rubber band select the 100 pictures
> or press [ctrl + a]. The user could then [ctrl + click] to deselect
> pictures.
>
> Check box paradigm:
> Another option would be to turn the thumbnails into "checkboxes" such that
> if the thumbnail was clicked, it would be selected. If the thumbnail was in
> a selected state and then clicked, it would be deselected. This is somewhat
> similar to what SmugMug does at their buy pictures page:
> https://secure.smugmug.com/cart/batchadd.mg?url=http%3A%2F%2Fwww.moonriverphotography.com%2Fgallery%2F634937_G88Gj%23104246074_2sxSN

Another one to consider…

Winnowing Paradigm:
Users click the ones they don't want.
The 100 thumbnails are presented as you've described.
When a thumbnail is clicked, it leaves a gap where the picture was.
To help them recover from errors, you could display:
* An 'undo' button
* A 'show all' button
* A 'reinstate' button inside every gap that's left behind.

If you don't find any helpful research, you could use a GOMS (Goals,
Operators, Methods, and Selection rules) analysis to guide your
choice:

http://en.wikipedia.org/wiki/GOMS

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792

7 Nov 2008 - 9:00am
Andy Edmonds
2004

My data on ctrl-click is fairly old, but working with about 50 upstate South
Carolina factory workers in 2004, while the majority checked their email
daily, only 1 knew about control click.

hth, A

On Fri, Nov 7, 2008 at 8:39 AM, Danny Hope <danny.hope at gmail.com> wrote:

> 2008/11/6 Cyrus Karbassiyoon <ckarbass at gmail.com>:
> > Explorer Paradigm:
> > Our first thought is to recreate the explorer paradigm on the web. In
> order
> > to select the pictures, the user could rubber band select the 100
> pictures
> > or press [ctrl + a]. The user could then [ctrl + click] to deselect
> > pictures.
>
>

7 Nov 2008 - 11:37am
Dan Greenblatt
2008

Hi Cyrus -

As you pointed out, I think SmugMug does a good job of selection with
the checkbox paradigm. It's somewhat more discoverable than
ctrl-click but only marginally, especially for non-experienced users.

I think that a couple of ways you could [minorly] improve on the
SmugMug implementation would be:

1) A more noticeable media treatment to distinguish selected from
unselected photos. Perhaps graying out or some kind of media
treatment over the photo itself (as opposed to just the outline)

2) Perhaps include a status line with some simple instructions:
"Click to select or unselect a photo." This could even go away
after the user clicks around a bit.

3) Use that status area to indicate how many photos are currently
selected. SmugMug does this, but it's lumped in with the purchasing
information on the right-hand side. It may be more noticeable if
it's co-located with the Select All / Unselect All buttons ...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

7 Nov 2008 - 2:04pm
Adrian Howard
2005

On 6 Nov 2008, at 19:30, Cyrus Karbassiyoon wrote:
[snip]
> Explorer Paradigm:
> Our first thought is to recreate the explorer paradigm on the web.
> In order
> to select the pictures, the user could rubber band select the 100
> pictures
> or press [ctrl + a]. The user could then [ctrl + click] to deselect
> pictures.

Can't recall ever seeing this used for image selection on a web app.

> Check box paradigm:
> Another option would be to turn the thumbnails into "checkboxes"
> such that
> if the thumbnail was clicked, it would be selected. If the
> thumbnail was in
> a selected state and then clicked, it would be deselected. This is
> somewhat
> similar to what SmugMug does at their buy pictures page:
> https://secure.smugmug.com/cart/batchadd.mg?url=http%3A%2F%2Fwww.moonriverphotography.com%2Fgallery%2F634937_G88Gj%23104246074_2sxSN

Seen this used several times (e.g as well as SmugMug it's used on
Flickr when organising images).

> - Has any research been done on this topic and are the results
> publicly
> available?
> - Do non-technical people get [ctrl+click] to deselect? If so, do they
> understand that on the web?

[snip]

I don't know of any research - but I've generally found when user
testing web apps that require right/ctrl-clicking folk tend to get
confused quite quickly. It's not something folk are used to doing.

Cheers,

Adrian

8 Nov 2008 - 5:38am
Pietro Desiato
2008

Avoid non-standard interactions. Ctrl click is a very advanced
non-standard one and is mainly based OS interfaces (and even there,
it's not a standard!). These interactions don't work on the web.

I liked the analysis of Smugmug Dan did and I totally agree with him.
I would also consider with more attention the tasks you are designing
for: why the users would choose 95 of 100 pictures? If so, maybe they
would love to deselect the ones they do not want: I'd rather prefer
to click the 5 I don't like...it's 5 clicks vs 95 clicks! Maybe
they would click 'select all' and then deselect those five... I
think you'll find the answer by studying your users and creating
some scenarios. Even if there are standars and good sense, choices
are always dependent on your context.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

23 Nov 2008 - 11:31am
Viktor Reiter
2008

Even more technical persons don't know the CTRL KLICK action.

But why should a user want to select 95 pictures? Maybe we could give
better tips if we knew what the user wants to do.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

29 Nov 2008 - 11:02am
Sascha Brossmann
2008

Why not turn this into a two-stage process by differentiating between
*marking* (or flagging) a picture and *selecting* a picture for
further action? (See e. g. most types of asset management software
for implementations.) While this is actually a more or less simple
enhancement of the checkbox paradigm, it allows for much more
flexible usage. Dealing with any larger number of assets makes it
IMHO absolutely necessary to allow for some type of *filtering*
before selecting and acting on items.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

4 Dec 2008 - 9:53pm
ckarbass
2008

Sure Viktor,

I can elaborate. Let%u2019s say Mary just attended a wedding over
the weekend. She took lots of pictures with her camera and is now
ready to share them. Some magic happens and the pictures end up on a
website Mary uses. Mary is now on the web looking at thumbnails of
the pictures she took at the wedding. From the pictures she took, I
am assuming that she wants to share the majority of them. The user
interface I am designing should allow Mary to choose photos she wants
and exclude photos she doesn%u2019t want. Assume Mary took 100 photos
at the wedding and that a small percentage of the pictures are not
flattering or duplicates. She should be able to select the pictures
she likes and %u201Cadd%u201D those to an album.

So in summary, I%u2019m creating a user interface that allows a user
to look at a batch of photos and select a subset for showing to
friends/family/the public etc.

On another note, thanks for all the feedback from everyone. As of
now, we are going with the checkbox paradigm, albeit with some
modifications.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

7 Dec 2008 - 11:50am
DampeS8N
2008

If that is the case, the user's mental model doesn't fit what you
are trying to do.

There is a whole process associated with photo selection, and a lot
of times people make 'mental notes' that they need to crop this
photo later.

Just because they have to do it that way with a physical photo,
doesn't mean they should be forced to digitally.

Give them the first photo of the batch in a box and to the right of
the box place all the photos in a single line where they can be
chosen. However, this scrollable box is a secondary selector to let
people who don't think linearly to jump around.

The primary action would be this:

The big box shows the photo, and above the photo you have your tools
for editing the photo, and below the information about the photo.

One of the tools lets them 'hide' the photo from view. They can
still see it, but it won't be in their wedding album. Another option
would let them 'trash' the photo. Yet another option will let them
select the viewable area of the photo, in a way that lets them know
they aren't destroying the actual photo.

This way, someone can see a big version of the photo, giving them
more information about it before they choose to delete it, not only
that, but they can make minor alterations, and perhaps more major
ones like red-eye removal if you offer that kind of thing, without
having to make a mental note about it.

It also affords them much more control over the data attached to the
photo, and they could pick some other existing or new photo album a
photo should go in, like if the first photo on the roll wasn't about
the wedding... or split it between ceremony and the reception.

Finally, include a hide and trash icon on the thumbnail of the photos
in the box to the right. That way, if the photo is of someones thumb,
they don't need to go through any nonsense to trash it.. And if it
was a photo some kid took of cake in a toilet, they can hide it so
they can continue to enjoy the cute moment, without needed to get the
full interface.

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35348

Syndicate content Get the feed