Surveys UI UX issues

[liyiy]

• Bug: Bug: Surveys visualization doesn't change #17037
• Black background color surveys need some work
• In survey creation, User properties matching "Match by" is in odd space to the right
• Templating UI Follow up surveys UX #16018 (comment)

[joethreepwood]

• Pressing 'Enter' in any of the color customization fields immediately saves the insight and takes you out of Edit mode

[joethreepwood]

• Deleting the default 0 in the 'Roll out to' field immediately defaults the answer to 100 (IMHO it should remain empty and default to 0 if no figure is entered)

[annikaschmid]

• Another colour contrast issue: In the default colour scheme, the hover colour is very light, which makes it hard to see what is selected. This applies only for the actual site app, the preview is different. Those two should also work the same way. See the screenshot for the difference

• Again for NPS, when you have single digit values and double digit values, the double digit field is wider than the single digit field. This should be the same

• In the preview and the live survey popup, the 'x' to close is different. Adjust the one in the preview, which is currently the letter x

[annikaschmid]

[annikaschmid]

Maybe: Set a min-width for the site app. If the text is very short, it looks quite bad, and can be hard to spot, especially on a big monitor. I know most users have longer text, But I think I would prefer if we have a fixed width for the popup

[annikaschmid]

• In the attached screenshot, the spacing isn't ideal. I can't tell what it is, whether the content in general is too close together, or there is not enough spacing at the bottom compared at the top, but the whole thing looks quite dense and bottom-heavy. Can we try out adding more whitespace?

[annikaschmid]

• The surveys screen is not responsive, when I am on a narrow screen, the preview is cut off. Other pages, like feature flags, behave differently. Here is a recording of a user where you can observe it

[annikaschmid]

• Can we please make the open text box the same width as the max-width for the text, and make sure they align? The text box is currently shorter in width than the text, which means sometimes they don't left-align, and that doesn't look good. I can provide a screenshot if needed

[annikaschmid]

• For link surveys, question description and link should be arranged the other way around, to match how it shows up in the interview popup

• I would like to be able to do paragraph breaks and bold text in the question, similar to how the original interview popup looked (looks better). Maybe the most flexible is to add markdown support? cc @corywatilo Maybe one for you, as you are considering working on the site app

[annikaschmid]

From Slack: Site app in 'dark mode' doesn't look good: https://posthog.slack.com/archives/C034XD440RK/p1691583675158699

[annikaschmid]

#17146

[annikaschmid]

Preview vs live version: We say "undefined" in the live version when no bound names are set

[annikaschmid]

Some feedback from Cory here he would like to get done before surveys go live: PostHog/posthog.com#6580 (comment)

[corywatilo]

In addition to above, I've been thinking through the survey results pages. Originally we had talked about sticking to existing components to show results, but if you don't mind roping in @smallbrownbike, we may be able to shoot a little higher. Here are a couple examples.

Note: Both wires are in the PostHog 3000 skin, so just ignore the parts that aren't relevant.

1-10 rating results

Adds

• Grouped bar chart with breakdown of results of showing the form
• A custom UI to visually represent the 1-10 scale, showing volume of responses for each
• Idea: Clicking on a segment of results would show the lightbox with users who chose that option

Freeform text results

• Masonry-style blocks with quotes and links to users

---

These are just two examples (though 1-5 works the same as 1-10) - wouldn't be hard to do the rest with minimal new design components, but would really help make the results easier to consume!

One thought: are there any considerations for if these result cards get dragged into a notebook?

[liyiy]

Grouped bar chart with breakdown of results of showing the form

I like this and we should go with it 💯
There's just one more stat which is: users who have started filling out the form but eventually dropped off, which I assume can just be another section on that bar?

A custom UI to visually represent the 1-10 scale, showing volume of responses for each

I think hogql insight does an okay job of this right now, and it has some convenient features connected to it, like seeing the persons modal of who submitted a score of 10, so I'd be happy to punt on a new implementation for rating surveys

However hogql doesn't handle multiple choice question results very well, so this is the best we've got, we could improve this for sure 👀

Masonry-style blocks with quotes and links to users

I think having a "time" value could still be helpful here to provide a bit of structure/insight into how the responses flow in, and then allowing an optional free form mode for users to group responses themselves if they want to

[corywatilo]

I made some updates to above and now have wires for all survey types. Most notable global changes:

• Each question shows the type just above the question name
• The table breakdown uses the th to display the question name
• Added an "Abandoned" segment in the bar chart summary, showing people who started filling out the survey but didn't complete it

1-10 rating

Single choice / radio

Link

I didn't mock this, but it's essentially the same as the single choice pie chart, just showing "Clicked link" / "Didn't click link".

Multi-select

In the table breakdown, multiple selections from the same person are separate by comma in the same column

Freeform text

I moved these results from the "Breakdown" section to the Results section and it now lists the question type like others.

Multiple questions

In above, note how each question just stacks. (Red outlines below show each individual question and how they stack.)

In the breakdown, each question is in its own column.

[jurajmajerik]

Regarding the abandoned state in the stacked bar - we currently don't have an event that captures this, so that needs to be added first.

Quoting @neilkakkar:

I think this makes sense only in multiple steps surveys, where we should start sending an event if they answered at least one question, and compute abandonment if they did not send the survey in the end.