{"id":208,"date":"2011-10-31T11:01:19","date_gmt":"2011-10-31T10:01:19","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/organizzare-il-mobile\/"},"modified":"2011-10-31T11:01:19","modified_gmt":"2011-10-31T10:01:19","slug":"organizzare-il-mobile","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/organizzare-il-mobile\/","title":{"rendered":"Organizzare il mobile"},"content":{"rendered":"<p><i>Siamo lieti di presentare un estratto dal Capitolo 4 di <a href=\"http:\/\/bkaprt.com\/mf\">Mobile First<\/a> di Luke Wroblewski (A Book Apart, 2011). &#8212;Ed.<\/i><\/p>\n<div class=\"paragrafo\">\n<p>Quando si devono organizzare il contenuto e le azioni per il &#8220;Mobile&#8221; [inteso come dispositivi mobili o portatili che permettono la navigazione web ma con risoluzioni ridotte rispetto ai desktop: smartphones come Android, Blackberry e iPhone oppure iPod Touch, PSP, ecc., <em>ndr<\/em>], rimangono importanti dei solidi principi di architettura dell&#8217;informazione come l&#8217;etichettatura chiara, larghezza ed ampiezza ben bilanciate e modelli mentali appropriati. Ma l&#8217;organizzazione delle esperienze per il web mobile ha anche bisogno di:<\/p>\n<ul>\n<li>allinearsi con i modi in cui le persone usano i propri dispositivi mobili e perch\u00e9,<\/li>\n<li>enfatizzare il contenuto invece della navigazione,<\/li>\n<li>fornire opzioni pertinenti per l&#8217;esplorazione e l&#8217;approfondimento<\/li>\n<li>mantenere chiarezza e concentrazione,<\/li>\n<li>allinearsi con i comportamenti mobile.<\/li>\n<\/ul>\n<p>Nelle parte precedente, abbiamo parlato dei vincoli e delle possibilit\u00e0 che rendono unico il progettare per il mobile. In modo simile, il desktop web ha un insieme di limitazioni e possibilit\u00e0 che lo rendono distinto. Quindi, portare semplicemente quello che funzionava per il desktop su mobile, spesso non ha senso. Al contrario, dovete identificare in cosa il mobile \u00e8 unico ed efficiente, ed allinearvi alle esigenze dei vostri clienti.<\/p>\n<p>Guardare questa intersezione ad alto livello pu\u00f2 chiarire come e perch\u00e9 le persone tipicamente usano i propri dispositivi mobili. Nel suo libro <i>Tapworthy<\/i>, l&#8217;autore Josh Clark si concentra su tre comportamenti critici per il mobile: micro-tasking, &#8220;Mi trovo qui&#8221; e &#8220;Mi annoio&#8221;. Questi si allineano molto bene con la suddivisione di Google degli utenti mobile in tre gruppi comportamentali: Urgent Now (ho bisogno urgente di un&#8217;informazione), Repetitive Now (operazione breve ripetuta nel tempo) e Bored Now (devo aspettare, cosa mi pu\u00f2 intrattenere?). Indipendentemente da come scegliate le etichette per questi comportamenti, l&#8217;utilizzo del mobile consiste generalmente di un coppia di tipi di interazione:<\/p>\n<ul>\n<li><i>Ricercare\/Trovare (informazione urgente, locale)<\/i>: Ho bisogno di una risposta a qualcosa adesso. Spesso in relazione con la mia attuale posizione nel mondo.<\/li>\n<li><i>Esplorare\/Giocare (annoiato, locale)<\/i>: Ho un po&#8217; di tempo da far passare e voglio un po&#8217; di distrazione nel mio tempo libero.<\/li>\n<li><i>Check In\/Status (ripetizione\/micro-tasking)<\/i>: Qualcosa che ritengo importante cambia continuamente o si aggiorna e io voglio rimanere aggiornato.<\/li>\n<li><i>Editare\/Creare (cambiamento urgente\/micro-tasking)<\/i>: Ho bisogno di fare una cosa adesso che non pu\u00f2 aspettare.<\/li>\n<\/ul>\n<p>Poich\u00e9 sono direttamente allineati al modo in cui le persone tirano fuori i propri device mobili, questi comportamenti spesso determinano il modo in cui l&#8217;esperienze su mobile pu\u00f2 essere strutturata ed organizzata per venire incontro alle esigenze delle persone. Ad esempio, la mobile web experience della condivisione di foto su Flickr ha quattro azioni primarie. L&#8217;attivit\u00e0 recente e gli upload dei propri contatti permettono alle persone di controllare le novit\u00e0 degli amici e le foto. Le cose interessanti e le foto scattate nelle vicinanze danno alle persone un modo per riempire i tempi morti guardando delle belle fotografie. (Fig. 4.1) <\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-1.jpg\" alt=\"Fig 4.1\" \/><\/p>\n<p>Fig. 4.1: La mobile web experience di Flickr e di Basecamp si allineano con i motivi per cui le persone tirano fuori i propri dispositivi mobili.<\/p>\n<\/div>\n<p>In maniera analoga, la mobile web experience del tool per il project management Basecamp enfatizza l&#8217;abilit\u00e0 di controllare, editare e creare nuovi messaggi, nuove cose da fare e altro ancora. Sebbene i motivi per cui le persone usano Flickr e Basecamp siano diversi, entrambe i siti hanno pensato a come sarebbero stati usati sul mobile e hanno sistemato di conseguenza la propria organizzazione.<\/p>\n<p>Allinearsi con i comportamenti del mobile fa allineare naturalmente il vostro sito web con le esigenze del mondo reale. Dal momento che si pu\u00f2 accedere all&#8217;esperienza mobile da qualunque posto, dovete pensare attentamente a come sar\u00e0 utile per le persone, ovunque esse siano. Questo implica moltissimi casi d&#8217;uso presi dal mondo reale su cui organizzare il proprio sito in base a quello che le persone vogliono davvero fare. Ne ho recentemente trovato un buon esempio in azione. Su <a href=\"http:\/\/bkaprt.com\/mf\/39\">Mobile in Higher Ed blog<\/a>, Dave Olsen ha risposto ad un fumetto xkcd (Fig. 4.2) con:<\/p>\n<blockquote>\n<p>&#8230;guardando il lato destro del diagramma di Venn ho pensato: &#8220;Assomiglia molto al contenuto attuale e pianificato per il nostro sito mobile.&#8221; [&#8230;] rimuovere le cose non necessarie per rientrare nei vincoli di spazio del dispositivo cos\u00ec come nelle limitazioni imposte dalla rete, aiuta a modellare una user experience migliore e pi\u00f9 utile.<\/p>\n<\/blockquote>\n<p>Non avrei saputo dirlo meglio!<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-2.jpg\" alt=\"Fig 4.2\" \/><\/p>\n<p>Fig. 4.2: Un <a href=\"http:\/\/bkaprt.com\/mf\/40\">fumetto di xkcd<\/a> fa la parodia di quello che le persone cercano su un sito di un&#8217;universit\u00e0 e quello che invece vi trovano.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Contenuto sopra la navigazione<\/h2>\n<p>Come regola generale, il contenuto ha la precedenza rispetto alla navigazione su mobile. Sia che le persone controllino dei dati aggiornati di frequente come la borsa, le news o i risultati sportivi, oppure cerchino informazioni locali o facciano un proprio percorso tra degli articoli mediante ricerche o usino strumenti di comunicazione, vogliono risposte immediate ai propri bisogni, non la sitemap del vostro sito.<\/p>\n<p>Troppe mobile web experience (come gli esempi di Flickr e Basecamp che abbiamo appena visto) cominciano la conversazione con una lista di opzioni di navigazione invece che con del contenuto. Su mobile il tempo \u00e8 spesso prezioso e i download possono essere costosi, quindi portate pi\u00f9 in fretta che potete le persone verso quello per cui sono venute.<\/p>\n<p>Le mobile web experience di YouTube e ESPN fanno proprio questo. Un semplice header vi dice su che sito siete e relega le opzioni di navigazione ad una singola azione. Il resto della pagina \u00e8 riempito di contenuto aggiornato da controllare (ESPN) e di passatempi popolari da esplorare (YouTube) (Fig. 4.3).<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-3.jpg\" alt=\"Fig 4.3\" \/><\/p>\n<p>Fig. 4.3: Le mobile web experience di ESPN e YouTube mettono l&#8217;attenzione sul contenuto invece che sulla navigazione.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Pivot ed esplorazione<\/h2>\n<p>Aspetta un attimo: se il contenuto ha sempre la precedenza sulla navigazione, come posso muovermi nella mobile web experience? Non abbiamo bisogno di un modo per navigare e scoprire che informazioni sono disponibili? Ovviamente, ma permettendo alle persone di esplorare e valutare le possibilit\u00e0 nel contenuto rilevante non deve implicare montagne di barre di navigazione che affossano il contenuto.<\/p>\n<p>Ad esempio, \u00e8 ottimo che Facebook metta il contenuto rilevante che posso controllare frequentemente nella parte prospiciente e centrale della web experience, ma a causa delle tre barre di navigazione in cima alle loro pagine, posso solo vedere un aggiornamento sul mio schermo. La mobile web experience di Google Finance ha anch&#8217;essa del contenuto rilevante e aggiornato, il quale per\u00f2 \u00e8 schiacciato tra cinque barre di navigazione. C&#8217;\u00e8 molto spazio prezioso sullo schermo sprecato per le opzioni di navigazione di cui le persone non hanno bisogno, spazio che avrebbe potuto essere dedicato a del contenuto utile. (Fig. 4.4).<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-4.jpg\" alt=\"Fig 4.4\" \/><\/p>\n<p>Fig. 4.4: Facebook e Google Finance riempiono lo spazio con molte opzione di navigazione nella propria mobile web experience.<\/p>\n<\/div>\n<p>Facebook ha recentemente ridisegnato la propria mobile web experience e in effetti ha ridotto il numero di opzioni di navigazione (Fig. 4.5). Se non contiamo i filtri Top News e Most Recent sui loro news feed, hanno dimezzato il numero di scelte di navigazione (da dieci a cinque). E&#8217; un buon inizio! <\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-5.jpg\" alt=\"Fig 4.5\" style=\"border: 1px solid #aaa;\" \/><\/p>\n<p>Fig. 4.5: Il recente redesign di Facebook ha tagliato il numero di opzioni di navigazione nella propria mobile web experience.<\/p>\n<\/div>\n<p>Gli esempi di YouTube e ESPN (Fig. 4.3) enfatizzano entrambe il contenuto piuttosto che la navigazione, ma gestiscono in maniera differente la possibilit\u00e0 di girare ed esplorare il resto del sito attraverso la navigazione. YouTube fornisce uno shortcut a un&#8217;esperienza a tutto schermo dedicata a girare per il sito (Fig. 4.6). Questo approccio richiede che voi cerchiate attivamente le opzioni di navigazione e vi porta fuori dal contesto (ad una pagina separata) quando lo fate. Avete anche bisogno di sapere che l&#8217;icona con la griglia nell&#8217;header di YouTube significa &#8220;menu di navigazione, per favore&#8221;<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-6.png\" alt=\"Fig 4.6\" \/><\/p>\n<p>Fig. 4.6: La mobile web experience di YouTube include un&#8217;intera pagina di navigazione accessibile dall&#8217;header.<\/p>\n<\/div>\n<p>ESPN ha un bottone con un&#8217;etichetta pi\u00f9 chiara, &#8220;Menu&#8221; che si trova nell&#8217;header e che rivela una lista di navigazione estesa (e su pi\u00f9 livelli) direttamente sotto di esso (Fig. 4.7). Questo approccio vi permette di rimanere sulla pagina corrente mentre ponderate su dove andare in seguito. Nessun bisogno di spostarvi e di caricare una pagina separata. ESPN ripete anche le proprie opzioni di navigazione in un menu in fondo alla maggior parte delle pagine.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-7.png\" alt=\"Fig 4.7\" \/><\/p>\n<p>Fig. 4.7: La mobile web experience di ESPN include le opzioni di navigazione nell&#8217;header e in fondo ad ogni pagina.<\/p>\n<\/div>\n<p>Si interagisce pi\u00f9 facilmente con i controlli in fondo allo schermo con una sola mano e presentano alle persone le scelte e le idee su cosa fare quando arrivano alla fine dello schermo. Al design di YouTube mancano questi pivot alla fine delle proprie pagine: quando si arriva in fondo, non c&#8217;\u00e8 alcun posto in cui andare (Fig. 4.8).<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-8.png\" alt=\"Fig 4.8\" style=\"border: 1px solid #aaa;\" \/><\/p>\n<p>Fig. 4.8: Le opzioni alla fine della pagina nella mobile web experience di YouTube sono praticamente una strada senza uscita. Uscire? Dare un feedback?<\/p>\n<\/div>\n<p>Sebbene i menu in fondo siano utili per ulteriori esplorazioni, probabilmente non dovrebbero solo duplicare un menu che si pu\u00f2 trovare altrove. Al contrario, un pulsante per il menu messo in alto pu\u00f2 semplicemente mandare alla lista di navigazione sul fondo della pagina web mobile (dopo il contenuto). Abbiamo recentemente adottato questo approccio nella mobile web experience di Bagcheck (Fig. 4.9).<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-9.png\" alt=\"Fig 4.9\" \/><\/p>\n<p>Fig. 4.9: Un link nell&#8217;header di Bagcheck vi porta al menu di navigazione del sito in fondo alla pagina.<\/p>\n<\/div>\n<p>Un semplice link nell&#8217;header della pagina fa saltare le persone alle opzioni di navigazione in fondo alla pagina. Avere questa lista alla fine delle pagine di contenuto permette alle persone di girare ed esplorare altre parti del sito. Specialmente quando arrivano direttamente ad una pagina di contenuto e potrebbero non avere familiarit\u00e0 con il resto di quello che il sito offre.<\/p>\n<p>Il menu in fondo alle pagine di Bagcheck ha anche un link &#8220;top&#8221; che porta le persone di nuovo all&#8217;inizio della pagina, nel caso volessero ritornare al contenuto che stavano guardando.<\/p>\n<p>Questo design usa una minima quantit\u00e0 di elementi di navigazione (solo un unico link in cima), d\u00e0 alle persone un&#8217;opportunit\u00e0 per girare ed esplorare quando arrivano alla fine del contenuto, non duplica il contenuto di un altro menu e (meglio di tutto) richiede solo un semplice link per funzionare. Proprio cos\u00ec: nessun JavaScript, nessun overlay o pagina di navigazione separata da mantenere: solo un link che porta in fondo alla pagina. E&#8217; come HTML 0 (Che so che funziona nella maggior parte dei browser tranne che in Internet Explorer).<\/p>\n<p>Le pagine di contenuto su Bagcheck hanno anche delle liste di navigazione uniche correlate, per un&#8217;esplorazione pi\u00f9 profonda (Fig. 4.10). Queste opzioni di navigazione permettono alle persone di immergersi in ulteriori informazioni riguardanti un singolo argomento a loro scelta. Oppure possono semplicemente usare le opzioni di navigazione globale sottostanti per muoversi verso nuove aree del sito.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-10.png\" alt=\"Fig 4.10\" \/><\/p>\n<p>Fig. 4.10: I menu di navigazione contestuale nella mobile web experience di Bagcheck permettono alle persone di esplorare del contenuto correlato.<\/p>\n<\/div>\n<p>Le opzioni di navigazione contestuale sono molto utili anche per i task. Nella mobile web experience di Gmail (Fig. 4.11), si pu\u00f2 accedere dall&#8217;alto dello schermo ad un menu contestuale di azioni. Poich\u00e9 queste azioni sono direttamente correlate al messaggio di email che \u00e8 attualmente visualizzato, metterle in fondo alla pagina non sarebbe molto efficiente. Al contrario, sono sempre presenti in alto e pertanto istantaneamente accessibili.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-11.png\" alt=\"Fig 4.11\" \/><\/p>\n<p>Fig. 4.11: Le azioni contestuali della mobile web experience di Gmail permettono alle persone di agire rapidamente sulle proprie email.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Tornare indietro<\/h2>\n<p>E&#8217; sempre interessante vedere come le soluzioni di design passano i confini digitali. Ad esempio, molte applicazioni native di iPhone hanno dei link &#8220;back&#8221; bene in vista nell&#8217;header di navigazione (Fig. 4.12). Ai dispositivi mobile di Apple manca un pulsante fisico per tornare indietro e non mostrano alcuna azione nella GUI del browser di sistema per applicazioni native.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-12.png\" alt=\"Fig 4.12\" \/><\/p>\n<p>Fig. 4.12:  Il pulsante &#8220;back&#8221; \u00e8 una caratteristica comune nelle applicazioni native di iPhone.<\/p>\n<\/div>\n<p>Tuttavia la presenza di un pulsante &#8220;back&#8221; nell&#8217;header \u00e8 migrata inutilmente nella mobile web experience. Molti dispositivi (Android, Blackberry, Windows Phone 7, ecc.) hanno un pulsante fisico per tornare indietro (Fig. 4.13). Anche il browser web mobile di Apple include un controllo prominente per torare indietro nella toolbar dell&#8217;applicazione (Fig. 4.14). Aggiungere un altro pulsante per tornare indietro nell&#8217;header della vostra mobile web experience confonde solo le cose. Qualcuno che usa il sito potrebbe chiedersi: &#8220;Entrambe questi pulsanti per tornarne indietro fanno la stessa cosa?&#8221;<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-13.png\" alt=\"Fig 4.13\" \/><\/p>\n<p>Fig. 4.13: I dispositivi Android hanno un pulsante hardware sul dispositivo per tornare indietro.<\/p>\n<\/div>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-14.png\" alt=\"Fig 4.14\" \/><\/p>\n<p>Fig. 4.14: Il mobile web browser di Apple ha un bottone per tornare indietro permanente nella toolbar in fondo.<\/p>\n<\/div>\n<p>Quindi, quando progettate delle mobile web experience, potete lasciare il pulsante &#8220;back&#8221; nell&#8217;app nativa. Se avete bisogno di dare alle persone un modo rapido per tornare &#8220;su&#8221; di un livello, considerate di dargli un nome diverso da &#8220;back&#8221;.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Stare in fondo<\/h2>\n<p>Parlando di applicazione iPhone native, molte di queste usano delle barre di navigazione con posizione fissa in fondo allo schermo. Questi menu rendono pi\u00f9 semplici le azioni per accedervi utilizzando i pollici, ma a differenza della mobile web experience, le applicazioni iOS native non hanno dei controlli del browser web che si mangiano dello spazio sullo schermo. La mobile web experience di Yahoo! Mail illustra l&#8217;impatto che l&#8217;interfaccia di un browser pu\u00f2 avere su una pagina web mobile. I due menu del browser e i due menu a posizione fissa nella mobile web experience di Yahoo! Mail lasciano poco spazio in effetti per vedere cosa c&#8217;\u00e8 nella propria inbox (Fig. 4.15).<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-15.png\" alt=\"Fig 4.15\" style=\"border: 1px solid #aaa;\" \/><\/p>\n<p>Fig. 4.15: La mobile web experience di Yahoo! Mail usa un menu di navigazione fisso in fondo alla finestra del browser.<\/p>\n<\/div>\n<p>Tuttavia le mobile web experience non deve solo affrontare la GUI di un browser web su iOS: devono affrontare molti browser web. I dispositivi con controlli fisici sotto al loro schermo presentano anche una sfida per i menu fissi al fondo dello schermo (Fig. 4.16). La stretta prossimit\u00e0 di questi controlli e la barra del menu di un&#8217;applicazione indicano che \u00e8 destino che ci siano degli errori dal momento che le persone non usano i menu ma i pulsanti fisici.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-16.png\" alt=\"Fig 4.16\" \/><\/p>\n<p>Fig. 4.16: Molti device hanno dei controlli fisici sotto allo schermo.<\/p>\n<\/div>\n<p>Quando sviluppate un&#8217;applicazione mobile dovreste aggiustare la posizione di un menu tenendo conto dei pulsanti fisici sotto al monitor, ma la mobile web experience deve lavorare su pi\u00f9 piattaforme, sia che ci siano i pulsanti fisici sotto lo schermo sia che non ci siano. Pertanto, mentre i menu di navigazione fissati in fondo al monitor possono essere una buona idea in alcune applicazioni native, la presenza variabile di menu nei browser web e di controlli fisici sotto lo schermo dei dispositivi mobili implicano che sono spesso una pessima idea per la mobile web experience. Se avete bisogno di un menu fisso, \u00e8 meglio metterlo in alto, come ha fatto Twitter nella loro nuova mobile web experience (Fig. 4.17)<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-17.png\" alt=\"Fig 4.17\" \/><\/p>\n<p>Fig. 4.17: L&#8217;ultima mobile web experience di Twitter usa un menu di navigazione in alto per le azioni principali per tenere in considerazione le differenze tra i dispositivi web mobili.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Mantenete chiarezza e concentrazione<\/h2>\n<p>Come ho detto nella prima met\u00e0 di questo libro, quando si trovano sui loro dispositivi mobili, le persone usano spesso &#8220;un occhio e un dito&#8221;. Di solito non sono seduti comodamente di fronte ad una scrivania e concentrati sul vostro sito. Al contrario, si trovano nel mondo reale, con molte possibili distrazioni tutte intorno a loro. In queste situazioni abbiamo solo parte della loro attenzione: hanno bisogno di design chiari e precisi per portare a termine quello che devono fare; non hanno bisogno di molte opzioni di navigazione che gli si mettono tra i piedi. <\/p>\n<p>Lo schermo di composizione email di Yahoo! Mail \u00e8 un grande esempio di come rimuovere azioni estranee e di permettere alle persone di concentrarsi sui task primari (in questo caso, scrivere un&#8217;email) sui propri device mobili. Questo monitor contiene solo un&#8217;unica azione di navigazione: &#8220;cancel&#8221; (Fig. 4.18). Il resto dell&#8217;interfaccia \u00e8 super concentrata sui task sotto mano.<\/p>\n<div class=\"illustration full left\">\n<img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/4-18.png\" alt=\"Fig 4.18\" \/><\/p>\n<p>Fig 4.18: Fate un confronto tra le opzioni di navigazione nel Compose Mail di Yahoo! (a sinistra) ed le schermate del live game di ESPN (a destra).<\/p>\n<\/div>\n<p>Gli aggiornamenti in tempo reale delle partite di NBA, d&#8217;altro canto, sono coperte con cos\u00ec tante opzioni di navigazione che la visualizzazione di quello che sta succedendo nel gioco \u00e8 fuori dallo schermo. La cosa da fare \u00e8 vedere le azioni di gioco, non saltare da un&#8217;opzione all&#8217;altra.<\/p>\n<p>Minimizzare la quantit\u00e0 di opzioni di navigazione sugli schermi mobile aiuta anche a prevenire gli errori. Con meno scelte di navigazione, \u00e8 meno probabile che le persone passino accidentalmente ad altri task mentre cercano di raggiungere il proprio obiettivo.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Organizzare il mobile<\/h2>\n<p>Quando organizzate le mobile web experience, pensate bene a come potete allineare i comportamenti su mobile ai bisogni dei vostri utenti.<\/p>\n<ul>\n<li>I casi d&#8217;uso del mobile come ricercare\/trovare, esplorare\/giocare, controllare\/status ed editare\/creare vi permettono di pensare a fondo a come il vostro sito verr\u00e0 usato su mobile ed aggiustarne la struttura di conseguenza.<\/li>\n<li>Concentrarsi prima sul contenuto e poi sulla navigazione permette alle persone di arrivare alle informazioni che cercano e di fare quello che devono in maniera pi\u00f9 rapida.<\/li>\n<li>Opzioni di navigazione rilevanti e messe in punti strategici permettono alle persone di immergersi o di esplorare altre parti del vostro sito.<\/li>\n<li>Ridurre la quantit\u00e0 di scelte di navigazione e di interfaccia sui compiti chiave mantiene chiarezza e concentrazione su ci\u00f2 che le persone devono portare a termine, d&#8217;aiuto quando hanno fretta o si trovano in una situazione meno che ideale.<\/li>\n<li>E quando hanno davvero del tempo in cui si rilassano sul divano con il loro dispositivo mobile, le persone apprezzeranno ancora la semplicit\u00e0 del vostro design!<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Quando si stanno organizzando i contenuti e le azioni per il mobile, sono sempre importanti alcuni solidi principi di architettura dell&#8217;informazione come un&#8217;etichettatura chiara, larghezza e profondit\u00e0 ben bilanciate ed appropriati modelli mentali. Ma l&#8217;organizzazione delle esperienze nel mobile web deve anche allinearsi con le modalit\u00e0 con cui le persone usano i loro dispositivi mobili e perch\u00e9, enfatizzare il contenuto piuttosto che la navigazione, fornire opzioni rilevanti per esplorazione e pivoting, mantenere chiarezza ed attenzione ed allinearsi ai comportamenti mobile. In questo esclusivo estratto dal suo nuovo libro, citeMobile First!\/cite, Luke Wroblewski spiega come fare tutto questo.<\/p>\n","protected":false},"author":818,"featured_media":7000634,"comment_status":"open","ping_status":"open","template":"","categories":[279,273,52],"tags":[],"coauthors":[311],"class_list":["post-208","article","type-article","status-publish","has-post-thumbnail","hentry","category-interaction-design","category-mobile-multidevice","category-numero-38-31-ottobre-2011"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000634"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=208"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}