Forms builder - Usability test 1

[bkamapantula]

• [x] Recent Forms is empty by default || Hide when there are no forms

• [x] Form creation card wiggles on mouseover, it can be streamlined || Removed border width

• [x] Filter forms can be part of Recent Forms || Moved Filter Forms from top navigation to the section below. This section isn't shown when there are no forms.

• [x] have a few templates by default instead of empty screen || Added a User Survey template

• [x] Create form button on top navigation -- is it necessary? || Removed

• /create

  • [x] Weird blue border by default which is distracting || Removed the border
  • [x] consider auto-name generators or auto-select Form name field so users' focus is on it || Form name is now autofocused
  • [x] on Publish/Save disable "Confirm refresh" dialog || Remove confirm dialog. Enable localStorage to retain form configuration. Added a Reset option to clear localStorage and remove all fields.
    • We wanted a prompt to Confirm when users are navigating away from the Form Creation page. Different events need to be detected to ensure users are really moving away (refresh, F5, backspace) vs link click. This will need decent code, so reframed the problem a little while improving user experience a bit (they see a form that they were working on before refreshing the page).
  • [x] Configure fields and Add fields mean the same, keep only one || Deleted Configure fields
  • [x] name, text-input is confusing || Updated text by removing -input from all values
    • [x] "unique identifier for form values" for the name help text || Updated help text

• [x] Field name attribute value should be auto-generated and/or in focus and/or be more user friendly to reduce changes || Auto-generating will make it hard to remember. Moved the name attribute to top of the form (second attribute after the label) so users aren't blind-sided by it.

• modal

  • [x] spacing between fields || Added display block, padding

  • [x] dividers between fields || Added .divider

  • [x] looking for Email -- couldn't find it easily || custom styling above should make it easy

  • Adding Radio option

    • [x] encoded %25%20 on repeat additions of the field
    • [x] some values (strongly disagree, disagree, neutral, agree, strongly agree, NA) aren't rendered as expected but work fine when in double quotes || Fixed faulty regex

• [x] Edit properties should be sticky next to the field

• [ ] .toast-container position on top right is blocking interactions

  • visibility
  • pointer-events none

• Publish/Update terminology is confusing

  • on clicking Publish, the page didn't change.
  • no auto-save
  • [x] consider naming it 'Save'

• View form

  • [x] spacing is too close. consider a divider (<hr>)
  • [x] View Form on the top navigation should be "Preview Form"

Questions

• Should there be a Submit button by default?

/create

• [ ] in Attribute table, mouseup outside the container hides the attribute table

For later

• Option suggestions based on first value
• Form method, action configuration
• Auth can go in the place of Create form button on top navigation on the gallery page,

[sanand0]

Usability test feedback

Critical

• [x] Select is not bootstrap friendly
• [x] On first save, the form is saved and redirected. But the "View" link does not appear
• In the form editing page
  • [x] Please make "View" just like "Save" -- a button, different color, with the external icon as-is. Please call it "Preview" that links to /form/.
  • [x] Add a third button "View form" that links to /view/form
• [x] In the email ID, if I remove the validation, it still persists
• [x] If I remove textarea help, it still persists
• [x] Remove the "Reset" button

Optional

• [x] Clicking on new form should not have the old form details. But reloading a form (accidentally) can/should preserve content
• [x] Default values should be empty. Only placeholders should be present (e.g. "Untitled form")
• [x] In the modal + (add field)
  • [x] Add search for "Click form field to Add"
  • [x] Rename "Click form field to Add" to "Add field"
• [ ] Add a submit button by defaul
• [x] Reorder the button properties, placing most common ones on top
• [x] The "Updating an existing form" title can be removed and moved to the Navbar as "Update form" instead?
• [ ] Select has the following issue