Page MenuHomePhabricator

Add headlines to radio button groups of banner form
Closed, ResolvedPublic5 Estimate Story Points

Description

The scope of this banner test is to test the effect of radio button group headlines in the banner form. The design is on Figma. The banners are based on the banners used in the current test.

Acceptance Criteria

  • The radio button groups are layed out as shown in the design.
  • The form is contained in a grey box.
  • When the form is displayed below the banner text,
    • our bank account data is displayed on the left on wider viewports.
    • our bank account data is displayed at the bottom on narrower viewports (please find a reasonable breakpoint for this).
  • Error messages are displayed as shown in the design update of September 6th.
  • Banners lead to the cat17 skin of the donation page.

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone

Event Timeline

kai.nissen updated the task description. (Show Details)
kai.nissen set the point value for this task to 5.
tmletzko added a subscriber: tmletzko.EditedSep 19 2019, 9:40 AM
  • Change the error message of section "Wieviel wollen Sie spenden?" from "Wie viel wollen Sie spenden?" to "Wieviel wollen Sie spenden?" - note: we should think about a different text for the error message (more appellative), currently it is just repeating the headline. I guess changing to "Bitte wählen Sie einen Betrag aus" might be more suitable. Not relevant for this test though
  • the position of "Wohin geht meine Spende?" on the vertical banner form should be identical with CTRL (underneath the form)
  • the structure of IBAN on the vertical banner form should be identical with CTRL (same with font size; it seems smaller)
  • the AC "our bank account data is displayed at the bottom on narrower viewports (please find a reasonable breakpoint for this)." seems not be implemented
  • the icons for the error messages according to figma are missing
  • on the horizontal form the spacing of the bank data and "Wohin geht meine spende?" is different to the figma design (-> it needs to be more spacing in between)
  • on the horizontal form the donation button should be aligned with the zahlungsdaten-radio buttons (according to the design)
  • the positioning of the zahlungsdaten-radio buttons on the horizontal form is not according to the design (the banner will get smaller with that)
  • could you try to have both banners more equal height. Esp. on the vertical form the size difference is quite big. One has to see the difference on the horizontal form when the above changes are deployed.
  • the colour of the headlines seems to be slightly greyer in figma compared to the banner. please check the font colour

a bigger change that we will like to have. VAR differs on many aspects in the horizontal form. Even if we consider submits per viewport we have no clue about the effect of each change. Therefore, we would like to change the horizontal form of CTRL with the one from VAR BUT without the headlines. With that we can single out the effect of the headlines. The introduction of this new design of the horizontal form will be A/B tested later on. I hope this is no bigger change for the code.

Tim_WMDE moved this task from Review to Doing on the WMDE-FUN-Sprint-2019-09-16 board.

These should be good now but please double-check:

the position of "Wohin geht meine Spende?" on the vertical banner form should be identical with CTRL
the structure of IBAN on the vertical banner form should be identical with CTRL (same with font size; it seems smaller)
the icons for the error messages according to figma are missing
on the horizontal form the spacing of the bank data and "Wohin geht meine spende?" is different to the figma design (-> it needs to be more spacing in between)
on the horizontal form the donation button should be aligned with the zahlungsdaten-radio buttons (according to the design)
the positioning of the zahlungsdaten-radio buttons on the horizontal form is not according to the design (the banner will get smaller with that)
the colour of the headlines seems to be slightly greyer in figma compared to the banner. please check the font colour


Change the error message of section "Wieviel wollen Sie spenden?" from "Wie viel wollen Sie spenden?" to "Wieviel wollen Sie spenden?" - note: we should think about a different text for the error message (more appellative), currently it is just repeating the headline. I guess changing to "Bitte wählen Sie einen Betrag aus" might be more suitable. Not relevant for this test though

I have changed it to "Bitte wählen Sie einen Betrag aus" and updated the other errors to similar messages. "Wie viel" is correct by the way, "Wieviel" is pre-1996 💁‍♂️.

the AC "our bank account data is displayed at the bottom on narrower viewports (please find a reasonable breakpoint for this)." seems not be implemented

It seems like it's there already but the it only happens for the "mobile" design I guess?

could you try to have both banners more equal height. Esp. on the vertical form the size difference is quite big. One has to see the difference on the horizontal form when the above changes are deployed.
a bigger change that we will like to have. VAR differs on many aspects in the horizontal form. Even if we consider submits per viewport we have no clue about the effect of each change. Therefore, we would like to change the horizontal form of CTRL with the one from VAR BUT without the headlines. With that we can single out the effect of the headlines. The introduction of this new design of the horizontal form will be A/B tested later on. I hope this is no bigger change for the code.

