Skip to content

0003 ui design settings

Jump to bottom
donaldsonm edited this page Feb 27, 2021 · 1 revision

Settings UI Design

  • Status: Accepted
  • Deciders: Richard Duong, Nicole Trappe, Lulu Zhu
  • Date: 2021-02-01

Context and Problem Statement

After deciding on the features of the MVP features, we designed the app as a one-page web application. How would the UI, especially the Settings menu look? Meeting Note

Considered Options

  • Option A: App bar
  • Option B: Side bar
  • Option C: Light box

Decision Outcome

We have decided on Option B: Side Bar

Pros and Cons of the Options

App bar

The settings will appear when the user hits the arrow at the top of the screen and a panel will slide down. Each feature will be placed horizontally. To retract the settings panel, the user can click anywhere on the background of the panel or the triange. The triangle signifies if the panel has been retracted or dropped down based upon the direction. Example: arrow points down when it's restracted so the user indicates they want to pull it down.

  • Bad, because features laying out horizontally takes too much space meaning we cannot add many features
  • Bad, because it is counterintuitive

Side bar

The settings will appear when the user clicks on the 'Hamburger' icon (3 lines). When they click, a sidebar will expand (on the left in the image below) showing each feature vertically. To close the sidebar, the user can click anywhere on the main screen (aka timer/background panel) or the 'X' at the top of the sidebar. Most websites currently use the hamburger icon so we've been taught its meaning and it may be the more intuitive option. We have to decide on whether the sidebar would overlap/cover the timer or if the timer would dynamically shift to the right.

  • Good, because most intuitive and popular option that many people are familiar with
  • Good, because it looks modern aesthetically

Light box

The settings will appear when the user clicks on the settings icon (a gear in the image below). They appear as a lightbox/window overlay on the page. The features are organized vertically. When the user wants the settings to go away, they can click on the 'X' on the page or anywhere outside of the overlay.

  • Good, because it is consistent with the 'about' option
  • Good, because quite a popular option
  • Bad, because it is not aesthetically as cool, modern as the side bar
Clone this wiki locally