Page MenuHomePhabricator

Wikisource Ebooks: Implement New Download Experience (first iteration)
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
ifried
Jan 12 2021, 11:15 PM
Referenced Files
F34097790: download_modern_popup.png
Feb 9 2021, 8:44 AM
F34097792: download_monobook.png
Feb 9 2021, 8:44 AM
F34097798: download_timeless_popup.png
Feb 9 2021, 8:44 AM
F34095933: download_popup.png
Feb 9 2021, 8:44 AM
F34096312: download_new_vector.png
Feb 9 2021, 8:44 AM
F34097785: download_new_vector_popup.png
Feb 9 2021, 8:44 AM
F34097794: download_monobook_popup.png
Feb 9 2021, 8:44 AM
F34097788: download_modern.png
Feb 9 2021, 8:44 AM

Description

As a Wikisource user, I want to be able to download books via an easy-to-find download button, and I want to be able to easily choose a file format, so that the download process is simple and inviting.

Background: We have heard from Wikisource users (and from non-Wikisource users through user tests) that the current download experience has less than ideal UX. It is not clear how to download or where to download books. If someone does find how to download books, they often don't know what file format to pick. Once the download is initiated, the status of the download may be unclear as well. Overall, there are many points in process that may confuse users and cause them drop off before completing the download process. The purpose of this ticket is to begin the improvement of the download experience. We will not do *all* of the potential improvement work in this ticket. Instead, we will implement the first working version of the new experience, which we can fine-tune and iterate off of in future tickets.

Resources:

Acceptance Criteria:

  • Implement a new "Download" button, which is:
    • Placed at the right edge of the title header line for LTR languages
    • Placed at the left edge of the title header for RTL langauges
    • This should be a progressive button (refer to Figma for details)
  • When the user clicks on the "Download" button, a pop-up should be generated, which includes the following:
    • A header entitled "Download options"
    • An "x" symbol in the pop-up, which will close the pop-up if clicked
    • Three separate rows which will include:
    • Icons for 3 file formats (refer to Figma link for details)
    • Names of file formats available & subheader explanations, which are:
      • Name: EPUB
        • Subheader: for most devices
      • Name: MOBI
        • Subheader: for Kindle & Calibre
          • Note: We will look into whether we need legal approval to add names
      • Name: PDF
        • Subheader: for larger screens
    • Download links per each file format, represented by a blue downward arrow
  • If the user clicks on download link, the download process should be automatically generated for the selected file format
  • Regarding the behavior after the download is complete, we can deal with this in a separate ticket, since we would ideally like to show some symbol/status indicator of completion, and then the user can manually close the pop-up.
  • Note: No status indicators (such as download in progress, download failed, or download completed) will not be worked on this ticket. This work will be in a separate ticket to be completed later: T271970

Visual & Interactive Examples (note: we will be focusing on steps 1 & 2, along with including basic download functionality, in this ticket):

Pick format (first visit)Specs
Wikisource Download Flow - Copy of Pick format.jpg (1×3 px, 303 KB)
Screenshot 2020-12-14 at 10.47.01 AM.png (1×2 px, 316 KB)
First visit prototypeSpecs (login using your WMF Google account to see the inspect tab)

Event Timeline

ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)
ARamirez_WMF set the point value for this task to 5.Jan 14 2021, 6:17 PM
ARamirez_WMF moved this task from Needs Discussion to Up Next (June 3-21) on the Community-Tech board.

Why is MOBI described as being for Calibre? I would've thought EPUB would be closer to Calibre's "default" format.

Why is MOBI described as being for Calibre? I would've thought EPUB would be closer to Calibre's "default" format.

+1

I also don't understand the "for large screen" of PDF. ePub allows readers to choose the page width, option that PDF does not allow.

Change 658086 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/Wikisource@master] Add main Download button to mainspace pages

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

Yes, good point. How about:

  • EPUB: for computers, mobiles, tablets
  • MOBI: for Kindles
  • PDF: for printing

@ifried @Prtksxna What do you think?

Why is MOBI described as being for Calibre? I would've thought EPUB would be closer to Calibre's "default" format.

