Progettazione e realizzazione di siti web per...

41
Progettazione e realizzazione di siti web per dispositivi mobili Andrea Crevola [email protected]

Transcript of Progettazione e realizzazione di siti web per...

Page 1: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Progettazione e realizzazione di siti web per dispositivi mobili

Andrea [email protected]

Page 2: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Sommario

� Introduzione alle tematiche del laboratorio� Lo scenario tecnologico� Il modello di fruizione� Le Mobile Web Best Practices (MWBP)

Page 3: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Mobile web

� È comune pensare al web come a un medium fruito attraverso un personal computer.

� L’innovazione digitale sta conducendo tuttavia a una sempre minor identificazione del contenuto con il contenitore.

� Il numero di dispositivi di accesso al web è sempre maggiore e differenziato: telefoni cellulari, PDA, sistemi di gioco portatile e non, TV media center).

� Questa varietà è destinata a crescere e a portare con sé ulteriori elementi di innovazione.

� Accanto a una conoscenza delle caratteristiche tecniche dello scenario attuale è importante acquisire un metodo e un approccio alla progettazione orientato agli utenti e alle loro esigenze.

Page 4: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Ubiquitous computing

� Il mobile web si inserisce in una prospettiva teorica più ampia denominata ubiquitous computing (Mark Weiser).

� Il personal computer dovrebbe mantenere un ruolo specializzato nelle operazioni di programmazione e di pubblicazione delle informazioni, ma la fruizione di contenuti e servizi può essere mediato da altri dispositivi.

� I dispositivi mobili si allineano a questo paradigma portando l’informazione nella realtà, laddove gli utilizzatori ne hanno realmente bisogno.

� Il web ha, in questa prospettiva, un ruolo chiave: per definizione è un sistema aperto e multipiattaforma, vettore ideale di contenuti che non desiderano essere limitati a un’unica piattaforma di consultazione.

� Per maggiori informazioni, si può partire da: http://en.wikipedia.org/wiki/Ubiquitous_computing

Page 5: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Mobile e Web 2.0

� Gli ultimi anni sono stati contraddistinti dal concetto di web 2.0: un web più interattivo, più partecipativo e “maturo”.

� Le sue caratteristiche sono state descritte in un articolo dell’editore Tim O’Reilly:http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

� Il web diventa una piattaforma su cui gli utenti possono condividere e diffondere informazioni con sempre minore difficoltà e limitazioni.

� I dispositivi mobili sono una finestra di accesso a dati e servizi che un tempo erano relegati ad ambienti di fruizione ben precisi e confinati.

� Le attuali tecnologie web consentono di garantire esperienze di fruizione personalizzate in funzione del dispositivo di accesso, a dispetto delle attuali limitazioni hardware e software;

Page 6: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

I dispositivi

� PDA

� Smartphones

� Tablet PC

� Sistemi di gioco (portatile)

Page 7: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

I dispositivi: caratteristiche comuni

� Possibilità di essere a conoscenza della posizione geografica del dispositivo.

� Connettività di rete (wireless e/o a collegamento fisico).� Limitate capacità di calcolo e di memoria (rispetto ad un

PC desktop).� Alimentazione a batteria con possibili criticità sui tempi di

autonomia.� Numerose varianti in termini di piattaforme, componenti

hardware e sofware, interfacce-utente (anche all’interno di una stessa classe di dispositivo).

Page 8: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Input e output

� Alcune risoluzioni frequenti:� 160 x 160 (smartphone)� 240 x 320� 480 x 640� 320 x 480� 320 x 320� 176 x 208� 208x320� 240 x 260� 1400 x 1050 (tablet PC)

� Modalità di input� Tastiere alfanumeriche

� Tastiere QWERTY� Frecce direzionali

� Joystick

� Touch screen� Stili (“pennini”)

Page 9: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Software

� Sistemi operativi� Windows Mobile� Palm OS� Symbian� Linux� Apple Mac OS X (IPhone)

� Browser� Openwave Mobile Browser � Nokia browser � Opera Mobile Browser � Pocket IE � NetFront Browser � Web browser 3.0 (Palm)� Safari (IPhone)

Page 10: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Connettività

� GPRS (General Packet Radio Service): 57.6 Kbit/s in download e di 14.4 Kbit/s in upload.

� UMTS (Universal Mobile TelecommunicationsSystem): 384Kbit/s per la trasmissione di dati in download, paragonabile a una ADSL.

