Highlight the relations between the modes about octave-compass HOT 4 CLOSED

Yes! Thanks @tttp . I have some thoughts in response, and some further questions:

• Functionality is already in place to drag to rotate the "keyboard" (the outer area with black/white keys) and the "scale" (the inner polygon). To begin dragging, you need to find a place where the cursor shows an open hand. On the keyboard, you can drag from any of the inactive keys (because clicking on the active keys plays them). This behavior does make it impossible to drag the keyboard with a chromatic scale where there are no inactive notes, but oh well. Similarly, on the scale polygon you can drag from anywhere that's not a chord emblem. This dragging should also work on touch devices, although I would expect that multi-touch probably would not work.
• I have been working on adding animation to the rotation, but it has actually been quite a challenge. Issues #54 and #17 describe the goals here, which include rotating the keyboard and the scale when the user clicks on those "transpose" and "mode shift" buttons.
• I have also been planning to add a "30 second tour" button to the app that I hope would allow users to better discover the features, like drag to rotate. I've now put those specs into #55.

Questions:

• As you were exploring the tool, were you able do discover the "drag to rotate" feature? If not, do you think you might have discovered it, had those elements rotated into place (with animation) after clicking the "mode" buttons?

from octave-compass.

Hi,
No, I did completely miss the option to rotate. Really nice!

Two suggestions for discoverability:

• maybe using a different cursor would help? eg. all-scroll or move?
• and/or animate both the keyboard and compass when you load the page?
  and to sort out the keyboard: keeping the background for spinning, and only play the note when you click on the letter "box"?

from octave-compass.

different cursor

• Yeah I guess you're right that grab is probably too similar to pointer and most users will miss that visual cue. I'm not sure about all-scroll though because the app doesn't respond to scroll events and I don't want to give users the impression that it does. What about move? https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

animate both the keyboard and compass when you load the page

• Yes, excellent. I just added #57 to track this feature

only play the note when you click on the letter "box"

• That's actually how I originally built it, but after playing around with it, I decided it was too easy to miss the note button with your finger, especially on small screens. I wanted to prioritize that functionality — keeping that app as much like an "instrument" as possible, and making it easy for the user to "play" it. So I chose to sacrifice a little bit of "transposition" UX for some gain in "note playing" UX.

from octave-compass.

I just finished a bunch of improvements to this app, which I hope will address this issue. If not, please feel free to comment here with a specific suggestion 🙂

from octave-compass.