Page MenuHomePhabricator

Highlight and select text from a Wikipedia article for a Wikistory
Closed, ResolvedPublic

Assigned To
Authored By
SBisson
Nov 22 2021, 3:53 PM
Referenced Files
F35059340: image.png
Apr 20 2022, 6:26 AM
F35052650: image.png
Apr 15 2022, 10:46 AM
F35052654: image.png
Apr 15 2022, 10:46 AM
F35052643: image.png
Apr 15 2022, 10:46 AM
F34849012: 01 Info. banner.png
Dec 6 2021, 6:03 PM
F34849002: Text selection toolbar-1.png
Dec 6 2021, 6:02 PM
F34848999: Text selection banner.png
Dec 6 2021, 6:02 PM
F34848992: Text selection toolbar.png
Dec 6 2021, 6:02 PM

Description

Problem

In the Wikistories prototype, the highlight and clear options on the Wikistories prototype could be much clearer, both in look and in call to action.

Request
  • Improve the visibility of the highlight and clear toolbar at the bottom of the screen
  • Change the CTA from "highlight" to "Select" or "Add to story"
  • Change the CTA from "Clear" to "Cancel"
Design details
  • A permanent message banner which let users know about text selection while landing on an article. They can tap on information icon to learn more about the text selection style.
  • Users can discard the expanded card either by tapping on close icon or anywhere outside the text card.
  • Show "Add to story" and "Cancel" options using different colors.
  • Tapping on add to story will select the highlighted text for a story page.
  • Tapping on Cancel will discard the highlighted text.
01 Info. banner.png (780×360 px, 168 KB)
Text selection toolbar-1.png (780×360 px, 130 KB)
Text selection toolbar.png (780×360 px, 154 KB)

Figma link

Event Timeline

AMuigai renamed this task from Extra large highlight toolbar buttons to Highlighting and selecting text for a Wikistory.Nov 30 2021, 9:14 PM
AMuigai updated the task description. (Show Details)

Just a random idea: when no article text is selected, the the area used by the highlight toolbar could contain a message telling users what to do, like "Select article text to add it to your story..." so it serves as a permanent hint and helps the user connects the dot with the highlight toolbar when it comes in and replaces that message.

See screenshot below (don't mind the specific colors, size, position, etc)

localhost_8081_.png (960×836 px, 201 KB)

Just a random idea: when no article text is selected, the the area used by the highlight toolbar could contain a message telling users what to do, like "Select article text to add it to your story..." so it serves as a permanent hint and helps the user connects the dot with the highlight toolbar when it comes in and replaces that message.

See screenshot below (don't mind the specific colors, size, position, etc)

localhost_8081_.png (960×836 px, 201 KB)

Thanks Stephane, I expanded on this idea to add an info. icon for more information about text selection.

Slice 1.png (860×1 px, 304 KB)

SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)
SBisson renamed this task from Highlighting and selecting text for a Wikistory to Highlight and select text from a Wikipedia article for a Wikistory.Feb 2 2022, 8:19 PM
SBisson edited projects, added Wikistories (MVP); removed Wikistories.

Change 761023 had a related patch set uploaded (by Huei Tan; author: Huei Tan):

[mediawiki/extensions/Wikistories@master] Highlight and select text from Wikipedia article

https://gerrit.wikimedia.org/r/761023

SBisson raised the priority of this task from Medium to High.Feb 10 2022, 7:15 PM

Change 761023 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Highlight and select text from Wikipedia article

https://gerrit.wikimedia.org/r/761023

Testing:

@hueitan

Just a little text change suggestion to the second sentence:

"... To add text, tap the "Add to story" button which shows at the bottom of the screen."

image.png (802×610 px, 212 KB)

The following check out okay:

image.png (480×610 px, 137 KB)
image.png (606×606 px, 182 KB)

Change 784304 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Fixed text selection help text

https://gerrit.wikimedia.org/r/784304

[...]
Just a little text change suggestion to the second sentence:

"... To add text, tap the "Add to story" button which shows at the bottom of the screen."

Fixed in new patch. Going back to code review

Change 784304 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Fixed text selection help text

https://gerrit.wikimedia.org/r/784304