Design and usability walkthrough and suggestions:
Clickable prototype on Invision: https://wikimedia.invisionapp.com/share/A3H6T8XHN6F#/292472058_01
Redlines available on Zeplin: https://zpl.io/boBZ4Yv
- Utilize the OOUI 'Outline' widget to once a template is selected to easily allow users to scan across all optional fields and add them into the template wizard.
- Include warning messaging when a user removes a field that they have entered content into.
- Utilize a more compact form OOUI form style, with field name and actions above the text box
- Enable users to add or remove all optional fields with a button.
- Update typography and colors to utilize the WMF style guide and OOUI standards.
Documentation of feature:
Usability of template wizard can be categorised into following things
1. Form elements
The forms used in the templatewizard have alignment issues. the label, field placement, the call to actions for a form do not follow standards.
We do not section required and non required fields in a form. the color compliance is secondary issue but first we need to use correct format for showing what is required and what is not. also we don't use colors for headers. colors shouldn't be used on their own for functional requirements
The helptext position (i icon) is also another layout issues.
2. in-product communication
The labels used for headers, actions are too technical and sometimes do not give correct expectation. cta that says "Use" or "Required parameters"
3. Appropriate signifiers
after selecting a template, the template info format is kinda broken. expectation of selection or documentation needs to have better signifier. expectation of external for documentation for example. also if the template does not have any "parameters" then the flow looks like it is stuck. we need to have different flows for templates with parameters and without param.