cooperka / collect Goto Github PK

Resources

• Mocks for each page
• Material Design color palettes
• Material Design icon guidelines
• Material Design icon list

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

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
	Empty clipboard	Blank	Fill Blank Form Get Blank Form Delete: Blank Forms
	Clipboard with lines	Incomplete	Edit Saved Form Delete: Saved Forms
	Clipboard with "package" overlay	Finalized	Edit Saved Form Send Finalized Form Delete: Saved Forms
	Clipboard with "send" overlay	Sending*	Edit Saved Form Send Finalized Form Delete: Saved Forms
	Clipboard with "check" overlay	Submitted	Send Finalized Form View Sent Form Delete: Saved Forms
	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 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.