Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Survey task: Choice and Questions styling improvements #6239

Open
5 tasks
seanmiller26 opened this issue Aug 27, 2024 · 0 comments
Open
5 tasks

Survey task: Choice and Questions styling improvements #6239

seanmiller26 opened this issue Aug 27, 2024 · 0 comments
Assignees
Labels
design Design and/or UX enhancement New feature or request

Comments

@seanmiller26
Copy link
Contributor

Package

Choose from the list:

  • app-content-pages
  • app-project
  • [ x ] lib-classifier
  • lib-panoptes-js
  • lib-react-components
  • unknown

Is your feature request related to a problem? Please describe.

This is in response to feedback stating it takes too much scrolling to see all the choices.

Figma https://www.figma.com/design/ASqNlLhicNRzEDhYDA2t8j/Survey?node-id=0-1&m=dev&t=PxDxXDB67AH8V9Aa-1

Describe the solution you'd like

Increasing the width to match the task area at 540px helps a lot.
Standardizing the width of buttons and spacing gives a neater presentation.
Allowing for the animal description and 'Often Confused with' to be collapsed allows power users a shortcut past unnecessary info.
All fonts have been increased to match our new standard of 1rem / 16pt. The individual animal name is 24pt, bold.

Default view w/ collapsed animal description and 'Often Confused with'
Screenshot 2024-08-27 at 4 10 51 PM

Screenshot 2024-08-27 at 3 47 50 PM

Each button has been standardized to 110px W, 40px H. When the copy is longer than that width will allow, please increase the widths by 10px increments (120, 130, 140, etc) with no less than 20px padding.

Screenshot 2024-08-27 at 3 56 01 PM Screenshot 2024-08-27 at 3 54 48 PM

Before and after:
Screenshot 2024-08-27 at 4 10 35 PM

Additional context

Add any other context or screenshots about the feature request here.

@seanmiller26 seanmiller26 added enhancement New feature or request design Design and/or UX labels Aug 27, 2024
@mcbouslog mcbouslog self-assigned this Sep 5, 2024
@seanmiller26 seanmiller26 changed the title Survey task: Individual animal choice styling improvements Survey task: Individual animal species styling improvements Sep 5, 2024
@mcbouslog mcbouslog changed the title Survey task: Individual animal species styling improvements Survey task: choice styling improvements Sep 5, 2024
@mcbouslog mcbouslog changed the title Survey task: choice styling improvements Survey task: Choice styling improvements Sep 6, 2024
@mcbouslog mcbouslog changed the title Survey task: Choice styling improvements Survey task: Choice and Questions styling improvements Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design and/or UX enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants