Ok, quindi abbiamo messo da parte i nostri principi di Gestalt, quindi impariamo come funziona, diciamo la nostra mente e per utilizzare la nostra vantaggio.

Quando progettiamo però un'altra, cosa fondamentale quando iniziamo a disegnare, ripeto, quando iniziamo a progettare prodotti che le persone devono utilizzare, la gerarchia, la gerarchia è diciamo importante, sempre, in qualsiasi, diciamo contesto in cui si voglia comunicare.

Però ci sono i contesti in cui si puo'.

Come dire sovverte dire per avere un tono di comunicazione più bold, più più espressivo e in altri invece i casi in cui è bene diciamo rispettarla e sapere bene come funziona.

Per imparare meglio a fa a veicolare le informazioni in prodotti dove insomma, le informazioni sono tante, è accatastate, quindi la gerarchia è tutto all'interno di un prodotto digitale.

Vi faccio vedere, per esempio qui un esempio di un'interfaccia questa è una dashboard di operazioni finanziarie.

Può sembrare una dashwood anche che funziona se la dovessi vedere, così direi va bene, sì, riesco a capire un po', un po' tutto.

Però se se io dovessi veramente adesso pensare di fare un'operazione reale su questa dashboard che iniziano un po' le difficoltà perché è tutto sullo stesso livello i colori sono gli stessi, non c' è un focus sulla parte dove magari vedo la mia parte di balance e con economico non c'.

È un focus sulla parte delle quotazioni non c'.

È un focus sul menu.

In quale sezione mi sto trovando in questo momento? Quindi, sebbene questa interfaccia non faccia come dire schifo, possiamo dire senz' Ltro che non è un'interfaccia che gerarchizzata.

Bene, perché se dovesse adesso andare a compiere un'operazione, sarei quasi paralizzata.

Come dovrebbe essere fatta questa interfaccia? Un click e ve lo mostro veramente con pochissimo si rende qui l'importanza della gerarchia evidente.

Per esempio, ho messo in primo piano la voce dashboard che la voce del menu principale e o then fa tzara le altre ho creato una gerarchia.

Quindi dashboard viene più forte in rilievo, è gerarchicamente più prepotente il preponderante delle altre voci e mi sta facendo capire che mi trovo in quella sezione.

Altra cosa che ho fatto rispetto alla precedente ho messo in rilievo tutta la parte appunto legata ai valori economici della mia Dashwood.

Quindi qual è il mio? Il mio totale? Diciamo di di soldi accumulati quanto in cash? Quanti investiti? Certo, queste informazioni c'erano anche prima, ma adesso sono accomunati da quello che abbiamo imparato prima che era il principio della zona comune.

Quindi c' è una zona che sta delimitando tramite il colore quell'.

Rhea mi sta dicendo che li semanticamente quelle formazioni sono tenute insieme? Non solo gli sto dando un grande risalto gerarchico perché quel colore lì me lo sta mettendo veramente, no? Molto in primo piano rispetto al resto della dashboard e poi sotto ancora la tabella, vedete come i dati sono gestiti in maniera diversa.

Per esempio c'è un accento con il colore verde sui i valori di perdita o di vincita a livello economico e vedete che sono state invece di enfatizzate le culture action di acquisto e divenne perché quelle due call to action in quel caso sono come dire paritetiche.

Non ce n'è una più importante o meno importante o vendo o compro.

Ma sono due operazioni che per me che faccio operazioni finanziarie in quel momento sono paritetiche e quindi è giusto che gerarchicamente le metto ad un livello inferiore, mentre prima nella rappresentazione precedente non rappresentate una in blu e rosso, quindi con una gerarchia che sovvertiti va la loro funzionalità.

In questo caso invece la gerarchia è stata messa più in secondo perché quelle azioni sono paritetiche rispetto ad altre operazioni.

Quindi, se adesso dovessi vedere questa interfaccia, la prima cosa che mi risale agli occhi è il mio balance totale.

Poi vedo che cosa sto perdendo? No, grazie agli accenti di colore verde nelle tabelle.

E poi, se voglio fare le operazioni di vendita o di acquisto, posso farle però il mio occhio.

Ho guidato attraverso quella che abbiamo gia' definito la gerarchia altro esempio qui, per esempio, in un'interfaccia gestire la gerarchia tipografica è veramente fondamentale.

Quindi non solo con il colore e noi otteniamo la gerarchia, ma tantissimo con la tipografia.

