L'uso delle immagini nei siti web

In cima all'home page campeggia una fascia variopinta — ricca di informazioni utilissime e interessanti — che ha tutto l'aspetto di uno di quei banner pubblicitari che infestano i quotidiani italiani. La noti e ne leggi il contenuto o hai il riflesso condizionato di escluderla  completamente dalla tua attenzione, esattamente come fai sul sito di un giornale?

I siti web sono pieni di immagini puramente decorative che non forniscono informazioni utili, quando non sono controproducenti

Le immagini devono essere illustrazioni, non decorazioni

E ovviamente mentre illustrano, forniscono alla pagina e al sito anche quella componente di decorazione che nella maggioranza dei casi è opportuna.

Ogni sito web ha le sue specifiche esigenze riguardo le immagini: questo sito che stai visitando ha necessità diverse rispetto al sito di una raffinata trattoria di campagna ed il sito di quest'ultima non potrà di certo assomigliare a quello multilingue di un'industria meccanica di precisione, con filiali in mezzo mondo e clientela internazionale.

Consideriamo due tipologie specifiche di immagini:

• Immagini inserite nelle parti di contorno della pagina, cioè nella fascia alta e nelle barre laterali, a volte anche nel piè di pagina;
• Immagini che si riferiscono specificamente al contenuto testuale della pagina: ad esempio, le fotografie di un particolare prodotto industriale a cui la pagina è dedicata o le foto di un albergo proposto da un'agenzia di viaggi.

Immagini di contorno

Tutti gli studi sull'usabilità dei siti web — in fondo alla pagina troverai alcuni link utili — dimostrano che gli utenti di un sito o non le notano nemmeno o ne vengono disturbati. Non ti sto dicendo di non metterne, ti sto dicendo di usare estrema attenzione nel farlo.

Per questo mio sito ho completamente evitato di usarne: non aggiungerebbero nulla a quanto puoi leggere in queste pagine; oltretutto queste sono pagine lunghe, dopo un paio di colpetti alla rotellina del mouse spariscono sia la fascia di navigazione superiore sia la barra di navigazione laterale.

È vero che vedresti le immagini all'apertura della pagina ma, se sei alla tua prima visita su questo sito, non voglio rischiare di distrarti dal significato dei link interni che ti propongo — potrebbe non essere questa la pagina con i contenuti che ti servono, ma una delle altre forse sì — se, invece, stai già navigando su questo sito, perché lo trovi utile ed interessante, finiresti col non notarle in maniera cosciente ma, comunque, esse assorbirebbero parte della tua attenzione, cosa che voglio evitare accuratamente.

Il sito della raffinata trattoria di campagna ha sicuramente bisogno di immagini di contorno sia perché indubbiamente sono molto utili ai fini della comunicazione, sia perché l'utente tipico di un sito del genere se le aspetta. Allora immagini accuratamente scelte ed adattate all'uso sul web, che non sovrastino i contenuti della pagina rendendoli difficili da recepire, sono opportune.

In ogni caso queste immagini non devono interferire con l'immediata comprensibilità delle barre di navigazione; è vero che in un sito di questo tipo gli strumenti di navigazione sono molto semplici, ma non si può di certo correre il rischio che il link alla pagina contatti — quella che serve ai visitatori per prenotare una cena — sia occultato dal faccione sorridente del cuoco.

Se, invece, devi occuparti del sito di un'industria meccanica di precisione o di un'azienda con problemi analoghi, posso solo ricordarti quanto solitamente trovi scomodo navigare sui siti che non vanno diritti al punto che ti serve.

Posso solo consigliarti di rendere il tuo sito sobrio come quelli che trovi facile usare, semplici da navigare e senza inutili orpelli che confondono le idee.

Immagini nel contenuto delle pagine

Se partiamo dalla considerazione che le immagini devono essere illustrazioni, cioè la documentazione iconografica del testo contenuto nella pagina, allora se ne possono mettere — se ne devono mettere — quante ne servono, però non più di quante ne servono.

