New Mouse Cursors

February 24th, 2010 by Filipe Sabella

Inspiration

This is something that you should read if you’re interested in usability: Mixing Games and Applications.

The author states that the software developing world has much to learn from the world of games, and I agree wholeheartedly.

For me the high point of the presentation is when the author shows the basic model for applying exploratory learning:

“You have a goal, skill in the user’s head, tools and actions they take in the application, rules that the application executes and stimulus that the application feeds back to the user.”

So what?

If you think about it, software in general doesn’t make much use of different mouse cursors. The most widely used ones are the resize and pointer – both being hugely effective and useful hints as to what to do with the element below the cursor.
Since the web came to be, the little pointing hand became an universal symbol that indicates we can click on something.

For some time now I’ve been thinking of ways to apply the concept of exploratory learning to the softwares I help create. One such way is to explore the mouse cursor.

How?

Let’s say the user’s just filtered a list of clients, and his goal is to see more data about a particular record. He instinctively hovers his cursor over the desired record and the application changes the mouse cursor to this:
double click

He has a goal: see more data.
As he hovers the mouse over the record, the mouse cursor changes – he has a stimulus.
He already now how the mouse operates, so he has the skills to relate to the stimulus.
Now the user does something – probably click once at the record. And nothing happens. Absolutely nothing, he doesn’t get what he wants, but also doesn’t trigger anything bad. Those are the rules.
If everything goes well, he’ll try again and, hopefully, succeed when double clicking the record.

The same spirt could be applied to these other two badly drawn cursors.
One for right clicking:

right click

I chose the pinky to signify a right click and not the middle finger

And one for grabbing things:

imagine really hard that this is a hand grabbing something

imagine really hard that this is a hand grabbing something

If more than one action is possible in the same area with the mouse, things start to get a little complicated. But providing multiple controls on the same object is prone to error and frustration: a square that can be clicked, double clicked and right clicked. We should avoid this kind of solution.

If you feel tempted about animated cursors, please don’t. Repeated animations are sources of irritation, they steal our attention and lose their use after the first time we understand what they mean.

What do you think?

Introducing jQuery Silver

July 10th, 2009 by Filipe Sabella

Adds quicksilver-like search features for links in webpages. Some web applications just have too many menus and sub-menus – instead of threading your way through them, just hit the (customizable) hotkey, type some of the letters of the target link and hit enter.

Demo: http://www.filipesabella.com/jquerysilver/demo.htm
Project page: http://code.google.com/p/jquerysilver/downloads/list
Source code: http://github.com/filipesabella/jquery.silver/tree/master

Features

  • Works with any <a>, <input type="button"/> and <input type="submit"/>
  • Camel case matching of links
  • Optional storing of last accessed items with jquery.cookie
  • Keyboard navigation: arrow keys, <enter> and number keys
  • Supports custom commands, see the demo

Usage

  • import jquery-1.3.2.js
  • import jquery.hotkeys-0.7.9-1.js
  • optionally import jquery.cookie.js to enable last opened items
  • import jquery.silver-1.0.js
  • import jquery.silver.css or custom css
  • include $().silver() or $(‘#menu’).silver() at jquery startup to initialize
  • hit ctrl+shift+space (or shift+space in opera) to show the dialog

Shortcuts

  • <ctrl>+<shift>+<space> by default to show the dialog
  • <esc> to close it
  • Arrow keys for selecting items
  • <enter> to open selected item or first item if none selected
  • number keys to open the respective item
  • ‘:’ to show available commands
  • <tab> to autocomplete commands

1.1 release notes

  • Added support for image links
  • Added support for commands autocomplete
  • Fixed bug when executing an invalid command

About

I have now learned to hate keyboard events incompatibilities.

The first version for FireFox only took four hours of development. Making it work in Opera and Safari took another eight. Not pretty.

You can find the full source at GitHub.

Suggestions and bugs are welcome.