Document Scanner
Intro
The document scanner leverages Google’s ML Kit, allowing users to digitize physical documents with an on-device flow. Users can select automatic or manual capture and easily edit, retake, or delete specific or all scanned documents.
Document scanner using Google’s ML Kit
Anatomy
A. Camera View
The camera view enables users to focus on and capture their scan through either manual or auto mode. The shutter button allows users to manually capture their scans regardless of the enabled mode. The user can also utilize their phone’s flash to brighten the environment in which they are scanning.
B. Gallery View
The gallery view provides a view of all the captured scans and enables users to filter, clean, crop, rotate, retake, and delete their scans. Once the user feels the scans are sufficient, the “Done” button saves all the scans in the gallery and prompts the user to the next page in their in-app journey.
Anatomy of the document scanner camera view (left) and the gallery view (right)
Behavior and Interaction
Automatic Capture
When the user first opens the document scanner, it defaults to auto capture mode and prompts the user to position the document in the frame. As soon as a potential document is detected, a blue outline appears, instructing the user to hold the camera steady as the document is being scanned. Once the document is captured, the user is directed to the gallery view.
Automatically scanning a document
Manual Capture
Users can switch to manual capture mode by tapping on the “Manual” section in the mode toggle. In manual mode, the user is prompted to position the document within the camera’s view. Once a potential document is detected, the blue outline appears, and the user can tap the shutter button to capture the scan. After capturing, the user is taken to the gallery view.
Manually scanning a document
Add Another Scan
The user can add another scan to their gallery view by tapping on the “Plus” button next to the first document’s thumbnail. Once pressed, the user returns to the camera view, allowing them to scan using either auto or manual capture mode.
Triggering the document scanner to add a scan
Crop and Rotate
The crop and rotate section of the gallery view allows users to automatically crop, rotate, and adjust the edges of the scan. While adjusting the scan corners, a magnified view shows up to help with more precise cropping.
Cropping and rotating the scan
Filter
The filter section of the gallery view allows users to automatically or manually adjust shadows, amplify the color, and grayscale the scanned document. If there are multiple scans in the gallery view, the user can apply the filters to one of the scans or all the scans in the gallery.
Using the filter options from the gallery view
Clean
The clean section of the gallery views allows users to erase any stains, wrinkles, and fingers captured in the scan. When the “Clean” button is pressed, the user is guided to choose the brush size and mark the area to fix.
Cleaning up the document by erasing visible fingers in the scan
Retake & Delete
When a document thumbnail in the gallery view is selected, users can tap on the “Retake” button to try scanning the document again. They can also delete the scan by pressing the “Delete” button or the “Cancel” button in the top left. If there is only one scan, the screen navigates back to the previous page. If there are multiple scans, pressing the “Delete” button only deletes the selected scan versus all of the scans in the gallery.
Your feedback has been sent to the SAP Fiori design team.