How to design UI for using barcode scanner for add/remove functions

Question

I am using a Bar-code scanner on my mobile app (Android) to update items at a remote server. The user can either want to scan to increase the item's quantity by 1 or decrease by 1 each time they scan.

I wanted to be able to straight away scan the item 10 times and increase the item quantity by 10. This doesn't work as each time a single scan is made, the page switches out of the Bar-code scanning page to previous page. So I got to make do with 1 item scan at a time, go back to previous page and come back again for 2nd scan and so on.

Concept One - 1 way I could go about it is to make a main page with 2 separate buttons, 1 for "scan to add" and another for "scan to remove".

Pressing 'scan to add' would divert me to "ADD" page with a button. Clicking the button activates the scanner where I scan 1 at a time, update the server and go back to the "ADD" page again.

Same for the 'scan to remove' where it will have moved the user to a "REMOVE" page with a button.

I just don't find the concept of an entire page with 1 button appealing.

Concept 1

-

Another way is to have a single "Bar-code Scanner" button on the main page which immediately brings user to the scanning page where they scan item. Upon scanning, a Dialogue box appears asking to "add or remove"? Once the user chooses, item is updated and back to main page.

Concept 2

I feel both ways looks cumbersome and not user friendly. Is there any better way to tackle this? I am not even able to find applications with similar situation to compare and find ideas.

Answer 1

Since you seem to be developing for android, I'd suggest you to integrate your barcode scanner into your activity itself, rather than switching context to a new activity.

Lets take a look at how google messenger handles a similar problem. It pops up a neat little preview without going out of the chat window when you have to click an image (download the app and try it for yourself, its really neat!)

How do I do it?

Use a sliding up panel : https://github.com/umano/AndroidSlidingUpPanel and nest a fragment that covers only half screen width.

Use this barcode scanner library: https://github.com/dm77/barcodescanner that allows scanner to work in fragments.

Answer 2

You have two workflows: one for adding items through scanning and one for removing items through scanning.

1. workflow- usually one needs to scan a bulk of barcodes i.e. supermarket, warehouse, delivery. Therefore it is very important to be fast with less clicks possible. I suggest have a "Scan item" button which opens a scanner view. In the scanner view add a item immediately once a barcode is recognised and scanned. And there is a button "Add another scan" for next scan. Button shouöd be easily reachable by fingers. This way each scan needs just one click.

2. workflow removing item - I doubt that you need to scan a barcode in order to remove an item. Usually one needs to remove an already scanned item (double scan or wrong id,...) out of a list. I suggest offer in the scanned items list an option to remove an item.