Selecting pictures in a kiosk application

Question

I am designing a kiosk application that is intended to be used by people with very little computer knowledge or skills.

I want to allow the user to select a group of pictures to copy. Most of the time they will want to copy all of the items, but occasionally there may be one or two they do not want to copy.

The pictures will not have any good naming, so I want to use thumbnails instead of names.

My current design looks like this:

If the checkbox is selected, the image will be copied. If it is not selected, the image will not be copied. Clicking anywhere on the image frame will select or deselect the image.

My problems with this approach are that I am worried how intuitive this will be to people who are not that familiar with computers. I am also worried that people will try too hard to hit the tiny target of the checkbox when they can select the larger target of the whole frame.

Conversely people might get confused that accidentally clicking deselects the image. I think this can be mitigated by having a selected and unselected style for the whole frame - something like changing the background colour.

Answer 1

Your concerns are very legitimate.

I would divide the screen into two regions, and move the images in animation from the Source side to the Destination side. This should help create the right mental model. The images should have a good mouseover indication that shows that they're meant to be clicked.

Some of the questions that come to mind here are:

1. Naming of the two regions (Source and Destination aren't good - probably either All and Selected Photos or Unselected and Selected photos. Maybe Photos on Disk and Photos to Copy).
2. Whether the images disappear from the Source region or not. Disappearing makes it much easier to keep track of your progress, and requires less real estate since photos aren't duplicated. But it creates the wrong mental model, since they don't really disappear from the source. This decision also affects the naming. I think I'd make them disappear and name the region accordingly. If not, then they should receive a clear indication of being added, one with more visibility than a checkbox.
3. Whether you start out with the Destination region empty or full. As you say, they'll probably want all photos, so full is more supportive of the user, but it contradicts the mental model, because you haven't really selected anything yet. This makes the whole concept much more difficult to understand. I'd go with empty and provide a good and obvious way to move all. This too affects the naming and the disappearance questions, and has implications on real estate.
4. Moving the images on click violates advanced users' expectations of how a file system behaves (first selection, then action). For example, this way they can't shift-click to select a group of items (ctrl-click isn't relevant since it's the same as clicking them one by one). So you should see how you support your advanced users too. Selecting a group of photos via a rectangular selection with a mouse, the way you do on a desktop, sounds like a good idea. Since there's no "selected" state in this model, images will need to move as soon as the mouse button is released, which is very non-standard behavior, but IMHO it's justified in this case.

The two-regions concept immediately makes you think of drag-and-drop, so you should support that too. In fact, I won't be surprised if users will first attempt to drag and drop, and only later will find out that it's enough to click the item.