Intro

The OCR scan takes advantage of mobile technology to provide users a more efficient way to input data. The scanner identifies specific text from an object or document based on app specific data structure, and pre-fills the form.

Structure

The OCR scanner comes as a full-screen model that includes a top app bar, scan window, and alignment guide.

A. App Bar

The app bar provides persistent access to two main actions:

“Close” icon on the left to exit the scanner view

“Flash” toggle on the right to turn the camera’s flash on/off for clearer view of target content.

B. Scan Window

The scan window occupies the rest of the screen with a half transparent overlay. Users can see through the overlay to adjust camera to the right point.

C. Alignment Guide

The alignment guide is a frame that assists users to adjust the camera to the right angle and distance. The OCR scanner will process the content inside the alignment guide area. The shape of the frame could be customizable based on the target scanning object (for example, business card or receipt).

Behavior & Interactions

Trigger

OCR scan usually serves as an alternate way to “create“. A common trigger is a menu option to “create through scan” when user tap on “add” or “more” icon in the app bar.

Scanning

The scanner launches in a full-screen modal. The camera view is presented in the scan window. Users can adjust the camera position till the target content is inside the alignment guide. Once the content is there, the OCR scanner will start processing the text, and pre-fill form fields based on the result.

Confirmation

After the OCR scanner has picked up the text content, it automatically transits to a “create” view with pre-filled content. This view is fully based on the actual use case. Users can compare the pre-populated fields with text on the object, and edit the result if needed. There might be additional fields that are not available through scanning. Users can manually complete those fields and finish the create process.