Styling and UI Feedback

[miking-the-viking]

• implement Material UI for consistent and effective initial look and feel

• Accessibility around colours

  • Drawer with slightly opaque background for feedback text
    • Same border color around drawer, translucent with white text (for example, rough guideline)

• Validation on the left (X or check) (OR down in the drawer)

  • Consider valid and nullable/optional as the same state
  • Except when there’s steps involved or third party checks (ex: verify username is available)

• It’s not wrong until you’re done entering input (shouldn’t evaluate on key up, but on blur) (email example)

• Customization considerations - check out other framework design patterns for forms (like Material UI)

  • Label size
  • Font

• Form Validation & Submit button

  • If form is invalid, provide a easy anchor directly to the first invalid field
  • Consideration: list all problems with the form by the submit button
  • Clear Form link beside submit