No. 100

Titolo originale:

Pubblicato in: Graphic Design

Scritto da Wren Lanier

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à 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à di schermi e di creare nuovi pattern che preparano la strada alle interazioni future.

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

Progettare sull'asse z significa semplicemente incorporare la fisica tridimensionale, così come viene rappresentata dall'asse z, nel design delle interfacce. Non si tratta della falsa profondità 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.

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

Utilizzando l'asse z per sistemare gli elementi dell'interfaccia uno sopra all'altro, possiamo creare dei sistemi di design migliori che sono più flessibili ed intuitivi da usare.

Utilizzare l'asse z per risolvere i problemi di design

Mentre faccio le mie acrobazie tra i vincoli per far sì 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?

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.

Creare un'interfaccia che funzioni in maniera uniforme sull'asse z richiede due elementi importanti: layer e transizioni.

1. Layer

Il modo in cui incorporiamo i layer è 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à. 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.

Un pannello che copre l'intera interfaccia, per esempio, dovrebbe essere una delle funzioni più 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.

Menu

Parlando a livello generale, quanto più un elemento è importante tanto più in alto dovrebbe stare sull'asse z. I menu di navigazione primari si sistemano solitamente sul livello più 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ù grande.

Teehan + Lax porta questa cosa all'estremo con un overlay del menu sul proprio sito web. È più di un "popover": è un'occupazione di pagina! Grida Guardate il nostro menu! 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ù grandi del solito fornisce più contenuto di una nav bar tipica e (probabilmente) giustifica il bisogno di un livello separato.

Mi piace questa presentazione del menu così audace? Sì. 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ì tanta clamorosa originalità.

Tuttavia, adoro il modo in cui questo mi ispira a pensare al menu come ad un pezzo di contenuto in sé e per sé 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ò essere di più di un semplice pop up o uno slide da sinistra: può essere un'opportunità per sorprendere e deliziare.

Pulsanti d'azione

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. È facile dire quale sia la feature più importante secondo un'app quando essa si trova sopra a tutto il resto. Date giusto un'occhiata all'intestazione della chat di Facebook.

In questo momento, Facebook chiaramente pensa che la messaggistica sia la sua feature più importante (se non ne siete convinti, Facebook ha anche una app per la messaggistica separata dalla sua app e recentemente ha pagato 19 miliardi di dollari per What’s App). 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ù importanti senza che occupino molto del prezioso spazio dello schermo.

L'asse z dà 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. Per i clienti che vogliono un pulsante che "risalti" un po' di più, una delle possibilità più eleganti consiste nell'usare l'asse z per assegnargli un suo livello.

Storytelling

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

L'uso superfluo del parallasse come tendenza accattivante è stato giustamente criticato, ma l'abilità 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ì efficace senza l'uso del video. Siti come Let’s Free Congress e Inception Explained 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ò svilupparsi alla sua velocità mentre l'utente controlla il ritmo dell'azione.

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.

2. Transitions

Quando usate i layer nel design di un'interfaccia, è importante che includiate delle animazioni che rendano più 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 è arrivati e forniscono degli indizi riguardo a come si collega l'informazione sul nuovo layer tutto il resto.

Sliding

Lo sliding è una delle transizioni animate più comuni perché è 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ù cura di quello che ci si potrebbe

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

Questa distinzione è importante perché l'abilità di vedere le prime poche parole di ciascun oggetto delle email dà funzionalità alla inbox anche quando il menu è attivato. Senza tale persistenza, non ha proprio senso che la inbox rimanga lì. 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.

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à di allegare una foto. È 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.

Zooming

L'animazione dello zoom è in giro da un po', ma il suo uso frequente in iOS 7 di Apple ha fatto aumentare sia la sua popolarità 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à 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é alcuni tipi di zoom possono causare nausea e altri no.

L'animazione che permette di allargare e restringere un singolo oggetto è 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ù dettagli.

Nel caso delle foto, lo zoom è una semplice illusione creata allargando l'immagine. Tutto attorno alla foto rimane al suo posto, solo la foto si muove.

L'effetto zoom usato in iOS 7 è più 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'è 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.

Questa differenza cruciale - fare zoom con la vista piuttosto che su un singolo elemento - crea un'illusione molto più 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à che offre, nonostante i potenziali effetti collaterali.

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 è sia profondo sia largo, così si trae vantaggio da entrambe, sebbene l'estrema profondità dello zoom probabilmente farà star male qualche utente.

Foursquare ha utilizzato una versione dello zoom della vista molto più 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ù profondo.

Sia che applichiate lo zoom a un singolo oggetto sia che lo applichiate all'intera vista, è 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ù alto, mentre zoommando in dentro dovreste fornire più dettagli.

Altre transizioni

Lo sliding e lo zoom sono due delle transizioni animate più comuni in uso oggi, ma ci sono altre opzioni, incluso il flipping e il folding.

Gli oggetti tridimensionali hanno due (o più) 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é stesso un oggetto crea un nuovo spazio visuale che gli utenti comprendono facilmente. L'unico svantagggio? Il flipping è estremamente lento.

Sebbene il flipping venga a volte usato per creare una sensazione simile a quella di un magazine, 180° sono molti per una transizione: spesso appare lenta e dà una senso di interruzione. In contesti in cui la velocità è 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" (esageratamente fantastico). I layout "card-based" offrono una varietà di opportunità per ribaltare gli oggetti per rivelarne informazioni aggiuntive.

Cosa viene dopo

Centri di comando basati sulle gesture, interfacce olografiche... saremo più preparati ad adattare le nostre capacità 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 è un buon modo per cominciare.

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Wren Lanier

Wren è una designer con la passione della creazione di esperienze digitali bellissime. Come principal in Neo, aiuta i suoi clienti a realizzare prodotti che le persone adoreranno usare. Quando non crea cose per internet, a Wren piace mangiare bagels, creare problemi e fare pisolini. Di tanto in tanto aggiorna il suo blog e frequentemente condivide troppo su Twitter.