Usabilità nella stampa delle pagine web a cura di Lorenzo Ciglioni

Estendere la user experience oltre il web

Siamo abituati a pensare alla user experience nei termini della relazione tra uomo e macchina che si sviluppa durante l’utilizzo di un sistema da parte di un utente. Questo è certamente vero, ma a guardar bene dal punto di vista dell’utente dobbiamo affermare che la vera relazione è quella che si crea tra persona e contenuti.

In questo paradigma l’interfaccia web va intesa come “uno” dei medium attraverso i quali l’utente fa esperienza dei contenuti, ma non l’unico. Un altro, non meno strategico, è quello della stampa: la fruizione dei contenuti da parte dell’utente dopo aver trasferito su carta i contenuti visualizzati a video fino a qualche istante prima.

Nonostante scambiare link al posto di documenti cartacei sia ormai una pratica comune, le ragioni per stampare una pagina web sono ancora numerose. Provo ad elencarne alcune: far conoscere i contenuti a qualcuno che, incredibile ma vero, non ha dimestichezza col web (nostra mamma, il nostro capo, ecc.); scrivere note, scarabocchiare idee, annotare commenti a bordo pagina; continuare a leggere anche quando non si è connessi (in viaggio, ecc.); distribuire un articolo durante una riunione; evitare di stancare gli occhi leggendo direttamente a video.

In un certo senso, quindi, stampare una pagina web significa estendere l’esperienza utente oltre il web stesso. Pensare le pagine di un sito web come un’esperienza (anche) stampabile significa, una volta di più, mettere l’utente al centro dell’esperienza di fruizione dei contenuti.

Stampa e pseudo-stampa

A questo punto è opportuno precisare cosa significhi stampare una pagina web. Oltre alla stampa “classica” vera e propria, infatti, gli utenti hanno a disposizione un’opzione, per così dire, ibrida: salvare la pagina web come PDF. Si tratta di una soluzione intermedia, una pseudo-stampa che combina digitale e cartaceo.

I PDF destinati ad essere letti a video, e ancor di più quelli che potrebbero finire per essere letti su dispositivi portatili con schermi di dimensioni ridotte (smartphone, palmari, ecc.) richiedono un trattamento specifico per i font.

In questa sede darò per scontato che i PDF prodotti “stampando” una pagina sono destinati comunque ad essere stampati su supporto cartaceo, in formato A4. Come esempio utilizzerò proprio un articolo tratto da UXmagazine.it,  “Usabilità per la TV interattiva”, scelto casualmente tra quelli pubblicati di recente.

Problemi di usabilità nella stampa

Ogni progetto è caratterizzato da esigenze specifiche, rispetto alle quali è necessario calibrare le scelte relative alla stampa delle pagine, ma è comunque possibile tracciare alcune linee guida di cui tenere conto durante la scrittura del Foglio di Stile (CSS) attraverso il quale si gestisce l’output di stampa:

1. Stampare soltanto gli elementi della pagina rilevanti ai fini della lettura dell’articolo;
2. Impostare il corpo principale dei caratteri come minimo a 12pt;
3. Evitare grandi porzioni di testo in lettere maiuscole;
4. Usare il bianco come colore di di sfondo della pagina, per risparmiare inchiostro;
5. Giustificare a sinistra il testo dei paragrafi;
6. Distanziare i paragrafi uno dall’altro utilizzando una riga vuota;
7. Non sottolineare i link, per non comprometterne la leggibilità;
8. Lasciare un margine ai bordi dell’area stampata;

Elementi della pagina da stampare

Così come nell’esperienza a video sono fondamentali gli elementi di interazione per la navigazione e la fruizione dei contenuti, nell’esperienza su carta questi ultimi diventano irrilevanti. Perciò sia il menu principale che i link nella colonna di destra possono essere nascosti per lasciare spazio ai contenuti veri e propri dell’articolo.

Dividendo l’articolo in tre macro zone (Top, Bottom, Footer) ecco una rappresentazione visiva delle aree interessanti da stampare e quali, invece, dovrebbero essere nascoste dal Foglio di Stile.

Le immagini riportate di seguito mostrano gli elementi da nascondere (mascherati in giallo) nelle tre zone Top, Bottom e Footer.

Ottimizzare la visualizzazione degli elementi della pagina

Dopo aver scelto gli elementi della pagina da stampare è opportuno ottimizzarne la visualizzazione in funzione del medium cartaceo.

Una volta impostato il margine del foglio, funzionale sia al layout che all’annotazione di eventuali appunti a bordo pagina, i contenuti possono occupare tutta la larghezza a disposizione.

Gli URL, visualizzati a fianco dei link stessi, dovranno essere facilmente distinguibili dal resto del testo per non interrompere il flusso della lettura.

Tutte le informazioni aggiuntive sull’articolo (tag, data di pubblicazione) potranno essere raccolti a piè di pagina, immediatamente prima delle note di copyright.

Un nuovo CSS di stampa per UXmagazine.it

Da oggi la user experience di UXmagazine.it si arricchisce di una stampa su carta pratica ed efficiente, direttamente dalle sue pagine web. Per questo articolo ho progettato un nuovo CSS di stampa con l’obiettivo di ottenere un’impaginazione funzionale ed “ecologica”:

• riduzione del 45% del numero di pagine stampate (da 9 a 5)

• comfort di lettura migliorato (contrasto testo-sfondo, colore di link e URL differenziato)

• riferimenti essenziali al sito web (URL per link, immagini, autore, tag)

Buona stampa e buona lettura!

Tags: CSS, stampa, user experience