Page MenuHomePhabricator

🎬 desktop-de-08 | Make Laika adress form design more compact –⏰ 04.11.
Closed, ResolvedPublic

Assigned To
None
Authored By
tmletzko
Oct 28 2019, 10:41 AM
Referenced Files
F31010680: ipad.png
Nov 5 2019, 12:10 PM
F31010678: leerzeile.png
Nov 5 2019, 12:10 PM
F31010491: image.png
Nov 5 2019, 10:28 AM
F31010484: image.png
Nov 5 2019, 10:28 AM
F30907326: image.png
Oct 28 2019, 2:13 PM
F30907332: image.png
Oct 28 2019, 2:13 PM
F30907328: image.png
Oct 28 2019, 2:13 PM
F30907324: image.png
Oct 28 2019, 2:13 PM

Description

Laika does not yet perform as well as 10h16. We believe this is due to the lengthy form and for that reason we want to make it more compact and test this change against our current form.

Draft: https://www.figma.com/file/00Bi54030b4FkqmjafLk0Cst/Fundraising-2019-Components?node-id=1583%3A194 -> Desktop version: Less height or title in front

This version won't use the address data switch on the landing page.

The banner for this test will be an updated B19_WMDE_04_laika, see separate ticket for B19_WMDE_08_laika

Acceptance Criteria

  • Banner B19_WMDE_08_laika should be used for CTRL and VAR
  • The form should be implemented as shown in Figma
  • The form should be responsive (e.g. label goes to the top of input fields) - This variant might also be used for the email campaign in the first week of Nov
  • provide FUN-Ops / Till with a parameter for VAR (the more compact laika form), so we can use this variant as a url target for an eMailing on the November 10th.
  • The large heading "Spenden" should be removed permanently from the Control design (and also removed from the variant design, as shown in Figma)
  • The h2 headlines "Spenden als" and "Anschrift" are permanently added to the Control design and are also added to the variant design (see Figma of variant banner as a reference)

Form element spec

  • The title should be left of the input form
  • if the input form is a list or the like, the title should be left and above of the element (not top-flush with the first element of the widget)
    image.png (169×213 px, 4 KB)
  • The title should be right aligned
  • Between title and form element should be one grid unit (18px) space
  • The text input element is now 2 (2*18=36px) grid units high (previously 3)
    image.png (48×193 px, 3 KB)
  • The input widgets should go as close as 2 grid units to the right of the form column:
    image.png (60×114 px, 1 KB)
  • the left end of the title should have a min distance from the left end of the content column of 1 grid units. The area for the text should thus be about 180px wide (slightly smaller than on the general mock)
    image.png (65×242 px, 3 KB)

Notes for technical implementation of A/B test

  • For the different looks, use the A/B test CSS classes of the main application, introduced & documented in https://github.com/wmde/FundraisingFrontend/pull/1643
  • For the reordered elements on the donation address page, use the <feature-toggle> element, introduced in the same PR.

Details

Due Date
Nov 4 2019, 11:00 PM

Event Timeline

chrp updated the task description. (Show Details)
chrp set Due Date to Nov 4 2019, 11:00 PM.Oct 28 2019, 1:46 PM

The form should be responsive (e.g. label goes to the top of input fields) - This variant might also be used for the email campaign in the first week of Nov

The "old" version would be the responsive one.

Tim_WMDE moved this task from Heap to Doing on the WMDE-FUN-Funban-2019 board.
Tim_WMDE added a subscriber: chrp.

Überschriften:
Spenden (h1) weg
“Spenden als” drinlassen, bzw. “h2 Dinge” auf einfügen

chrp renamed this task from Make Laika adress form design more compact to 🎬 desktop-de-08: Make Laika adress form design more compact (⏰ 4.11.).Nov 4 2019, 12:53 PM
chrp renamed this task from 🎬 desktop-de-08: Make Laika adress form design more compact (⏰ 4.11.) to 🎬 desktop-de-08 | Make Laika adress form design more compact –⏰ 04.11..Nov 4 2019, 1:51 PM

@Jan_Dittrich @tmletzko
You can preview the compact design at http://test-spenden-2.wikimedia.de/?skin=0&compact=1&zahlweise=BEZ&betrag=20
If you want to compare side-by-side in 2 windows, here is the URL for the "classic" version: You can preview the compact design at http://test-spenden-2.wikimedia.de/?skin=0&compact=0&zahlweise=BEZ&betrag=20

@gabriel-wmde the adress switch shall not be used.
somehow the criteria above

This version won't use the address data switch on the landing page.

did not make it in the AC-section. So both landingpages (CTRL and VAR) do not have this feature.

No problem. You can trigger the different behaviors by adding &fd=1 (2-radio groups) or &fd=0 ("classic view" with 1 radio group) to the URL parameters, e.g. http://test-spenden-2.wikimedia.de/?skin=0&compact=1&zahlweise=BEZ&betrag=20&fd=0

I'll fix the compact display of the classic view and add the parameter to the banners.

Thanks for the urgent fixes!
Few things we are still seeing:

  • The radio buttons on "Spenden als..." should be vertically arranged
  • The radio buttons on "Anrede" should be on the same line as "Anrede" as shown in figma
  • On small viewports (mobile phones) a blank line between "Ohne Adressangabe" and the "Anrede" part
  • Only on iPad the lines under "Herr" and "Frau" become one line
  • No block for this test: the break in the summary-box behaves a bit weird on some viewports
  • No block again: as mentioned in the ticket "UX Bug | Make error messages easier to process" the error message for not filling the e-mail field wasn't updated together with the others

The radio buttons on "Spenden als..." should be vertically arranged

For the option to donate without address:

The preferred design is this:

image.png (193×310 px, 7 KB)
since it seperates giving address and which type of address you
(which in figma can be found in the frame "header space saving address input/Page: Spende/Kontakt: Keine Adresse radio")

However, if that is not possible, there should be a vertical list:

image.png (276×413 px, 11 KB)

There should be *no* horizontal 3 item selectors, particularly none that are complex like a selector which combines address type and giving address.

Deployed a new version with the fixes.

On small viewports (mobile phones) a blank line between "Ohne Adressangabe" and the "Anrede" part

The parts should be visually separated and I see enough whitespace. I'd rather not remove it.

However, if that is not possible, there should be a vertical list:

Judging from @tmletzko's comment, I have now prepared the banners to use the 3-radio address chooser.

All good now except for the blank spaces between "Ohne Adressangabe" and "Anrede" that you mentioned:

On Phone:

leerzeile.png (817×525 px, 25 KB)

On iPad:

ipad.png (410×609 px, 8 KB)

I think this needs some fixing. Other than thad we can go to production and actually start the test today

To clarify: this needs to be fixed (ideally this week) for the eMailing (starting on Sunday) but is not a blocker for this test (which is a desktop test anyway)