UX when showing multiple QR codes, but making sure people don't accidental scan the wrong one

Question

We have created a poster with the most ordered products for our customers. This also shows QR and barcodes for each product which they can scan with their phone (and our app) to re-order the product with ease. The following user-flow happens:

1. User opens app on phone (scan function is in the start-screen).
2. User holds phone towards poster and scans with eyes for the correct product.
3. Phone has already detected a QR code on the poster and opens link, or asks the user to open the link.
4. The user is annoyed because they can't scan the correct product right away since the phone keeps detecting other QR codes.

Does anyone have experience with this scenario? And how did they solve it? Sadly I can't change the layout of the poster since another department has already printed it.

One of the solutions I have in mind is letting the phone 'scan' every QR code it can get a lock on, but only giving feedback that it had found a valid QR code. Not opening it or using it. If the phone is directed at the correct product the user would still have to tap to scan again and then open the product. The drawback being that there are a lot of clicks.

Answer 1

Approach for Future:

Create only a single QR code

I would create a single QR code that redirects to a page that shows the most ordered products. Being a webpage, it would always be up-to-date since the idea of "most sold product" is usually very inconstant.

That being said, the QR code in your banner could be bigger, centered, etc.Another argument for this is that, when a user wants to quickly check Product #2 when they already had scanned Product #1, they would need to re-scan the code. And by that standpoint, the user probably walked away, someone called them, they want to see later at home, etc.

---

Approach for Now (since the poster has already been printed):

If the poster has already been printed, redirect every anchor to the same page. So it does not matter which QR code the user scanned. Or you can create a page like this:

[-Product 1-]
[QR CODE HERE] → if this one is scanned opens a generic page with all best selling products listed but Product 1 is on top.

[-Product 2-]
[QR CODE HERE]  → if this one is scanned opens a generic page with all best selling products listed but Product 2 is on top.

[-Product 3-]
[QR CODE HERE] → if this one is scanned opens a generic page with all best selling products listed but Product 3 is on top.

Answer 2

Adding onto what @RA828 wrote, I attach a screenshot of how multiple QR codes look like on a camera view on iPhone in an exaggerated manner. Observe that opening a link from the QR code involves a 2 step process:

• A) detection of QR code followed by,
• B) user clicking on the notification snack bar to confirm the action of opening the link from the code or performing the action from the code.

I'm not sure if this can be done, as a stop gap measure perhaps you can consider allowing users to pick which QR code to act on, i.e. inserting a middle step between steps A and B so that users are sure that they got the correct link opened. This will be equivalent to breaking the step 3 you have in the question into 3 sub-steps.

Having one qr code is still the best.