Last Update: 17.01.2022
Platform: Mobile
Designer: Nedda Ren
Intro
Legal Scan is an enhanced feature for input field/text area, help the user to detect the keywords problems and fix them. It is similar use case close to spell check.
The keywords are configured by the admin. On backend, the admin can set up the keyword and suggestion mapping relationship. After the user click Legal Scan, the system will detect the inputs and highlight the keywords which need to be fixed.
Usage
Use the pattern if:
- You need to detect keywords problems for input field/text area.
Do not use the pattern if:
- There are no backend keywords/suggestions mapping relationship
- It’s not for spelling check.
Structure & Components
Parts
The Legal Scan contains 3 parts:
- Trigger Button that can be clicked to start detecting.
- Highlighted keywords that can be clicked to show suggestion.
- The popover to show suggestion. Suggestion can be taken over.
Behavior & Interaction
No Scrolling. The text area has its standard scrolling behavior. The suggestion characters are limited.
Responsiveness & Adaptiveness
Application-specific examples
The legal scan component is in use within the module Goal Management.
Accessibility
The legal scan component was reviewed within the A11y assessment for Goal Management: https://www.figma.com/file/Za9Bm7tW3nx0Uo506vUl19/UXR_Goals_B2311_iOS_JL?type=design&node-id=1111-21384&mode=design&t=jkt8rna7fobnNXBX-4
Resources
Link to the Figma design file: https://www.figma.com/file/Za9Bm7tW3nx0Uo506vUl19/UXR_Goals_B2311_iOS_JL?node-id=75%3A22747&t=iMSLqhKN4jSmbYCn-0