My team is developing an application on a mobile device involving a lot of scanning of barcodes (industrial applications, yay). Mobile = limited real estate.

In a particular case, we need the user to scan a subset of items. As an example: they have 12 bags in front of them, and we want them to put these items into bags 4, 5, 7, 9 and 12, scanning the bag as they do so. But we don't want to specify an order. We just want them to scan those 5 of 12, in any order.

We'll catch them if they do the same one twice, or the wrong one, give them a beep or something to say "nono, not that one". Technical-side, the problem is straight-forward.

What we're stuck on is how to display to the user "You have completed 7 and 9, but not 4, 5 or 12." Some visual way to describe that to them, so that if they are like me, and tend to zone out for a moment and forget what they were doing, a quick glance at the screen lets them know "You finished these ones, and still have to do these".

As far as we know, we should never expect the size of the set of bags to exceed 12 (but maybe next year we get told it now needs to be 24).

Any ideas?

  • Are the bags in any particular spatial relation to each other? Is the same item being placed into each bag? If not, are the different items spatially related in any way? Feb 6, 2014 at 18:25
  • Evil Closet Monkey: Yes, the bags are all in a specific spacial arrangement (on a multi-level cart), and that arrangement is part of why we don't want to enforce an ordering. The user will know the best way to go to each bag better than we will.
    – Mabbo
    Feb 10, 2014 at 15:08

2 Answers 2


Simple. Have 5 boxes, each representing a bag.

Light them up in colour when they are done.

Shake/Red represents an error.

The user can glance down at the screen to see which bags have already been completed.

enter image description here


I would create a list, much like a to-do list that has: - the title of the thing to be packed - its destination (the numbered bag) I would order the list by bag number and I would include pictures of the things if possible

When a user clicks on the list item they are taken to a screen that reiterates the task "Title of Thing --> Bag #1" and then gives the user two bar code areas to populate by scanning as they pack.

Once the barcode is recognized in the first area, focus should be moved to the next area. Each area should be labeled and you could indicate focus with a colored/bolded border on the barcode entry area.

In the normal case where the user gets the packing task right they would be taken back to the list and see the task they completed at the bottom checked off... you might want to add a quick green flash in between to confirm they got it right and make them feel good.

In the case where the user accidentally places the item in the wrong bag, give them an error message and prompt them to move the item to the correct bag and scan again. I would experiment with doing this on the same screen (maybe reserve some space for the error message so nothing jumps around when/if it happens)

Much like a to-do list app, there is a suggested order but you can do things in any order you want. Also, the completed items are tucked away at the bottom and clearly shown as completed that way users know what items are still needing to be packed and when they finish all of them they'll just see the completed list and know that everything has been double checked. As long as the right barcodes were put on the right things everything should be in the right place.

I would definitely paper prototype this. For handheld size prototypes I really like the iPhone app POP (Prototyping on Paper).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.