Resources
General goal
- To make form and instance lists look nicer, be more consistent, and be more intuitive to use
- To conform to Material Design specs as much as possible
- To do this while making minimal changes to the current UI
![Mockup of new UI](https://user-images.githubusercontent.com/2047062/49044243-2d7a1300-f19b-11e8-82b9-6036ac3cfc0b.png)
Mockup of new UI
Proposed implementation
Add left-aligned icons to every screen that shows a list of forms. This includes:
- Fill Blank Form
- Edit Saved Form
- Send Finalized Form
- View Sent Form
- Get Blank Form
- Delete Saved Form: Saved Forms
- Delete Saved Form: Blank Forms
The icons will change depending on the form/instance state to make it more clear to users what state the form is in:
Icon |
Icon description |
Form state |
Screens it appears on |
![clip-blank](https://user-images.githubusercontent.com/2047062/49021562-e40cd200-f160-11e8-84d1-7d153abb954e.png) |
Empty clipboard |
Blank |
Fill Blank Form Get Blank Form Delete: Blank Forms |
![clip-text](https://user-images.githubusercontent.com/2047062/49021565-e4a56880-f160-11e8-90fb-1fe375ef324e.png) |
Clipboard with lines |
Incomplete |
Edit Saved Form Delete: Saved Forms |
![clip-pkg](https://user-images.githubusercontent.com/2047062/49021564-e40cd200-f160-11e8-814f-4937ac272d4a.png) |
Clipboard with "package" overlay |
Finalized |
Edit Saved Form Send Finalized Form Delete: Saved Forms |
![clip-send](https://user-images.githubusercontent.com/2047062/49044642-649cf400-f19c-11e8-8ff6-da2d44203bf0.png) |
Clipboard with "send" overlay |
Sending* |
Edit Saved Form Send Finalized Form Delete: Saved Forms |
![clip-check](https://user-images.githubusercontent.com/2047062/49021563-e40cd200-f160-11e8-91ef-848c90e30f24.png) |
Clipboard with "check" overlay |
Submitted |
Send Finalized Form View Sent Form Delete: Saved Forms |
![clip-error](https://user-images.githubusercontent.com/2047062/49021473-b32c9d00-f160-11e8-8143-45cbd6716a2b.png) |
Clipboard with "error" overlay |
Failed to submit |
Send Finalized Form Delete: Saved Forms |
* The "sending" icon is optional; the current Send Finalize Form UI includes this icon, but it's redundant with the progress bar. It can either be kept for consistency or removed for simplicity.
Changes to existing screens
- Most screens: Simply add icons to the left of each row as described above
- Send Finalized Form screen: More signifcant change, because it currently looks different from the rest (see below); it would once again be consistent after this change
![Existing Send Finalized Form screen](https://user-images.githubusercontent.com/2047062/49045032-a67a6a00-f19d-11e8-9213-c15481b8f603.png)
Existing screen
Icon details
The only icons that are currently used to indicate form state are on the Send Finalized Form screen (screenshot above). We took the existing "check" and "error" icons from there and added the clipboard to unify them into the icon set for this proposal.
The new icons use Material Design's 54% black for the base icon color, and blue/green/red A700 for overlay colors.
Current icons
If you want to examine the code, icons are currently used in InstanceUploaderAdapter
.
For regular submissions:
case STATUS_SUBMISSION_FAILED:
R.drawable.exclamation;
case STATUS_SUBMITTED:
R.drawable.check;
default:
R.drawable.pencil;
For SMS submissions:
case Activity.RESULT_OK:
R.drawable.check;
case RESULT_QUEUED:
case RESULT_OK_OTHERS_PENDING:
case RESULT_SENDING:
case RESULT_MESSAGE_READY:
R.drawable.message_text_outline;
default:
R.drawable.exclamation;
Known variants
The following are all the possible states for form instances (public vars from InstanceProviderAPI
):
- (blank form, not yet an instance)
- STATUS_INCOMPLETE
- STATUS_COMPLETE (i.e. finalized)
- STATUS_SUBMITTED
- STATUS_SUBMISSION_FAILED
The following are all the possible states for SMS submissions (public vars from SmsService
):
- RESULT_QUEUED
- RESULT_OK_OTHERS_PENDING
- RESULT_INVALID_GATEWAY
- RESULT_MESSAGE_READY
- RESULT_SENDING
The table at the beginning covers each of these states.