Updated: January 27, 2022

QR Code Scanner

Intro

The Welcome Screen with Scan uses a QR code scanner as another way to onboard. Before starting the activation process, the user must be provided with a QR code to scan. Users can scan a QR code by using a camera or by scanning via images saved on their phone camera roll/gallery.

QR code scanner examples
QR code scanner examples

Anatomy

A. Modal Stack

The stacked modal navigation bar includes a “Cancel” button for users to exit the modal, a “Scan” title, and a “Flash” Button toggle.

B. Allignment Guide

The alignment guide provides guidance to the user when pointing the camera to a QR code.

C. Chevron: Used to control the visibility state (revealed or hidden) of the scrolling camera roll.

D. Scrolling Camera Roll: Lets users horizontally scroll through their camera roll.

E. Camera Gallery Icon:
Lets users open their camera gallery and access their photos and albums.

F. Successful Scan Confirmation Content

Information to let the user know that their scan was successful.

G. Call-To-Action Button

Used to continue on with the onboarding process.

 

Scan with expanded camera roll and successful scan anatomy
Scan with expanded camera roll and successful scan anatomy

Behavior & Interaction

Camera View

Users can scan a QR code by using the camera. Once the QR code is lined up inside of the scan guide and is recognized, the system will display the appropriate feedback.

Successful scan with camera view
Successful scan with camera view

Permission

The user will have to allow access to their photos via settings if they haven’t already done so in order to use the camera roll controls. Once access is given the camera roll will be revealed.

Giving permission for photos access
Giving permission for photos access

Scrolling Camera Roll

Users can scroll horizontally through their revealed camera roll. Can be collapsed or expanded by tapping on the chevron.

Horizontal scroll on expanded scrolling camera roll
Horizontal scroll on expanded scrolling camera roll

Camera Rolls Collapse

Users can collapse or hide the scrolling camera roll by tapping or pulling the down chevron. The camera roll control snaps when toggling from expanded to collapsed camera roll. Once the camera roll is collapsed, the down chevron becomes an up chevron.

Collapsing the scrolling camera roll
Collapsing the scrolling camera roll

Camera Gallery

An alternative to the scrolling camera roll, users can view and select their photos from their camera gallery by tapping the image icon at the bottom of the screen.

Opening photos gallery
Opening photos gallery

Scan Feedback

Invalid QR Code: The user has scanned or selected an invalid QR code.

Unsuccessful Scan: The user has scanned or selected a non-QR code image.

Successful Scan: The user has scanned or selected the valid QR code

Scan feedback examples
Scan feedback examples

Resources

Development: N/A
Related Pattern: Barcode Scanner
SAP Fiori for Android: N/A