Page MenuHomePhabricator

🎬 desktop-de-22 | Implement new banner design | ⏰ Dec 7th
Closed, ResolvedPublic8 Estimated Story Points

Description

Banners are based on the control banner of desktop-de-18.

Acceptance Criteria

  • The variant banner is implemented as defined in the design document on Figma (red version).
  • The waving hand animation and the question mark animation switch places.
  • Clicking on one of the buttons displays the respective 2nd page.
  • Clicking on the submit button on the 2nd page
    • logs the number of seen 2nd page variations and the currently displayed 2nd page variation using Schema:WMDEBannerEvents.
    • forwards the user to the donation form.

Banner copy

ElementContent
Step 1 - HeadlineWas schätzen Sie, wie häufig nutzen Sie Wikipedia?
Step 1 - Button 1Sehr oft
Step 1 - Button 2Häufig
Step 1 - Button 3Ab und zu
Step 1 - Button 4Eher selten
Step 2 - ButtonJetzt spenden
Step 2 - Text below button p1Wikipedia finanziert sich durch Spenden ihrer Nutzerinnen und Nutzer von durchschnittlich 22,81 €.
Step 2 - Text below button p2Wofür Ihre Spende verwendet wird, erfahren Sie _hier_. (link to use of funds)
Step 2.1 - large textSuper, Sie gehören dem exklusiven Kreis der Wissenshungrigen an, für die Wikipedia ein unverzichtbarer Teil ihres Lebens ist.
Step 2.1 - small text p1Wikipedia ist für Sie so selbstverständlich wie Strom aus der Steckdose und fließend Wasser.
Step 2.1 - small text p2Möchten Sie Wikipedia für ihre treuen Dienste mit einer Spende etwas zurückgeben?
Step 2.2 - large textToll, Sie gehören zur großen Gemeinschaft der Kernnutzer*innen, die Wikipedia zu einer der Top-5-Webseiten weltweit machen. Danke!
Step 2.2 - small text p1Sie bauen darauf, dass Wikipedia immer und überall mit verlässlichem Wissen für Sie da ist.
Step 2.2 - small text p2Dieser zuverlässige Service sollte Ihnen doch eine Spende für Wikipedia wert sein.
Step 2.3 - large textSie gehören der großen Gruppe der Pragmatiker*innen an, die in Wikipedia bei Fragen ganz gezielt suchen – und in der Regel auch finden, was sie brauchen.
Step 2.3 - small text p1Im Fall der Fälle können Sie sich stets auf Wikipedia verlassen. Toll, diese Sicherheit zu haben, nicht wahr?
Step 2.3 - small text p2Das könnte Ihnen doch auch eine Spende für Wikipedia wert sein.
Step 2.4 - large textSie gehören zum kleinen Kreis der Minimalisten, die Wikipedia beinahe nie nutzen.
Step 2.4 - small text p1Glückwunsch, offenbar brauchen Sie Wikipedia kaum! Anders als die meisten Menschen.
Step 2.4 - small text p2Vielleicht möchten Sie mit einer Spende den freien Zugang zu Wissen sichern – den viele andere eher benötigen als Sie.

Event Timeline

kai.nissen set the point value for this task to 8.Nov 30 2020, 10:42 AM
kai.nissen renamed this task from 🎬 desktop-de-20 | Implement new banner design | ⏰ Dec 2nd to 🎬 desktop-de-22 | Implement new banner design | ⏰ Dec 8th.Dec 1 2020, 11:54 AM
AbbanWMDE moved this task from Doing to Code Review on the WMDE-FUN-Funban-2020 board.
AbbanWMDE subscribed.

@AbbanWMDE, there are some issues I found:

  • The seen slide count is counting one too few.
  • The submit button doesn't lead anywhere. It should link to the donation form passing the Matomo parameters.
  • We need to try and make the banners similar in height.
  • The period at the end of the sentence containing the use of funds link ("...erfahren Sie hier.") is missing.
  • On page 2.4, the first character of the 2nd paragraph is missing ("Vielleicht möchten Sie...")
  • The waving hand should be on the page 2.4, while the question mark bubble should be on the 2.3.
  • The banner should leave some space on the right side (see image below).

screenshot-de.wikipedia.org-2020.12.03-19_26_16.png (150×111 px, 4 KB)

Sorry, some more change requests:

  • I made two text changes in the task description (see T268977#6669230).
  • Please add 15px of spacing to the bottom of the banner.
  • The event logging on the "Jetzt spenden" button does not work anymore.

@AbbanWMDE
Since the variant banner in the previous test performed pretty well, it should become the new control banner for this test. There are some changes that need to be done to that, though:

  • Remove the 15px spacing above and below the banner text.
  • Prevent the right label of the progress bar (donation target) from overlapping the filled area by removing the "Spendenziel: " (see design on Figma).
kai.nissen renamed this task from 🎬 desktop-de-22 | Implement new banner design | ⏰ Dec 8th to 🎬 desktop-de-22 | Implement new banner design | ⏰ Dec 7th.Dec 11 2020, 9:28 AM
kai.nissen claimed this task.