This is not implemented yet, I guess we can do this but I am not super sure yet how trivial it is, we will look into this some more.

I also just checked IE11, it is still pretty broken on lower resolutions and still needs some work.

  • could you try to have both banners more equal height. Esp. on the vertical form the size difference is quite big. One has to see the difference on the horizontal form when the above changes are deployed.

@tmletzko regarding this ^ we had a short discussion and we propose to copy the style of the var banner over to the ctrl banner and then the difference between the two would be only the radio button headlines themselves.
Is that okay for you? Judging by the title of the task, that seems to be the goal.

if you find a way to compensate the bigger height due to the headlines on CTRL, yes. We want to isolate the effect of the headlines and we all know that the size of the banner itself has an effect on the donation quote.

So I guess you can either insert invisible placeholders on CTRL or try to add some banner space at the bottom. @Tonina_Zhelyazkova_WMDE

the structure of IBAN on the vertical banner form should be identical with CTRL (same with font size; it seems smaller)

the IBAN is not on line with the rest of the bank account data

the icons for the error messages according to figma are missing

can you please adapt the error messages to CTRL aswell so we have the same error messages (or are there any design related issues here @Jan_Dittrich)

the colour of the headlines seems to be slightly greyer in figma compared to the banner. please check the font colour (this is the same for the labels IBAN/BIC)

I don´t see a difference here. This point is relevant for the accentuation of the headlines. Esp. on the vertical font the headlines need this. One way would be to add underlines, the other way is a different colour, which is applied here. Please check the banner specs or ask UX.

on the horizontal form the spacing of the bank data and "Wohin geht meine spende?" is different to the figma design (-> it needs to be more spacing in between)

it is just a minor issue but I think that "Wohin geht meine Spende" is slightly lower positioned in the design whileas the bank account data seems to be a little bit more associated. Can you check the positions of these lines, please.

I also just checked IE11, it is still pretty broken on lower resolutions and still needs some work.

Please check Chrome aswell, on smaller screens the breaks of the radio buttons are not working

new things

  • the font size of bank account data seems to be bigger on VAR
  • the design is broken on smaller screens (when the form breaks to account data underneath form) -> as I understood the form stays the same but the bank account data is placed underneath the form (analogue to the vertical form (Bank account left aligned, Wohin geht meine Spende on the right side)

Please check Chrome aswell, on smaller screens the breaks of the radio buttons are not working

Hey Chrome user here (version 77.0.3865.75). Please see screenshot of break not working on certain viewpoint scale and letting items overlap

Banners have been updated and are on Central Notice now.
They are the same height but ctrl does not look great if you ask me.
This "make the banners the same height even though one of them has more things in it" is quite the challenge. I think this should have been communicated with UX beforehand. They might have had a better solution for this case.
Also, a reminder that the desktop banners won't be shown for screens where the height of the viewport minus the height of the banner is less than 160px.

indeed, that does not look neither good nor great.

So I guess you can either insert invisible placeholders on CTRL or try to add some banner space at the bottom

So, adding space at the bottom was no option or is this something you would like to have UX advice?

If that is no option and we do not get any UX advice today, I propose two things (that can be discussed):

  1. we do not implement the current placeholders on the vertical form (resulting in a different height)
  2. we implement the placeholders on the horizontal form but align the radio button at the top (currently the radio buttons are somehow lost) . Ideally, we would add the additional space to the white space underneath the banner form (so the form stays compact and within its original design) or if that is not possible we will have the additional free space in the grey/blue form.

Is this doable?

Due to submit/viewport we can analyse what the effect of the headlines is on the vertical form. On the vertical form we do not know about the effect but we can make assumptions.

@tmletzko Tim had a good idea how to make ctrl less ugly while keeping the height equal. I've just uploaded a new version to Central Notice. Please take a look.

thanks @Tonina_Zhelyazkova_WMDE @Tim_WMDE that looks indeed better. Let´s do this. The only remark that I have is that the donation button on the horizontal form is not aligned vertically with the above radio buttons like in the design and that the donation button itselve could be positioned a little bit lower than it is currently (esp. on the horizontal form).

What about the font colour? Is there anything left from the above issues?

@tmletzko I updated the donation button.
UX confirmed the font color is the same as in the rest of the form, so just black.

all looks good now. you can enable the test. thanks

kai.nissen closed this task as Resolved.Jan 13 2020, 11:21 AM