hypothesis / hypothesis/product-backlog

UX/UI Improvements to Create New Group admin form

Open
#534 1 comment 0 reactions 1 assignee Claimed by @dawachan View on GitHub
Design groups
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.


![create group form - width](https://user-images.githubusercontent.com/5212631/37523593-b63edbf4-2927-11e8-8dd8-5364a10eec7f.png)

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’.

![description field character limit error](https://user-images.githubusercontent.com/5212631/37523631-d5277d64-2927-11e8-98dd-98ac03d1081a.png)

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:**

![revised - create group form](https://user-images.githubusercontent.com/5212631/37523647-e3e73b14-2927-11e8-8cd3-84a27e68d2c5.png)

**Mockup for displaying multiple origin fields:**

![revised - create group form 2](https://user-images.githubusercontent.com/5212631/37523657-e91fcd3a-2927-11e8-9170-bb21780ac219.png)

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

![email-to-field-example](https://user-images.githubusercontent.com/5212631/37524855-6a6b6338-292b-11e8-8cdc-bb8fb9b5acdb.gif)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.