Last Update: Jan 17, 2023
Platform: Mobile
Designer: Lase Bayudan
Intro
The Comment View describes the pattern wherein the user intends to take action on a request and may want or be required to add a comment in order to complete their action.
Usage
This form of mobile screen flow allows the user to approve or reject an operation and leave a comment to explain the decision, for example. Within the process, the user can decide whether or not to provide the process with a comment.
Types
There are basically two types of processes that can be equipped with a comment:
- Approval Flow
- Decline Approval Flow
Structure & Components
The Single Attribute Picker UIs consists of 5 areas:
- Header
- Overlay Header (title & action buttons)
- Content Title
- Comment Area
- Keyboard
Behavior & Interaction
The commenting flow basically consists of 3 main steps.
- Decision - decline or accept with comment
- AddComment
- Decline or accept (with comments)
For each step the user has the option to abort the process with "Cancel".
The above example shows a approval flow. The user wants approve a request and wants to add a comment with additional information.
The above example shows a decline approval flow. The user wants to decline a request and wants to add a comment to supplement their decision.
Responsiveness & Adaptiveness
Application-specific examples
This commenting flow is only offered as a quick action in conjunction with the approval card on the home page.
Accessibility
Both screen flows for iOS and Android are based on standard controls. The scenarios have passed the A11Y review checks and without any accessibility issues.