L'ultimo articolo di Digital Web Magazine, The pinball effect, presenta un'interessante idea ovvero l'espandibilità dei link grazie ai CSS, DOM e Javascript. Il concetto alla base è, tradotto dall'introduzione dell'autore, il seguente:
àˆ più semplice e veloce usare un link grande - questo è ovvio. C'è
anche una formula matematica, la legge di Fitts, per calcolare quanto più velocemente. Viene qui presentato un modo semplice per trasformare
un'intera area di una pagina web in un link dal suo interno, espandendo efficacemente
la sua dimensione grazie ai CSS, Javascript e il DOM. L'ho chiamato l'effetto flipper
in quanto il cursore accende varie aree dello schermo quasi come fa una pallina del flipper
in gioco.
Sottile il meccanismo dietro l'esempio dell'articolo, che usa tra l'altro la seconda versione Nifty Corners. Ci sono due div che hanno un link "dominante", inserito nel corrispondente titolo. Questi div sono
in grado di intercettare gli eventi mousover e onclick, così da mostrare un effetto rollover anche all'esterno del link dominante che estende grazie a Javascript l'area cliccabile a tutto il div che contiene il link. Sembra complicato, ma l'esempio potrà chiarire meglio di tante parole.
L'idea di link che si espandono grazie al javascript non è del tutto nuova, ho segnalato in questo post
tempo fa Large clickable boxes as navigation with CSS and DOM di Chris Heilmann che, seppur basata sullo stesso concetto, ha un'applicazione un po' meno generica.
In quanto alla legge di Fitts, ecco alcuni approfondimenti:
- Fitts' Law su Wikipedia;
- Fitts' Law su Usability First;
- Fitts' Law sul sito dell'università della Virginia;
- Fitts' Law di Dave Shea;
- Link presentation and Fitts' Law di Dunstan Orchard.
Infine, tornando al pinball effect, ecco in chiusura tre provocazioni per stimolare la riflessione:
- Tempo fa c'erano i siti "albero di natale" con un sacco di gif animate... dovremo aspettarci i siti "flipper" in futuro?
- Personalmente, mi trovo spesso a selezionare il testo che leggo per aumentarne la leggibilità ... come potrei fare con l'effetto pinball?
- Se l'HTML potesse avere l'elemento
<blocklink>
con un attributohref
che può contenere elementi block-level, inline e anche link tradizionali<a>
(ma non altriblocklink
) non sarebbe necessario forse ricorrere al DOM e credo disporremmo di altri livelli di interazione sulle pagine web.