The goal of this document is to provide an improved design of the bottom panes.
Problems:
The user doesn’t necessarily understand the language use
They undoubtedly won’t understand the model of a progression of application states
They won’t want to read too much
They want a clear indication of what they can and should do next
They can’t do or don’t know how to do something they reasonably want to do
They won’t know in advance the effect of pressing save / submit
The goals are the resolution of these problems:
Use simple language, avoid jargon (e.g. “boxes” vs “fields”)
Make the state explicit in terms they can understand
Be brief
Tell them what they should do next
If something is not possible because of the state of the form, tell them how to fix it
Tell them what is going to happen before they commit to pressing a button
(some of these goals are in tension)
Underlying states of a record:
New (not yet saved)
Draft (saved, not submitted)
Pending (submitted)
Member / Affiliate (approved by MC)
The “changed state” of the form can also be:
clean (new / reviewing)
dirty (editing)
And the validation of the form can be:
Not valid for save as draft (missing Organisation name, Contact 1 name or Contact 1 email)
Valid for save as draft, not valid for submit (missing required field(s))
Valid for submit / update (required fields present)
Not valid for update (missing required field(s))
The actions are:
Save as draft
Update draft
Submit application
Update application
Update member/affiliate record
The effects of actions are:
Create a new record (draft)
Update an existing record with (draft → pending) or without (pending, member/affiliate) state change
Generate an email to contact 1 with details and access token
Generate an email to FECA officers with details
The bottom area (below the public contact pane) holds one or more action panes. Each action pane is related to a single possible action. Each pane may or may not be visible depending on the state of the record and form.
More precisely an action pane is in one of three states:
Not visible – the action is irrelevant
Visible but disabled – the action is a possible next step, but there is something to do first
Visible and enabled – the action can be performed
The action pane consists of:
A rounded boundary rectangle to tie the components of the pane together
A title
A button with a legend, which performs the indicated action when pressed
Explanatory text to the right of the title and button, which varies according to enable/disable state
The following conditions, along with the app’s overall state are used to control the action panes.
Condition |
Definition |
Save as Draft Valid |
Organisation Name, Contact 1 First Name and Last Name and Contact 1 Email specified |
Form Complete |
All required fields are present |
Title / Button Legend |
Save As Draft |
Pane Visible When |
Editing a new FECA application |
Button Enabled When |
Save as Draft Valid |
Panel “Disabled” Text |
Fill in the ** boxes (replacing ** with a list of the fields missing from the Save as Draft Valid condition) |
Panel “Enabled” Text |
You can save this as a draft application. You will receive an email with a link that will enable you to continue working on it. FECA officers will not be notified and will not take any action on draft applications. |
Title / Button Legend |
Update Draft |
Pane Visible When |
Editing an existing draft application |
Button Enabled When |
Save as Draft Valid |
Panel “Disabled” Text |
Fill in the ** boxes (replacing ** with a list of the fields missing from the Save as Draft Valid condition) |
Panel “Enabled” Text |
You can update your draft application. FECA officers will not be notified and will not take any action on draft applications. |
Title / Button Legend |
Submit Application |
Pane Visible When |
Editing a new or existing draft application |
Button Enabled When |
Form Complete |
Panel “Disabled” Text |
Fill in the ** boxes (replacing ** with a list of the fields missing from the Form Complete condition) |
Panel “Enabled” Text |
You can submit your application. You will receive an email with a link that will enable you to make changes to it after submission. FECA officers will be notified and will consider your application at their next meeting. They will get back to Contact 1 with the outcome. |
Title / Button Legend |
Update Application |
Pane Visible When |
Editing an existing pending application |
Button Enabled When |
Form Complete |
Panel “Disabled” Text |
Fill in the ** boxes (replacing ** with a list of the fields missing from the Form Complete condition) |
Panel “Enabled” Text |
You have made changes to your details. You can update your member record. You will receive an email with a confirmation of changes made. FECA officers will be notified of these changes. |
Title / Button Legend |
Update Member record / Update Affiliate Member record (depending on account.type.slug == “member” or “affiliate”) |
Pane Visible When |
Editing an existing member/affiliate record |
Button Enabled When |
Form Complete |
Panel “Disabled” Text |
Fill in the ** boxes (replacing ** with a list of the fields missing from the Form Complete condition) |
Panel “Enabled” Text |
You have made changes to your details. You can update your member record. You will receive an email with a confirmation of changes made. FECA officers will be notified of these changes. |