2.0 UX Guidelines

Rectangular Widgets

• Rectangular (or square) widgets, whether flat on the canvas or floating, have a border radius of floatingCornerRadius.
• Floating widgets will the FloatingBoxDecoration.

Buttons and Icons

• Detail disclosure indicator is RightChevronIcon widget, and is used to indicate that a tap action will show more detail about the tapped Widget.
• AppBar buttons use use IconButton or ActionButton when an icon doesn't make sense.
• ActionButton text colour is the app's theme when on a white AppBar.

Navigation

• An input form is presented as a fullscreen dialog and is initiated from a user action.
• Edit forms may be pushed when initiated from a detail disclosure indicator.
• A detail page is pushed, initiated from a detail disclosure indicator.

Animations

• Animations should be used when significant widget state changes occur, such as hiding or showing a button.

Input Form

• All input forms utilize FormPage, or a derivative of FormPage.
• When the first input widget is TextInput, it is focused when the page is shown.

Validation

• Input validation is done on load, so required fields are highlighted immediately.
• Input validation is done as input changes, so errors are caught immediately.

App bar

• Save button appears in the AppBar.
• Save button is disabled until validation passes.
• App bar title starts with "Edit" for editing input forms, and "New" for new input forms. Or, if input is not for an Entity, the title clearly reflects the action of the page, such as "Send Feedback".
• App bar title is centred, or left aligned only if action buttons take up too much space. This is normally done automatically by the AppBar widget.

Pickers

• If there are only a few options, a DropdownInput widget is used.
• If there are many options to choose from, a ListPickerInput widget is used.
• Any customized pickers that can't utilize the above widgets, should make selection obvious, such as with a Checkbox, RadioButton, or similar widget.
• For multi-select pickers, or pickers that require more than just tapping an option, a "Done" ActionButton is used to indicate the user has finished picking.

(Entity) Lists

General

• All Entity lists utilize ManageableListPage to ensure consistent UX across the entire app. Components of ManageableListPage, such as search functionality, may vary depending on the Entity.
• Sections in multi-section lists, such as BaitListPage, are separated by a MinDivider widget followed by a HeadingLabel with insetsDefault padding on all sides.

Delete confirmation

• When an Entity is deleted, a confirmation message is shown in the following formats:
  • If the Entity can be associated with other entities:

    Wooly Bugger (Black) is associated with 5 catches; are you sure you want to delete it? This cannot be undone.

  • If the Entity cannot be associated with other entities:

    Are you sure you want to delete trip Alaska '19? This cannot be undone.

  • If the Entity can be associated with multiple other entities, such as with a CustomEntity:

    The custom field Size will no longer be associated with catches (5) or baits (3), are you sure you want to delete it? This cannot be undone.

• If an Entity is a required field of another Entity and is associated with one or more of that Entity, it cannot be deleted, and the user is presented with the following error format:

  Blue Catfish is associated with 10 catches and cannot be deleted.

Search

• Search results update as the user types.
• If no results are found, the following message format is shown:

  No fishing spots found