{"id":457,"date":"2014-05-28T17:59:45","date_gmt":"2014-05-28T15:59:45","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/asse-z-design-per-il-futuro\/"},"modified":"2014-05-28T17:59:45","modified_gmt":"2014-05-28T15:59:45","slug":"asse-z-design-per-il-futuro","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/asse-z-design-per-il-futuro\/","title":{"rendered":"Asse z: design per il futuro"},"content":{"rendered":"

Per anni abbiamo pensato al web come ad uno spazio bidimensionale con pagine messe le une accanto alle altre su un piano piatto ed infinito. Tuttavia, dovremmo adottare nuovi modi per progettare man mano che i device per cui creiamo progetti assumo una crescente variet\u00e0 di forme e dimensioni. Realizzare interfacce utilizzando un sistema di livelli (layer) ci permette di risolvere dei problemi di design delicati, di adattarci in maniera flessibile a una variet\u00e0 di schermi e di creare nuovi pattern che preparano la strada alle interazioni future.<\/p>\n

In termini geometrici, l’asse z \u00e8 l’asse che sta sopra e sotto gli assi x e y. Traduzione per quelli tra noi che dormivano durante le lezioni di geometria: \u00e8 il modo in cui descriviamo i pannelli e i livelli che si posizionano sopra o sotto gli uni agli altri.<\/p>\n

<\/div>\n

Progettare sull’asse z significa semplicemente incorporare la fisica tridimensionale, cos\u00ec come viene rappresentata dall’asse z, nel design delle interfacce. Non si tratta della falsa profondit\u00e0 delle ombreggiature del testo e delle sottolineature dei pulsanti scheumorfiche, ma di un’interfaccia fatta da componenti che esistono su livelli distinti e che si muovono indipendentemente gli uni dagli altri.<\/p>\n

Come faceva notare Andy Clarke<\/a>, la pagina \u00e8 una metafora sorpassata per quello che progettiamo oggi. A differenza della permanenza dell’inchiostro sulla carta, un sito web \u00e8 una serie di viste dinamiche che possono apparire in molte combinazioni. Le applicazioni ci richiedono di considerare numerosi percorsi, pi\u00f9 o meno felici. Perfino i siti statici di pubblicit\u00e0 richiedono che i componenti di design riutilizzabili possano adattarsi alle necessit\u00e0 dei diversi contenuti.<\/p>\n

Utilizzando l’asse z per sistemare gli elementi dell’interfaccia uno sopra all’altro, possiamo creare dei sistemi di design migliori che sono pi\u00f9 flessibili ed intuitivi da usare.<\/p>\n

\n

Utilizzare l’asse z per risolvere i problemi di design<\/h2>\n

Mentre faccio le mie acrobazie tra i vincoli per far s\u00ec che un’interfaccia funzioni fra schermi differenti, incontro spesso gli stessi problemi: Questo dove lo metto? Come rendo questa cosa efficace per gli schermi touch? Cosa posso mostrare subito e cosa posso nascondere?<\/em><\/p>\n

Le risposte non sono semplici, ma fortunatamente possiamo contare sulla presenza dell’asse z quando i pixel a nostra disposizione non sono molti. Dovete sistemare un pannello per le opzioni ma non sapete dove? State cercando di aggiungere dei filtri ma l’eccesso di informazioni da aggiungere alla UI non valgono la candela? Quando state esaurendo lo spazio e siete in cerca di una soluzione intelligente, ricordatevi che avete tre dimensioni su cui progettare che possono venirvi in soccorso.<\/p>\n

Creare un’interfaccia che funzioni in maniera uniforme sull’asse z richiede due elementi importanti: layer e transizioni.<\/p>\n<\/div>\n

\n

1. Layer<\/h2>\n

Il modo in cui incorporiamo i layer \u00e8 la chiave per la progettazione sull’asse z, dal momento che costituisce il modo in cui distinguiamo se i livelli si trovano sopra o sotto gli uni agli altri. Un livello potrebbe contenere un singolo elemento di UI che si sistemi sopra al resto della vista oppure potrebbe essere un’intera schermata che appare e scompare secondo necessit\u00e0. In qualunque modo incorporiate i livelli, ciascuno dovrebbe avere uno scopo, una ragione per cui esistere ed essere usato in maniera consistente per tutto il sito per aiutare gli utenti a comprendere meglio il vostro design.<\/p>\n

Un pannello che copre l’intera interfaccia, per esempio, dovrebbe essere una delle funzioni pi\u00f9 importanti di un sito. D’altro canto, un’opzione in un pannello segreto che scivoli fuori da sotto un altro oggetto dovrebbe essere collegato a qualunque cosa gli stia sopra ma essere allo stesso tempo meno importante.<\/p>\n

Menu<\/h3>\n

Parlando a livello generale, quanto pi\u00f9 un elemento \u00e8 importante tanto pi\u00f9 in alto dovrebbe stare sull’asse z. I menu di navigazione primari si sistemano solitamente sul livello pi\u00f9 alto rispetto agli altri elementi: potrebbero saltare fuori sopra al resto della vista, potrebbero rimanere fissi in cima alla schermata oppure vi si potrebbe accedere facendo “zoom out” da una presentazione del menu pi\u00f9 grande.<\/p>\n

{video width=”550px” \u00a0height=”300px” controls][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/teehanlax.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/teehanlax.mp4″ type=”video\/mp4″]}<\/span><\/p>\n

