The barcode scanner allows users to quickly locate an object by scanning a barcode via the device’s built-in camera. It is also used when users need to efficiently manage business objects in a lengthy list report.

Anatomy

The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, and alignment box.

A. Navigation Bar

The navigation is composed of a “Cancel” button, title, and a flash icon.

B. Scan Window

The scan window occupies the rest of the screen with a gray overlay.

C. Alignment Guide

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

Behavior and Interaction

The barcode scanner is considered as part of the search workflow. It can be launched by tapping on the barcode icon in the search bar. In this example, users can quickly locate objects, update quantities, and keep an accurate record of inventory.

Launch

The user may choose to type in the search bar or search by scanning a barcode. Tapping on the barcode icon brings up the scanner in a full-screen modal.

Scan

The scanner consists of a navigation bar to allow users to exit the scanner or turn on the flash light.

Scan Results

Once a barcode is scanned, the scanner slides down and the previous list has been filtered by the scan result.

Object Details with Actions

Tapping on an object cell navigates to the details of the object. In this example, the user may change the quantity of the part and confirm the change.

Resources

Development: FUIBarcodeScanViewController
Related Components/Patterns: Search Bar, Search, List Report