• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Best Practice
 

Mobile Web Best Practice

on

  • 507 views

Linee guida - e qualche suggerimento - per un corretto approccio alla programmazione web per dispositivi mobili.

Linee guida - e qualche suggerimento - per un corretto approccio alla programmazione web per dispositivi mobili.

Statistics

Views

Total Views
507
Views on SlideShare
504
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://www.linkedin.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Best Practice Mobile Web Best Practice Presentation Transcript

    • Argomentazioni1. Comportamento Generale2. Navigazione e Link3. Layout e Impaginazione dei Contenuti4. Definizione Elementi delle Pagine5. Input degli Utenti
    • 1. Comportamento Generale Affrontare le Esperienza Sfruttare le Effettuare test carenze deitematicamente capacità dei su emulatori e software di coerente dispositivi dispositivi reali navigazione
    • 1.1 Esperienza tematicamente coerenteLa prima attenzione dovrebbe essere volta ad assicurarsiche il contenuto fornito da un URI assicuri unesperienzatematicamente coerente qualora sia fruito da diversidispositivi, indipendentemente dalle capacità di questi.Ciò non significa solamente garantire la presenza dellemedesime informazioni ma anche consentire allutente direcuperare lo stato del sistema ottenuto su un altro device(per esempio, se il sito possiede unarea riservata epersonalizzata, lutente dovrebbe potervi accedere anchese sta utilizzando un telefono cellulare).
    • 1.2 Sfruttare le capacità dei dispositiviGli sviluppatori dovrebbero poi sfruttare le capacità deidispositivi per generare esperienze duso avanzate: dopoessersi assicurati circa la fruibilità del proprio sito su unprofilo base (aka Default Delivery Context) è possibileinfatti utilizzare le capacità specifiche di una determinataclasse di dispositivi per fornire una migliore esperienza dinavigazione.
    • 1.3 Affrontare le carenze dei software dinavigazioneIl terzo aspetto su cui si chiede di porre attenzione è ilmodo di affrontare le carenze dei software dinavigazione ed in particolare a noti bug ed errateimplementazioni delle specifiche tecniche nei browser.Sono comprensibili ed ammissibili work around per ovviarea queste circostanze: un atteggiamento che è peròaccettato solo in forma transitoria e non accettato qualora ibrowser abbiano un comportamento corretto.
    • 2. Navigazione e Link -1- Bilanciamento tra profondità Navigazione Meccanismi diURI devono e ampiezza Fare uso di Identificare il minimale ad navigazioneessere corti della struttura access keys target dei link inizio pagina consistenti gerarchica del sito
    • 2. Navigazione e Link -2- Non utilizzareNon usare le Evitare di aprire Evitare il refresh mark up che immagini delle finestre di automatico delle applicano un mappate pop-up pagine reindirizzamento automatico
    • 2.1 URI devono essere cortiBisogna porre una particolare attenzione alla definizione della strutturae al modello di navigazione di un sito pensato per il mobile Web.La prima raccomandazione a riguardo osserva che gli URI (ossia gliindirizzi delle pagine web) del sito devono essere corti, per ovvimotivi di limiti alla digitazione su apparecchi mobili. Sarebbe anchemeglio configurare il Server Web che ospita il sito affinché sia possibiledigitare il nome del dominio, o del sotto-dominio, senza doverspecificare anche il nome del file che si riferisce alla pagina stessa(http://www.esempio.org/ invece di http://www.esempio.org/index.html,e http://www.esempio.org/esempio invece dihttp://www.esempio.org/esempio.html). È anche consigliabile registrareun nome di dominio più corto e utilizzarlo come alias per la versionemobile.
    • 2.2 Navigazione minimale ad inizio paginaIl secondo punto di questo gruppo invita i progettistia fornire solo una navigazione minimale ad iniziopagina. Una volta avuto accesso al sito, infatti, il visitatoredovrebbe poter visionare immediatamente il contenutodella pagina senza dover effettuare dello scrollingriducendo al minimo gli elementi decorativi e funzionali.
    • 2.3 Bilanciare profondità e ampiezza -1-La terza raccomandazione di questa sezione invitaa cercare di bilanciare la presenza di molti link su unastessa pagina con il fatto di chiedere allutente di seguiretroppi link per raggiungere quello che sta cercando. Laprogettazione deve avere per obiettivo un bilanciamento tralavere molti link di navigazione su una sola pagina e il fattodi dover navigare tra molti link (sparsi tra più pagine) perraggiungere il contenuto desiderato. Quindisostanzialmente si deve cercare un bilanciamento traprofondità e ampiezza della struttura gerarchica delsito.
    • 2.3 Bilanciare profondità e ampiezza -2-Ecco, in merito, alcune best practice che potrebbero rivelarsi utilidurante la progettazione (da calare nella realtà dell’utente mobile):• valutare, attraverso un attenta analisi del file di log, quali sono i servizi più utilizzati dagli utenti, e porli in “primo piano” nel sito mobile;• valutare, sempre attraverso i log, quali sono i pattern di maggiore utilizzo, ed eventualmente ri-progettare la navigazione in tale ottica;• progettare larchitettura di navigazione del sito ponendo attenzione alla comprensibilità delle categorie semantiche in cui i link sono raggruppati, in modo tale da favorirne il reperimento (card sorting: ragionando cioè raggruppando i gruppi logici degli argomenti trattati nel sito)
    • 2.4 Meccanismi di navigazione consistentiLe successive raccomandazioni contenute in questosecondo gruppo si richiamano a principi più generali diaccessibilità e usabilità degli strumenti di navigazione,cominciando dal fornire meccanismi di navigazioneconsistenti, ovvero utilizzare le stesse modalità dinavigazione in tutte le pagine per aiutare gli utenti aorientarsi e consentire loro di identificare i meccanismi dinavigazione più facilmente. Viene promosso il metodo drill-down per l’accesso alle singole sezioni, con un link "tornasu" per tornare allinizio della sezione o della pagina.
    • 2.5 Fare uso di access keysLa quinta raccomandazione chiede di assegnare leaccess keys ai link dei menu di navigazione e allefunzionalità utilizzate più di frequente. Le scorciatoie datastiera risultano particolarmente utili sui dispositivi mobilisoprattutto quando non cè un dispositivo per ilpuntamento. Con una pressione sul tasto corrispondente allink lutente riesce a navigare utilizzando la tastieraevitando luso dei tasti direzionali per muoversi, circostanzache può non sempre essere intuitiva ed efficace.
    • 2.6 Identificare il target dei link -1-Successivamente si richiede di identificare chiaramente iltarget di ciascun link e indicare il formato del file a cuiil link porta, a meno che si sia sicuri che il dispositivo losupporta. Gli utenti di device mobili possono avereproblemi di lunghi tempi di attesa e costi eccessivi dovuti alfatto di dover seguire molti link e di conseguenza navigaretra tante pagine. È di rilevante importanza poter sapere inanticipo dove un link porta in modo tale da poter valutarese si è interessati a seguire il link o meno.
    • 2.7Identificare il target dei link -2-Di conseguenza, da un lato è importante dare nomisignificativi ai link e/o specificare la destinazione del linknellattributo title e, dallaltro, se il link porta ad un file digrandi dimensioni e di formato inatteso (non HTML), èbene avvertire lutente dando unidea della dimensionedella risorsa. Laccesso a file di grandi dimensioni o diformato non direttamente interpretabile dal browserdovrebbe essere possibile e lasciata alla scelta liberadellutente.
    • 2.8 Non usare le immagini mappateÈ meglio cercare di non usare le immagini mappate ameno che non si sappia che il client è davvero in grado disupportarle; se proprio si desidera utilizzare le image mapsarebbe opportuno trattarle come forme geometriche (piùfacilmente navigabili con i tasti direzionali, presenti invecesu moltissimi dispositivi mobili), oppure dividereunimmagine grande in tante piccole immagini e trattarleseparatamente.
    • 2.9 Evitare i pop-upPop-up, refresh e reindirizzamenti sono attività chepossono generare confusione nellutente, aumentano icosti di connessione (per esempio effettuando downloadnon richiesti di pagine) e ritardano complessivamentelinterazione. Va inoltre annotato che molti device mobilinon riescono a supportare più di una finestra alla volta,pertanto sarebbe semplicemente inutile tentare di aprireuna nuova finestra rispetto a quella corrente. Ecco perchéè meglio evitare di aprire delle finestre di pop-up o altrefinestre che cambiano la finestra corrente senza avvertirelutente.
    • 2.10 Evitare il refresh automatico delle pagineLe pagine con lauto-refresh presentano in generale già deiproblemi di accessibilità e di usabilità, come ildisorientamento dellutente. In ambito mobile possonoesporre lutente a costi non previsti dovuti al fatto chequeste pagine possono restare aperte e nascoste inbackground. È preferibile comunque evitare il refreshautomatico delle pagine a meno che lutente ne siaalmeno informato e abbia un modo per fermare il refresh.
    • 2.11 Non utilizzare mark up che applicano unreindirizzamento automaticoNel caso si renda necessario un reindirizzamentodell’utente, è meglio non utilizzare mark up cheapplicano un reindirizzamento automatico delle pagine;piuttosto è meglio configurare il server affinché effettui ilredirect attraverso codici HTTP 3xx.
    • 3. Layout e Impaginazione dei Contenuti DimensioneContenuti delle Scrolling Grafica pagine
    • 3.1 Contenuti -1-La prima serie di raccomandazioni riguarda i contenuti:• assicurarsi che il contenuto sia adatto allutilizzo in un contesto mobile• usare un linguaggio semplice e chiaro• limitare il contenuto a quanto lutente ha richiestoDate le limitazioni intrinseche del mezzo che neinfluenzano lutilizzo, e altri fattori specifici come i costi diconnessione elevati, il contesto in cui si può trovare l’utente(fuori da casa o dall’ufficio, in ambienti affollati o rumorosi,mentre sta camminando, etc.) si dovrebbe cercare diinviare allutente solo linformazione specifica, il piùpossibile pertinente alle sue richieste.
    • 3.1 Contenuti -2-Linformazione dovrebbe essere sempre rilevante, o per lo menolinformazione più rilevante dovrebbe essere in primo piano. Siconsiglia di adottare la tecnica del front loading che, sinteticamente,chiede di porre linformazione più importante ad inizio di titoli, paragrafi,liste ecc…Qui entra in gioco la seconda linea guida (usare un linguaggio semplicee chiaro) che a differenza delle precedenti dovrebbe essere tenutasempre in conto anche nel desktop Web. Gli utenti di Internet nonleggono, ma scorrono linformazione. Dunque uno stile breve e diretto,di stampo giornalistico può aiutare nella fruizione del testo su Web.Questo vale ancor più sul web mobile. chi, che cosa, dove, quando eperché dovrebbero sempre precedere brani più lunghi di informazioneper mettere lutente in condizione di decidere se approfondirelnformazione presentata oppure no.
    • 3.2 Dimensione delle pagine• dividere la pagina in porzioni usabili, ma limitate• assicurarsi che la dimensione totale della pagina sia appropriata alle limitazioni di memoria del device (si veda ad esempio il sito Mobile Review per informazioni dettagliate e comparazioni tra dispositivi)Se le pagine sono troppo lunghe, sono anche troppo pesanti dascaricare. Daltra parte se sono troppo corte si costringe lutente acliccare molte volte per raggiungere linformazione desiderata. Unagiusta via di mezzo tra la paginazione e lo scrolling è in parte unaquestione di gusto, in parte una questione di necessità. I dispositivi condisposizioni di memoria molto rigide accettano solo pagine dalledimensioni limitate. Ugualmente ci sono invece dispositivi lacunosinelloffrire una buona esperienza di scrolling, ma ottimi nel recupero dipagine anche pesanti.
    • 3.3 Scrolling -1-È consigliabile limitare lo scrolling ad una direzione, ameno che lo scrolling secondario non possa non essereevitato. Le pagine dovrebbero proporre sempre lo scrollinglungo una medesima direzione, per facilitare lesperienzadellutente. Lo scrolling in senso verticale è da preferirsi, inlinea di massima, in quanto più comodo e maggiormentevicino alle esperienze passate dellutente. Tuttavia certioggetti, come mappe e immagini, possono fare scrollareanche orizzontalmente la pagina. Sarebbe comunquemeglio presentare immagini dalle dimensioni ridotte, e darela possibilità allutente di ingrandirle a piacere.
    • 3.3 Scrolling -2-Le informazioni più rilevanti dovrebbero sempre essere a inizio pagina:assicurarsi che il materiale centrale per la comprensione della paginapreceda il materiale che non lo è. La maggior parte delle pagine web sonoprogettate per ospitare gli elementi di navigazione nella parte superiore olaterale della pagina. Tuttavia nel caso di display dalle dimesioni limitate questopotrebbe causare un inconveniente: la navigazione appare prima del testorilevante della pagina stessa, che può anche essere ragguinbile solo grazie alloscrolling.Dal momento che lutente si fa un idea della pagina dalle prime cose che vede,sarebbe bene limitare lo spazio dedicato ad elementi di navigazione, per nonparlare di pubblicità e immagini decorative. Le prime soluzioni potrebberoessere: mettere un link in alto nella pagina che porti alle selezioni dinavigazione poste da qualche altra parte, come in fondo alla pagina, oppuremettere una barra di navigazione di solo testo con le principali sezioni dellapagina.
    • 3.4 Grafica -1-• non usare la grafica per spaziare gli elementi (utilizzare un elemento grafico di un pixel per il posizionamento assoluto non funziona su molti schermi)• non usare immagini che non possano avere una buona resa sul device. Evitare le immagini larghe o ad alta risoluzione eccetto il caso in cui dellinformazione critica andrebbe altrimenti persa• assicurarsi che linformazione veicolata dal solo colore sia disponibile anche senza colore• assicurarsi che la combinazione tra i colori di sfondo e quello in primo piano fornisca un contrasto sufficiente• quando si usano immagini come sfondo assicurarsi che il contenuto risulti leggibile sul device
    • 3.4 Grafica -2-Se ad esempio si vuole che il colore sottolinei oppure differenzi deltesto ci si deve ricordare che non sempre gli utenti vedono il colore(pensiamo agli ipovedenti). Un link, ad esempio, non dovrebbe esseresolo differenziato da una scelta cromatica differente, ma anche dallasottolineatura, perché alcuni utenti potrebbero non accorgersene.Così come il contrasto tra lo sfondo e i colori di primo piano dovrebbesempre essere controllato (ad esempio, per controllare ci si puòavvalere di uno strumento apposito). Stesso discorso vale per leimmagini di sfondo, che non dovrebbero interferire con il testo, e inambiente mobile andrebbero usate con molta cautela.
    • 4. Definizione Elementi delle Pagine Struttura Elementi Titolo del Fogli di Tipi di Note Frame logica del Tabelle non Immagini Codice Usabilitàdocumento stile (CSS) contenuto Tecniche documento testuali
    • 4.1 Titolo del documentoPartendo dal principio, è utile fornire un titolobreve ma descrittivo per ogni pagina. Deveessere corto per ridurre il peso della pagina, edinoltre potrebbe essere troncato dal browser, oaddirittura non visualizzato. Inoltre, esso potrebbevenire utilizzato come etichetta del bookmark.
    • 4.2 FrameCome già sarebbe auspicabile per l’aspettodesktop web, lutilizzo dei frame è bandito anchee soprattutto per i siti progettati per ambientemobile, dove le limitate dimensioni dello schermorendono il frameset ingestibile e assolutamentepoco navigabile.
    • 4.3 Struttura logica del documentoParlando di elementi strutturali si indica di utilizzare quellecaratteristiche del linguaggio di mark up per indicare lastruttura logica del documento, facilitando così anchela semantizzazione del documento. Nella progettazione diuna pagina HTML e ritenuta essere una buona praticaquella di indicare la struttura logica della pagina (titolo,sottotitolo, paragrafo) con dei tag appropriati (ad esempio,H1, H2, P). Utilizzare un markup strutturale, piuttosto cheun markup di formattazione, consente un più facileadattamento del contenuto, quando questo deve esseresuddiviso in più pagine, e un accesso più facile alle sezionicui lutente è interessato.
    • 4.4 TabelleLe tabelle non funzionano bene con schermi dalledimensioni limitate e potrebbero causare scrollingorizzontale in lettura:• non usare le tabelle, a meno che non si è sicuri che siano supportate dal dispositivo• non usare le tabelle annidate e/o per l’impaginazione• utilizzare, dove possibile, delle alternative alla presentazione tabellare
    • 4.5 Elementi non testuali -1-• fornire del testo equivalente, per ogni elemento non testuale: scaricare un immagine da un device mobile può essere unoperazione costosa in termini di tempo e denaro. Il testo alternativo che viene visualizzato al posto o prima che limmagine arrivi può aiutare lutente a decidere se vale la pena di visualizzare limmagine oppure no
    • 4.5 Elementi non testuali -2-• non fare affidamento a oggetti incorporati o script: gli oggetti incorporati (tag <embed>, <object>, ...) e gli script che si inseriscono allinterno del codice spesso non sono supportati dai device mobili e né tanto meno è possibile installare i plug-in per la loro fruizione. In aggiunta, anche se i dispositivi supportano gli script, questi causano un aumento nel consumo di energia e di conseguenza scaricano più velocemente le batterie. Per questo sarebbe bene evitarli (e in ogni caso se si usa del codice Javascript sarebbe meglio usare il trigger onclick piuttosto che onmouse e onkey, in quanto i meccanismi di input possono essere molteplici)
    • 4.6 ImmaginiSpecificare la dimensione delle immaginiallinterno del codice di markup (ad esempionegli attributi height e width), se esse hanno delledimensioni specifiche. In questo modo il browserè in grado di calcolare in anticipo quanto spazioesse occuperanno. Inoltre ridimensionare leimmagini lato server, se queste hanno delledimensioni specifiche, così il client non deveprocessare il ridimensionamento dellimmagineche rallenterebbe lo scaricamento della pagina.
    • 4.7 CodiceCreare dei documenti con del codiceconvalidato secondo le grammatiche formalipresenti su web. Se la pagina contiene delmarkup non valido il suo aspetto potrebbe esserenon prevedibile e incompleto. Ovviamente ci siauspica che si faccia uso di un mark up pulito edefficiente, che comporta evitare linee e spazi vuoti(come quelli causati dallindentazione) e lutilizzodelle specifiche di stile inline (preferire le classi).
    • 4.8 Fogli di stile (CSS) -1-• usare i fogli di stile per il layout e la presentazione, a meno che si sappia che il dispositivo non li supporta• organizzare il documento in maniera tale che possa essere letto anche senza fogli di stile (ad es., alcuni non supportano il tag <style>, altri supportano solo un foglio di stile per pagina, altri ancora non hanno meccanismi di caching per i fogli esterni, ecc.). Inoltre utilizzare sempre lattributo media specificando sia il valore handheld che all (non tutti i browser interpretano correttamente handheld)
    • 4.8 Fogli di stile (CSS) -2-• fare si che le dimensioni dei fogli di stile siano piccole• Inoltre sarebbe meglio non usare come unità di misura i pixel, o altre unità assolute sia nel codice di mark up che nei fogli di stile. Le unità relative consentono al browser di adattare la pagina ed i suoi elementi allo schermo del device richiedente. Uneccezione a questa regola riguarda le immagini create con una dimensione specifica, apposita per il dispositivo richiedente, per le quali si devono usare i pixel nello specificare laltezza e la larghezza.
    • 4.9 Tipi di Contenuto -1-Il contenuto da inviare deve essere supportatodal device client e, comunque, quando possibile,è bene inviare il contenuto nel formatopreferito. Per determinare quali tipi di contenutoun device supporta si può utilizzare unacombinazione di informazioni sul profilo del device,come quelle contenute negli header http, e neiprofili UAProf.
    • 4.9 Tipi di Contenuto -2-Lanalisi degli header http risulta utile anche perla codifica dei caratteri (intestazioni su Accept-Charset), come specificano le successiveraccomandazioni:• assicurarsi che la codifica del carattere sia supportata dal device client• indicare nella risposta il tipo di codifica utilizzata
    • 4.10 UsabilitàI principi di usabilità per il desktop webraccomandano di fornire dei messaggi di erroreinformativi ed una via di uscita per tornareindietro verso linformazione utile, come adesempio "torna alla pagina precedente", "torna allahome", ecc…
    • 4.11 Note Tecniche• non affidarsi ai cookie. Vi sono dispositivi mobili in commercio – magari anche relativamente obsoleti – che non supportano i cookie, oppure offrono un supporto solo parziale. Quindi è bene non affidarsi solo ai cookie per identificare lutente e per salvare le sue preferenze, per la gestione delle sessioni, ecc… indicare nella risposta il tipo di codifica utilizzata e nei valori dei meta tag correlati (ad es., CACHE- CONTROL ed EXPIRE). E importante che lutilizzo 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 laltra• Non affidarsi allo stile dei font perchè non tutti i dispositivi mobili offrono supporto completo ai font, taluni sono in grado di interpretare solo pochi font e limitati effetti (solo grassetto, corsivo,..)
    • 5. Input degli Utenti -1-Come ci si può aspettare, in ambiente mobile sideve cercare di limitare al minimo lattività diinserimento testuale da parte dellutente:spesso manca infatti un dispositivo dipuntamento e lutilizzo della tastiera non èunattività del tutto agevole.• fare si che lutilizzo della tastiera sia ridotto al minimo• evitare, se possibile, limmissione di testo libero
    • 5. Input degli Utenti -2-• se lutente 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, etc.)• specificare una modalità di inserimento predefinita (sul linguaggio o sul formato di inserimento), se il device la supporta.
    • 5. Input degli Utenti -3-• creare un ordine logico di tabulazione attraverso i link, i pulsanti di controllo, gli oggetti presenti nella pagina. Lutente potrebbe non avere a disposizione un dispositivo di puntamento e muoversi nella pagina esclusivamente con i tasti direzionali. Quindi il passaggio tra i sopra-citati elementi deve avvenire seguendo un ordine logico (lordine di tabulazione si può forzare in HTML con lutilizzo dellattributo tabindex del tag <a>)• etichettare i controlli dei form in maniera appropriata• associare esplicitamente le etichette ai controlli
    • 5. Input degli Utenti -4 -• 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 <label> in corrispondenza degli elementi del form a cui si riferisce. Ad esempio, dovendo riferire un elemento <label> ad un campo di testo per linserimento del nome si farebbe: <label for="nome">nome</label> <input type="text" name="nome" />