zooniverse / mobile

React native Zooniverse mobile app
19 stars 14 forks source link

Mobile Classifier Reskin #535

Open seanmiller26 opened 4 months ago

seanmiller26 commented 4 months ago

A major step in the app redesign is to reskin the current classifier in order modernize it and make it feel like a more integrated part of the experience.

There are three main types of projects featured on mobile: a simple yes or no question with swipe, multiple choice question, and drawing tasks.

Screen Shot 2024-03-06 at 2 16 31 PM

Mocked-up with all mobile elements:

Screen Shot 2024-03-06 at 2 41 28 PM

Tablet, portrait:

Screen Shot 2024-03-06 at 2 43 43 PM

Tablet, landscape:

Screen Shot 2024-03-06 at 2 53 11 PM

I am happy to open a dedicated issue for each task if that will help with specific details, otherwise everything can be found in the Figma file here.

As for workflow, these can be tackled one at a time. I have tried to reuse elements as much as possible, but obviously there are unique components for each task.

coryzoon commented 3 months ago

@lcjohnso @seanmiller26 Should there be any special considerations for "museum mode"? I think we currently apply a specific theme for projects that have museum mode turned on.

lcjohnso commented 3 months ago

@lcjohnso @seanmiller26 Should there be any special considerations for "museum mode"? I think we currently apply a specific theme for projects that have museum mode turned on.

I don't believe so -- the look should be the same. The key difference when museum mode is enabled: that navigation should be locked -- the user shouldn't be able to tap on the Zooniverse Logo in the header and return to the homepage, nor open the sandwich menu to navigate to a different page.

seanmiller26 commented 3 months ago

That's correct, all the styling will be similar in museum mode.

@coryzoon you reminded me to open a related issue about disabling the home button, though.