Survey app UI

[jounih]

Updated 5/5/18 - added remove option when creating new survey, corrected typo, updated token selection

Updated 11/5/18 - added voting panel, tweaked card layout

Updated 15/5/18 - added Survey details view

Invision link:

Invision prototype

Screenshots:

[izqui]

The token tags shouldn't be at the particular poll, but at the app level, similar to how Voting has a token label. ATM, one instance of Survey can only poll one token.

[bpierre]

We also need a way to remove options, looks good otherwise!

[izqui]

Also what's the status on the detail view?

[sohkai]

One thing I was thinking about is how to make it easy for users to avoid mistaking the Survey app for the binding Votes app; right now this is obvious because one is a cardview and another is a listview, but maybe we could have another point of differentiation.

[jounih]

Updated the screenshots and Invision.

Changed token selection similar to current Voting design - @izqui can you confirm this is correct please?

Details view is nearly there, should be done today!

@bpierre added remove button for options - think best place for it is top right of each option field so it doesn't get mixed up with the "New option" button at the bottom. Also I guess we only start adding it from the 3rd option onwards, since you need minimum of 2 options for a meaningful survey.

@sohkai One solution would be to use clear wording, something like "Informative survey" in context where we can - ie. Open informative surveys, New informative survey. Another option would be to have either permanent (short) info note on the Survey page, similar to what we have on the "Create new survey" sidepanel. We should also have a clear explanation on the empty state of Survey page when you first create a DAO (when there are no surveys yet) that explains the informative, non-binding role of surveys.

[bpierre]

@bpierre added remove button for options - think best place for it is top right of each option field so it doesn't get mixed up with the "New option" button at the bottom. Also I guess we only start adding it from the 3rd option onwards, since you need minimum of 2 options for a meaningful survey.

Cool! 👌 And if you’re ok with this proposal, the space is not used by the asterisk anymore so we can use it for actions in general.

Also another thing that we need for this app: the multi-options voting panel.

[sohkai]

We might also be able to leverage more radspec strings in the binding Voting app to tell the user that they're going to execute something if it passes.

Another thing I noticed is the card size; right now it looks like the size is based on a maximum of 3 options; what happens if we have more (4+)?

[jounih]

@bpierre yep - moving the mandatory field asterisk next to the label is great. Got the multi-option voting sidepanel pretty much done, will add to this issue!

@sohkai the radspec stuff would be rad! cards - there can be as many rows of cards as needed, it's not limited to 3 cards. Minimum number of cards would be 1 (on mobile portrait) - there doesn't need to be a maximum, you could have a large monitor showing as many cards as fit in the browser window, width wise. Once screen width is filled they just overflow to the next row. We'll work out the exact layout rules with @bpierre

[izqui]

@jounih: Changed token selection similar to current Voting design - @izqui can you confirm this is correct please?

👌🏻

Another thing I noticed is the card size; right now it looks like the size is based on a maximum of 3 options; what happens if we have more (4+)?

@jounih I think @sohkai was referring to how many options can be viewed in the card, which is just 3 in the current design. I think we should just show Other options in the card view when that happens, and then in the detail view you should have be able to see the support for every option.

[sohkai]

Agreed with @izqui suggestion; I think that's the easiest way around hiding the rest of the options.

[jounih]

@izqui @sohkai Yes! We discussed this with @bpierre at the beginning too - added to the design and updated sketch file

[jounih]

@bpierre added voting sidepanel, updated the design at the top and pushed sketch file

[jounih]

@bpierre added survey details view, pushed sketch file

[bpierre]

Thanks!

[sohkai]

@jounih going to close this as it's been implemented :tada:!

[sohkai]

Reopening, as we're not closing these design issues for now :).