==== Problem
On mobile, the link inspector can take up a big part of the viewable area which makes it harder to read the text around a link suggestion. This is particularly an issue for smaller devices.
{F34487302} //(relatively limited scrollable article content area highlighted in magenta)//
==== Proposed solutions
Two leading proposals came out of the initial explorations for a similar problem on Desktop on discussed in T281185.
===== Proposal A. Responsively compact: Show a more compact link inspector on smaller devices.
| Regular device inspector {F34487318} | Small device link inspector {F34487320}
// Dimension definitations for regular vs small still to be determined.//**Smaller device layout differences:**
- Smaller device layout differences:(i) No text label and content fields
-- no text label and content fields(ii) Yes, No and Next buttons become icon-only
// Dimension definitions for regular vs small still to be determined.//
- **Pros**
-- Yes, No and Next buttons become icon-only User doesn’t have to take any action at all as size adjusts for their device restrictions
-- Maintains context with the link inspector connected to the link text
-- No potential for users to ‘lose’ the card
-- No additional cognitive load as there is no UI addition to the inspector
- **Cons**
-- Potential for reduced understanding of the task without the button labels and text labels linking the suggestion to the text.
-- Reduced consistency with VE link cards (which have the the Text label and field about the link)
===== Proposal B. Enable toggle hidshowing the link inspector, with a persistent re-open buttonaction
Enable the user to hide the link inspector completely when tapping inside the article content area.
Add a button allows the inspector to be re-opened.
| 1. User taps in the article content area {F34487322} | 2. Link inspector is animates off the screen in dismissal {F34487326} | 3. Link inspector can be brought up againre-opened by tapping on the Ffloating button with the robot'robot' button on the bottom right (or if the userby taps onping a link suggestion tag in the article).{F34487330}
The re-open button is imagined here to be a floating action button on the bottom RHS of the screen under the inspector, but it may placed elsewhere (e.g., as a persistent button (on the toolbar) or not at all it it's possible to toggle show/hide when tapping on the article content area.
- **Pros**
-- Users are familiar with tapping outside of pop-ups to dismiss them
-- Floating action button acts as an additional safeguard in case newcomers do not know how to re-open the inspector via clicking on the suggested link text again
-- Maintains context with the link inspector connected to the link text
-- No additional cognitive load as there is no UI addition to the inspector
-- Can work in concert with proposal for the responsive compact inspector layout for smaller devices
-- Ideally we should introduce to both Desktop and Mobile if this is selected as the solution.
- **Cons**
-- Potential for conflicts with auto-advancing behaviour (e.g., user minimises as the inspector as it auto advances)
-- If introducing with the floating button which is a non-standard component, there may be unexpected issues with it appearing over/under device keyboards or UI content that need to be checked.
!! These two proposals might potentially (and ideally) both be implemented since A addresses the issue for smaller devices without need for user action, whilst B helps all mobile users (regardless of device size) who may wish to easily toggle open and close the inspector to read article text more comfortably. !!
=====[[ https://www.figma.com/file/rmLdUNo2A9wti2lMeB2BLI/T281185-and-Link-inspector-obscures-text?node-id=88%3A55 | View mocks on Figma ]]