2.0 UX Guidelines

Progress Indicators

• For tasks that the user needs to wait for, such as importing data, a Loading widget is used. For errors in this case, the Loading widget is replaced with an error message.
• For tasks that the user doesn't need to wait for, such as sending feedback, a Snackbar is used. For errors in this case, the Snackbar is replaced with an error Snackbar that shows the error message.

Rectangular Widgets

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

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.
• 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.

Dividers

• Dividers always stretch to the edge of the screen, regardless of safe area state.
• Always use MinDivider, which removes default padding from Divider.
• When a heading is needed, use HeadingDivider.

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.
• The platform's keyboards are utilized to navigate to the "next" input widget, where applicable.

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 three or fewer options, a RadioInput widget is used.
• If there are more than three options, or multiple selects are possible, a ListPickerInput widget is used.
• A RadioInput may be used for more than three options if the input form is very small. For example, the NumberFilterInput uses a RadioInput to select the filter range, which includes ~7 options. The form includes this RadioInput, plus 1-2 TextField widgets.
• Any customized pickers that can't utilize the above widgets, should make selection obvious, such as with a Checkbox, RadioButton, or similar widget.
• To separate selectable items into sections, such as when selecting a date range, use the Divider widget.

Non-Input Pickers

Non-input picker, for example, picking a map type or options for opening data in another app, are shown using showBottomSheetPicker.

(Entity) Lists and Scroll Views

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/scrollable views, such as BaitListPage or UnitsPage, are separated by a MinDivider widget followed by a Text widget with styleHeading and insetsDefault padding on all sides. The total padding between the heading and text in the first item in the section should be paddingWidgetDouble (could be paddingWidget on both the header and item).

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

Empty Lists

An EmptyListPlaceholder widget is used in ManageableListPage. Title and description for this widget should match the following format:

• Title: No bait categories
• Description: You haven't yet added any bait categories. Tap the %s button to begin., where %s is an add icon.

(Entity) Summary Pages

• CustomEntity values are rendered at the bottom of the page, separated by a HeadingDivider widget.

Pages (General)

• For all scrollable pages with a static number of children (i.e. not populated by an expanding list) uses ScrollPage.