Design review of current state

[jancborchardt]

So @skjnldsv and I just did a design review of the latest state in #256, here are items to be done. :)

cc @nextcloud/forms feel free to attach your name to items which you would like to pick up (I will do some design and wording ones). Bold items are ones we considered more important.

Fresh usability test with 3 separate people

Sorted somewhat by importance, duplicates some of the items below, but repeating to emphasize their importance:

• "Only allow one response per user" is confusing, should only be visible when possible → Fix setting "Only allow one response per user" #436
• Sometimes question title is not saved -> Seems to be outdated.
• Submission view: Pressing Enter in short text submits whole form (if everything is filled), unexpected Avoid Submit on Enter #413
• Questions with either empty titles or empty answer options are not shown – we should communicate that to the form creator and highlight those unfinished questions? Enh/invalid warning #415
• Not clear which question type (multiselect or checkboxes) is used, should show checkboxes / radio buttons in edit mode too Show MultipleInput icons in Edit-Mode #409
• Not possible to switch question type Allow changing answer types #352 -> scheduled for V2.1
• Sometimes last response option is not saved when using Tab-key to advance to next field Fix saving options on fast proceed #396
• Not clear that "New question" is editable, should not be prefilled → pull request Do not prefill form or question title for less confusion #367 @jancborchardt
• Not clear that "New form" is editable, should not be prefilled → pull request Do not prefill form or question title for less confusion #367 @jancborchardt
• Submission view: "People can enter a short answer" for short/long text makes no sense, needs to be differentiated. In create view: "People can enter a short answer" and in submit view "Enter a short answer" Question-specific placeholders #389 (we can do a quick-fix to make it "Short answer text" and disable the field?) - @jancborchardt for the quick fix
• Questions with empty titles are possible and will be shown, should be pointed out Fix remove empty questions on submit #397
• Not clear how to get share link, needs to be in sidebar next to radio option too, and ideally in responses view too when empty
• Autosave sometimes messes with input of questions, try typing in answer options fast and sometimes characters disappear Prevent letter debounce erasing when creating new answers #327
• "Add question" button position confusing on top, should be below questions Move "Add a question" button to bottom #328
• Icon of multiple choice question should use radio icon to reduce confusion about what "Multiple choice" is Fix multiple choice icon to make obvious it’s radio buttons #329

Create

• Add bottom padding to compensate the add new answer input (optional if looks weird) → Content below jumps if a question above it switches view/edit mode #434
• Icon of "Add a question" button should be white in the dark theme as well, as otherwise it's not enough contrast. (But also honor theming color.) Use icon-add in primary-text color #429
• Show number of responses on responses button like "15 responses", and in the action menu as well Show number of responses on responses button #422 ->scheduled for V2.1
• Focus on title after creation → @jancborchardt pull request Focus title after form load #369
• Replace fake title with empty string and show placeholder, fallback to default title
• In edit mode, not enough difference between choices types:
• Default question title is not great, put more details on chat question title type "New multiple choice question" Question-specific placeholders #389
• Checkbox/Radio should not shift horizontally
  • Align checkboxes with title.
  • Still show checkbox when editing Show MultipleInput icons in Edit-Mode #409

• Descenders of form title are cut, improve padding Adjust cut descenders on formtitle #410

• Input of long option-text gets messy, see comment → pull request Fix overlapping text of long answers #366
• Remove auto completion actually quite useful when creating similar forms
• Form title needs to be marked up as h2
• Empty content wording @jancborchardt
• 3 blue buttons, too much.
• No need for emptycontent , add text to new question menu +
• Show results not primary @jancborchardt
• "Add new answer" => "Add answer number x"
• Remove apostrophes from loading message

• Multiple choice could use the radio circle as icon to be more clear about what it is @jancborchardt Fix multiple choice icon to make obvious it’s radio buttons #329

• Change short/long answer placeholder to "People can enter a short answer" @jancborchardt
• Put new question menu on the left
  • Add question zindex issue
• Lower opacity of drag handle
• Title in narrow view is too narrow
• Mandatory in title with star *

Submit

• Long Form-Titles just get cut → Difference of edit and view mode when there are multiline questions and answers #435
• Line-Breaks in description are not shown in Submit-View Fix linebreak in description #424

Navigation

• Sort by last submission
  • New forms should be sorted up top
• Change copy to clipboard to "Copy share link" @jancborchardt
• Put form icons as default for all, and checkmark when expired @jancborchardt Fix expiration display #326

Sidebar

• Invert logic of "Only allow one response per user" → "Allow multiple responses per user" and only show if relevant → Fix setting "Only allow one response per user" #436
• Improve shared user component view Show sharings as in Server #425 -> scheduled for V2.2
• Disable typing on expiration field. When manually changing the text, expires falls back to 1970. Fix expiration editable #414
• Don’t open sidebar by default on mobile as it overlaps/hides the form info
• Wording @jancborchardt
• Structure @jancborchardt

Results

• "Summary" view in results Different Result-views #314 ->scheduled for V2.1
• Statistics => Results and be an H2 @jancborchardt
• Add "Back to form" in the top navbar @jotoeri
• Export to csv should be bellow Heading @jancborchardt
• Just the title as H2: "Results of formtitle" @jancborchardt

A11y

• Check everything with WAVE, Axe and/or Lighthouse
• Explore drag&drop with keyboard, maybe focus the handle and use arrow up/down → Reorder question via arrows #317

Later

• Decide better icons maybe to illustrate what form type it is

• Add navigation second line status Add navigation second line status #423 -> scheduled for V2.1

• Add navigation new submissions count Show number of responses on responses button #422 -> scheduled for V2.1

[jotoeri]

Followup from review-branch:

• Discuss NavigationIcon on separate branch

[skjnldsv]

• Use isMobile mixin for sidebar-open true/false

You're talking about the navigation or the sidebar?

[jotoeri]

You're talking about the navigation or the sidebar?

Sidebar. Jan changed the default-opening of the sidebar to false. This is necessary on mobile, but i think on desktop it would be nice to see the settings directly.
See #297 (comment)

[skjnldsv]

AH, yes then :)
Sorry, people are often confused and calling both of them sidebar ;)
Because the navigation is coming with the next 2.0.0 release of our Vue components.

Definitely for the Sidebar, we should use the isMobile mixin 🚀