BIDMCDigitalPsychiatry / LAMP-platform

The LAMP Platform (issues and documentation).
https://docs.lamp.digital/
Other
12 stars 10 forks source link

Matrix Survey UX/UI design updates for mobile readability #617

Open tlakhtak opened 2 years ago

tlakhtak commented 2 years ago

The matrix survey operates as intended, however, it has a tendency to look a little bit cramped on a phone screen. We would like to implement the following updates to improve its output:

  1. Add fixed white space between matrix responses

  2. Anchor the header (defined as Option Text and/or Option Description in the settings for matrix) such that the user can always see the corresponding response options to each question a. Additionally, would it be possible to add a header above the question text: For example, when multiple questions start with the text "In the last 30 days", having this be anchored as a header instead of constantly typing it at the beginning of each question would be very useful to save space on the screen

  3. Text formatting: a. Can the question alignment be justified such that questions look neat and tidy b. Alignment for header should also be justified - we want all the Option Description and Option Text to be in the same row (will get picture from LAC to know exactly what they want

  4. Rating response type: on the mobile, the ratings don't all show up in one row. If for example there are 4 possible "ratings", to fit the phone screen 3 rating responses were shown on one row and the last 1 rating response moved to the last row. This should either be all fit on one line, or all are displayed as their own lines for consistency's sake.