hypothesis / hypothesis/product-backlog
UX/UI Improvements to Create New Group admin form
- Dominant language
- No language data
- Stars
- 122
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
###UX/UI Feedback for improving the 'Create New Group' admin form.###
Related card: #https://github.com/hypothesis/product-backlog/issues/421
1. The form is appearing stretched and longer the data/options being displayed e.g Group Type and text fields are excessively long. Recommendation: Follow the form field widths presented on the create group: https://hypothes.is/groups/new no need to centre align - keep as left aligned as per the rest of the admin UI form fields.

2. Consider making the authority field non-editable, if so make the text look disabled - as I understand it, this is pre-populated and immutable.
3. Are there any character limits for group name, description etc? There will probably need to be so let’s add the character count in the bottom right corner as per create private group UI: https://hypothes.is/groups/new. Adding the character count from the get go will prevent the ‘exceeding character’ limit error showing when the user clicks ‘Create new group’.

4. On Scope Origins field ‘i’ tooltip let’s change the text from: ‘Origins where this group appears (e.g. "https://example.com' to: ‘Origin URLs where this group will appear (e.g https://example.com)’
5. Expose the origin form field input field from the ‘get go’, so it’s not hidden behind a click, add water mark to this text field ‘e.g. www.example.com’
6. Scope Origins: Do we want to enforce entry of either ‘http://’ or ‘https://’ before the URL? At the moment, this form submits with only ‘www….’ If we do want to validate against protocol, we should include in the watermark as well e.g ‘http://www.example.com'.
7. Add a label to the subsequent origin fields and make the ‘required affordance’ only on the first scope origin field.
**Mockup for initial form view with 1st add origin field exposed and shown as a required field:**

**Mockup for displaying multiple origin fields:**

Note: there are additional ways to design multiple input fields but I kept the same model @robertknight has already implemented to make it simpler.
For an alternative way to handle multiple form inputs in one text field - see the following 'email to: field' example

AC
- [ ] The revised form matches the mockups and corrects the issues outlined above.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.