Teehan + Lax porta questa cosa all’estremo con un overlay del menu sul proprio sito web. \u00c8 pi\u00f9 di un “popover”: \u00e8 un’occupazione di pagina! Grida Guardate il nostro menu!<\/em> L’animazione “slide” combinata con un nuovo livello per la schermata cattura l’attenzione dell’utente, mentre le dimensioni giganti del font e un menu di link pi\u00f9 grandi del solito fornisce pi\u00f9 contenuto di una nav bar tipica e (probabilmente) giustifica il bisogno di un livello separato.<\/p>\n

Mi piace questa presentazione del menu cos\u00ec audace? S\u00ec. Penso che sia una best practice che dovremmo incorporare in tutti i siti che creiamo? Sicuramente no. Non tutti i siti hanno bisogno di cos\u00ec tanta clamorosa originalit\u00e0.<\/p>\n

Tuttavia, adoro il modo in cui questo mi ispira a pensare al menu come ad un pezzo di contenuto in s\u00e9 e per s\u00e9 e non solo come ad un ovvio e noioso elemento dell’interfaccia. Teehan + Lax sottolinea l’atto di presentare un menu all’utente e il modo in cui pu\u00f2 essere di pi\u00f9 di un semplice pop up o uno slide da sinistra: pu\u00f2 essere un’opportunit\u00e0 per sorprendere e deliziare.<\/p>\n

Pulsanti d’azione<\/h3>\n

I pulsanti di azione primaria, come il login o l’aggiunta di un nuovo posto, sono spesso sistemati sopra agli altri elementi sull’asse z. \u00c8 facile dire quale sia la feature pi\u00f9 importante secondo un’app quando essa si trova sopra a tutto il resto. Date giusto un’occhiata all’intestazione della chat di Facebook.<\/p>\n

{video width=”450″ height=”798″ controls=””][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/facebook.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/facebook.mp4″ type=”video\/mp4″]}<\/p>\n

In questo momento, Facebook chiaramente pensa che la messaggistica sia la sua feature pi\u00f9 importante (se non ne siete convinti, Facebook ha anche una app per la messaggistica separata dalla sua app e<\/em> recentemente ha pagato 19 miliardi di dollari per What\u2019s App<\/a>). Dal momento che i livelli permettono agli elementi di rimanere fissi in un posto mentre tutto il resto si muove attorno a loro, i pulsanti azione fluttuanti sono un modo semplice per renderli pi\u00f9 importanti senza che occupino molto del prezioso spazio dello schermo.<\/p>\n

