Improve "Add Loyalty Card" > "Enter Card" > "Select Barcode" screen

[TheLastProject]

Issue by vertigo220
Thursday Aug 27, 2020 at 14:54 GMT
Originally opened as brarcher/loyalty-card-locker#372

---

When I first started using this yesterday, it took me a while to figure out how to choose different barcodes. Due to the size of my screen, I saw exactly one barcode and its name (AZTEC) and thought that was it, not realizing I had to scroll to see the others. I kept trying to tap the barcode and the name, thinking it would open a pop-up to select a different one. This could be made easier to understand for new users by doing one of two things (or both):

1. Change the text from "Enter the card ID then select the image..." to something like "Enter the card ID then scroll and select the image..."

2. Add a scroll bar, and make it stand out, to make it clear there's more below.

I realize this is a pretty minor thing, and most people will figure it out right away or fairly quickly, but I can imagine some people will struggle with it and possibly give up on the app because of it, which would be a shame.

[comradekingu]

Enter the card ID, and either pick its barcode type below, or “This card has no barcode”

This is short and sweet. It took me a while to boil it down to this. I think this might improve matters further:

Show the barcodes by default right away to have less visual shifting.

Sort the barcodes side to side in a 2x3 grid.

Card-ID: _____________________ could have some grayed out numbers included by default, so it is evident that it means typing those in.
Card-ID: GG1234567GG-PP

[TheLastProject]

I feel there isn't really much space to use a grid and still make the differences clear, so I've done the following:

1. Set a default "hint" in the card ID field.
2. If a barcode cannot be generated for the value entered by the user, generate one for a known acceptable value. This "fallback" barcode is marked in code as being a fallback image and will be shown more grey and a message pops up when trying to select it.

I've attached a video of how it looks now:

recording_20210405_215243.mp4

I think this would be the best possible way to fix this? (As always, I welcome suggestions for the exact phrasing of the "you can't select this" toast)

[TheLastProject]

I'll consider this solved in 4e043ed unless you still have any complaints on this.