Yeah, you're right.

I also don't understand the "for large screen" of PDF. ePub allows readers to choose the page width, option that PDF does not allow.

Since text in PDFs doesn't reflow its harder to read them on small screens like phones and smaller tablets. This why I think writing both printing and larger screens would make sense.

  • EPUB: for computers, mobiles, tablets
  • MOBI: for Kindles
  • PDF: for printing

I like EPUB and MOBI. Not sure about PDF, in our usability tests we saw that a lot of people preferred to read PDFs on their computers (not just for printing). This could be because they aren't aware of EPUB being better. It could also be because PDF software is more readily available and used by people.

Yes, good point about PDF. Certainly worth avoiding PDFs on small screens.

I'll update the patch.

Change 658086 merged by jenkins-bot:
[mediawiki/extensions/Wikisource@master] Add main Download button to mainspace pages

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

Patch merged, and will go out on the train this week.

Will there be a way to have a download link for a different page? For example, an implementation of https://en.wikisource.org/wiki/Template:Export that gives a button to click to get the download dialogue?

Will there be a way to have a download link for a different page? For example, an implementation of https://en.wikisource.org/wiki/Template:Export that gives a button to click to get the download dialogue?

No, but it shouldn't be hard to add a parser function to do that, e.g. {{#wikisource:download|page=Foo}}. Should be a separate ticket, I think.

dom_walden subscribed.
  • Implement a new "Download" button, which is:
    • Placed at the right edge of the title header line for LTR languages
    • Placed at the left edge of the title header for RTL langauges

I have tested on LTR and RTL wikis locally.

It will only appear on pages which exist and are in the main namespace (apart from the main page).

Some language wikisources have a non-standard main page. For these wikisources, I am concerned that the download button might appear on the main page. When this has gone live, I will do some testing on production just to check.

  • This should be a progressive button (refer to Figma for details)

When JavaScript is disabled, clicking the Download button immediately downloads the epub version of the book.

This also happens if you click the Download button before the page has fully loaded.

  • When the user clicks on the "Download" button, a pop-up should be generated, which includes the following:
    • A header entitled "Download options"

Actually "Pick a format".

  • An "x" symbol in the pop-up, which will close the pop-up if clicked
  • Three separate rows which will include:
  • Icons for 3 file formats (refer to Figma link for details)
  • Names of file formats available & subheader explanations, which are:
    • Name: EPUB
    • Name: MOBI
    • Name: PDF
  • Download links per each file format, represented by a blue downward arrow

Yep.

download_popup.png (257×324 px, 11 KB)

  • If the user clicks on download link, the download process should be automatically generated for the selected file format

Yep.

I tested how it looks on the different skins. We might want to consider their designs separately (esp. Modern and Timeless). It does not appear on Minerva (that I could see):

SkinDownload ButtonPopup
Vector (new)
download_new_vector.png (1×1 px, 172 KB)
download_new_vector_popup.png (1×1 px, 166 KB)
Modern
download_modern.png (1×1 px, 213 KB)
download_modern_popup.png (1×1 px, 187 KB)
MonoBook
download_monobook.png (1×1 px, 242 KB)
download_monobook_popup.png (1×1 px, 213 KB)
Timeless
download_timeless.png (1×1 px, 210 KB)
download_timeless_popup.png (1×1 px, 202 KB)

Test environments:

Test browsers:

  • Firefox 78
  • IE11
  • Safari 13

Actually "Pick a format".

Sorry! I was going off the Figma specs. Should we change it?

Actually "Pick a format".

Sorry! I was going off the Figma specs. Should we change it?

@ifried I don't recall our discussion around this, sorry! I am happy with either label, which do you prefer?

@Prtksxna Either works, but I think "Pick a format" is actually more clear than "Download options," so I'm happy to keep it.

Some language wikisources have a non-standard main page. For these wikisources, I am concerned that the download button might appear on the main page. When this has gone live, I will do some testing on production just to check.

I have checked each (I think) wikisource in production and I do not see the download button on the main page of any of them.

The new download button & pop-up experience is now on production, so I'm marking it as Done.