L’asse z d\u00e0 a Facebook un modo semplice per tenere i messaggi in posizione centrale e sul davanti, e anche se non mi piace fare tap sulle facce dei miei amici e della mia famiglia senza sapere da dove vengano, sembra che questo paradigma funzioni<\/a>. Per i clienti che vogliono un pulsante che “risalti” un po’ di pi\u00f9, una delle possibilit\u00e0 pi\u00f9 eleganti consiste nell’usare l’asse z per assegnargli un suo livello.<\/p>\n

Storytelling<\/h3>\n

Gli oggetti posizionati su layer diversi dell’asse z possono muoversi a velocit\u00e0 asincrone durante lo scrolling. Questo effetto, solitamente chiamato parallasse<\/em>, fu sperimentato per primo dai videogames, ma \u00e8 diventato piuttosto popolare nell’interactive design. Quando gli oggetti si muovono a velocit\u00e0 diverse, si crea l’illusione della profondit\u00e0 e si simula il passaggio del tempo, rendendo il parallasse uno strumento potente per lo storytelling online.<\/p>\n

{video width=”550″ height=”300″ controls=””][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/letsfreecongress.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/letsfreecongress.mp4″ type=”video\/mp4″]}<\/p>\n

L’uso superfluo del parallasse come tendenza accattivante \u00e8 stato giustamente criticato, ma l’abilit\u00e0 di muovere i livelli indipendentemente gli uni dagli altri ci permette di animare storie sul web in un modo che non era mai stato cos\u00ec efficace senza l’uso del video. Siti come Let\u2019s Free Congress<\/a> e Inception Explained<\/a> usano lo scrolling asincrono per far diventare delle narrazioni visuali quelle che sarebbero state delle piatte infografiche. Suddividendo gli elementi tramite i layer, ciascun thread pu\u00f2 svilupparsi alla sua velocit\u00e0 mentre l’utente controlla il ritmo dell’azione.<\/p>\n

I web designer hanno sempre lavorato all’interno dei confini di schermi bidimensionali basati sui pixel, forzando interazioni complesse su due assi visuali. I layer su uno schermo piatto sono un hack, ma un hack importante: costituiscono il primo passo verso le vere interazioni multidimensionali che sono solo ad alcuni anni di distanza da noi. Creando dei pattern a livelli fin da adesso nelle nostre interfacce, contribuiamo a preparare gli utenti, e noi stessi, a quello che ci aspetta.<\/p>\n<\/div>\n

\n

2. Transitions<\/h2>\n

Quando usate i layer nel design di un’interfaccia, \u00e8 importante che includiate delle animazioni che rendano pi\u00f9 morbide le transizioni tra essi. Le transizioni animate assolvono diverse importanti funzioni: aiutano ad ammorbidire quello che altrimenti sarebbe un brusco cambiamento, descrivono da dove si viene e dove si \u00e8 arrivati e forniscono degli indizi riguardo a come si collega l’informazione sul nuovo layer tutto il resto.<\/p>\n

Sliding<\/h3>\n

Lo sliding \u00e8 una delle transizioni animate pi\u00f9 comuni perch\u00e9 \u00e8 relativamente semplice da eseguire e facile da capire. Menu di navigazione, pannelli nascosti… E sufficiente farli scivolare quando servono, giusto? Ma proprio come tutte le cose “semplici”, lo sliding richiede pi\u00f9 cura di quello che ci si potrebbe<\/p>\n

{video width=”450″ height=”798″ controls=””][<\/span>source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/gmail.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/gmail.mp4″ type=”video\/mp4″]}<\/span><\/p>\n

Il menu sulla sinistra che troviamo praticamente ovunque, usato in molte app mobile inclusa Gmail, ne \u00e8 un esempio perfetto. Quando viene attivato, il menu di Gmail non scivola da nessuna parte: in realt\u00e0 \u00e8 la finestra principale che scivola a destra, mostrando il menu sulla sinistra sotto alla inbox.<\/p>\n

Questa distinzione \u00e8 importante perch\u00e9 l’abilit\u00e0 di vedere le prime poche parole di ciascun oggetto delle email d\u00e0 funzionalit\u00e0 alla inbox anche quando il menu \u00e8 attivato. Senza tale persistenza, non ha proprio senso che la inbox rimanga l\u00ec. I siti web mobile che cercano di imitare questa interazione dovrebbero prendere nota: far scorrere un menu da sinistra sopra il top di una pagina web solitamente sembra ingombrante e intrusivo rispetto a far scorrere sopra la vista principale.<\/p>\n

