Mobile Web Francesca Carmagnola Materiale didattico: ~ carmagno/mw.

Presentazione sul tema: "Mobile Web Francesca Carmagnola Materiale didattico: ~ carmagno/mw."— Transcript della presentazione:

1 Mobile Web Francesca Carmagnola carmagnola@di.unito.it Materiale didattico: http://www.di.unito.it/ ~ carmagno/mw

2 Programma Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: -Siti derivati vs. siti dedicati Usabilità dei siti web per dispositivi mobili: -Mobile Web Practices Linguaggi e ambienti di programmazione: WAP vs. XHTML MP Resa grafica sui device mobili: emulatori Correttezza del codice: validatori Bontà architettura dell’informazione e funzionalità: test di usabilità

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. Circa il 28% degli utenti mobili hanno usato almeno una volta i loro dispositivi mobili per accedere al web (fonte -Ipsos, 2006-) 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.

4 Ubiquitous computing (Per maggiori informazioni, si può partire da: http://en.wikipedia.org/wiki/Ubiquitous_computing) Il mobile web si inserisce in una prospettiva teorica più ampia denominata ubiquitous computing (Mark Weiser). Accedere all’informazione dove si vuole e come si vuole I dispositivi mobili si allineano a questo paradigma portando l’informazione nella realtà, laddove gli utilizzatori ne hanno realmente bisogno.

5 Caso di studio: viaggiare Everything for people travelling to USA and Canada. Developing site hostels.mob allows one to make a reservation in European hostels – When fully developed it is to be a great information source for tourists.

6 Caso di studio: viaggiare e siti cittadini It presents the most important information for mobile users of Helsinki. London guide and a mobile city site.

7 Caso di studio: siti corporativi Corporate site ING DiBa bank. One of the first mobile sites. Mobile site of BMW.

8 Caso di studio: siti di società Mobile society site. One of many arising recently. Mobility is a big advantage when you are looking for someone who wants to go to the cinema or when we're planning to go and have some pizza with friends.

9 Caso di studio: ebusiness Real estate site gives one convenient access to information. One can check offer details standing by the front door. One can also cosily seek for flats or houses in the neighborhood. It offers not only ability to buy but also shows lists of best selling products, of novelties and gives possibility to send information to the computer.

10 Mobile e Web 2.0 (Per maggiori informazioni, si può partire da: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what- isweb-20.html) Gli ultimi anni sono stati contraddistinti dal concetto di web 2.0: un web più interattivo, più partecipativo e “maturo”. Il web diventa una piattaforma su cui gli utenti possono condividere e diffondere informazioni con sempre minore difficoltà e limitazioni. Ancora più critico nel mobile Web!

11 I nuovi canali di accesso al mobile web

12 I dispositivi: caratteristiche comuni Connettività di rete (wireless e/o a collegamento fisico) Possibilità di essere a conoscenza della posizione geografica del dispositivo Numerose varianti in termini di piattaforme, componenti hardware e sofware, interfacce-utente (anche all’interno di una stessa classe di dispositivo) Limitate capacità di calcolo e di memoria (rispetto ad un PC desktop) Alimentazione a batteria con possibili criticità sui tempi di autonomia

13 Alcune risoluzioni frequenti 160x160 (smartphone) 240x320 480x640 320x480 320x320 176x208 208x260 1400x1050 (tablet PC) Modalità di input Tastiere alfanumeriche Tastiere QWERTY Joystick Touch screen Pennini Input e Output

14 Sofware 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)

15 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 802.11 (Wi-Fi): velocità fino a 54Mbit/s IEEE 802.16 (Wi-Max); Attenzione: tariffe a tempo Vs tariffe a dati

16 16 Programma Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: -Siti derivati vs. siti dedicati Usabilità dei siti web per dispositivi mobili: -Mobile Web Practices Linguaggi e ambienti di programmazione: WAP vs. XHTML MP Resa grafica sui device mobili: emulatori Correttezza del codice: validatori Bontà architettura dell’informazione e funzionalità: test di usabilità

