I have a mobile app which is meant to scan barcodes. The code itself is wider than the heigth, I do have a logo on the left hand side which indicates which way up and where the begining of the code is, but how do i tell the user it has to fill the whole screen with the code?


  • 1
    could you please provide us with your current version of your mockups-prototype? – Dimitra Miha Jun 20 '17 at 7:25

It depends on why you want them to fill the screen with the barcode.

If you are trying to get a representation of the barcode that can be rescanned from the phone screen then I would seriously recommend that your system should read the scanned code and recreate it rather than use a scanned image. This way you'll get an optimum black and white image rather than a photo that may not have been taken under the best lighting conditions.

If, on the other hand, you just want to make it easier for you system to understand the barcode then most apps use a visual guide to help the user understand how to scan the code.

A lot of them opt for either of two methods:

A marked crop area

Crop Area Screen Grab

Or a scan line

enter image description here

In some cases both are used

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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