Lezione dal corso UI Design
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.
Piccolo preambolo
1) sono utente fin dal suo lancio
2) quest’anno ho speso oltre 3000 ore sulla piattaforma con oltre 13 corsi
3) Pago di tasca mia l’abbonamento e non ho conflitto d’interessi
Esperienza
Quando Learnn è stato lnaciato ho deciso di abbonarmi perchè ho visto nella piattaforma una possibilità di affrontare argomenti di cui sono carente.
Mi occupo di IT ma non sono così miope da non capire che il digital marketing va conosciuto passando per chi lo pratica.
Ho avuto e avrò anche abbonamenti? Si
Perchè allora dici di iscriversi a questo servizio? Perchè a prescindere di quale servizio specialistico a cui ti abbonerari questa è la base. La base per tutti gli argomenti del digital Marketing oggi e in futuro visto che ogni settinaman escono corsi nuovi e vengono aggiornati, ampliati, approfonditi gli esistenti con gli stessie con nuovi docenti.
I docenti poi sono professionisti e hanno reale esperienza rendendo estremamente pratico applicare i concetti.
Ho una iniziativa nel non-profit e per riuscire, nel tempo libero, a non fare danni e a crescere mi serviva portermi aggiornare e capire come funzionano alcune parti del digital marketing con Learnn ci riesco, mi diverto e sopratutto posso delegare perchè ho capito come funziona quell’ambito.
Avere questo allo stesso prezzo di un abbonamento di streaming permette di ampliare la conoscenza in un ambito in cui troppi parlano senza padronanza.
Prendiamo come società Learnn perchè volevamo avere più il controllo della situazione su ciò che succedeva nel nostro dietro le quinte. Ci sembrava che il nostro venditore non fosse sul pezzo, dormisse sugli allori e non studiasse nuove strategie.
Dopo 1 settimana abbiamo eliminato il nostro “venditore”, ne abbiamo trovati altri validi nel sito con i quali collaboriamo, abbiamo acquisito competenze e abbiamo grazie alla competenza, un sacco di consapevolezza in più, dato che adesso lavoriamo solo online.
Uno degli investimenti migliori mai fatti, insieme ai 50k risparmiati (che non era un problema spendere, volevamo “solo” il lavoro fatto bene)
Learnn è la soluzione olistica alla formazione di imprenditori e professionisti. Professionalmente, essendo un Growth & Innovation Advisor, utilizzo la piattaforma per ampliare la vision e per rimanere sul pezzo grazie a imprenditori e professionisti di altissimo livello presenti al suo interno, che offrono il loro contributo in maniera a dir poco magistrale.
L’abbonamento Learnn permette di avere a disposizione un tool di formazione continua, sempre aggiornato su temi e trend professionali.
Uso Learnn per tenermi costantemente aggiornato sul mondo del digital marketing e per approfondire tutti quelli aspetti dove non sono verificale (sono dei specialist) e lo reputo molto utile per un infarinatura.
Piattaforma estremamente professionale e professionalizzante. Corsi di qualità, docenti anche di più e le risorse a disposizione sono veramente tante. Chiunque può formarsi qui, da chi parte da zero a chi ha già esperienza. La flessibilità nel seguire le lezioni è totale: ci sono lezioni fast per chi ha due minuti al giorno e corsi più strutturati per quando si ha più tempo. C’è anche una parte community da non sottovalutare: grazie alla rete di possibili contatti che hanno creato, io ho trovato lavoro come Digital Marketer!
Ho scoperto Learnn tramite una sponsorizzata IG! Mi si è aperto un mondo! Trovo tutti i corsi molto utili ed interessanti, complimenti a Luca ed a tutto il team Learnn
Learnn e’ tutto ciò che un imprenditore ha bisogno per formarsi ed avere una base solida nel mondo del digital marketing ma anche in tanti altri aspetti.
E soprattutto avere le consulenze 1to1 a pagamento sono un valore aggiunto incredibile non e’ il solito corsetto pre-registrato che poi ti abbandona a te stesso qui puoi confrontarti e secondo me e’ una cosa unica.
Learnn mi ha permesso di approfondire temi che stavo studiando all’università e mi ha fatto scoprire altri corsi che mi sono serviti molto all’inizio del mio percorso da freelance.
Ad oggi ho l’abbonamento annuale perché trovo sempre qualcosa di nuovo e interessante da approfondire.
Consiglio Learnn perché copre una vasta gamma di argomenti e permette di passare da tematiche di Growth alla User Experience passando per il GDPR e la psicologia.
Davvero molto interessante e sempre in espansione.
Ultimamente sono state inserite anche nuove funzionalità che la rendono una piattaforma veramente completa e super utile.
Grazie alla community si possono scambiare opinioni con altre persone che stanno studiando e poi ci sono gli esperti che hanno messo a disposizione anche degli slot a prezzi ragionevoli.
Ultimo ma non meno importante il prezzo che è veramente affrontabile anche per gli studenti universitari.
Luca e tutta la sua squadra hanno davvero fatto un ottimo lavoro, grazie.
Scoprire Learnn è stato un salto di qualità per la mia formazione personale. Con l’autorizzazione dell’azienda, ascolto corsi anche mentre lavoro: con una cuffietta sempre in ascolto e uno dei tre schermi esclusivamente dedicato.
Ritengo che Learnn sia una piattaforma che abbia una mission reale e vera. Si percepisce semplicemente dal prezzo super accessibile e dalla qualità elevata di quasi tutti i corsi.
Avendo completato più di 80 ore posso dire veramente grazie a tutto il team di Learnn che mi ha svoltato la formazione e svoltato a livello pratico il mio lavoro!
Il titolo della recensione sarebbe il Netflix della formazione ma sarebbe troppo da clickbait, però è quello che penso. Buon lavoro!
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 400 corsi, condividi i tuoi risultati, fai networking con otre 170.000 professionisti/e e oltre 700 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 700 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email, no carta richiesta.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri corsi senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
Si, le nostre certificazioni vengono rilasciate al completamento dell’80% di ogni corso dopo il superamento di un quiz di 10 domande.
La certificazione potrà essere condivisa sul proprio profilo personale Learnn e sui proprio profili LinkedIn e CV.
Le nostre certificazioni sono riconosciute da centinaia di aziende che formano i loro team su Learnn e queste aziende assumono abitualmente dentro alla nostra piattaforma.
Iscrivendoti a Learnn avrai accesso ad una community con 150.000 professionisti dove potrai confrontarti, fare networking e trovare nuove opportunità.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.