17 Nuovo modello di fruizione In questo scenario innovativo è importante l’aspetto tecnologico (con le sue caratteristiche e i suoi limiti) La conoscenza su un piano tecnologico presuppone tuttavia una profonda conoscenza delle caratteristiche dell’accesso all’informazione nel web mobile, di come cambia l’esperienza di fruizione del web mobile, quali sono gli utenti del web mobile, quali sono le loro motivazioni e scopi.

18 Ricerca e analisi >> analisi degli utenti che accedono al web da dispositivi mobili Progettazione dell’architettura dell’informazione e interfaccia utente >> linee guida sviluppo e usabilità Sviluppo vero e proprio >> Linguaggi e ambienti di programmazione Testing e valutazioni circa la qualità del sito realizzato 4 fasi del ciclo di vita di un sito web

19 Ricerca e analisi Analisi degli utenti che accedono al web da dispositivi mobili

20 Analisi degli utenti che accedono al web da dispositivi mobili Chi sono gli utenti del web mobile? Cosa cercano? Come effettuano le loro ricerche? In che contesto agiscono? Modello di fruizione e accesso all’informazione

21 Scopi e motivazioni In generale, esistono 3 comportamenti nella ricerca delle informazioni nel web 1.La ricerca esaustiva: maggior numero di nozioni possibili su un argomento, tempo per leggerle e esaminare i risultati 2.La ricerca esplorativa: ricerca di maggiori informazioni precise su un argomento noto 3.La ricerca dell’oggetto conosciuto: ricerca di un’informazione precisa, un solo preciso risultato atteso Il comportamento di ricerca più frequente nel mobile web è la ricerca dell’ “oggetto conosciuto”: l’utente accede al mobile web per recuperare un’ informazione precisa o perseguire un’azione che già riesce a definire con precisione. L’utente si aspetta di individuare rapidamente le modalità per portare a termine la sua esigenza.

22 Ricerca di informazioni nel mobile web Il comportamento di ricerca più frequente nel mobile web è la ricerca dell’ “oggetto conosciuto”: l’utente accede al mobile web per recuperare un’ informazione precisa o perseguire un’azione che già riesce a definire con precisione. L’utente si aspetta di individuare rapidamente le modalità per portare a termine la sua esigenza.

23 Caratteristiche di accesso all’informazione nel mobile web 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; 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.

24 Anatomia di un sito web: Un sito web (sia tradizionale sia nato per il mobile web) è infatti composto da due dimensioni fondamentali: codice e design:  il codice, 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 design, 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. Progettazione dell’architettura dell’informazione e interfaccia utente

25 Outline Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: siti derivati vs. siti dedicati Mobile Web Practices Linguaggi e ambienti di programmazione: WAP vs. XHTML MP Resa grafica sui device mobili: emulatori Correttezza del codice: validatori Bontà architettura dell’informazione e funzionalità: test di usabilità

26 Strategie di progettazione 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 corrispondente versione per computer 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

27 Siti derivati: vantaggi L’idea di un web unico, indipendente dal dispositivo di fruizione, è la posizione del W3C stesso; Riduzione dei costi di progettazione e di realizzazione: necessario affrontare solo un attività 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; È decisamente più semplice mantenere un look & feel omogeneo indipendente dal dispositivo utilizzato.

28 Complicato ottenere una versione mobile di buona qualità cercando di adattare un sito che è stato costruito con tecnologie magari obsolete o deprecate; Tempistiche di adattamento potrebbero essere prolungate; 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; Siti derivati: svantaggi 1/2

29 Complessa 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; Criticità di gestione degli elementi di interattività (moduli, applet, video) che se su un piano tecnico possono continuare a funzionare, da un punto di vista più operativo possono rivelarsi molto più complessi da utilizzare; Criticità nella gestione dei 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. Siti derivati: svantaggi 2/2

30 Esempio sito derivato: Il sito di Le Monde.fr

31 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; Architettura dell’informazione ottimizzata e contenuti pensati specificatamente per una consultazione “nomade”; 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; Selezione dei contenuti più adatti alla fruizione mobile evita di sovraccaricare l’interfaccia con informazione non pertinente, sovrabbondante e – spesso – indesiderata; Sito più semplice e leggero, rapido da scaricare e da consultare.

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

33 Esempio sito dedicato: Il sito di Repubblica

