This is rad! I tend to find animation and motion design daunting; the step-by-step construction of the menu really helped me understand how something like this can be put together. Thanks for making this!
Thanks for the motivating comment :)
Chonky Menu Re-Creation
91–97 of 97 posts
Re: Chonky Menu Re-Creation
#92Side question: is there a recommended method to prototype such UI demos and examples as seen on this page? Some kind of library? I've seen a number of similar things in the past and wondered if there was a way to quickly test a UI idea using helpful building blocks.
I'm not aware of any easier way to build something like this than what I presented in the article, but I'd be interested to learn if there was. I did create a full-fledged prototyping/animation tool called Flinto.com, but it can't quite do this interaction with all of its details
Re: Chonky Menu Re-Creation
#93Earlier quoted context omitted.
Yeah the hold and drag interaction model sure looks fancy but isn't very ergonomic. On mobile, you're fighting to stretch to the top item, with a mouse it's very unintuitive, and with a trackpad forget about it. Tap to open makes more sense in every scenario. It's an accessibility nightmare
> Yeah the hold and drag interaction model sure looks fancy but isn't very ergonomic. I beg to differ. I find hold-and-drag menus faster to interact with when using a mouse, trackback or a touchpad. But it is possible to support it, while not requiring it. On button down the system enters a state where one of three things can happen. 1. The button is released. Then the menu should togle open and wait for another clic…
> I beg to differ. I find [them] faster
I think you’re measuring a different dimension than I am. I’m talking about ergonomics and accessibility, not speed. Stretching several inches up a screen in a single gesture breaks most fundamental UI design guidelines. It’s hard for people to pull off quickly and accurately.
Not to mention the fact that it doesn’t allow for longer lists so just isn’t useful in general, unless the menu is toggled open to be scrollable.
Re: Chonky Menu Re-Creation
#94Earlier quoted context omitted.
The original menu was built for mobile, where this isn't much of an issue, my re-creation is a bit weird because I primarily interact with it on desktop, but I followed the same ideas as the original. For a desktop-specific version of this, I'd definitely allow it to persist open after a single click. Maybe I'll add that.
The drag doesn't work on my android phone - it just closes. And I'd argue the usability is worse on a phone, where how you're holding the phone, and screen size affects basic usability to start with, and small screen size makes it more important to be able to lift my fingers to see what I'm choosing from.
I fixed the android issues, sorry about that
Re: Chonky Menu Re-Creation
#95(op here) Sorry this doesn't work on Android, I don't have any Android devices so I haven't tested it there, I think there are some differences in the way pointer events are handled that are messing it up. If it doesn't work for you, please have a look at the video where I demonstrate and talk through everything: https://www.youtube.com/watch?v=1VgrdLfDozo
I enjoyed this post quite a lot! Any chance you could add a feed to your blog?
Thanks for the reminder.
Re: Chonky Menu Re-Creation
#96Earlier quoted context omitted.
For me it doesn't work on Chrome android. As soon as I want to select something and move my finger slightly, the menu disappears, although I am still with my finger on the button
I think I fixed the Android issues, can you give it another try?
Can confirm, it works well in Brave on Android. You do have to tap to initialize the line -- and then tap on the line and drag -- in early examples, but the completed example works well.
Re: Chonky Menu Re-Creation
#97(op here) Sorry this doesn't work on Android, I don't have any Android devices so I haven't tested it there, I think there are some differences in the way pointer events are handled that are messing it up. If it doesn't work for you, please have a look at the video where I demonstrate and talk through everything: https://www.youtube.com/watch?v=1VgrdLfDozo
Update: it works on Android now