Sunday, December 31, 2017

Better UX via the Mouse Pointer

That arrow is the mouse pointer making the entire area clickable.


Paul Fitts was an Air Force officer who, during the 1950s, developed models of human movements that are now primarily used in human-computer interactions and aviation.

This is CNN

This morning, I was on looking at a photo gallery when I noticed that my mouse pointer had changed from its typical pointer to a thin arrow. Depending on which half of the screen I moused over, the arrow either pointed to the right (indicating that I could click to go to the next photo) or left (previous). 

I haven't seen a lot of good use cases for changing the mouse pointer icon via CSS (HTML). Up until now, the best one I've seen is of a hand "grabbing" to indicate that a UI element is draggable.

The beauty of CNN changing the mouse pointer is it makes the entire image, and the area around it, a target without adding a new UI element. A large target, nearby, is one key to good UX. It's what makes the corner pixels on macOS such a great target since the corner pixels effectively have dimensions that are infinite in length. This is why the screen corners are commonly used as a quick way to invoke the screen saver and lock your computer.

No comments: