Survey Task: Choices and ChoiceButton styling updates

[seanmiller26]

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.

Changing the animal choice designs to be more intentional and future-proof. This also addresses mobile friendliness.

Describe the solution you'd like

There are three display options for a survey task: 1 column, 2 columns, or 3 columns, with or without a thumbnail.

1 column styling:
A consistent cell size of 60px H x 500 W. 16pt font. This stretches the full width of the task area.

2 column styling:
A consistent cell size of 60px H x 250px W. 16pt font. Each line should alternate between a #FFFFFF fill and a #EFF2F5 fill.

3 column styling:
Cell size of 60px H x 166px W. 14pt font. Each line should alternate between a #FFFFFF fill and a #EFF2F5 fill.

No thumbnail:

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

Tied closely with #6237

[goplayoutside3]

@seanmiller26 some thoughts about projects that select not to show thumbnails in their survey task choice buttons.

The screenshot in this Issue description shows the choice buttons at the same height as when they have thumbnails. I previously expressed concern about this design choice and I want to bring it up again. I think the large button design is going to degrade the user experience for projects that have selected to hide thumbnails so that their task area fits nicely in a volunteer's device screen.

Here's an example of Squirrel Mapper on production, on a 14in Macbook:

Here's the same exact workflow using the new design on #6494 branch. I now have to scroll the screen every classification.

I also see in #6494 that no-thumbnail choice buttons have a shorter height on mobile-sized screens. Can we do the same for all screens when a project has decided not to show any thumbnails?

[seanmiller26]

Thank you for bringing this back up. Good to address it at this stage.

Here is a mock up of our options, including the current 60px h on the left.

40px is the recommended smallest touch target. I'm fine with that option as long as the text (especially 2 lines) doesn't seem too tight.

I also spotted a missing styling detail here. The cells of a choice with no thumbnail should have a subtle stroke of #E2E5E9. Very important for legibility.

[seanmiller26]

@mcbouslog Decisions from today's meeting:

When a subject and task start to stack, change the columns to be responsive and fit to width, 3 columns, evenly sized. At 768 (mobile size), switch to 2 columns, fit to width, and even. The minimum width of a choice button is 166px. If that size is reached, switch to 1 column - this is an edge case.