Background

The objective of this task is to enhance the text selection experience in Wikistories to provide users with more intuitive and precise ways of selecting and interacting with the story text. Currently, editors can select story text by long pressing and dragging the handle to highlight the text they want to include in their story.
However, this interaction is not always intuitive or clear, as various browser pop-ups (e.g. tap to search, Google Translate, etc.) can interfere with the process.

Description/User story

As a wikistory editor,
I would like to have a better text selection experience,
so that I can easily add text from the article to my stories.

Design details

1. User Interaction

• When the user lands on article text selection screen they see a message banner with the text "Tap to select/deselect a sentence" indicating that the user can tap on a statement to highlight or de-highlight it.
• When the user taps on a word or phrase, the entire statement containing the tapped word/phrase is highlighted with a background color indicating it is selected. 'Add to story' button appears and if the user taps on it then selected text gets added to the story.
• If a user wants to de-highlight a previously highlighted sentence, they can simply tap on it again. The sentence loses its highlight and the action bar at the bottom disappears, indicating that the sentence is no longer selected.

2. Message banner behavior

• The message banner appears when the user lands on the text selection screen.
• If the user closes the message banner by tapping the close icon, it will not reappear during the current session.
• When the user selects a sentence by tapping on it, the message banner is replaced by the "Add to story" button.
• If the user deselects the sentence by tapping on the highlighted text again, the message banner reappears with the original message and the close icon.

3. Highlight counter

• After the user confirms the selection by tapping a second time, a counter appears next to the highlighted statement, indicating the number of highlighted statements.
• The counter updates in real-time as the user confirms selections or de-selects statements.
• If the user changes the order of selections, the counters update to reflect the new sequence. For example, if the user selects sentences in the order of 1-2-3, and then deselects 2 and selects it again, the counters would update to 1-3-2.

Note: During the testing phase, we will explore

different variations of the counter design to find the most suitable visual treatment that integrates well with the article text. This may involve adjusting the size, position of the counter or line-height of article text.

4. Changes to existing design

• Remove "Clear" button which appears along with "Add to story" button instead expand the "Add to story" button from edge to edge as it's the only button we have now.
• Replace current banner message with the one mentioned in the task here.

Design file

Acceptance Criteria

1. Tapping on a text:
   • highlights the entire statement.
   • a counter shows at the beginning of the statement.
2. Tapping on a highlighted text:
   • deselects the entire statement.
   • the highlight counter reduces.
   • the message banner disappears when no text is selected.
3. Add to story button:
   • becomes activated once a statement is highlighted.
   • becomes deactivated once the last statement is deselected.

Test Scenarios

Open questions