� IEEE 802.11 (Wi-Fi ): velocità fino a 54Mbit/s � IEEE 802.16 (Wi-Max );

� Attenzione : tariffe a tempo Vs tariffe a dati

Page 11: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Il modello di fruizione

� Uno scenario “innovativo” può far porre la concentrazione soprattutto sulla dimensione tecnica che, per molti motivi, tende ad accentrare su di sé l’attenzione.

� La conoscenza del piano tecnico èfondamentale ma presuppone una consapevolezza relativa a come e perché gli utenti accedono al web con i dispositivi mobili.

Page 12: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Caratteristiche dell’accesso all’informazione� Ravvicinato : la distanza dal display è pochi centimetri anziché di alcune decine o

interi metri.

� Individuale , mentre di fronte a uno schermo di PC o a una TV possono sedereanche più persone, tutte coinvolte nell’esperienza di fruizione.

� Seriale : solo pochi browser per device mobili permettono di aprire più di una finestra di navigazione alla volta; nel caso, l’apertura di altri programmi, come l’agenda, causano un radicale spostamento del focus.

� Outdoor : i dispositivi mobili consentono un uso non relegato tra le mura di casa o dell’ufficio, quindi anche in contesti rumorosi e contraddistinti da un illuminazione naturale (quindi ridotta o eccessiva).

� Immersa e condizionata dal contesto : molto spesso il mobile web viene sfruttato per accedere ad informazioni utili per portare a termine azioni della propria vita quotidiana, come organizzare spostamenti, consultare elenchi e directory di risorse ecc.

Page 13: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Scopi / Motivazioni

� Il comportamento di ricerca più frequente è probabilmente la ricerca di “oggetti conosciuti”: l’utente accede al mobile web per recuperare un informazione o di eseguire un’azione che già riesce a definire con precisione e si aspetta di individuare rapidamente le modalità per portare a termine la sua esigenza.

� Solitamente, la ricerca di informazione è legata a necessità legate al contesto fisico in cui l’utente e il suo dispositivo si trovano: per esempio, la ricerca di un orario ferroviario, di informazioni su un evento, del prezzo di un prodotto da acquistare.

� Per questo i molti siti per dispositivi mobili consistono soprattutto directory di link, mini-portali, siti di reference ecc: si privilegia la rapidità di conclusione del task rispetto alla navigazione esplorativa (e senza meta).

� Altro caso d’uso frequente è la ricerca di un aggiornamento informativo rispetto ad azioni precedentemente avviate o argomenti di interesse: per esempio la ricerca di un risultato di un evento sportivo.

� Simili comportamenti sono anche funzione delle condizioni di fruizione, dalle limitazioni ergonomiche, dalle logiche di tariffazione.

Page 14: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Anatomia di un sito mobile

� Un sito web (sia tradizionale sia nato per il mobile web) èinfatti composto da due dimensioni fondamentali: codicee design: � Il primo livello, se sviluppato con le dovute attenzioni, può

adattarsi senza difficoltà allo strumento di consultazione mobile: alle sue capacità di visualizzazione, alle dimensioni dello schermo così come alle modalità di inserimento di input.

� Il secondo, invece, riguarda la gestione dei contenuti, l’organizzazione dell’informazione e la strutturazione delle unitàinformative (pagine), dell’usabilità del sistema e – più in generale – la dimensione comunicativa del sito.

Page 15: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Strategie di progettazione

Due alternative:

� Sito derivato: un’unica realizzazione del sito web e adattamento della versione per PC

� l’utente consulta le medesime pagine (al medesimo indirizzo web) sia che vi acceda tramite un PC desktop sia che stia utilizzando un cellulare o un palmare. Pur non avendo la medesima impaginazione, l’informazione e le funzionalità presenti saranno ugualmente disponibili;

� Sito dedicato: realizzazione della versione di un sito appositamente pensata per il mondo mobile, anche in assenza di una corrisponente versione per compter desktop

� il sito web ha un’identità propria: partendo da un’insieme di materiali già esistenti ma da riorganizzare e revisionare mediante un processo di analisi e progettazione vero e proprio, significa riflettere attentamente sulle esigenze degli utenti, sulle ragioni che li potrebbero spingere ad accedere all’informazione mediante i loro telefoni cellulari e di quali contenuti essi sono alla ricerca