Arrivati a questo punto della pagina posso dirti che quel "Il minimo strettamente indispensabile basta e avanza"  era un po' esagerato: serviva ad attirare la tua attenzione sugli ottimi cattivi esempi sottostanti e ad enfatizzare i danni che subisce l'usabilità di un sito dalla decorazione inutile.

Tieni però ben presente che è il testo che effettivamente comunica le informazioni necessarie agli utenti del tuo sito e, soprattutto, che è il testo che viene indicizzato dai motori di ricerca e consente ai navigatori di rintracciare le tue pagine: le immagini non vengono indicizzate in alcun modo anche se contengono scritte e descrizioni.

Ogni sito web ha le sue specifiche esigenze, in linea generale posso darti questi consigli:

• Non esagerare: ho scritto che si devono mettere quante immagini servono, non quante sono disponibili sul DVD Rom che ti ha dato il fotografo.
• Verifica con la massima attenzione che le immagini siano realmente coerenti con il contenuto e il significato della pagina.
• Usa immagini di buona qualità: piuttosto che inserire una foto sfocata e sovraesposta non mettere niente.
• Non usare immagini troppo grandi rispetto alle dimensioni della pagina, ci sono ottimi motivi:
  • Le immagini grandi sono lente da scaricare, se la pagina ne contiene molte rischia di aprirsi in un tempo eccessivo per la pazienza dei visitatori del tuo sito.
  • Un'immagine che riempie quasi completamente il monitor rischia di distrarre il visitatore dal resto dei contenuti della pagina e un visitatore distratto è un visitatore che se ne va e non torna più. Molto dipende da ciò di cui parla il tuo sito web: se vendi canoe avrai problemi di impaginazione diversi da quelli di chi vende pali della luce.
  • Usa piuttosto immagini in formato ridotto, dando la possibilità all'utente di visualizzarle ad alta risoluzione.
• Se le immagini sono illustrazioni, allora richiedono una didascalia. Anzi, affermo con energia che in molti casi l'utilità di un'immagine è proprio data dalla didascalia che la descrive: l'immagine attira l'attenzione sul testo esplicativo che potrebbe essere poco evidente se inserito nel flusso della pagina.
• Usa immagini oneste. Voglio dire: non pescare in rete "qualcosa che ci stia bene", usa realmente le tue immagini e se proprio non ne disponi — ad esempio ti manca lo splendido paesaggio collinare al tramonto che si vede dalla raffinata trattoria di campagna — e devi usare le foto di altri, chiedi prima il permesso, perché si tratta di opere dell'ingegno protette da copyright.

Documentazione esterna

Come promesso, ti inserisco i link ad alcune pagine sui siti dei massimi esperti mondiali sull'usabilità dei siti web.

Jakob Nielsen

Il suo sito è  Nielsen Norman Group

• Banner Blindness: Old and New Findings: tratta dell'istintivo rifiuto di posare gli occhi su qualsiasi parte di una pagina web che abbia l'apparenza di un banner pubblicitario.

Gerry McGovern

Il suo sito è Gerry McGovern

• Text is more important than images on the Web
• Are marketing images damaging your website?

Non credo proprio di dover tradurre i titoli ed il secondo lavoro conferma i motivi per cui non ho messo alcun genere di immagine decorativa in questo sito.

---

Se hai trovato utile questa pagina, potrebbero interessarti anche:

• Il Responsive Web Design
• Estetica, usabilità e accessibilità dei siti web
• Creare un'home page efficace per il tuo sito
• A chi serve un sito web fatto con Flash
• Bibliografia (molto) ragionata

Se desideri essere informato sulla pubblicazione di nuovi capitoli, puoi iscriverti alla newsletter, sarai sempre libero di cancellarti dalla mailing-list se quanto scrivo non ti piacerà.