Page MenuHomePhabricator

Wikisource: Improve Visual Design of WS Export
Closed, ResolvedPublic3 Estimated Story Points

Description

As a Wikisource user, I want to have an updated visual experience on the Wikisource Export page, so that the page is inviting and delightful to both experienced and newcomer users.

Background: For a while, users have been able to access the Wikisource Export page either via directly typing in the URL or by clicking "Other formats" in the sidebar. Now, through our work, we will providing more ways that people can find themselves on the Wikisource Export page, including: 1) when clicking on the link for more formats in the "Download" pop-up, and 2) when a user encounters an error. Since the Wikisource Export page is in need of a visual upgrade, and because there will be more ways of encountering it through our recent work, this ticket provides details on how it can be improved. The ultimate goal is for the page to look more sleek, up-to-date, reliable, and inviting to people by the time this work is complete.

Relevant Resources:

Acceptance Criteria:

  • Change name in title from "WS Export" to "Wikisource Book Export"
  • Add Wikisource logo to header
  • Add "Back to Wikisource" button, which when clicked:
    • Redirects user back to last page they were on in Wikisource OR
    • If they have not been on a previous Wikisource page, they will be redirected back to Wikisource homepage
  • Change the input fields according to specifications in Figma, which includes:
    • Change field labels to be atop fields (rather than to their left)
    • Change checkboxes to be stacked one top the other (rather than displayed horizontally)

Visual Examples (example with & without error experienced by user):

Homepage.jpg (1ร—2 px, 363 KB)

ErrorState-collapsed.jpg (1ร—2 px, 459 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptMar 11 2021, 10:08 PM
ifried renamed this task from Wikisource: Export Visual Design of WS Export to Wikisource: Improve Visual Design of WS Export.Mar 11 2021, 10:11 PM
ifried updated the task description. (Show Details)

PR for review: https://github.com/wikimedia/ws-export/pull/345

This doesn't do the logo or the backlink to Wikisource. They will come in subsequent patches.

Okay, ignore that one. :-)

I've simplified things (removed the build process and stayed with Bootstrap 3). Here's the real PR: https://github.com/wikimedia/ws-export/pull/347

dom_walden subscribed.
  • Change name in title from "WS Export" to "Wikisource Book Export"
  • Add Wikisource logo to header

Yep

  • Add "Back to Wikisource" button, which when clicked:
    • Redirects user back to last page they were on in Wikisource OR
    • If they have not been on a previous Wikisource page, they will be redirected back to Wikisource homepage

The link appears to pick up the lang and title (or page) parameter from the URL. So if you ended up on WS Export because of an error or if you chose "Other formats" in the sidebar on Wikisource, the link will take you back to the Wikisource page for the book you were trying to export.

So, from https://ws-export-test.wmcloud.org/?lang=en&title=Emma clicking the link will take you back to https://en.wikisource.org/wiki/Emma.

It does not validate whether the language or page exists. So, for example, if you open https://ws-export-test.wmcloud.org/?lang=invalid_lang&title=invalid_title and click "Back to Wikisource" it tries to take you to https://invalid_lang.wikisource.org/wiki/Invalid%20title. I am not sure how likely a scenario like that will come up in reality. Possibly if there was a bug in the Wikisource extension which passed the wrong language/page to WS Export (there isn't as far as we know).

  • Change the input fields according to specifications in Figma, which includes:
    • Change field labels to be atop fields (rather than to their left)
    • Change checkboxes to be stacked one top the other (rather than displayed horizontally)

Figma says it does not work with either of my browsers (Firefox and Chromium). Both these bullet points are true. I hope there isn't something in Figma I am missing.

I briefly tested on mobile (iPhone 8 emulator). It looked ok to me. It was enough to get the job done.

I briefly test IE11. The top logo doesn't appear properly, but not too bad:

ie11.png (925ร—1 px, 143 KB)

Test Environment: https://ws-export-test.wmcloud.org version 2.4.1-12-gead45e8.

Thanks for the analysis, @dom_walden!

I think we can leave the invalid language/page behavior as is for now. If we hear about this being a reported issue, we can look into addressing it. However, I don't know how likely it is to occur, so I'll say it is low priority for now.

Too bad about not being able to open the Figma links! I wonder why. Anyway, we included all requirements from the Figma work in the ticket, so everything should be covered. If more work needs to be done in the future, it can be handled in separate tickets. Thanks!

This has been released to production, so I'm marking this as Done.