getodk / getodk/web-forms

Improve mobile UI for questions with many columns

Open
#484 0 comments 1 reaction 0 assignees View on GitHub
enhancement needs ui/ux design
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.

Image

---
### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.