Progettazione e realizzazione di siti web per dispositivi mobili. Andrea Crevola andrea.crevola@3juice.com

Transcript

1 Progettazione e realizzazione di siti web per dispositivi mobili Andrea Crevola andrea.crevola@3juice.com

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

3 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.

4 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:

5 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: 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;

6 I dispositivi PDA Smartphones Tablet PC Sistemi di gioco (portatile)

7 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).

8 Input e output Alcune risoluzioni frequenti: 160 x 160 (smartphone) 240 x x x x x x x x 1050 (tablet PC) Modalità di input Tastiere alfanumeriche Tastiere QWERTY Frecce direzionali Joystick Touch screen Stili ( pennini )

9 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)

10 Connettività GPRS (General Packet Radio Service): 57.6 Kbit/s in download e di 14.4 Kbit/s in upload. UMTS (Universal Mobile Telecommunications System): 384Kbit/s per la trasmissione di dati in download, paragonabile a una ADSL. IEEE (Wi-Fi): velocità fino a 54Mbit/s IEEE (Wi-Max); Attenzione: tariffe a tempo Vs tariffe a dati

11 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.

12 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 sedere anche 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.

13 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.

14 Anatomia di un sito mobile Un sito web (sia tradizionale sia nato per il mobile web) è infatti composto da due dimensioni fondamentali: codice e 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.

15 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

16 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 disponibili anche 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.

17 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.

18 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;

19 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.

20 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 metainformazioni utili a determinare quali dovranno essere le caratteristiche dell adattamento stesso

21 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)

22 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.

23 Selezione del CSS

24 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 di consultazione potrebbero aumentare o avere maggiori performance), dall'altro si assume che alcune problematiche, come per esempio l'input di dati, resteranno costanti nel tempo.

25 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

26 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 implementazioni: 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.

27 MBWP: navigazione e link (1) Usare URL di ingresso brevi. Fornire una barra di navigazione minimale all inizio 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 link necessari 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.

28 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 altre 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.

29 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 altre 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.

30 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.

31 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.

32 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 spaziatura; 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 pagina.

33 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 elementi 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;

34 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;

35 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);

36 MBWP: elementi della pagina (3) Unità di misura: non usare i pixel né unità di misura assolute (es. pt o 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)

37 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.

38 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;

39 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);

40 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.

41 Riferimenti W3C, Mobile Web Best Practices 1.0, 2006 ( Crevola A., Guida siti per dispositivi mobili, 2005 ( Crevola A., Mobile Web Best Practices 1.0, 2006 ( Etemad E., Newth J.D., Pocket-Sized Design: Taking Your Website to the Small Screen, Morville P., Ambient Findability, O Reilly 2006 Altri link utili