{video width=”450″ height=”798″ controls=””][<\/span>source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/tweetlist.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/tweetlist.mp4″ type=”video\/mp4″]}<\/p>\n

Potete anche far scivolare via fuori dalla vista gli elementi esistenti per rivelare dei pannelli nascosti. Tweetlist fa scorrere verso il basso la tastiera per mostrare ulteriori opzioni per il tweet, come ad esempio il geotagging o la possibilit\u00e0 di allegare una foto. \u00c8 un modo intelligente per mostrare delle feature secondarie che non devono necessariamente essere sempre visibili e utilizzare lo spazio dietro alla tastiera rinforza la relazione tra queste opzioni e l’invio di un tweet.<\/p>\n

Zooming<\/h3>\n

L’animazione dello zoom \u00e8 in giro da un po’, ma il suo uso frequente in iOS 7 di Apple ha fatto aumentare sia la sua popolarit\u00e0 sia la sua infamia. Alcune persone hanno detto che lo zoom usato in tutto il sistema operativo, specialmente quando si apre o si chiude un app, d\u00e0 loro la nausea a causa del movimento. Sebbene questo possa essere vero, vale la pena comprendere i vari modi in cui possiamo usare lo zoom per passare da un layer ad un altro mediante transizione e perch\u00e9 alcuni tipi di zoom possono causare nausea e altri no.<\/p>\n

L’animazione che permette di allargare e restringere un singolo oggetto \u00e8 comune nell’universo Apple fin dal rilascio di Mac OS X e dall’introduzione della dock. Ha naturalmente trovato la sua strada nel mondo mobile sull’iPhone e gli utenti vi si sono rapidamente abituati facendo tap su una foto e zoommandoci per vederne pi\u00f9 dettagli.<\/p>\n

Nel caso delle foto, lo zoom \u00e8 una semplice illusione creata allargando l’immagine. Tutto attorno alla foto rimane al suo posto, solo la foto si muove.<\/p>\n

L’effetto zoom usato in iOS 7 \u00e8 pi\u00f9 complesso. Funziona spostando la visuale in dentro o in fuori quando si aprono e si chiudono le app: in tal modo, cambia tutto quello che c’\u00e8 sullo schermo, non solo il singolo oggetto. Quando chiudete un’app, per esempio, la finestra dell’app si restringe nella sua icona sulla schermata home. Osservate il background dietro alla finestra e vedrete tutti gli altri oggetti della schermata home che fanno anch’essi uno zoom all’indietro per rientrare nella vista.<\/p>\n

{video width=”450″ height=”798″ controls=””][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/ios-close.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/ios-close.mp4″ type=”video\/mp4″]}<\/p>\n

Questa differenza cruciale – fare zoom con la vista piuttosto che su un singolo elemento – crea un’illusione molto pi\u00f9 coinvolgente. Sposta la prospettiva di chi osserva su un nuovo livello sull’asse z. Tale spostamento simulato della prospettiva aggiunge un fattore “wow” grazie ad un elemento di super-realismo: mima la fisica del mondo reale, producendo un effetto che sarebbe impossibile nella vita reale. Non stupisce che i designer siano ansiosi di sfruttare le possibilit\u00e0 che offre, nonostante i potenziali effetti collaterali<\/a>.<\/p>\n

{video width=”550″ height=”400″ controls=””][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/creativedash-menu.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/creativedash-menu.mp4″ type=”video\/mp4″]}<\/p>\n

Questo esperimento di design di Creative Dash mostra come fare zoom al massimo con la vista e ci permette di usare lo spazio liminale attorno alla finestra. Il nostro canvas \u00e8 sia profondo sia largo, cos\u00ec si trae vantaggio da entrambe, sebbene l’estrema profondit\u00e0 dello zoom probabilmente far\u00e0 star male qualche utente.<\/p>\n