Guardate che differenza tra questa schermata di sinistra, dove tutte le informazioni testuali di questa ipotetica applicazione di musica sono paritetiche, mentre nelle informazioni di destra la gerarchia è molto evidente, no? Per esempio, il nome dell'utente è in primo piano e guardate come è gestita bene la gerarchia tra titolo della canzone e l'artista, dove il titolo è più grande e il nero è l'artista, è più piccolo e in grigio.

Questo crea gerarchia, crea profondità.

In questo caso l'utente dice Se devo cercare l'artista la gerarchia gli sta dando il là per interpretarlo.

Dove devo andare a cercare l'artista? Beh, è sempre quello più piccolo in grigio sotto.

Se invece avessi messo le informazioni sempre tutto allo stesso livello, senza gerarchia quell'informazione sicuramente l'avrei reperita ma l'avrei reperita con molta più difficoltà.

E questo vale eh vale per tutti i nostri delle nostre interfacce.

Ma non solo la grandezza è importante, quindi la grandezza non è tutto.

Quindi il colore, la parte tipografica, ma attenzione ad esempio nella tipografia anche gli spessori sono importanti.

Guardate questa schermata adesso così è dove cerco di Gerhardt.

Cerchiamo di gerarchizzata re tutto anche attraverso l'uso del del colore e guardate che differenza con pochissimo questa è la mia schermata di base che già mi sembra, diciamo dignitosissima vado a cliccare guardate con pochissimi passaggi quanto l'ho resa piu' evidente.

Ho messo in bold il titolo invece che essere in light o gerarchizzato.

Meglio le informazioni della label per persone informazione economica di quanto costa questo tour con i grigi ho creato una profondità veramente torna indietro, giusto per farvela vedere, guardate che differenza c'è tra questa dove sembra comunque un buon prodotto e invece un prodotto eccelso e dove le forze d'asta dei pesi tipografici veramente rendono ancora migliore la scansione del nostro testo.

Quindi questo è un altro modo di gerarchizzato.

Un altro modo che abbiamo già visto prima è quello di enfatizzare per contrasto.

Quindi immaginiamo, come abbiamo detto dei una voce, una serie di voci di menu e vogliamo mettere in evidenza la voce sulla quale ci troviamo sulla quale ci troviamo.

Abbiamo visto che giocare, magari solo con cambi di colore, quando la luminosità è più o meno simile, non è neanche molto accessibile.

Quindi invece di fare come in questo caso, dove magari le voci dei selezionate sono nere e quella selezionata e viola dove violente, la percezione è poco evidente, posso giocare con un'altra modalità di creare gerarchia e cioè ridurre l'opacità.

Quindi fare in modo che gli oggetti che voglio che vadano ancora di più in secondo piano e vengano ridotti con l'opacità e quindi in questo caso si enfatizza per contrasto.

Altro è altra modalità di enfatizzare per contrasto.

E questa slide che vediamo di una dashboard dove a sinistra o una sai bar di azioni di step che mi stanno raccontando immaginare che voi state comprando un biglietto aereo, avete tutta una serie di step che vi aiutano a seguire le operazioni.

La cosa buona è di non presentare questa sai bar con gli step identica alla parte dove ci sono i contenuti da compilare, quindi di boxe.

Arla all'interno di un box bianco con una linea grigia.

Perché se le facciamo paritetiche queste due informazioni non riesco più a distinguere qual è la parte dove scrivo il contenuto e quella invece che mi sta guidando al contenuto.

E allora come si enfatizza per contrasto la parte di sinistra, come vediamo nella slide che mi dice gli step non viene avvolta da nessun tipo di mash-up di background, perché così risalta rispetto a quella diciamo anche.

Anzi al contrario quella del contenuto risalta rispetto a questa che non è box a te.

Quindi anche qui stiamo creando una gerarchia.

La gerarchia è importantissima anche quando utilizziamo, diciamo tutte quelle schede card descrittive per raccontare un prodotto.

Se utilizziamo bene la gerarchia, non abbiamo bisogno di fare quella cosa che i designer alle prime armi fanno sempre, cioè quello di dover rimettere da capo questa le ball che ci racconta il nostro meta tag, il nostro dan, diciamo finale di rappresentazione quindi che succede se noi dobbiamo immaginate una carne dove rappresentiamo un utente e dobbiamo mettere la sua foto, il suo job title, la sua e-mail, il suo, il suo numero di telefono, il designer, il rispetto che non sa giocare con la gerarchia, che cosa fa? Prende e mette davanti ad ogni informazione.

La label di contesto, quindi mette il nome e cioè il nome.

Poi job title, il job title di seguito, email e phon e via dicendo.

No.

Possiamo ovviamente ovviare a questo semplicemente creando gerarchia delle informazioni invece di mettere una label davanti a tutto.