Page 16: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Siti mobili derivati: vantaggi

� Riduzione dei costi di progettazione e di realizzazione: necessario affrontare solo un attiività di ottimizzazione;

� Riduzione dei costi di mantenimento: un’eventuale modifica ai contenuti o ad altri elementi saranno immediatamente disponibilianche per gli utenti di tutti i dispositivi;

� L’idea di un web unico, indipendente dal dispositivo di fruizione, èdel resto la posizione del W3C stesso;

� È decisamente più semplice mantenere un look & feel omogeneo indipendente dal dispositivo utilizzato.

Page 17: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Siti derivati: svantaggi

� Può essere complicato ottenere una versione mobile di buona qualità cercando di adattare un sito che è stato costruito con tecnologie obsolete o deprecate;

� Le tempistiche di adattamento potrebbero essere prolungate, con il rischio di dissipare i vantaggi economici precedentemente illustrati;

� Esiste il rischio di giungere a una visualizzazione che eccede i limiti orizzontali del display dell’utente, rendendo necessario all’utente un fastidioso scorrimento orizzontale per la lettura dei contenuti;

� Se il giudizio sul comportamento delle tecnologie web sulle piattaforme mobili è – nonostante tutto – positivo, altrettanto non si può affermare per quanto concerne l’organizzazione dell’informazione, sia a livello di pagina sia relativamente al sito nel suo complesso: si corre il rischio di fornire pagine troppo ricche di contenuti, che rallentano l’accesso e che complicano l’orientamento all’interno del sito;

� Un’analoga riflessione può valere anche per gli elementi di interattività come i moduli (form), che se su un piano tecnico possono continuare a funzionare, da un punto di vista più operativo possono rivelarsi molto più complessi da utilizzare, dal momento che rispetto ad un personal computer vengono a mancare mouse e tastiera;

� L’utente che ha accesso da un dispositivo mobile potrebbe giungere in pagine che non sono ancora state ottimizzate o che presentano contenuti in formati non ben supportati da tutti i dispositivi (per esempio il PDF), con una conseguente fastidiosa interruzione dell’esperienza d’uso;

� L’utente di riferimento non è sempre altrettanto facilmente derivabile.

Page 18: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Siti dedicati: vantaggi

� preceduto da un’attenta fase di analisi e nasce a seguito di una progettazione centrata sugli utenti, esistono buone probabilità che si pubblichino contenuti e servizi di valore per i propri utenti;

� se si parte da un sito già esistente, la selezione dei contenuti più adatti alla fruizione mobile evita di sovraccaricare l’interfaccia con informazione non pertinente, sovrabbondante e – spesso – indesiderata;

� parimenti, è possibile superare rapidamente le criticità presenti sul sito per PC ed evitare di riproporre anche sul canale mobile le medesime imperfezioni (per esempio un codice HTML non standard o l’uso di formati proprietari);

� si può proporre un’architettura dell’informazione ottimizzata e contenuti pensati specificatamente per una consultazione “nomade”, così come si può costruire il sito attorno ad un’interfaccia-utente che sia capace di semplificare l’interazione a chi dispone di sistemi di puntamento e di immissione del testo meno efficienti di mouse e tastiera;

� si può ottenere un sito più semplice e leggero, rapido da scaricare e da consultare;

Page 19: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Siti dedicati: svantaggi

� trattandosi di un prodotto che possiede una sua autonomia, sono spesso necessari costi di progettazione e di sviluppo extra;

� se il sito viene pubblicato contemporaneamente su più canali (desktop e dispositivi mobili) si può incorrere difficoltà a mantenere aggiornate e consistenti le varie versioni: un problema significativo sia per i contenuti che – in particolar modo – per le funzionalità più interattive.

� la grande variabilità dei dispositivi finali rende difficile la produzione di un interfaccia-utente davvero universale, ossia capace di accontentare i requisiti di tutti i browser e le capacità dei vari devices;

� se ci si orienta anche verso la redazione di contenuti pensati appositamente per l’utenza mobile, si deve essere pronti a vedere quasi raddoppiare il lavoro (e i costi) relativi al content management: dalla redazione dei testi al montaggio audio-video dei contenuti multimediali.

Page 20: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Adattamento

� I lati negativi di entrambi gli approcci possono ricevere un contributo cruciale dalle tecniche di adattamento.

