iOS
Android
JavaScript
React Native
.NET
Capacitor
Flutter
Xamarin
User-experience (UX) is about more than making an application easy to use. UX defines how the app operates and meets the customer’s requirements in-store.
To help you build a successful Self-Scanning app, we are sharing our UX best practices.
These are the result of an effort lasting many months where we gathered requirements, built and field-tested our own prototype app.
The demonstration video below contains some of our key findings.
Our UX Best Practices for a Self-Scanning App
- 0.16 – the scanning screen is where the main action takes place. The importance of the viewfinder and how it intuitively focuses on the barcode.
- 0.35 – how to show the shopper they have correctly scanned an item.
- 0.45 – the importance of pausing the camera and preventing battery drain.
- 1.00 – what to do if a product barcode is not in the database.
- 1.10 – how to display the shopping cart and allow quantities to be changed.
- 1.40 – the importance of gestures.
- 2.00 – how to deal with badly damaged or incomplete barcodes.
Mobile self-scanning UX – some things to remember
Scandit’s Barcode Scanner SDK comes with a large number of features to optimize your UX. Here are just a few pointers on how to integrate them.
Split screen
The most important aspect of a Self-Scanning app is the camera. So use a split-screen for the shopping cart rather than jumping around between screens.
Gestures
It is highly likely that the shopper will be pushing a trolley or holding a basket. Scandit’s Barcode Scanner SDK comes with a range of gestures.
These include ‘double tap to freeze’ for barcode selection, ‘Swipe up and down’ to zoom in and out, and ‘Tap to focus’.
Shopping cart
The shopping cart should be easily accessible. A shopper should be able to easily scroll through the list and remove add items as appropriate. You should also display the item size, any discount, and the total amount saved.
Camera operation
Efficient camera operation has a direct impact on battery life. The scanner should be paused immediately after a scan, to prevent errant scans.
Add a timeout of around 8-10 seconds if there is no interaction. And on Android devices, consider using the hardware buttons to resume the scanner.
Help the consumer minimize physical interaction with the store
2020 was the time when shopping became contactless. Self-scanning has moved from early adopters to everyday shoppers – so the experience needs to be frictionless.
Recently Forrester conducted some analysis into the best performing retail mobile apps in terms of UX.
It found 19% of US online adults made a contactless payment in-store for the first time during the COVID-19 pandemic. 62% of these consumers used their phone and 56% used their credit card to make contactless payments.
UX recommendations
The Forrester report made a series of recommendations. These included the importance of visual cues to avoid accidental taps, smart placement of content, and easy links to access help.
The checkout should be streamlined as much as possible. Be clear about the options when it comes to paying, i.e. in-app or at a kiosk. It added:
“Focus on a flawless standard toolset. A poor user experience will thwart the best intentions: Overly ambitious experiences that are clunky disappoint customers. Succinct and well-organized product detail.”
For more information on the options available when producing your self-scanning application, take a look at our guide How to 10X Your Mobile Self-Scanning App.
Or simply contact us to find out more about how our technology can help give your customers the very best self-scan experience.