Se io metto un nome e un cognome facilmente, insomma, diciamo identificabile come nome e cognome.

Non ho bisogno di scrivere che è un nome e cognome, magari lo metto più grande e scuro, magari l'ha invece la parte legata al Jobs act.

La metto in viola o con un colore che dia risalto le altre due parti legate alle informazioni di contatto, la mail, il telefono, ma le metto un po' più piccolo in grigio, in modo semantico, grazie anche ai principi di questa antica.

Queste informazioni le sto raggruppando, le sto veicolando.

Le sto mettendo come un ordine di priorità e di gerarchia, senza bisogno di dover raccontare ogni volta.

Questo è il nome, questo il titolo Questo è il numero di telefono e questa è la mail.

Quindi importante.

Se siete bravi a gerarchi zare dovete più utilizzare le ball.

Ma ovviamente questo poi dipende non sempre vanno deprecata in alcuni contesti ovviamente vanno messe, ma anche qui bisogna capire qual è il vero dato che va messo in risalto.

Guardate questo piccolo focus su questa dashboard dove stiamo rappresentando il battito l'art d del battito cardiaco.

Qual è l'informazione che vogliamo mettere in primo piano qui? Chiaramente è il valore numerico del battito cardiaco.

Quindi invece di mettere ai bordi, è grande il valore piccolo.

Chiaramente dobbiamo creare una gerarchia dove raccontiamo la levo la mettiamo certamente, ma il valore che deve essere gerarchicamente sparato più fuori è quello è del dibattiti.

In questo modo, con veramente una piccolissima attenzione alla gerarchia, abbiamo aiutato facilmente l'utente ha ah a destreggiarsi, quindi ogni tanto le regole ovviamente si possono mettere, ma non devono mai prevalere.

Dipende chiaramente sempre da l'obiettivo.

È chiaro che se noi stiamo visualizzando una serie di prodotti e ci serve scansionare rapidamente le informazioni tipo quanto è alto, quanto è lungo, quanto pesa.

E quindi questi l'hubble ci servono per scandagliare le informazioni all'interno di più schede immaginate per esempio su Amazon.

In quel caso la gerarchia vuole che l'elemento più in evidenza sia la regola in questo caso.

Perché quando devo fare un confronto tra tanti prodotti devo arrivare velocemente a leggere qual è l'altezza? Qual è il peso, qual è la dimensione.

Se queste le bolle le metto in evidenza e ovviamente poi il dato che viene dopo sarà leggermente meno prioritario.

Però queste mi aiuteranno facilmente a creare un confronto con altri prodotti in maniera molto, molto rapida.

Altra attenzione sempre sulla parte della gerarchia che è importante.

Mi raccomando quando qualcuno diceva se date priorità a tutto, non state dando priorità nulla.

Questo è fondamentale.

Quindi immaginate una card dove avete variazioni, quindi quella di pubblicare, cancellare, editare un elemento.

Se mettiamo tutti i pulsanti che hanno tutti una una gerarchia quasi uguale no.

Quindi tutti con colori accesi, dove non capisco quale è prioritario, quale non lo è.

E noi possiamo stabilire una gerarchia in questo contesto, perché presumibilmente il diabete è meno importante del Papa.

Publish se sto all'interno di questa card.

Allora in questo caso la gerarchia va creata in questo modo qua guardiamo la stessa carne di prima, utilizziamo solo calore e utilizziamo anche qui, una volta ancora una volta, la gerarchia per rappresentare la funzione in maniera diciamo scalare.

Quindi il publish è un colore pieno, un pulsante pieno in primo piano.

Le dita è un pulsante che in gergo viene chiamato ghost perché è un po' più trasparente, dove la forma è leggera sotto il colore sopra a contrasto la fonte che ricorda quello di prima, ma meno importante.

E poi un fonte che è una società, un pulsante che viene chiamato in gergo eh no button, perché non ha la forma di un bottone, ma comunque fa la stessa azione.

Quindi senza shape senza forma, semplicemente il testo lineare da cliccare qua che ho creato una gerarchia di funzionalità senza dover ricorrere a utilizzare tre colori diversi che farebbero impazzire l'utente perché appunto non capirebbe qual è la vera gerarchia in questo contesto.

Quindi, guardando come se dovessimo progettare un sistema di design per fare buona e dovessimo avere a disposizione più pulsanti per fare azioni diverse, questa potrebbe essere una tipologia di rappresentazione giusta della gerarchia in quel contesto.

Quindi vedete a sinistra i paramani quasi sempre pieni, i secondari che possono essere fatti in offline.

Confondo molto più leggero i terzieri, che sono semplicemente dei testi che non hanno una shape intorno che li sorregge.