getodk / getodk/web-forms

Improve likert question experience

Open
#157 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
38
Forks
22
PR merge metrics
No merged PRs in 30d

Description

The likert widget works, and is similar to other applications, but we think we can do better!

Feedback from code review:

> It’s really not obvious at all where the clickable area for one option ends, and the next begins. Worth considering:
For better experience with pointer inputs (mouse), give some sort of indication of the target with a hover state
For better experience with touch input, leave at least a small gap of inert area between each option

When we first started exploring the selects, I thought of a few ideas to improve the likert widget, which I think would be worth playing around with in Web forms and eventually adopting in Collect!

[Figma](https://www.figma.com/design/KFi9hIQdrRgo0rLqIC7Sg8/ODK-user-flows?node-id=5372-34992&t=rbvZHq9S8pOD4zh4-1)

![Image](https://github.com/getodk/web-forms/assets/7871340/17cde9ea-600d-498f-95a8-5420511154d9)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the likert widget entry point and review the linked Figma design and the existing widget behavior. Explore the proposed pointer hover indication and touch spacing, then confirm the interaction is clearer for both input types and aligns with the selected design before considering the work done.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.