eApp Design Principles (a person using eApp should...)
- Left menu should always be visible unless viewing at mobile width.
- Equivalent experience on desktop and mobile.
- A person should be able to accomplish the same actions on each.
- Accommodating applicants filling/reviewing the form in a non-linear order
- Applicant needs awareness of what section they are in.
- Applicant needs awareness that they can move to any page in the application at any time.
- This principle is in acknowledgement they won’t have all the information at once so will likely fill out all they easily can in one sitting and will need to exit the form to collect/confirm more data.
- Consistent patterns
- Form inputs/pages act the same across the site.
- User input should trigger an eApp response with constant and consistent feedback loop from eApp (see below for feedback examples).
- Data is being validated accurately.
- Error messages should only show if content is incorrect.
- Error messages say what’s expected rather than just what’s wrong.
- Error messages should be proactively helpful, not just state something is wrong.
- Information is saved when expected.
- An applicant should never be worried that information is being lost.
- A person should know where and how to save at anytime.
- When the “Save” button is clicked to save it should save
- Warn when a logout is imminent and give them the ability to save and return to their work.
- Know how to save and or print their completed form
- The styling of this should adhere to print design best practices for legibility and scannability.
- Errors always bubble up if I have an error on a field I should see that error in the summary or at a higher level as well.
- Fields
- Show validation upon exiting field being typed in, either complete or invalid.
- For fieldsets (like addresses), this may apply to the field set.
- Required fields that are untouched/empty show nothing, until the review page for that section (or the whole form) are hit.
- Subsections
- A subsection page should be marked as valid only after all required questions are completed.
- A subsection page that is partially complete (with all correct responses) should not have an indicator until the review page is hit.
- A subsection page that has not been visited yet should not have an indicator until the review page is hit.
- A subsection with a field error should show an error.
- Sections
- A section should show green only when all subsections and fields are fully and complete.
- If a subsection shows an error, the section above it should show an error.
- Applicants should understand each question, what it’s asking of them and how to enter their information.
- For placeholder text in fields
- “#” to indicate numbers and the amount of them required for a field.
- In text fields, the default is to leave fields blank and have supporting text as the title of the field or in the helptext.
- Applicants should be able to fully complete the requirements of the given form.
- a person must be able to fill out and complete the form even if eApp flags their true information as false.
- Add a comment for any field.
- Minimize hassle.
- Applicants should only need to fill out a particular piece of information once.
- Information should be derived, where possible.