Page MenuHomePhabricator

🎬 ipad-de-02 | Address data switch in banner – ⏰ 25.11.
Closed, ResolvedPublic

Description

ipad-de-02-landscape-with-headline.png (434×1 px, 138 KB)

For this test we introduce the adress data switch in the banner according to Test 7 on Desktop in the ipad banner.

Acceptance Criteria

  • both banners are based on CTRL of Test 01
  • on both banners the "Wohin geht meine Spende?" is repositioned under the banner form according to the desktop design
  • on VAR the adress data section is introduced below the payment channels.
  • the headline of the additional section is: "Wollen Sie Ihre Kontaktdaten angeben?"
  • the options "Ja" and "Nein" are displayed to the user.
  • if you click on "Nein", a hint is displayed, resulting into a higher banner: "Ihre Kontaktdaten benötigen wir für die Bestätigungsemail und Ihre Zuwendungsbescheinigung. Zudem können wir Sie informieren, wenn Wikipedia in Zukunft ihre Hilfe benötigt."
  • Selecting the payment type "Lastschrift" automatically sets the address option to "Ja" and disables the option "Nein". The hint text is displayed with the tex "Für Lastschriften ist die Angabe einer Adresse erforderlich."
  • Selecting another payment type again results into hiding the hint text and the option "Nein" being enabled.
  • The banner's form post provides all necessary data to make the donation application create an anonymous donation and display the confirmation page.
  • Parameter dsn= from link to spenden.wikimedia.de is removed

Event Timeline

chrp renamed this task from 🎬 ipad-de-02 | Prepare banners – ⏰ 21.11. to 🎬 ipad-de-02 | Mobile address data switch – ⏰ 21.11..Nov 14 2019, 2:41 PM
chrp updated the task description. (Show Details)
chrp added a subscriber: Jan_Dittrich.

@Jan_Dittrich Please check directly with devs for requirements from UX side

chrp renamed this task from 🎬 ipad-de-02 | Mobile address data switch – ⏰ 21.11. to 🎬 ipad-de-02 | Address data switch in banner – ⏰ 21.11..Nov 14 2019, 2:44 PM
chrp assigned this task to tmletzko.
tmletzko updated the task description. (Show Details)
tmletzko subscribed.
kai.nissen renamed this task from 🎬 ipad-de-02 | Address data switch in banner – ⏰ 21.11. to 🎬 ipad-de-02 | Address data switch in banner – ⏰ 25.11..Nov 20 2019, 3:31 PM
chrp assigned this task to CorinnaHillebrand_WMDE.
chrp moved this task from Incubation to Doing on the WMDE-FUN-Funban-2019 board.
chrp added a subscriber: kai.nissen.

@Jan_Dittrich could you provide a styling suggestion for the new text components in this banner (question, hint text) ?

Bildschirmfoto vom 2019-11-21 12-30-34.png (592×323 px, 28 KB)

chrp updated the task description. (Show Details)
chrp triaged this task as Medium priority.Nov 21 2019, 11:57 AM

@CorinnaHillebrand_WMDE I added a screenshot of what I showed to @tmletzko yesterday to the description. I used the a font size of 0.85em. The notice should have the same size and contain the info icon that we also use in desktop banners.

@CorinnaHillebrand_WMDE

  • please place "Wohin geht meine Spende?" closer to the bottom like we do on desktop. Also, I wonder if the font colour could be lighter (maybe like "Wikimedia Fördergesellschaft)
  • please let them have equal height on landscape view

grafik.png (462×1 px, 515 KB)

IBAN and "Wohin geht meine Spende?" out of the box

grafik.png (470×1 px, 518 KB)

only "Wohin geht meine Spende?" out of the box

@CorinnaHillebrand_WMDE thanks for the mock ups. Please place the bank data outside of the box.

  • "Wohin geht meine Spende?" and the bank data are now outside of the box below the box and the form ✓
  • the ctrl banner now has a blank space to make the banners equal in height ✓

please check again and let me know if the banners can be enabled on CN

chrp moved this task from Doing to Code Review on the WMDE-FUN-Funban-2019 board.
chrp moved this task from Code Review to Acceptance Test on the WMDE-FUN-Funban-2019 board.
chrp added a subscriber: CorinnaHillebrand_WMDE.

@CorinnaHillebrand_WMDE
Sorry, not thoroughly defined beforehand: In portrait mode, the bank data line should not use the space below the form, but be displayed in two lines instead.

SPENDENKONTO Wikimedia Foerdergesellschaft
BIC BFSWDE33BER IBAN DE33 1002 0500 0001 1947 00

  • linebreak for iban info in protrait mode is updated
  • form is vertically centralized again