Prototyping – Swipeable “Action Sheet” UI for mobile (web)

On today’s live Twitch stream, I roughly prototyped an idea to improve menus and dialogs for the mobile web.

The motivation originated from conversations I’ve had with @diegohaz – specifically on ideas of how we could improve the accessibility of dropdown menus on phones. This led to some design research into the world of native mobile (iOS/Android), and seeing how we could bring those experiences to the mobile web.

The ending result was far from pretty. However, the exercise was helpful in identifying the important mechanics of creating this flow. Mechanics such as synchronizing swipe distance and overlay animations, establishing “thresholds” for collapse/expand actions, height and positional offset calculations, and possible cross-component layered rendering.

P.S. A big shoutout to @timothybjacobs for dropping by!


By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s