� Contenuti e servizi sono modellati in funzione del dispositivo e del contesto di fruizione finale.

� Tanto più tale processo ètrasparente e tanto meno l’utente deve spendere energie per raggiungere contenuti e servizi adatti al suo dispositivo.

� A tal fine, è necessario che la piattaforma tecnologica diventi più“intelligente”: devono essere a disposizione delle meta-informazioni utili a determinare quali dovranno essere le caratteristiche dell’adattamento stesso

Page 21: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Negoziazione

� Il primo passo per ottenere un processo di adattamento efficace consiste nel riconoscimento da parte del server delle caratteristiche tecniche del dispositivo richiedente.

� La negoziazione può avvenire in quattro modalità:

� l’utente richiede esplicitamente una versione ottimizzata per un dispositivo mobile;

� il browser del dispositivo rappresenta in versione ottimizzata i contenuti inviati in modo identico a tutti i dispositivi;

� Il server riconosce il client sulla base delle informazioni inviate nelle intestazioni HTTP che accompagnano la richiesta della pagina;

� Il server ottiene un profilo completo del dispositivo di accesso grazie a una descrizione formale basata sulle specifiche CC/PP (UAProf e WURFL)

Page 22: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Adattamento e tecnologie web

� Sul piano tecnologico è possibile risolvere il problema dell’adattamento in quattro modi principali:

� rendering del browser (SSR di Opera);� la selezione del CSS (media queries);� l’applicazione delle trasformazioni XSL;� l’impiego di un Content Management

System.

Page 23: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Selezione del CSS

Page 24: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Mobile Web Best Practices

� Le Mobile Web Best Practices (MWBP) sono un insieme di raccomandazioni fornite dal W3C per la costruzione di siti web adatti al web mobile, non solo dal punto di vista tecnico ma anche sotto il profilo dell'esperienza d'uso.

� Prendono in considerazione aspetti quali la gestione della navigazione, la struttura della pagina, il trattamento del dialogo tra l'applicazione e l'utente nonché alcune dimensioni più strettamente tecniche legate alla trasmissione dell'informazione verso i dispositivi mobili.

� Se, da un lato, alcune caratteristiche tecniche di questo ambito potranno cambiare ed evolversi (ad esempio le dimensioni degli schermi diconsultazione potrebbero aumentare o avere maggiori performance), dall'altro si assume che alcune problematiche, come per esempio l'input di dati, resteranno costanti nel tempo.

Page 25: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: struttura

� Introduzione alle problematiche del mobile web.� One web.� Contesto di distribuzione finale e adattamento.� Best practices:

1. Comportamento generale;2. Navigazione e link;3. Layout di pagina e contenuti;4. Elementi della pagina;5. Input dell’utente

Page 26: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: comportamento generale

� Consistenza tematica : assicurarsi che il contenuto accessibile da una URL offra un’esperienza coerente qualora sia fruita da dispositivi differenti;

� Sfruttare le capacità del dispositivo: l’autore della pagina dovrebbe cercare di offrire un’esperienza d’uso accresciuta su quei dispositivi dalle potenzialità maggiori (e non limitarsi al minimo comune denominatore): progressive enhancement.

� Risolvere le deficienze delle attuali implementazio ni: l’autore della pagina dovrebbe cercare di risolvere i problemi legati alle attuali implementazioni delle tecnologie web da parte dei browser per dispositivi mobili (“work around” Vs “Hack”).

� Test delle pagine: è essenziale condurre dei test di resa della pagine sia sui dispositivi effettivi sia mediante degli emulatori.

Page 27: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: navigazione e link (1)

� Usare URL di ingresso brevi.� Fornire una barra di navigazione minimale all’inizi o della pagina, in

modo che sia visibile immediatamente e senza la necessità di scorrere la pagina; se si vuole usare una navigazione secondaria, la si può mettere a fondo pagina (ma solo se necessaria).

� Bilanciamento ampiezza / profondità dell’ipertesto: si valuti l’opportunitàdi “appiattire” la struttura del sito al fine di diminuire il numero di linknecessari per raggiungere una data pagina.

� Meccanismi di navigazione consistenti: un sistema di navigazione costante permette all’utente di orientarsi meglio in un sistema informativo.

� Tasti di accesso rapido ( access keys): associare un tasto di accesso rapido (con l’attributo XHML accesskey=“1”) alle opzioni di navigazione piùfrequenti può aumentare la velocità di interazione.

