eApp Design Experience Principles

eApp Design Principles

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

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

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

a person must be able to fill out and complete the form even if eApp flags their true information as false. (note: this doesn't happen now but maybe we need some kind of override at the end that allows submission regardless of validation errors eApp throws up)
Add a comment for any field (note: this doesn't happen in eApp right now. But worth considering)

Validation state

Areas of work

Section: pages in the top-level navigation
Subsection: pages in the second and third-level navigation
Field set: multiple related fields (area code, first three, and last four digits of phone number) / They can be nested (address relating to a person) / They can be nested and nested again (address relating to a person in a list of people)