eternagame / EternaJS

Eterna game/RNA design interface
Other
12 stars 10 forks source link

Increase palette button size #717

Open tkaragianes opened 1 year ago

tkaragianes commented 1 year ago

Describe your idea

The bases in the palette are too small on mobile (particularly on the iPads used at CalDay) and need to be made bigger for easier touch use.

Motivation

At CalDay, we observed users struggling to change bases while painting. The base icons in the palette are very small, and the associated hitboxes prove difficult to activate on a touchscreen. There may also be unexpected interactions with the high-DPI iPad screens (although we believe that's appropriately handled in the current codebase) that are making the buttons appear smaller than they ought to.

Making the buttons larger will make the game more approachable on mobile, and easier for new users at these festivals.

Proposed Solution

The simple fix is to increase the size of the buttons in response to certain canvas widths. If we have access to device information in the palette context, we could also target the changes to specific devices. Another option is to remove the pair painting buttons from the palette via tutorial script, as they were rarely (if ever) used by players at these events.

A longer term solution will require designing the mobile UI to adequately account for the smaller screen size and to shrink/hide non-essential UI in mobile contexts. We've also discussed alternative interaction schemes, like a directional drag to paint or base cycle on tap.

Other Information

No response

luxaritas commented 1 year ago

I want to avoid just making it bigger on smaller widths since it would/could become massive on desktop when shrinking your browser window. I do thing something is off with high DPI scaling since things do feel smaller than they should on mobile, particularly when comparing to desktop (though my desktop screen size is liable to bias that a bit, and I hesitate losing even more screen real-estate to UI).

Minimally, I do want to investigate if we can increase the size of the hitboxes in the current layout