Page 28: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: navigazione e link (1)

� Chiarire la destinazione dei link: ogni collegamento dovrebbe aiutare l’utente a capire quale sarà il contenuto e il formato della destinazione.

� Evitare le immagini-mappa: sono inutilizzabili per molti dispositivi che non possiedono sistemi di puntamento diretto (se si desidera usarle, fornire un equivalente testuale: per esempio una lista di link).

� Evitare le finestre pop-up ed evitare di aprire altr e finestre senza aver avvisato l’utente.

� Evitare pagine che si aggiornano in modo automatico (a meno che non abbiate avvisato l’utente e non forniate un meccanismo per interrompere il caricamento).

� Evitare i reindirizzamenti automatici: possono disorientare l’utente e rallentano la connessione con le risorse remote.

� Minimizzare il numero di risorse incorporate nella pagina (CSS, immagini ecc.): ogni risorsa, infatti, corrisponde a una diversa richiesta HTTP che può rendere più lento l’accesso all’informazione.

Page 29: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: navigazione e link (2)

� Chiarire la destinazione dei link: ogni collegamento dovrebbe aiutare l’utente a capire quale sarà il contenuto e il formato della destinazione.

� Evitare le immagini-mappa: sono inutilizzabili per molti dispositivi che non possiedono sistemi di puntamento diretto (se si desidera usarle, fornire un equivalente testuale: per esempio una lista di link).

� Evitare le finestre pop-up ed evitare di aprire altr e finestre senza aver avvisato l’utente.

� Evitare pagine che si aggiornano in modo automatico (a meno che non abbiate avvisato l’utente e non forniate un meccanismo per interrompere il caricamento).

� Evitare i reindirizzamenti automatici: possono disorientare l’utente e rallentano la connessione con le risorse remote.

� Minimizzare il numero di risorse incorporate nella pagina (CSS, immagini ecc.): ogni risorsa, infatti, corrisponde a una diversa richiesta HTTP che può rendere più lento l’accesso all’informazione.

Page 30: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Layout di pagina e contenuti (1)

� Contenuti:�Assicurarsi che i contenuti siano adatti a

un “contesto mobile”;�Usare un linguaggio chiaro e semplice;�Limitarsi a ciò che l’utente ha richiesto: è

opportuno evitare l’invio di risorse non cercate dall’utente, il quale può addirittura vivere con fastidio tale presenza.

Page 31: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Layout di pagina e contenuti (2)

� Dimensione delle pagine� Dividere le pagine in porzioni più limitate e

maneggevoli;� Assicurarsi che la dimensione totale delle pagine

sia appropriata alle capacità di memoria del dispositivo (il calcolo comprende anche immagini e CSS!).

� Scorrimento delle pagine:� Limitare lo scorrimento in una sola direzione , a

meno che lo scorrimento secondario non sia evitabile.

Page 32: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Layout di pagina e contenuti (3)

� Stabilire una buona gerarchia dell’informazione: assicurarsi che gli elementi centrali per il significato della pagina precedano quelli che non sono necessari.

� Uso degli elementi grafici:� Non usare elementi grafici per ottenere effetti di spaz iatura;� Non utilizzare immagini che non possono essere

visualizzate dal dispositivo (per formato o dimensione);� Si evitino immagini ad alta risoluzione a meno che non

siano centrali per veicolare il significato della pag ina.

Page 33: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Layout di pagina e contenuti (4)

� Colore:� Assicurarsi che il colore non sia l’unico metodo

per veicolare un’informazione (cfr. WCAG);� Utilizzare un sufficiente contrasto tra gli element i

in primo piano e lo sfondo (cfr. WCAG);

� Immagini di background: se si usano immagini di sfondo assicurarsi che il contenuto resti leggibile sul dispositivo;

Page 34: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: elementi della pagina (1)

� Titoli : fornire titoli (<title>) di pagina brevi ma descrittivi.

� Frames : non usare i frames.

� Markup strutturale : usare le caratteristiche semantiche del markup per dare una struttura logica al documento.

� Tabelle :� Non utilizzare tabelle a meno che non si sia certi che il device le supporti;� Se le supporta, non usare tabelle annidate;� Se le supporta, non usare tabelle di layout ma solo per dati di natura tabellare

(es. dati statistici);� Se le supporta, ove possibile, fornire una presentazione alternativa non basata

