Cursor Affordances

Some time ago I’ve started a little quick and dirty Javascript and CSS experiment to help indicate more advanced mouse interactions in a visual way. By more advanced interactions I mean showing that things like double clicks, right clicks, and wheel scrolls could be performed on different UI elements. The left click is still perhaps the central mouse interaction that takes centre stage on the desktop, and I’ve seen users struggle to realize when additional interactions are possible. This I think is largely due to a lack of cues. Hence, these little cursor accordances aim to provide additional contextual symbols that float alongside the cursor. The other thing I wanted to achieve with this was to be able to display multiple cues at the same time (let’s say that both a left and a right click is possible on an element). So the code is super rough but here is a start. Basically numerous CSS classes are attached to HTML elements which then cause proper images to be overlaid near the cursor. Thoughts? Potential open source project?

Wireframes Magazine - Cursor Affordances