Cursors
Ten drawings on one idea, a reading desk. Eight states in use, one drawn and switched off, one cut.
Hover the hatched strip in any card to try that cursor for real, and hold the mouse down on one to see the pressed frame. Each is shown big so you can tell what it is, and at 32 pixels on both backgrounds, which is the only size it is ever actually used at. 1
In use
Eight states, applied across the rest of the prototype.
default
hotspot 3 2 · bookmark.svg
actual size
Where everything. Set once on body and inherited.
Why a bookmark is already the shape of a cursor once you tip it over. The swallowtail notch says bookmark, the point still lands where an arrow point belongs, so it is a joke you can still aim with.
pointer
hotspot 4 3 · open-book.svg
actual size
Where links, buttons, labels, checkboxes, the select menu.
Why the first version was a symmetric open book and it had no point at all, so nothing told you where the click would land. Now a page is caught halfway through turning and its lifted corner is the point.
a:active
hotspot 4 3 · open-book-press.svg
actual size
Where the same things, while the mouse is held down.
Why the page lands and the next one starts to lift. Together with the frame above that is the page turn, driven by the mouse instead of a timeline. 2
text
hotspot 6 28 · pencil.svg
actual size
Where the text and email boxes on the sign up, search and add a book forms.
Why the graphite tip is the hotspot, so the pencil point is literally the caret. It leans up and right because what you have typed sits to the left, and a pencil leaning the other way would cover it.
help
hotspot 3 2 · bookmark-help.svg
actual size
Where the numbered dots on every page.
Why the dots explain rather than navigate, and help is the state that means exactly that. The same bookmark as default with a badge, which is how help cursors have worked since the nineties.
not-allowed
hotspot 16 16 · book-no.svg
actual size
Where the four links in the prototype that go nowhere on purpose.
Why a shut book behind a strike through. Everything else in the set is a book you can do something with, so a book you cannot open is the obvious opposite.
grab
hotspot 16 16 · book-loose.svg
actual size
Where the distance slider on the search page.
Why three spines on a shelf with the middle one tipped forward, which is what you do to a book a second before you pull it out. The slider is the one thing in the prototype you actually drag. 3
grabbing
hotspot 16 16 · book-held.svg
actual size
Where the same slider, while you are dragging it.
Why the same shelf with the book out and a gap where it was. The gap carries the meaning, so it is wide and the book is lifted clear. An earlier version read as a seesaw.
Drawn, specified, switched off
One state left with nothing honest to attach it to. 4
progress
hotspot 16 16 · book-stack.svg
actual size
Where nothing. No page here is slow enough to need it.
Why a pile waiting to be shelved. It had to mean waiting without moving, since cursors cannot animate, so a spinner was never on the table.
Cut
pointer, badged
open-book-alert.svg
actual size
The pointer with a badge, to say out loud that none of these links do anything. A good drawing of the wrong idea. 5
Every other cursor value, and why it is not here
CSS has about thirty five of these. Most describe things this product does not do. 6
| value | here? | why |
|---|---|---|
default | used | the body cursor |
pointer | used | links, buttons, labels, checkboxes, select |
pointer, held | used | through :active, the second frame of the page turn |
text | used | the form fields |
help | used | the numbered dots |
not-allowed | used | the four links that go nowhere |
progress | drawn, off | nothing here is slow |
wait | no | same as progress, and nothing ever blocks the whole page |
grab | used | the distance slider, through its track and thumb pseudo elements |
grabbing | used | the same slider while you drag it |
zoom-in, zoom-out | no | the map is a flat picture and does not zoom |
move | no | nothing can be repositioned |
copy, alias, no-drop | no | there is no drag and drop anywhere in the product |
crosshair | no | no canvas, no plotting, nothing to aim at precisely |
cell | no | the inventory is a table to read, not a spreadsheet to select ranges in |
vertical-text | no | no vertical writing mode |
context-menu | no | no custom right click menus |
all-scroll | no | no pannable surface |
the 13 resize values | no | nothing is resizable. col-resize and row-resize would need a table you can drag the edges of |
none | no | deliberately. hiding the cursor on a page full of links would be hostile |
auto | no | replaced by default on body, which is what makes the set possible |
One side effect worth naming. Setting default on
body means paragraphs get the bookmark rather than the
I beam a browser would normally show over selectable text.
7
Three rules the drawings had to obey
32 by 32, and not a pixel more. Browsers cap cursors there and ignore anything bigger instead of scaling it down, so a 64 pixel drawing does not appear at all. Drawing at final size kills any detail thinner than about two pixels. The open book lost its page curl and the bookmark lost its stitching, and both got better.
Pale body, dark outline. The curator side has a near black nav and the public side is cream. My first bookmark was solid ink and vanished into that bar, leaving only its halo behind. Every glyph is now drawn twice, a fat white stroke underneath and the real thing on top. That is why system cursors have looked like this since 1984. 8
They cannot animate. A cursor image is rasterised once and anything moving inside it is ignored, so a flipping page had to become two frames the user drives. Progress had the same problem and became a pile of books that are simply not shelved yet.
Safari
Safari ignores SVG cursors completely. Every declaration names an ordinary keyword after the file, so Safari falls back to its own arrow, hand and I beam and nothing breaks. 9
Ten files in images/cursors/, wired up near the
bottom of css/prototype.css.