su tabelle;

Page 35: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: elementi della pagina (2)

� Elementi non testuali:� Fornire un equivalente testuale per ogni elemento non testuale (immagini, video,

audio ecc);� Non affidarsi a oggetti incorporati (es. applet Java o animazioni Flash) o a script;

� Dimensione delle immagini:� Specificare le dimensioni delle immagini nel codice di marcatura, in modo tale

che sia agevolato il rendering del browser;� Effettuare il ridimensionamento delle immagini lato server, per massimizzare

l’efficienza della comunicazione tra client e server;

� Markup valido: creare pagine valide rispetto alle grammatiche formali (in alternativa la presentazione finale potrebbe essere difficile da controllare);

Page 36: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: elementi della pagina (3)

� Unità di misura: non usare i pixel né unità di misura assolute (es. pto mm), ma fare affidamento a unità di misura relative (percentuali, ems, parole chiave) sia nel markup che nel CSS;

� Fogli di stile:� Usare i fogli di stile per controllare il layout e la presentazione, a meno

che il device non li supporti;� Organizzare i contenuti in modo tale che possano essere letti anche in

assenza di foglio di stile;� Mantenere i fogli di stile di dimensioni ridotte;

� Minimizzare : scegliere soluzioni di markup leggere e poco intricate (pro efficienza)

Page 37: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: elementi della pagina (4)

� Content types: � assicurarsi che il server invi le pagine al client in un formato che si conosce

come supportato dal dispositivo;� Laddove possibile, inviare i documenti in un formato preferito dall’utente.

� Codifica dei contenuti:� Assicurarsi che il contenuto sia codificato secondo un set di caratteri

riconoscibile da parte del dispositivo;� Indicare nella risposta HTTP la codifica del carattere da utilizzare (es. Content-

Type: text/html; charset=utf-8);

� Messaggi di errore: fornire all’utente messaggi di errore ad alto contenuto informativo nonché modalità per allontanarsi da una situazione di errore in direzione di informazione più utile.

Page 38: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: elementi della pagina (5)

� Cookie: non fare affidamento sui cookie per memorizzare informazioni in modo persistente (meglio utilizzare sempre tecnologie lato server).

� Sfruttare la memoria cache dei dispositivi mediante le opportune intestazioni HTTP di risposta;

� Font : non fare affidamento su tipologie di caratteri (font) che potrebbero non essere supportate dai dispositivi;

Page 39: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Input degli utenti (1)

� Input:� Minimizzare il più possibile il numero di passaggi in

cui è richiesto l’input dell’utente (inserimento di testo, selezione di link ecc);

� Evitare il più possibile l’inserimento di testo libero (preferire la selezione tra opzioni predefinite);

� Offrire valori pre-selezionati di default, se possibile;� Specificare una modalità di default per l’inserimento

di testo, per il linguaggio e per il formato di input (es. per le date);

Page 40: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

MBWP: Input degli utenti (2)

� Ordine di tabulazione: assicurarsi che esista un ordine logico tra link, elementi delle form e oggetti interattivi (per esempio sfruttando l’attributo tabindex, se supportato);

� Etichette per i campi delle form: � Ogni elemento di una form dovrebbe essere accompagnato da

un etichetta opportunamente marcata con il tag <label>;� Posizionare le etichette testuali in modo che sia evidente la

relazione con il campo a cui fanno riferimento.

Page 41: Progettazione e realizzazione di siti web per …lau.csi.it/progettare/usabilita/progettazione_utente...I dispositivi mobili si allineano a questo paradigma portando l’informazione

Riferimenti

� W3C, “Mobile Web Best Practices 1.0”, 2006(http://www.w3.org/TR/mobile-bp/)

� Crevola A., “Guida siti per dispositivi mobili”, 2005 (http://mobile.html.it/guide/leggi/29/guida-siti-per-dispositivi-mobili/)

� Crevola A., “Mobile Web Best Practices 1.0”, 2006 (http://mobile.html.it/articoli/leggi/1647/mobile-web-best-practices-10/)

� Etemad E., Newth J.D., “Pocket-Sized Design: Taking Your Website to the Small Screen”, 2004http://www.alistapart.com/articles/pocket/

� Morville P., “Ambient Findability”, O’Reilly 2006

� Altri link utili http://del.icio.us/acrevola/labScidecom