Page MenuHomePhabricator

It is hard to tell what the CTA to create a WikiStory informs a user to do
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
EUdoh-WMF
May 12 2022, 2:17 PM
Referenced Files
F35334791: image.png
Jul 24 2022, 11:24 PM
F35334789: image.png
Jul 24 2022, 11:24 PM
F35199084: Storied attached truncated text.png
Jun 2 2022, 10:56 AM
F35198983: No stories attached.png
Jun 2 2022, 8:25 AM
F35198894: Storied attached.png
Jun 2 2022, 6:24 AM
F35198902: No stories attached.png
Jun 2 2022, 6:24 AM
F35198895: Stories attached horizontal scroll.png
Jun 2 2022, 6:24 AM
F35135223: image.png
May 12 2022, 2:17 PM

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Go to a Wiki page and attempt to create a story

What happens?:
There is a CTA to create something but it is not clear what should be created.

What should have happened instead?:
The CTA should clearly state "Create Wikistory". Alternatively, it can be just "New Story", since it is on a Wikipage.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:
Not specific to any browser/device.

image.png (1×1 px, 163 KB)

Design details

We are proposing a different design solution for showing the entire CTA to create story and titles of attached stories as current designs are not showing it correctly.

When no story attached

No story attached
No stories attached.png (722×356 px, 100 KB)
  • Show create button along with a placeholder text.
  • Always position the button in left side.
  • Tap/Click on it will take users to image selection screen.

Note: Subtitle below the "Create a Wikistory" might change based on the feedback we receive but it's not a blocker on the task.

When stories attached

Stories attachedHorizontal scrollTruncated text
Storied attached.png (722×356 px, 109 KB)
Stories attached horizontal scroll.png (722×356 px, 105 KB)
Storied attached truncated text.png (722×356 px, 109 KB)
  • Show create story button without a placeholder text.
  • Always position the button in left side.
  • Create story button position is fixed, horizontal scroll will move the attached stories underneath it.
  • Tap/Click on it will take users to image selection screen.
  • Tap/Click on attached stories will open them in a story viewer.
  • Position story titles next to story thumbnail followed by a separator.
  • Truncate story title text if its more than 2 lines.
  • Allow horizontal scrolling to view all the attached stories.

Design details

Event Timeline

SBisson triaged this task as Medium priority.Jun 19 2022, 4:41 PM
SBisson moved this task from Dev to Ready for Dev on the Inuka-Team (Kanban) board.
SBisson added subscribers: eamedina, SBisson.

@eamedina it's all yours

SBisson edited projects, added Wikistories (R2); removed Wikistories (MVP).

Change 812071 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Wikistories discover section redesign

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

Change 812071 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Wikistories discover section redesign

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

Testing:

  1. For wiki pages that have images, the first image is used as the CTA image for creating a Wikistory.
  1. For a wiki page with no images, a default "no image" colour is shown in the CTA to create a Wikistory.

@SGautam_WMF, should we have a more "appealing" default image, even when a page has no image in it for use by the CTA?

image.png (1×1 px, 342 KB)
image.png (1×1 px, 329 KB)
  1. CTA and other stories position are as expected.
  2. Text display and truncation are working as expected.
  3. All CTAs are functional: story viewer, story builder and horizontal scrolling of stories.