34 Outline Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: siti derivati vs. siti dedicati Mobile Web Practices Linguaggi e ambienti di programmazione: WAP vs. XHTML MP Resa grafica sui device mobili: emulatori Correttezza del codice: validatori Bontà architettura dell’informazione e funzionalità: test di usabilità

35 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. Mobile Web Best Practices (http://www.w3.org/TR/mobile-bp/)http://www.w3.org/TR/mobile-bp/

36 Mobile Web Best Practices 1.0 Obiettivi MWBP: definire una serie di principi per gli sviluppatori di siti web su dispositivi mobili Se il sito rispetta le MWBP, il sito ottiene l’etichetta mobileOk che indica che il sito mobile è aderente alle raccomandazioni MWBP Le MWBP si basano su un modello generico –Cercare in breve tempo informazioni precise e pertinenti –L'accesso wireless è spesso più lento e inaffidabile –Esistono problematiche ergonomiche legate al mezzo –Adattamento del contenuto

37 Mobile Web Best Practices 1.0 Il device di base > accessibile da tutti –uno schermo largo 120 pixel; –supporto per XHTML basic profile; –capacità di rappresentare immagini JPEG e GIF 89a (ossia non interfacciate, non trasparenti e non animate); –possibilità di visualizzare la palette di colori web safe; –supporto per i CSS 1; –capacità di gestire pagine di peso fino a 20 Kbytes.

38 Mobile Web Best Practices 1.0 linee tematiche –navigazione e link –layout della pagina e contenuto –definizione della pagina –input dell’utente

39 Mobile Web Best Practices 1.0 navigazione e link

40 Mobile Web Best Practices 1.0 La prima raccomandazione a riguardo osserva che –gli URL del sito devono essere cortiURL wrmob.com invece di wordreference.comwrmob.comwordreference.com http://www.esempio.org/ invece dihttp://www.esempio.org/ http://www.esempio.org/index.html http://www.esempio.org/esempio invece dihttp://www.esempio.org/esempio http://www.esempio.org/esempio.html

41 Mobile Web Best Practices 1.0 La seconda raccomandazione sulla navigazione sostiene che –si deve fornire soltanto una barra di navigazione minimale in alto nella pagina  quindi si devono fornire solo dei meccanismi di navigazione basilare che devono essere posti in alto, ben visibili, in tutte le pagine.  Se si vuole utilizzare una barra di navigazione secondaria la si può mettere al fondo della pagina, ma solo se necessaria!

42

43 Mobile Web Best Practices 1.0 Secondo la terza raccomandazione bisogna –cercare di bilanciare la presenza di molti link su una stessa pagina con il fatto di chiedere all’utente di seguire troppi link per raggiungere quello che sta cercando. rivedere i meccanismi di navigazione per l'esperienza mobile modificandoli rispetto a quanto progettato per il desktop Web valutare l’idea di appiattire la struttura del sito al fine di diminuire il numero di link necessari per seguire una data pagina >> Ridefinire l’architettura dell’informazione

44 Struttura dell’informazione sbagliata

45 Limitarsi a 10 link Non più di 5 livelli di profondità Almeno un contenuto per categoria Anteporre i link a seconda della frequenza d’uso e della popolarità

46 Struttura dell’informazione corretta

47 Mobile Web Best Practices 1.0 Proseguendo, il W3C sostiene un principio ben conosciuto a chi si occupa di usabilità: –fornire consistenti meccanismi di navigazione, Ossia utilizzare le stesse modalità di navigazione in tutte le pagine per aiutare gli utenti a orientarsi e consentire loro di identificare i meccanismi di navigazione più facilmente.

48 Mobile Web Best Practices 1.0 La quinta raccomandazione ricorda da vicino le WCAG e dice di –assegnare le access keys (tasti di accesso) ai link dei menu di navigazione e alle funzionalità utilizzate più di frequente.

49 Mobile Web Best Practices 1.0 Successivamente le MWBP ribadiscono di –identificare chiaramente dove conduce ciascun link e indicare il formato del file a cui il link porta, a meno che si sia sicuri che il dispositivo lo supporti.

50 Mobile Web Best Practices 1.0 La settima raccomandazione –non usare le immagini mappate poiché sono spesso inutilizzabili dai dispositivi che non possiedono sistemi di puntamento

51 Mobile Web Best Practices 1.0 Evitare di aprire delle finestre di pop-up o altre finestre che cambiano la finestra corrente senza avvertire l’utente Non creare pagine che si auto-aggiornano automaticamente, a meno che l’utente ne sia informato e abbia un modo per fermare il refresh Non utilizzare mark up che fanno una ridirezione automatica delle pagine. –Il costo delle comunicazioni GPRS viene calcolato in base ai kilobytes rice-trasmessi kilobytes –Possono disorientare l’utente

52 Mobile Web Best Practices 1.0 Infine la sezione su navigazione si conclude con una nota sui file esterni, che devono essere ridotti –Es. CSS, immagini, etc..: ogni risorsa infatti corrisponde a una diversa richiesta HTTP che può rendere più lento l’accesso all’informazione

53 Mobile Web Best Practices 1.0 layout della pagina e contenuto

54 Mobile Web Best Practices 1.0 La prima serie di raccomandazioni riguarda il contenuto della pagina: –Assicurarsi che il contenuto sia adatto all’utilizzo in ambiente mobile –Usare un linguaggio semplice e chiaro –Limitare il contenuto a quanto l’utente ha richiesto: è opportuno evitare l’invio di risorse non cercate dall’utente, il quale può addirittura vivere con fastidio tale presenza

55 Mobile Web Best Practices 1.0 Successivamente le raccomandazioni affrontano lo spinoso problema della dimensione delle pagine: –assicurarsi che la dimensione totale della pagina sia appropriata alle limitazioni di memoria del device (il calcolo comprende anche immagini e CSS!)

56 Mobile Web Best Practices 1.0 Di scrolling parla l’indicazione successiva: –Limitare lo scrolling ad una direzione, a meno che lo scrolling secondario non possa essere evitato

57 Mobile Web Best Practices 1.0 Le informazioni più rilevanti dovrebbero sempre essere in primo piano, come sottolinea la raccomandazione successiva –assicurarsi che il materiale centrale per la comprensione della pagina preceda il materiale che non lo è. Stabilire quindi una buona gerarchia dell’informazione.

58 Mobile Web Best Practices 1.0 Le linee guida su Page layout and contenuti danno in ultima battuta indicazioni su grafica e colore e immagini –Non usare la grafica per generare spazi –Non usare immagini che non possano avere una buona resa sul device. Evitare le immagini larghe o ad alta risoluzione a meno che non siano fondamentali per veicolare il significato della pagina GIF E JPEG sono visualizzate senza difficoltà, minore è il supporto del formato PNG.

59 Mobile Web Best Practices 1.0 –specificare la dimensione delle immagini all’interno del codice di markup (ad esempio negli attributi height e width di HTML), se esse hanno delle dimensioni specifiche. In questo modo il browser è in grado di calcolare in anticipo quanto spazio esse occuperanno. Immagini di sfondo –Quando si usano immagini come sfondo assicurarsi che il contenuto risulti leggibile sul dispositivo

60 Mobile Web Best Practices 1.0 Colore: –Assicurarsi che l' informazione veicolata dal solo colore sia disponibile anche senza –Assicurarsi che i colori di sfondo e di primo piano abbiano un sufficiente contrasto http://www.yoyodesign.org/outils/ncolor/ncolor.php

61 Mobile Web Best Practices 1.0 definizione della pagina

62 Mobile Web Best Practices 1.0 La prima raccomandazione che riguarda il titolo della pagina –Fornire un titolo breve ma descrittivo per ogni pagina I motori di ricerca usano principalmente i titoli delle pagine per identificare il contenuto. Inoltre, quando si decidono i titoli delle pagine, pensare a come gli utenti cercheranno il contenuto del proprio sito con i motori di ricerca.

63 Mobile Web Best Practices 1.0 La seconda linea guida concerne l’utilizzo dei frame. Come ci si può aspettare l’utilizzo dei frame è assolutamente bandito –Non usare i frame

64 Mobile Web Best Practices 1.0 La terza raccomandazione ci parla di elementi strutturali –Utilizzare quelle caratteristiche del linguaggio di mark-up per indicare la struttura logica del documento –H1, H2, P --> titolo, sottotitolo, paragrafo – Top Level Heading Second Level Heading Third Level Heading Second Level Heading Third Level Heading Fourth Level Heading

65 Mobile Web Best Practices 1.0 Le successive indicazioni riguardano tutte il tema delle tabelle: Il device di base introdotto dalle MWBP non supporta le tabelle: –non usare le tabelle, a meno che non si sia sicuri che il dispositivo client le supporti –non usare le tabelle annidate –non usare le tabelle per l’impaginazione

66 Mobile Web Best Practices 1.0 Il device di base introdotto dalle MWBP non supporta gli script e gli oggetti incorporati all’interno della pagina, che sono sconsigliati –non fare affidamento a oggetti incorporati o script (es. applet Java o animazioni Flash), sebbene consentano alle pagine di conquistare una notevole dinamicità e quindi, se usate nel modo appropriato, offrono un'esperienza d'uso molto ricca.

67 Mobile Web Best Practices 1.0 - Gli eventi possono essere innescati dal browser oppure dall'utente per mezzo dei propri sistemi di input. In entrambi i casi possono verificarsi problemi per i dispositivi mobili che non hanno il mouse. - Gli eventi onmouseover e onmouseout sono fortemente legati all'uso del mouse giacché innescano un azione quando il puntatore si trova sull'elemento o quando esce dalla area di questo. Se l'informazione o la funzionalità che deriva da tale evento è importante sarebbe opportuno richiamare le medesime funzionalità anche per mezzo degli eventi logici onfocus e onblur, che fanno riferimento al momento in cui un elemento riceve il focus.

68 Mobile Web Best Practices 1.0 Elementi multimediali: video, audio Video: –Piuttosto onerosa per i dispositivi mobili, in termini di capacità di elaborazione e di memoria. Hanno spesso dimensioni rilevanti e dunque spesso sono lenti e onerosi da scaricare. La comunicazione video si può utilizzare solo quando è necessaria e si conoscono con una certa precisione le prestazioni dei terminali di riferimento nonché della rete di trasmissione. –Formato MPEG, si può considerare lo standard del settore. Altri formati come Windows Media Video e Real Video sono piuttosto diffusi ma non in modo omogeneo. Scarso il supporto per il formato Quicktime.

69 Mobile Web Best Practices 1.0 Elementi multimediali: video, audio Audio: –Il formato più universale sembra essere MP3. Altri, come Windows Media Audio e Real Audio richiedono la presenza di player proprietari e disponibili solo su una parte delle piattaforme esistenti. –All'aumentare delle capacità di memoria cellulari e palmari si propongono anche come alternativa ai lettori MP3; all'inverso dispositivi nati per altre esigenze e orientati con forza verso la multimedialità (lettori MP3, appunto, ma anche console portatili per videogiochi) potrebbero a breve aprirsi alla navigazione web. L'opportunità di fornire contenuti audio, quindi, potrebbe rappresentare un elemento apprezzato e distintivo nel nuovo scenario della comunicazione wireless.

70 Mobile Web Best Practices 1.0 Le successive specifiche affrontano ancora aspetti tecnici legati al codice –creare pagine valide rispetto alle grammatiche formali, con del codice convalidato (dal W3C)

71 Mobile Web Best Practices 1.0 non usare come unità di misura i pixel, o altre misure assolute, ma unità di misura relative –Sebbene per le dimensioni dei bordi e del padding i pixel consentono una migliore impaginazione, in quanto fissano dei limiti all’interno dei quali gli altri elementi andranno a disporsi di conseguenza –Le unità relative consentono di adattare la pagina ed i suoi elementi allo schermo del device richiedente. –Nel caso di immagini create con una dimensione specifica, apposita per il dispositivo richiedente, si possono invece usare i pixel.

72 Mobile Web Best Practices 1.0 Il nono gruppo di linee guida affronta le tematica dei fogli di stile: –Si è detto che occorre eliminare dal codice XHTML MP ogni riferimento a come i contenuti verranno visualizzati. Questo non vuole dire che le pagine non debbano avere una grafica! –Usare i fogli di stile per il layout e la presentazione, a meno che non si sappia che il dispositivo non li supporti –Invece del codice: testo di esempio Usare: testo di esempio E nella classe CSS:.evidenzia { Font-weight: bold; Font-size: 5em; Color: red; }

73 Mobile Web Best Practices 1.0 organizzare il documento in maniera tale che possa essere letto anche senza fogli di stile –Non tutti i dispositivi supportano appieno le specifiche di stile, quindi la pagina deve poter funzionare anche senza. fare si che i fogli di stile non abbiano delle dimensioni troppo grosse –Utilizzare quando possibile la ridefinizione dei tag HTML e non abbondare nell’utilizzo delle classi

74 Mobile Web Best Practices 1.0 La decima linea guida è strettamente legata alla precedente: –utilizzare un markup pulito ed efficiente. Questo comporta evitare linee e spazi vuoti e l’utilizzo delle specifiche di stile inline (preferire le classi o fogli di stile esterni)

75 Mobile Web Best Practices 1.0 L’undicesimo gruppo affronta i tipi di contenuto da inviare –Assicurarsi che il contenuto sia codificato secondo un set di caratteri riconoscibili da parte del dispositivo –Indicare nella risposta HTTP la codifica dei caratteri da utilizzare (Accept-Charset), ad esempio attraverso il tag meta in HTML: oppure in XML nella dichiarazione del tipo di codifica

76 Mobile Web Best Practices 1.0 La linea guida successiva è direttamente derivata da principi di usabilità per il desktop web http://www.useit.com/alertbox/20010624.html –Fornire dei messaggi di errore ad alto contenuto informativo ed una via di uscita per tornare indietro verso l’informazione utile, come ad esempio “torna alla pagina precedente”, “torna alla home”

77 Mobile Web Best Practices 1.0 Infine le ultime raccomandazioni hanno un tono più tecnico –Non affidarsi ai cookie per memorizzare informazioni in modo persistente Molti dispositivi mobili non supportano i cookie, o danno un supporto solo parziale. Meglio affidarsi a tecnologie lato server

78 Mobile Web Best Practices 1.0 Sfruttare la memoria cache dei dispositivi e fornire informazioni sull’utilizzo della cache nelle risposte http –e nei meta tag correlati come CACHE-CONTROL ed EXPIRE –E’ importante che l’utilizzo della cache sia concesso, cosicché il client non debba ricaricare tutte le volte quei file che sono gia stati scaricati e che vengono riutilizzati tra una pagina e l’altra

79 Mobile Web Best Practices 1.0 Non affidarsi allo stile dei font. –Molti dispositivi mobili offrono supporto solo per pochi font e limitati effetti (solo grassetto, corsivo,…) – Quindi l’utilizzo di font ed effetti più sofisticati rischia di non essere supportato.

80 Mobile Web Best Practices 1.0 Input dell’utente

81 Mobile Web Best Practices 1.0 Concludiamo commentando brevemente le raccomandazioni su User Input –Fare si che l'utilizzo della tastiera sia ridotto al minimo

82 Mobile Web Best Practices 1.0 Se l'utente deve inserire del testo, fornire, se possibile, del testo predefinito da selezionare –usare ad esempio liste di selezione, pulsanti radio –utilizzare i precedenti inserimenti come default, –rendere possibile la selezione degli elementi della lista attraverso i tasti numerici o i pulsanti di direzione, ecc.

83 Mobile Web Best Practices 1.0 Specificare una modalità di inserimento predefinita (sul linguaggio o sul formato di inserimento), se il device la supporta. –Specificare una modalità per l’inserimento del testo, per il linguaggio e per il formato di input (es, per le date). Alcuni linguaggi di mark-up consentono di specificare modalità di input, cosa che può risultare particolarmente utile se le possibilità di inserimento sono limitate, per esempio, solo ai numeri.

84 Mobile Web Best Practices 1.0 Creare un ordine logico di tabulazione attraverso i link, i pulsanti di controllo, gli oggetti presenti nella pagina. –L'utente potrebbe non avere a disposizione un dispositivo di puntamento e muoversi nella pagina esclusivamente con i tasti direzionali. –A tal proposito ricordiamo che l'ordine di tabulazione si può forzare in HTML con l'utilizzo dell'attributo tabindex del tag.

85 Etichettare i controlli dei form in maniera appropriata e associare esplicitamente le etichette ai controlli. Posizionare le etichette dei controlli in maniera tale che si dispongano correttamente in relazione al controllo di riferimento. –Questa linea guida, come la precedente, si riferisce al fatto di utilizzare correttamente il tag in corrispondenza degli elementi del form a cui si riferisce. Ad esempio, dovendo riferire un elemento label ad un campo di testo per l'inserimento del nome si farebbe: nome

86 MWBP in sintesi Minimizzare l’inserimento di testo: a causa degli attuali dispositivi di input è da preferire la selezione tra alternative; nel caso in cui sia necessaria l’immissione di testo, considerare se è possibile inserire nei campi di ricerca dei valori predefiniti di uso frequente; per lo stesso motivo è opportuno semplificare il più possibile la URL del sito; Ricercare la coerenza: sia all’interno del sito, sia verso l’esterno (altri siti e applicazioni): l’utente non vuole apprendere nuove convenzioni, vuole interagire immediatamente con la pagina e quindi vanno minimizzati gli sforzi cognitivi che questi devono compiere per interpretare il funzionamento di una nuova pagina; Fornire all’utente l’illusione del controllo sull’applicazione, anticipare le sue azioni, rendere visibile lo stato del sistema;

87 MWBP in sintesi Sfruttare il livello fisico del dispositivo: ad es., sfruttare i tasti di accesso rapido mediante l’attributo accesskey; Per siti che possiedono anche una versione per PC, ricercare la consistenza tra le piattaforme (look and feel, labeling, titolazione, ecc.): ciò accresce il senso di familiarità e diminuisce il disorientamento dell’utente che non conosce ancora la versione mobile; Garantire stabilità e persistenza: l’uso discontinuo dei device mobili (anche per via della connettività) richiede che il sistema sia in grado di recuperare lo stato al momento dell’ultima interazione

88 MWBP in sintesi Fornire feedback puntuali ed esplicativi circa il successo o il fallimento delle operazioni richieste dall'utente, molto importanti nel caso in cui i tempi di connessione siano lunghi; Tollerare gli errori e prevenire degli errori per mezzo di funzioni obbliganti e chiarendo le conseguenze delle azioni degli utenti; in caso di errore, garantire il ripristino delle condizioni precedenti; Rendere evidente ciò che l'utente può fare fornendo segnali facilmente percepibili e comprensibili, per esempio, è importante rendere evidenti link e bottoni, dal momento che non è possibile sfruttare effetti di rollover né giocare sulla forma del puntatore per segnalare all'utente la presenza di un collegamento ipertestuale.

89 MWBP in sintesi Evitare di sovraccaricare l'interfaccia con troppi elementi e perseguire minimalismo e semplicità: ciò è importante sia in termini di efficienza (pagine più leggere, tempi di scaricamento più rapidi) sia dal punto di vista cognitivo giacché così facendo l'utente può perseguire i propri scopi senza dover distogliere da essi la propria attenzione; Strutturare i contenuti in modo tale che per l'utente sia possibile comprendere se essi sono pertinenti e meritino di essere approfonditi; ad es., un elenco di news: si conceda prima un elenco dei titoli seguiti da un breve abstract, dando così all'utente la possibilità di comprendere se valga la pena o meno di proseguire la lettura;

90 MWBP in sintesi Non costringere l'utente a far scorrere l'interfaccia : i dispositivi di input non offrono ancora un efficacia paragonabile alla rotellina del mouse; per questa ragione resta di attualità la vecchia regola del tenere tutta l'interfaccia nello spazio immediatamente visibile; con un'eccezione: quando l'utente accede al contenuto vero e proprio, l'ultima foglia dell'albero del sito, è disposto a leggere anche testi che eccedono le dimensioni del display, soprattutto interessanti o pertinenti rispetto ai suoi scopi. Da evitare assolutamente lo scorrimento orizzontale; Segnalare anticipatamente contenuti che richiedono plug-in o visualizzatori particolari, come documenti PDF, applet Java e animazioni flash; se possibile, fornire per essi un contenuto alternativo in formato in XHTML;

91 MWBP in sintesi In caso di materiale in download, chiarire sempre le dimensioni dei file, la necessità di possedere particolari programmi per accedere ai file e le modalità di tariffazione (se presenti);