Skip to content

UI Design

This page includes the UI design principles and usability heuristics and the accessability features applied within the app

Usability heuristics

Consistency and standards:

  • keep layout consistency throughout the app
  • follows industry conventions, i.e. continue button will take you to the next page, and a submit button will submit a form

Aesthetic and minimalistic design:

  • App uses a minimalistic design, with no unessasary elements

System matches with the real world:

  • uses icons to symbolize real world conventions, i.e. right arrow with continue button to mean next, down arrow in dropdown boxes to mean more options, and weather icons to indicate current weather.

Help Users Recognize, Diagnose, and Recover from Errors:

  • uses alerts to indicate problems, i.e. an alert for missing input

Help and documentation:

  • The app will have info icon buttons that will give more information about a prompt

Flexibility and Efficiency of use:

  • The app will include a overflow navigation system to easily jump between pages
  • the user can skip over non-mandatory input and jump to the input they have at the moment

Recognition over recall:

  • Rather than trying to recall what they have to look out for, the app provides checkboxes with stuff they could be on the lookout for during their inspection
  • gives reminders for what should and should not be included within the inputted photographs and videos

User control and freedom:

  • The user can go back and forth through pages of the app
  • Includes confirmation and cancel buttons for the user before submitting anything

Visibility of system status:

  • Has a "fetching weather..." indication as the user waits for the app to fetch the current weather

Error prevention:

  • Includes alerts if user included incorrect input, i.e. if they inputted an invalid email address or try to use a password that is too short

Accessibility

Accessibility features included:

  • Large text size for easy readability
  • Clear layout and simple wording for the interface
  • Theme colours are easily distinguishable from each other
  • Text colours (#4A5833 and #FAFAFA) pass the WCAG contrast tests
  • Addition of symbols for colour blind users when colour is used to indicate something, i.e. The addition of an asterisk(*) when a red textbox is used to indicate missing input.
  • Allows the device's built in text-to-speech feature to be used for the user to input text