feat: simple feedback button/form

[sgratzl]

adds a simple logic for a feedback form based on a Google Form.

The regular link is in the footer under contact. In addition, after 60sec a notification on the bottom right will appear asking for feedback.

to discuss

• what should be the content of the feedback form? + create a new one with an delphi/andrew account
• what should the duration/delay for the notification

[netlify]

✔️ Deploy preview for cmu-delphi-main ready!

🔨 Explore the source changes: e89bd3c

🔍 Inspect the deploy logs: https://app.netlify.com/sites/cmu-delphi-main/deploys/6001c0c5815b560007cff90a

😎 Browse the preview: https://deploy-preview-209--cmu-delphi-main.netlify.app

[Raphael-Hyde]

Thanks guys, to summarize what we've agreed on:

1. Survey will be conducted with a Google Form
2. Larger popup with higher contrast
3. Use cookies to prevent duplicate notifications.
4. Will NOT require gmail login
5. Launched after 30sec (60 might be too long since most users stay on page for less than 60sec).

Here are 2 options
Red button: https://www.figma.com/file/IiYu74VmEi4GVS4bnYaTd6/Delphi-Site-Redesign?node-id=1681%3A5
Appears to be a warnings

Blue button: https://www.figma.com/file/IiYu74VmEi4GVS4bnYaTd6/Delphi-Site-Redesign?node-id=1681%3A17
Subtle, but alerts viewer (my recommendation).

In my experience popups are always annoying and hard to gain engagement. Since we're already interrupting the user by displaying the "Survey Feedback" button, I would actually just display the survey as a popup. If we're able to use cookies to prevent duplicate interruptions, that will likely have the highest rate of engagement at least that's what I've seen in past projects. https://www.figma.com/file/IiYu74VmEi4GVS4bnYaTd6/Delphi-Site-Redesign?node-id=1685%3A30599

It's too bad we're not able to style the survey for the MVP, but this will still be a good experiment.

[sgratzl]

current state:

[Raphael-Hyde]

Thanks @statsmaths - can we add the drop shadow to the alert and radius corner to the button.
box-shadow: 0px 0px 12px 0px 0,0,0,0.25;

button-properties:
height: 52px;
width: 193px;
left: 315px;
top: 24px;
border-radius: 3px;
padding: 14px, 24px, 14px, 24px;

[Raphael-Hyde]

Also, can you make the '?' icon 'solid'?

[sgratzl]

[philmcguinn]

Hey Sam - is there an easy way to randomly or pseudo-randomly show this to only a subset of site visitors?

I'm concerned that we may get more responses than planned in a short period, and end up with 200 or 400 responses from "people who visited in the two days after we launched" rather than "random sampling of people visiting in a 7-day period," the latter of which is more representative of the overall user population. Thanks.

Ninja edit: second Q, can we also make this dismissible, say, with an "X" in the top right corner?

[sgratzl]

randomly or pseudo-randomly show this to only a subset of site visitors?

you can just add a simple if (Math.random() < 0.2) which will be true in around 20% of the cases

[sgratzl]

another possible way would be to include the screensize of the user, such that we show the popup for all desktop users but only 20% (by chance) for the mobile users

[philmcguinn]

Am I right in assuming the Math.random solution would allow us to tweak that percentage by changing the number? If so, would that require a scheduled release? Desktop accounts for around 23% of visits on our site, so we would hit ~1.8k desktop users and ~1.2k mobile users per week at a 20% clip. I think that's a fair starting point - so I would recommend using the screensize solution you mentioned. [survey design stuff ahead, feel free to skip] Thanks for the suggestion regarding screen size, it made me think of deeper questions on the survey design! I think we should ask about device in the survey itself, since we have hypotheses on user type and preferred device. And possibly pages visited, but these could both be captured automatically in a more advanced solution. I'll probably hold off on the latter for now in the interest of time. [/survey design stuff]

…

On Wed, Jan 13, 2021 at 8:26 AM Samuel Gratzl ***@***.***> wrote: another possible way would be to include the screensize of the user, such that we show the popup for all desktop users but only 20% (by chance) for the mobile users — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#209 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARER7R3CH3JYGCUUIFRRSQDSZXCTDANCNFSM4VXSSKYQ> .

[sgratzl]

Thanks for the suggestion regarding screen size, it made me think of deeper questions on the survey design! I think we should ask about device in the survey itself, since we have hypotheses on user type and preferred device. And possibly pages visited, but these could both be captured automatically in a more advanced solution. I'll probably hold off on the latter for now in the interest of time.

it is possible to prefill a value/answer within the form through a parameter. However, because of some restrictions, the section has to be visible to the user. So, we could add a technical question in which we already provide the answer to. The answer could include: screen resolution, current url, browser, ... In the best case we add the google analytics client id or so, then we could link google analytics to a specific response

[sgratzl]

Am I right in assuming the Math.random solution would allow us to tweak that percentage by changing the number? If so, would that require a scheduled release?

we could host a JSON file somewhere accessible (like in this repo) which will be loaded dynamically which then could contain the logic for the feedback criteria. But we could have a static solution first and then wait for some responses to act on them.

[philmcguinn]

it is possible to prefill a value/answer within the form through a parameter. However, because of some restrictions, the section has to be visible to the user. So, we could add a technical question in which we already provide the answer to. The answer could include: screen resolution, current url, browser, ... In the best case we add the google analytics client id or so, then we could link google analytics to a specific response

I think for device it's okay to just ask the question for now, since it's simple and not a lot of mental effort for the user. Google Analytics client ID is something to explore for the future, let me make a note. It might make users a bit nervous that they're being tracked and less anonymous than their expectation.

[philmcguinn]

we could host a JSON file somewhere accessible (like in this repo) which will be loaded dynamically which then could contain the logic for the feedback criteria. But we could have a static solution first and then wait for some responses to act on them.

Agree that a static solution is good for now. I don't expect we'll have to change this too much, as our traffic will be steady barring any huge news article eruption.

[philmcguinn]

Other Qs:

• Can we put an "X" in the top right of the pop up to make it dismissible?
• Can we randomize the amount of time before showing the pop up in some way? Say, between 10s and 100s?

[sgratzl]

Can we randomize the amount of time before showing the pop up in some way? Say, between 10s and 100s?

see

www-main/config.toml

Lines 114 to 119 in c662104

	feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748="
	feedbackLikelihoodMobile = 0.2
	feedbackLikelihoodDesktop = 1
	feedbackDelayMin = 10 # in sec
	feedbackDelayMax = 100 # in sec
	feedbackDuration = 60 # show it for 60sec

re x:

[tildechris]

LGTM on the functionality and the survey question content.