Skip to content

Style Guide

Jump to bottom
Heather edited this page Nov 1, 2016 · 1 revision

Face It is designed to be as accessible as possible for users across the autistic spectrum.

Its UX and UI has been informed by research into design for children with autism, particularly Kamaruzaman et al.'s 2016 paper on the topic, which can be downloaded here. This medium post on accessibility in Material Design is also instructive.

Typography

  • Try to reduce the amount and complexity of text as far as possible.
  • Open Sans is the only font used throughout the app.
  • Default font-size is 1em. Due to the small amount of text in the app, we haven't implemented a typographic scale; for now, just adjust font-size for individual components as it suits the design.

Colours

We want to avoid high arousal colours and high contrast. The app has a restricted colour palette:

  • Text: #616161 ($grey-darken-2)
  • Neutral: #F5F5F5 ($grey)
  • Dark Teal: #B2DFDB ($teal-darken-1)
  • Teal: #E0F2F1 ($teal)

Text should be presented on a teal background.

Elements should always be presented with a thick border around them to minimise contrast with the page background. A teal element should have a dark teal border; a dark teal element, a teal border.

Animation

Continuing the principle of low arousal, animation should be used only where absolutely necessary to transition between or highlight elements. Where included, ensure the animation is slow and contained: as a guide, page transitions in the app take 1000 milliseconds.

Icons

  • The app features five icons, each representing the five emotions assessed in the game: Angry, Happy, Neutral, Sad, and Surprise.
  • The Happy icon is also used within the game as Emotion API, a robot representation of the algorithm users' answers are tested against.

Tone

  • Face It was built to allow young people with ASD to practice recognising facial expressions without having their answers assessed in comparison to those of a neurotypical authority figure. Never tell the user their answer is 'correct' or 'incorrect'; rather, let them know whether it aligns with Emotion API's answer.
  • Similarly, we need to avoid any implication that Face It is designed to 'fix' a neuroatypical interpretation of facial expressions. As such, the game is framed so that:
    • Through playing, the user is helping Emotion API practice recognising emotions
    • It's Emotion API that levels up over the course of the game, rather than the user
Clone this wiki locally