Improve mobile UI for questions with many columns #484
Description
Description
Improve mobile UI for forms with many columns to enhance readability. Currently, text gets squished on small screens, degrading user experience. We can consider solutions like horizontal scrolling with clear cues or dropdown menus for columns exceeding 3.
Checklist
- Does it need UI/UX design?
- Yes. Design visual cues for scrollable content or dropdown layouts for mobile.
- No
- Does it need API design?
- Yes. Specify the endpoints, methods, or data structures needed.
- No
- Does it need design around state flow?
- Yes. Outline the state flow requirements.
- No
- Does it need a test plan?
- Yes. Add the test plan as a comment in this task or attach the document.
- No
User Stories
- As a mobile form user,
I want readable text in multi-column questions,
so that I can easily understand and interact with the form. - As a mobile form user,
I want clear indicators for scrollable content,
so that I don’t miss important information.
Design
- Figma: [TBD - Create designs for scroll cues or dropdowns]
- Design Docs: [TBD - Document mobile layout requirements]
Dependencies
- Blocked by UI/UX design completion for mobile layouts.
Additional Notes
- Consider user testing to ensure scroll prompts are intuitive.
- Balance density needs for forms with repeating questions.
- Evaluate scalability for various screen sizes.