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!

Advertisement

Start Prototyping

With some of the recent updates in G2 components, it’s become clear that the library has become a phenomenal tool for rapid prototyping. With the fundamental systems in place (in particular styling and a healthy collection of primitive components), I’ve been able to experiment and create pretty feature-rich experiences. (Some of this was demonstrated in a recent Zoom session.)

For the purposes of prototyping and testing… If you’re interested in giving these G2 Components a try, I’ve prepared some resources for you!