Skip to content

[STAR-3984] UX: Lists and Runs Desktop and Mobile issues

Jira ticket

Story

"As a Listaflow developer, I want to make sure the latest Listaflow app release (My Lists, Runs List, Read-Only Checklists) is both desktop and mobile friendly, and adheres to UX best practices."

Full description

The Listaflow app has been tested on a mobile device and the following issues were found:

** Note: the issues might be related to #146 (closed). I'll leave this up to the assignee's appreciation to check.

  • The main menu isn't hidden on mobile:

IMG_8133_2 IMG_8117

  • The sidebar with all the sprint information isn't working as it should - when selected it jumps the user to the bottom of the page (see video):

IMG_8118

  • Please fix the top of the "List item" as per the below:

Screenshot_2025-02-10_at_15.55.53 Screenshot_2025-02-10_at_15.55.13

Please change the "multi-select question type" to:

  • Rather include a "Select all" above the selection options (edit: don't include the "select none")
  • Remove the "none of the above" option on mobile and desktop in the CC Checklist
  • Change the layout so the selection options span the width of the content, ie. "Select all" and "Select none" should be above the multi-select options, not in the same row.

Change to:

Screenshot_2025-02-10_at_18.47.29

Currently on desktop:

Screenshot_2025-02-10_at_17.56.50

Widen the mobile content so it looks more like the below options, specifically:

  • Stack and widen "multi-select options" on mobile to look like the below. So each item is on its own line.
  • Ensure there is enough space between the question and the dropdown arrow as per the below.

Screenshot_2025-02-11_at_09.26.22

  • Widen the content below the "checkbox text" so it spans the width on mobile and desktop:

Screenshot_2025-02-11_at_10.53.22

  • Change the opinion scale on mobile to look like this:

Screenshot_2025-02-11_at_10.53.16

This is inspired by Typeform, see more examples below:

Screenshot_2025-02-10_at_17.26.06 Screenshot_2025-02-10_at_17.55.36

  • To give us more space, stack the dropdowns so they're rather inline with each other:

Screenshot_2025-02-11_at_11.05.25

  • Make sure fields span the width so there is more space for users to type into and more space for the "write" "preview" and "markdown supported" text

Screenshot_2025-02-11_at_11.11.34

  • Make the "back arrow" bigger on mobile, like so:

Screenshot_2025-02-11_at_11.52.00

  • Add the word “due” to missing the live app
  • Add avatars to the live app

Screenshot_2025-02-11_at_16.28.36

  • On the Runs List change the spacing to look like the below:

Screenshot_2025-02-11_at_17.39.57

Current live design:

Screenshot_2025-02-11_at_17.40.09

  • On the Run Item change spacing:

Screenshot_2025-02-11_at_18.15.25

  • On the Run Item change spacing as per the design below:

Screenshot_2025-02-11_at_18.28.33

Current live design:

IMG_8199

  • Fix dropdown cutting off on mobile:

IMG_8202

  • Fix spacing on My Lists Mobile page (as per below).
  • Remove "Due" on My Lists Mobile page (as per below).

IMG_8204

  • Fix Copy to Clipboard notification shown on mobile.

IMG_8201

  • Increase the width of the text container so more of the Checklist title can be seen.
  • Increase the width of the padding in front of the Checklist title.

Screenshot_2025-02-11_at_15.48.52

Completion criteria

  • Complete the items listed in the Full Description above.

Documentation updates & improvements criteria

  • Left to the assignee’s appreciation
Edited by Samuel Allan