Improve mobile UI for questions with many columns
- Dominant language
- TypeScript
- Stars
- 38
- Forks
- 22
- PR merge metrics
- No merged PRs in 30d
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?**
- [x] 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.
- [x] No
- **Does it need design around state flow?**
- [ ] Yes. Outline the state flow requirements.
- [x] No
- **Does it need a test plan?**
- [x] 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.
---
### Related Issues
- https://github.com/getodk/web-forms/issues/179
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing related issue #179 and the current Figma and design-document placeholders; no implementation files or tests are named in this issue. Define the mobile layout and scroll or dropdown cues first, then document and test the chosen behavior across screen sizes before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100