{video width=”450″ height=”646″ controls=””][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/foursquare.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/foursquare.mp4″ type=”video\/mp4″]}<\/p>\n

Foursquare ha utilizzato una versione dello zoom della vista molto pi\u00f9 sottile per mostrare i dettagli della mappa. Non si va molto lontano, ma lo zoom all’interno rinforza la nozione che si sta andando in un livello di informazione pi\u00f9 profondo.<\/p>\n

Sia che applichiate lo zoom a un singolo oggetto sia che lo applichiate all’intera vista, \u00e8 importante che l’animazione sia consistente con la gerarchia dell’informazione che state usando. Quando fate zoom out con la vista, dovreste essere a un livello pi\u00f9 alto, mentre zoommando in dentro dovreste fornire pi\u00f9 dettagli.<\/p>\n

Altre transizioni<\/h3>\n

Lo sliding e lo zoom sono due delle transizioni animate pi\u00f9 comuni in uso oggi, ma ci sono altre opzioni, incluso il flipping e il folding.<\/p>\n

Gli oggetti tridimensionali hanno due (o pi\u00f9) lati, ma la maggior parte delle interfacce utente sono come la luna: hanno un lato “chiaro” sempre visibile e un lato “scuro” che non si vede mai. Ruotare su s\u00e9 stesso un oggetto crea un nuovo spazio visuale che gli utenti comprendono facilmente. L’unico svantagggio? Il flipping \u00e8 estremamente lento.<\/p>\n

{video width=”500″ height=”600″ controls][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/flipboard.webmhd.webm” type=”video\/webm”][source src=”http:\/\/d.alistapart.com\/393\/the-z-axis-designing-for-the-future\/flipboard.mp4″ type=”video\/mp4″]}<\/p>\n

Sebbene il flipping venga a volte usato per creare una sensazione simile a quella di un magazine, 180\u00b0 sono molti per una transizione: spesso appare lenta e d\u00e0 una senso di interruzione. In contesti in cui la velocit\u00e0 \u00e8 critica, solitamente non vale la pena utilizzarlo per il tempo che il flip aggiunge all’interazione. Detto questo, nel posto giusto e nel modo giusto potrebbe essere “flipping fantastic<\/em>” (esageratamente fantastico). I layout “card-based” offrono una variet\u00e0 di opportunit\u00e0 per ribaltare gli oggetti per rivelarne informazioni aggiuntive.<\/p>\n<\/div>\n

\n

Cosa viene dopo<\/h2>\n

Centri di comando basati sulle gesture, interfacce olografiche… saremo pi\u00f9 preparati ad adattare le nostre capacit\u00e0 a qualsiasi tecnologia si prospetta all’orizzonte se comprendiamo i principi del design per l’informazione, non solo trucchi visuali per disporre le cose con box e colori. Proprio come i print designer una volta hanno imparato a trasferire il proprio talento al web, noi abbiamo bisogno di imparare a portare il nostro talento oltre lo schermo e sentirci a nostro agio con l’asse z \u00e8 un buon modo per cominciare.<\/p>\n

Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Per anni abbiamo visto il web come uno spazio bidimensionale pieno di pagine messe le une accanto alle altre su un piano infinito e piatto. Tuttavia, man mano che i device per cui progettiamo assumono una serie di forme e dimensioni diverse, dobbiamo adottare nuovi modi di progettare. Progettare per l’asse z significa incorporare la fisica tridimensionale nel design di un’interfaccia. Wren Lanier ci spiega come, usando l’asse z per sistemare gli elementi dell’interfaccia uno sopra o sotto l’altro, possiamo realizzare sistemi di design migliori, pi\u00f9 flessibili e pi\u00f9 intuitivi da usare e creare nuovi pattern che preparano la strada per quelle che saranno le interazioni del futuro.<\/p>\n","protected":false},"author":818,"featured_media":7000730,"comment_status":"open","ping_status":"open","template":"","categories":[258,110],"tags":[],"coauthors":[418],"class_list":["post-457","article","type-article","status-publish","has-post-thumbnail","hentry","category-graphic-design","category-numero-93-28-maggio-2014"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/457","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=457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000730"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=457"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}