Progettazione web e fruibilità – prima parte

Fruire i contenuti su più dispositivi

Il concetto di fruibilità viene definito come la “caratteristica dei servizi di rispondere a criteri di facilità e semplicità d’uso, di efficienza, di rispondenza alle esigenze dell’utente, di gradevolezza e di soddisfazione nell’uso del prodotto” ( vedi legge 04/2004 ).

Secondo tale definizione una pagine web fruibile è:

• Possiede un interfaccia di navigazione semplice ed efficiente
• Restituisce un’esperienza soddisfacente
• Risponde alle esigenze informative del’utente

Lo scopo di questo articolo è di esprimere alcune considerazioni circa la fruibilità delle pagine web visualizzate su media differenti; su quali siano gli aspetti da considerare in fase di progettazione in modo da preservare la qualità del proprio layout e la fruibilità dei contenuti.

Il formato nella progettazione

Nella progettazione cartacea la scelta del formato è un aspetto importante che vincola gli step successivi e l’aspetto generare che il progetto assumerà. Per formato si intende la dimensione e le proporzioni del “supporto” da adottare nella realizzazione di un progetto.

Questa scelta è dettata da:

• natura e funzione della comunicazione
• vincoli tecnici legati al supporto e alle sue modalità produttive
• aspetti economici

Nel webdesign la “scelta del formato” è limitata “alla fonte” dalla dimensione dello schermo che dovrà visualizzare il progetto. La risoluzione di chi fruisce il sito web è ovviamente variabile e rende difficile per il designer proporre un esperienza uniforme a tutti gli utenti.

Oltre alla risoluzione video, di cui parleremo fra poco, si deve fare i conti con la convenzione consolidata secondo la quale la pagina web debba estendere i propri contenuti verso il basso, assumendo di fatto un formato verticale che può essere o meno estremizzato in base al tipo di progetto su cui stiamo lavorando.

In base al tipo di effetto che si intende realizzare si preferirà estremizzare la verticalità del layout oppure delocalizarlo a sinistra o a destra o ancora sfruttare tutto lo spazio disponibile magari adottando un layout fluido.

La risoluzione video

Come si può vedere da questi dati la risoluzione media di visualizzazione delle pagine è ormai assestata a 1024×768 (fonte: W3Counter). Tuttavia, con il diffondersi di dispositivi alternativi al canonico binomio desktop/laptop e il consolidarsi di tecnologie delle reti wi-fi e wimax, queste percentuali sono destinate a cambiare.

Ad oggi ci troviamo ad affrontare sostanzialmente 3 grandi gruppi di dispositivi:

• Subnetbook, portatili e sistemi desktop
• Cellulari, smarthphone e palmari
• Console e sistemi TV

I CSS e l’attributo media

Fortunatamente l’uso consapevole dell’attributo media ci permette di ottenere un certo controllo nella visualizzazione del nostro sito web.

Grazie all’attributo media possiamo servire un css specifico ad ognuno di questi gruppi. L’attributo media può accompagnare sia l’elemento <link> che l’elemento <style>.

<link type=”text/css” media=”handheld” href=”style.css” />

<style type=”text/css” media=”handheld”>
…
</style>

Il valori possibili per l’attributo media sono:

• all si applica a tutti i dispositivi di visualizzazione (comportamento di default).
• screen usato per la visualizzazione sui normali browser web.
• tv usato per la visualizzazione su schermi tv.
• handheld. usato per i palmari.
• print applicato nella stampa della pagina.
• projection usato nella visualizzaizone via proiettore.
• aural usato per i dispositivi a sintesi vocale.
• braille usato per supporti basati su braille.
• embossed. per stampanti braille.

Tuttavia per garantire l’accessibilità dei dati e l’usabilità dell’interfaccia è necessario prendere alcune precauzione nella strutturazione del nostro layout

Linee guida comuni

Se ieri le linee guida per l’accessibilità erano fondamentali per permettere agli utenti diversamente abili di accedere alle informazioni, oggi divengono doppiamente importanti perché assicurano ad una fascia sempre più ampia navigatori di accedere facilmente ai medesimi contenuti.

Contenuti ben strutturati

Preservare una buona esperienza per l’utente significa anche strutturare efficacemente i contenuti di ogni pagina. Questo diviene particolarmente importante quando ogni attività comporta uno sforzo o un costo rilevante. Chi ha provato a navigare il proprio blog con un cellulare può capire quanto diventi complicato effettuare anche le più semplici operazioni di routine come inserire un commento o passare da un post all’altro.

Ad esempio chi accede ad un contenuto tramite palmare o smarthphone apprezzerà enormemente la presenza di:

• link di navigazione locale come “vai ai contenuti”, “vai al menù pricipale” ecc.
• quicklink diretti alle azioni più comuni come ad esempio torna all’homepage, torna alla categoria, vai al prossimo articolo, salva nei bookmarks ecc.
• link a contenuti correlati interni
• link a contenuti correlati esterni
• accesso facilitato alle forme di interazione