- Last week, I tried out Inbox by GMail and it is the first "brand new" Material Design app that I've used.
- I love how Material Design looks statically. It's obvious where you can touch and what's going to happen (except that the "delete" button really means "back").
- However, once you actually start touching the UI the design's weaknesses emerge. I fall into a pattern of tapping, waiting for an animation and then tapping again on the next thing.
- We can do better. We can tighten and augment the relationship between the human's input and the computer's reaction to make a much more responsive interface. Inspired by the menu system in Facebook Home, I took a stab at designing a more reactive Floating Action Button that understands a larger touch vocabulary. While similar to a nested pop-up menu, it's much more immediately and thus fluidly responsive to a fingertip drag.
- No waiting! You can start dragging the button upwards and immediately select your target without feeling that you've got to wait for the expand animation to finish.
- Eliminates a tap. You can select a contact in one smooth gesture. If you want to tap twice then that still works, too.
- Previews the consequence of the action. As you track to the left (while dragging, a non prototype implementation would support mixing tapping and dragging), the next screen is revealed. You know exactly what you're getting into.
- Fluidly cancellable. If you change your mind while dragging, it's OK, you can just drag back to the right and not open that view. This also supports the idea that screens come from the right and that backwards is to the left (which is the direction the back button points on Android).
- More playful. Material Design itself is playful through its use of saturated color. I dialed my springs to be underdamped to further support being playful.
The spring implementation that the demo uses is based on the algebraic integration of the standard damped spring equation—this means it's about as fast as any of the standard Android animation curves (as compared to something like Facebook Rebound, which uses expensive numerical integration to compute the spring's position every frame).
I originally wrote the spring for my recent game Letterplex and transliterated it to JavaScript for this prototype. I've released the source to all of the physics simulations that Letterplex uses as Gravitas. As I'm sure you'll agree, UI that incorporates physical simulations has Gravitas.