Font variabili
In questo articolo parlo di font variabili, di come funzionano e dei benefici che offrono. Prima di tutto è necessario fare un po di chiarezza.
Typeface e font: che differenza c'è?
Per comprendere il concetto e capire a pieno le potenzialità di un variable font, chiariamo la differenza tra typeface e font: un typeface include un'intera famiglia di caratteri, per esempio l'Helvetica, invece un font è uno solo dei file di quella famiglia, per esempio l'Helvetica Bold, quindi ogni stile è un file separato.

Cos'è un font variabile?
Un font variabile può includere una famiglia intera di stili di caratteri in un unico file ottimizzato: un unico magico file che opererà come la famiglia completa ✨

Com'è possibile?
Grazie a quelli che vengono chiamati axes, le strutture lineari che caratterizzano un font variabile. Cambiando il valore di un asse possiamo aumentare o diminuire una particolare trasformazione. Il designer che progetta il font variabile può creare tutti i tipi di assi, le possibilità sono quasi infinite. Ma siccome è più facile a vedersi che a spiegarsi, ecco un esempio:
Nulla di nuovo
In realtà non c'è nulla di nuovo nei variable font, perché questi sono apparsi molti anni fa ormai. I caratteri variabili OpenType sono un'estensione della specifica OpenType, introdotta in OpenType 1.8. Nel 2016, Adobe, Apple, Google e Microsoft hanno annunciato la tecnologia che consente a un singolo file di memorizzare una gamma di varianti di un carattere. E allora? Quello che è cambiato è che attualmente sono compatibili con molti browser e con alcuni software quindi potrebbe essere una scelta appetibile per i nostri progetti.
Anatomia di un font variabile
Nel progettare un font variabile si inizia con uno stile centrale detto "default", che solitamente corrisponderà alla versione Regular. Questo viene poi collegato e interpolato con gli altri stili.
Per esempio, l'asse più comune è il Weight, che in questo esempio collega Regular a Black e Regular a Thin. In questo esempio, tra le estremità Thin e Black potremo scegliere tra 800 varianti, dette istanze:

Benefici
1) Facilità gestionale
Un singolo file da installare, un singolo file da implementare nei nostri progetti = meno file da mantenere e gestire.
2) Dimensione
A parità di numero di stili compresi, i file dei font variabili, permettono di avere una riduzione tra il 70 e l'85% del peso.
3) Accessibilità
In un'interfaccia possono essere impostati facilmente per adattarsi al contesto, al device e alle preferenze per una migliore esperienza di lettura. Per esempio in una pagina web potremmo utilizzare la funzione CSS calc() sulle proprietà CSS per variare l'aspetto di un font in base alla larghezza del display del device.
4) Creatività
I font variabili permettono di animare facilmente i nostri caratteri ottenendo degli effetti particolarmente interessanti. Per esempio, i parametri di un asse possono essere animati tramite CSS:
Compatibilità browser
Attualmente i font variabili sono compatibili con la maggior parte dei browser internet.
Browser | Versione |
---|---|
Edge | ✅ 17+ |
Firefox | ✅ 62+ |
Chrome | ✅ 62+ |
Safari | ✅ 11+ |
Opera | ✅ 49+ |
Android Browser | ✅ 81+ |
Chrome per Android | ✅ 89+ |
Firefox per Android | ✅ 86+ |
Samsung Internet | ✅ 8.2+ |
Internet Explorer | ❌ |
Compatibilità applicazioni
Purtroppo, ad oggi (marzo 2021), la compatibilità con i software di design è un po' bassa:
Browser | Versione |
---|---|
Adobe Illustrator | ✅ CC 2018 (22.0.0)+ |
Adobe Photoshop | ✅ CC 2018 (19.0.0)+ |
Adobe InDesign | ✅ CC 2020 (15.0)+ |
Sketch | ✅ 59+ |
CorelDRAW Graphics Suite | ✅ 2020+ |
Quark Xpress | 🔜 Programmato |
Figma | 🔜 “Nella nostra lista, ma non stimata la data di arrivo” |
Affinity Designer | ❌ Bassa priorità |
Affinity Photo | ❌ Bassa priorità |
Affinity Publisher | ❌ No "per un po' di tempo" |
Adobe After Effects | ❌ |
Adobe Premiere Pro | ❌ |
Apple Motion | ❌ |
Apple Final Cut Pro | ❌ |
Dove scaricare variable font?
Di seguito una lista di siti dove puoi scaricare dei font variabili. Attenzione alle licenze, non tutti sono gratuiti per uso commerciale.
5 Font variabili gratis
Questa è una piccola selezione di alcuni font variabili che hanno attirato la mia attenzione, tutti gratuiti per uso commerciale.
Anybody
Axes: Weight, Width, Slant
Designed by: Etcetera Type Company



Pathway Extreme
Axes: Weight, Width, Optical, Slant
Designed by: Eduardo Tunni

Fraunces
Axes: Optical size, Weight, Softness, Wonky
Designed by: Undercase Type


Recursive
Axes: Monospace, Casual, Weight, Slant, Cursive
Designed by: Arrow Type

Petrona
Axes: Weight
Designed by: Ringo R. Seeber


Trispace
Axes: Weight, Width
Designed by: Etcetera Type Company

Altre info
Altre informazioni sui font variabili le puoi trovare qui:
- web.dev/variable-fonts/
- variable-fonts.com
- Episodio del podcast Palazzina Talks di Palazzina Creativa: Variable Font: storia di una rivoluzione tipografica
Sketch versione 55: ecco le novità
Da circa un mese è stata rilasciata la versione 55 del nostro amato Sketch.
Sarò breve, le novità di questa versione sono fondamentalmente 2:
- La nuova funzione Smart Distribute
- La creazione di un livello da codice SVG
Vediamo velocemente di cosa stiamo parlando.
Smart Distribute
Forse una tra le funzioni di cui si sentiva più la mancanza, Smart Distribute permette di gestire la spaziatura tra gli elementi di di una riga o una colonna. Occhio, non sto parlando della vecchia Arrange > Distribute che distribuisce uniformemente gli elementi in base alla posizione del primo e dell'ultimo elemento.
Come funziona Smart Distribute?
Una volta selezionati più elementi, appariranno delle maniglie bianche tra essi. Trascinando queste maniglie, riuscirai ad avvicinare o allontanare gli elementi spaziandoli tra loro in maniera uniforme.

Inoltre è possibile impostare la spaziatura inserendo un valore in pixel dall'Inspector.

Purtroppo al momento la funzione è disponibile solo per righe o colonne specificando lo spazio verticale oppure orizzontale. Non è possibile impostare contemporaneamente i 2 valori per gestire delle griglie.
N.B.: questa funzione non fa altro che riposizionare gli elementi. Quindi, ad esempio, qualora dovessi eliminare un elemento, gli altri non si ridistribuiranno automaticamente secondo il valore impostato. Per gestire situazioni simili consiglio caldamente il plugin Anima che gestisce le spaziature in maniera dinamica (funzione Stack, una manna dal cielo per gestire righe, griglie e altro).
UPDATE: dalla versione 56 puoi utilizzare Smart Distribute per controllare la spaziatura nelle griglie. È possibile regolare facilmente la spaziatura verticale e orizzontale tra le righe e le colonne di livelli. La versione 57 invece integra anche una funzione per il riordinamento dei livelli nella griglia.
Copia incolla da codice SVG
Può capitare di dover copiare un'icona dal web e magari questa non è stata incorporata come un'immagine ma direttamente come codice SVG.
Non so a quanti sia capitato, a me diverse volte. Prima di questo aggiornamento bisognava trovare l'escamotage per salvare in qualche modo quel codice per importarlo in Sketch (ad esempio in un editor di testo e poi salvarlo con estensione .svg).

Con questa nuova implementazione invece basterà copiare il codice SVG, passare a Sketch e incollare il codice. Così facendo verrà generato un livello basato sul codice SVG incollato! 🧙♀️
Altre piccole migliorie
- Migliorate le performance di azionamento delle griglie quando usiamo linee, frecce, livelli e nuovi simboli
- Il copia–incolla di simboli e pagine tra documenti diversi è più veloce e affidabile
- I livelli adesso si agganciano anche al testo ruotato
Conclusione
Dopo qualche settimana di utilizzo posso dire che la funzione Smart Distribute risulta molto comoda e fa risparmiare un po' di tempo. I ragazzacci di Bohemian stanno continuando a lavorare strabene su Sketch 💪
Hamburger icon, l'ennesimo articolo a riguardo
Hamburger Icon — Per alcuni sarà un argomento trito e ritrito, specie per i più vicini al settore UI e UX, ma voglio comunque dirti la mia (e non solo).
Premessa per Newbie - Cos'è l'hamburger icon?
L’hamburger icon ormai è dappertutto. Stiamo parlando di quell’icona rappresentata generalmente da tre linee orizzontali, una sotto l’altra, che cliccandola ci mostra le voci di menu inizialmente nascoste (solitamente nascoste per questione di spazio). Ormai è presente in tantissime app e in altrettanti siti, specie quando li visualizzi da mobile. La prima domanda da porsi è perché.

Perché si usa?
Questa icona assolve alla necessità di ottimizzare gli spazi dedicando alla navigazione un contenitore che verrà mostrato solo su richiesta, appunto solo dopo che l’utente avrà cliccato l’icona in questione. Questo ci permette di non sacrificare voci di menu e, allo stesso tempo, mantenere la nostra interfaccia piuttosto semplice e pulita.

L’origine dell'hamburger icon
Sembra che il primo ad utilizzare l'hamburger icon sia stato Norm Cox nel disegnare un’interfaccia per Xerox Star. All’epoca non divenne così usata, fu poi rispolverata da Apple su iOS quando la propose all’interno dell’app per registrare l’audio. Nel tempo è spopolata anche grazie alla massiccia diffusione degli smartphone fino a diventare la soluzione più semplice e quasi scontata per organizzare delle voci di menu.

Perché non dovremmo usarla?
In giro sul web c’è chi sta quasi demonizzando quest'icona. Ma cosa ci ha fatto di male? La risposta è molto semplice: nulla, ma basterebbe utilizzarla con moderazione nella progettazione delle nostre interfacce.
In breve alcuni evidenti svantaggi:
- Richiede più click per raggiungere la voce di menu desiderata
- A colpo d’occhio l’utente non sa quali siano le sezioni del sito/app
- Ma soprattutto, non tutti sanno a cosa serve!
Molto interessante l'articolo pubblicato su Nielsen Norman Group (se pur datato rimane comunque molto attuale), dove vengono messi in chiaro alcuni numeri a seguito di test di usabilità.
Tutti la conoscono?
La risposta breve è “No”.
La risposta lunga: quando disegniamo interfacce dobbiamo ricordarci che progettiamo per l’utente, o meglio per una varietà di utenti. Tra questi ci saranno indubbiamente quelli meno avvezzi alla tecnologia per i quali non sarà così scontato che dietro quell’icona sia nascosto un menu di navigazione.
Purtroppo si è diffusa anche la pratica di utilizzare questa soluzione per i siti anche quando li navighiamo da desktop. Una fetta dei nostri utenti sarà composta da chi non utilizza smartphone, o comunque da chi non è molto pratico con device mobili, app e simili, che non riconoscerà nell’hamburger icon un’icona dedicata alla navigazione (qualche designer ha ovviato a questo problema affiancandoci un’etichetta “Menu”).
Ma quando parliamo di un sito desktop è proprio la soluzione giusta? Forse no. Con tutto lo spazio a disposizione, se questa risulta la soluzione migliore, allora forse dovremmo fare qualche passo indietro e capire cosa abbiamo sbagliato.
Ok, ma quali sono le alternative all'hamburger icon?
Mentre su desktop personalmente l’abolirei, la situazione cambia su mobile. La prima domanda da farci è “L’hamburger icon è davvero l’unica soluzione?”.
Iniziamo a pensare a delle valide alternative. Se le nostre voci di menu non sono molte potremmo pensare di utilizzare una bottom navigation posizionata quindi in fondo alla schermata. Se le voci di menu sono più di 5, potremmo pensare di usare la bottom navigation per le principali e optare per un’hamburger icon (o qualcosa di simile) per quelle meno importanti. Questa soluzione, se ci fai caso, è utilizzata in parecchie applicazioni.

N.B.: Stiamo attenti quando usiamo soluzioni simili: spesso le sole icone non saranno abbastanza esplicite e sarà bene chiarire dove portano aggiungendoci delle etichette, del testo che renda inequivocabile la navigazione.

Menu con Orizzontal Scroll
Se le voci di menu sono tante o se la bottom navigation ci sembra un approccio "troppo app", potrebbe essere una buona soluzione disporre le voci di menu in alto, una affianco all'altra, dentro un contenitore scrollabile orizzontalmente. Molto interessante la soluzione adottata da Medium: menu disposto in orizzontale con delle frecce per sfogliare le voci.
In conclusione
Non dico di non utilizzare mai l’hamburger icon, ma semplicemente usiamola responsabilmente. A volte la usiamo solo perché risulta la via più facile e veloce, ma prima dovremmo valutare sempre se è la soluzione giusta e vagliare le possibili alternative.
Sketch introduce i prototipi... ed è subito delusione
https://youtu.be/5bsptX8MdPg
Pochi giorni fa, per esattezza il 28 febbraio, Sketch rilascia la versione 49 con un nuova funzionalità: i prototipi.
Dal video sembra tutto molto figo, un'unico software dove è possibile progettare la nostra UI e al tempo stesso sviluppare il prototipo. Cosa potevi chiedere di meglio?
Breve triste storia: preso dall'entusiasmo corro a rinnovare la licenza per poter scaricare la nuova versione. Sono bastati 5 minuti per arrivare alla conclusione che la nuova funzione di prototipazione è davvero deludente.
Panoramica
Come cita il sito ufficiale:
"Ora puoi collegare le tavole da disegno con i Link e i livelli Hotspot per creare prototipi dei tuoi progetti che possono essere visualizzati in Sketch Preview, Sketch Cloud e Sketch Mirror su iOS".
Per fartela breve quando nel tuo progetto hai più Artboard avrai la possibilità, su qualsiasi livello, di impostare un link per collegare un'altra Artboard.
Una volta creato il collegamento dalle proprietà Prototyping potrai settare alcuni parametri (nel pannello Inspector a destra).
Nel dropdown Target potrai scegliere o cambiare l'Artboard di destinazione mentre più giù, da Animation potrai appunto scegliere il tipo di animazione utilizzata durante la transizione da una schermata all'altra.
Inoltre potrai scegliere di disegnare un Hotspot, ovvero un'area rettangolare che fungerà da link senza che questo sia associato ad un livello specifico.
Troverai un tasto Preview che ti permetterà subito di visualizzare e navigare il prototipo.
Il prototipo può essere caricato su Sketch Cloud e quindi condiviso tramite link.
Puoi visualizzare il prototipo sul tuo smartphone con Sketch Mirror, a patto che si tratti di iOS 10 o successivi (via Wi-Fi o USB).
Fine!
La mia opinione
Onestamente, dal software leader nel design della UI, mi sarei aspettato qualcosa in più, a partire dalle animazioni tra le schermate: al momento è possibile solo scegliere la direzione di entrata della schermata successiva (da destra, da sinistra, dal basso o dall'alto) oppure scegliere di non usare un'animazione. Tralasciando il fatto che ci sono molte più animazioni in InVision, ma manca anche la più semplice delle animazioni: un fade, una classica dissolvenza.
Mi aspettavo che i prototipi potessero essere visualizzati anche su dispositivi Android, pazienza.
Non mi sarebbe dispiaciuto poter animare dei singoli livelli, ma per questo sembra che Sketch sia ancora molto lontano. Per prototipi high fidelity vorrà dire che continuerò ad usare il mio fidato Flinto.
Insomma, questa nuova funzione prototipi di Sketch fa molto meno di quello che fa InVision.
In conclusione, sembra una funzionalità ancora molto acerba. Forse Sketch ha accelerato la pubblicazione di questa funzionalità per cercare di bruciare sul tempo l'uscita su larga scala di InVision Studio? Chi lo sa. Spero solo che Bohemian si dia da fare per perfezionare questa feature.
InVision Studio ...ancora in attesa
https://www.youtube.com/watch?v=YXNk4gQCPSY
Sono passati oltre 6 mesi dall'annuncio ufficiale di InVision, ma il tanto desiderato InVision Studio si fa ancora attendere. Non so quanti siano riusciti ad avere un early access, io purtroppo no ;(
Di seguito una breve panoramica sulle funzioni incluse in questo software.
Design
Potremo disegnare le nostre UI direttamente con InVision Studio. Interfaccia pulita, funzionalità di disegno vettoriale, gestione dei livelli e tutto il necessario per la progettazione.
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/start-to-finish-screen-design.mp4
Responsive
Saranno incluse funzionalità responsive per progettare e adattare il design in tutte le dimensioni che desideriamo in maniera facile e veloce.
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/responsive-scaling.mp4
Rapid prototyping
Potremo creare interazioni fluide e prototipi high-fidelity molto velocemente e visualizzare l'anteprima del progetto direttamente nello stesso software.
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/rapid-prototyping.mp4
Animazioni
Gestire animazioni e transizioni sarà semplicissimo. potremo gestire animazioni allo swipe, scegliere tra un set di transzioni già pronte oppure personalizzare l'ease manipolando il cubic-bezier.
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/adv-prototyping.mp4
Librerie condivise
Il Design System Manager di InVision ci permetterà l'accesso immediato alle librerie di componenti condivisi con il nostro team e comprenderà:
- Aggiornamenti in tempo reale
- Controllo della versione
- Ruoli e gestione dei permessi
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/teamwork.mp4
Strumenti di collaborazione
Come già incluso in InVision saranno comprese funzionalità come:
- Inspect che permette di analizzare le proprietà di tutti gli elementi
- Freehand per disegni e annotazioni
- Commenti per ricevere feedback sulle varie schermate
https://s3.amazonaws.com/www.invisionapp.com-studio/static/video/collaboration.mp4
Insomma, un sacco di roba buona. InVision Studio farà tremare il nostro amato Sketch? Sarà in grado di soddisfare tutte le aspettative generate?
Intanto ti lascio con un video dove vediamo questo software in azione:
https://youtu.be/knSZdG7KreA
Ulteriori info sul sito ufficiale.
4 Siti per scaricare Foto Gratis con licenza CC0
Oggi ti segnalo 4 siti utili da dove scaricare foto gratis prive di diritti d'autore.
Spesso nella realizzazione di mockup, prototipi, landing page e design in genere, è necessario l’utilizzo di immagini fotografiche. Purtroppo capita di non avere materiale fotografico ad hoc, magari sei ancora in attesa che il cliente si decida ad ingaggiare un fotografo professionista o più semplicemente non hai budget da dedicare all’acquisto di foto stock.
N.B.: In questi 4 siti trovi immagini che è possibile usare gratuitamente in qualsiasi lavoro, personale o commerciale, senza essere obbligati a citare l’autore (parliamo della licenza Creative Commons CC0).
Pexels
Pexels, è un progetto di Bruno Joseph, Ingo Joseph e Daniel Frese. Fondato nel 2014, ad oggi conta più di 40.000 foto gratuite. Ogni mese vengono aggiunte oltre 3.000 foto ad alta risoluzione.
Unsplash
Unsplash conta oltre 300.000 foto gratuite di alta qualità. Tra i vari contributor spiccano nomi noti come InVision, Medium e Slack.
Tip: se usi Sketch potrai incorporare le foto di Unsplash utilizzando uno dei plugin ufficiali di Sketch senza quindi mai uscire dall'app.
Pixabay
Pixabay, di origine tedesca, ci offre una libreria di oltre 1,3 milioni di foto gratis. Oltre alle fotografie, sono presenti anche illustrazioni, vettoriali e video.
StockSnap
StockSnap è l’ultimo della nostra lista, ma non per ordine di importanza. Anche qui troverai un sacco di foto gratis con licenza CC0.
Se ne conosci un altro sito che mi è sfuggito, segnalalo nei commenti.
Sketch è migliore di Illustrator per disegnare interfacce?
Oggi voglio dirti perché quando disegno interfacce preferisco utilizzare Sketch rispetto ad Adobe Illustrator. Quando si parla di progettazione grafica, chiaramente ognuno ha le sue preferenze in quanto a software, ma se progetti user interface e ancora non conosci Sketch, allora è arrivato il momento di dargli un'occhiata (fidati, te ne innamorerai presto).
Premessa: Questo non è un articolo sponsorizzato e non ho alcun interesse economico nel promuovere l'uno o l'altro software.
Nota dolente: Purtroppo Sketch è disponibile solo per Mac. Se possiedi Windows mi dispiace che tu non possa provarlo.
Per anni ho progettato interfacce di siti web con Adobe Photoshop, quando ancora lo skeumorfismo era sulla cresta dell'onda, poi sono passato ad Adobe Illustrator e da qualche anno ormai uso prevalentemente Sketch.
Andiamo a vedere quali sono i vantaggi di Sketch rispetto ad Illustrator.
1) Prezzo
Il prezzo non è da sottovalutare, specie per un freelance, magari all'inizio della propria carriera. Attualmente Sketch ha un costo di 99 $ una tantum (circa 84,33 €) e comprende aggiornamenti gratuiti nell'arco di un anno. Invece per acquistare Illustrator sono necessari almeno 292,57 € (più del triplo) per una licenza con scadenza annuale.
2) Semplicità e interfaccia
Parliamoci chiaro, io amo Illustrator! Ma ha un sacco di strumenti, che per quanto utilissimi, non utilizzeremo mai e poi mai nell'interface design. La vastità di strumenti che possiede Illustrator richiede quindi un'interfaccia più complessa e organizzata, il che si traduce in più tempo nel trovare ciò che cerchiamo e da parte nostra richiederà sicuramente un maggiore impegno cognitivo.
Sketch ha un'interfaccia molto molto essenziale, tutto a portata di mano. Pochi strumenti che fanno il loro sporco lavoro.
3) Librerie e simboli
Entrambi i programmi incorporano la funzione Simboli, ma quella di Sketch è nettamente superiore.
Piccola panoramica sui simboli
Possiamo intenderli come degli oggetti (elementi o insieme di elementi) che possono essere riutilizzati più volte in più istanze e che sono sempre legati all'oggetto master. OK, in italiano cosa vuol dire? Esempio, se dovrai creare più pulsanti dallo stesso aspetto, allora se userai la funzione simboli, questo ti velocizzerà perché non dovrai ogni volta fare copia incolla, ma cosa molto più importante, ti darà anche l'opportunità qualora tu volessi cambiare aspetto a tutti i pulsanti, di modificare solo l'oggetto master e vedere quindi tutti i simboli collegati aggiornarsi come per magia! Figo, no?!
Inoltre dalla versione 47 di Sketch è stata introdotta la funzione Librerie che ti permetterà di condividere stessi simboli in documenti differenti e averli sempre aggiornati e sincronizzati. Utilissimo, specie quando si lavora su progetti più grandi oppure in team.
4) Plugin
Entrambi supportano l'integrazione di plugin che ti permetteranno di aggiungere funzioni e migliorare il tuo flusso di lavoro. Sketch vince a mani basse: molti più plugin, anche gratuiti.
Ne troverai un sacco sul web, qui quelli sul sito ufficiale.
A tal proposito uno dei plugin per Sketch che ho trovato utilissimo e che uso quotidianamente è Craft di InVision che permette direttamente da Sketch di caricare schermate su InVision per creare i prototipi dei vostri progetti.
Conclusioni
Sketch lo trovo molto più adeguato per user interface design. Ad oggi non trovo ci siano validi rivali, è semplice e abbastanza intuitivo e lo consiglio a tutti coloro che disegnano interfacce. Sia chiaro, Sketch è dedicato solo alla progettazione di UI (anche se qualcuno ci fa anche illustrazioni). Illustrator rimane sempre e comunque un ottimo programma, completo, ideale per progettazione di loghi, prodotti per la stampa, illustrazioni e tanto altro. Personalmente per la progettazione di icone continuo a preferire il buon Illustrator.
Empty State, cosa sono e a cosa servono
Nel settore del design delle interfacce, con la parola “empty state” (letteralmente stato vuoto) si intendono tutte quelle schermate che, per un motivo o per un altro, non restituiscono risultati.

Un esempio
Prova a pensare ad un e-commerce. Stai cercando un prodotto specifico e quindi utilizzi la barra di ricerca per scrivere il nome del prodotto che desideri. Ma purtroppo l’e-commerce potrebbe non avere nulla da mostrarti perché magari non tratta quel prodotto oppure perché hai scritto male il nome.
Cosa verrà mostrato? Ci auguriamo almeno una schermata che indicherà che non è stato possibile trovare ciò che cercate.
È una buona occasione, dopo una schermata “deludente”, per consigliare all’utente un’azione da compiere (ad esempio controllare l’ortografia, fare un’altra ricerca o sfogliare i prodotti per categoria).
Ecco cosa mostra Amazon.it:
Mediaworld.it invece non si preoccupa neanche di avvisarci che la ricerca non ha restituito nulla dopo aver applicato dei filtri (forse per vergogna):
Basta qualche esempio per far capire l’importanza che hanno gli empty state in termini di esperienza utente.
Se pensiamo alle app per smartphone i casi in cui possano essere restituiti degli empty state aumentano. Pensa alla connessione assente o a un timeout causato da una connessione lenta.
Zero Data State
Parliamo di stato zero data quando l'applicativo parte da uno stato, con appunto, zero dati all'interno. Questa è una buona occasion per mostrare un pulsante, una call to action che inviti l'utente a fare la prima mossa.
Esempio: Pensa ad una classica app per le note. È ovvio che dopo il primo avvio ancora l’app non abbia alcuna nota da mostrare, quindi indicherà che non c’è ancora nulla e magari ti inviterà ad inserire la tua prima nota.
Miglior Risultato
Alcune applicazioni quando non trovano risultati a seguito di una query di ricerca, cercano di mostrare comunque qualcosa che si avvicini il più possibile: il miglior risultato.
Pensa ad un qualsiasi ecommerce, piuttosto che non mostrare alcun prodotto potrebbe mostrare una lista di prodotti in un qualche modo collegati alla tua ricerca.
È comunque bene specificare che sono dei suggerimenti e non risultati di una corrispondenza esatta con le parole cercate.
Pensa a quale impatto lato business avrebbe un’accortezza del genere in un ecommerce da milioni di visite.
Spesso ci imbattiamo in casi dove non vengono neanche minimamente pensati gli empty state, questo aspetto viene ignorato o sottovalutato e questo non fa altro che aumentare la delusione dell’utente lasciandolo spaesato. Senza dirgli cosa è successo e perché non viene mostrato nulla, dovrà essere lui a fare delle supposizioni con conseguente frustrazione e probabile chiusura della pagina o dell’app.
Empty State, un po’ d’ispirazione
Se stai cercando un po’ d’ispirazione per i tuoi empty state, fai un salto su EmptyStat.es, un sito completamente dedicato agli stati vuoti, oppure dai un’occhiata a questo articolo su Hongkiat.
User Interface Design, che cos'è?
In questo articolo andremo a vedere in breve cos'è la user interface, o abbreviato, UI.
Forse banale, ma ho voluto dedicare uno dei primi articoli a dare qualche velocissima spiegazione, utile magari a chi si è avvicinato a questo settore da poco.
Con il termine inglese user interface (in italiano interfaccia utente) si intende ciò che è interposto tra un utente e una macchina e permette appunto l'interazione tra queste due parti.
Il nostro mondo è pieno di interfacce utente di diverso genere, possiamo distinguere interfacce utente tangibili (in inglese tangible user interface, abbreviato come TUI) che sono quelle interfacce uomo-macchina che consentono di interagire con un sistema toccando degli oggetti fisici (pensa alle manopole della lavatrice), dalle interfacce utente grafiche. Andiamo ad approfondire queste ultime.
Interfacce utente grafiche
Sono ovunque! Con l'avanzare della tecnologia e col diffondersi di display di qualsiasi dimensione, ormai siamo circondati da interfacce utente grafiche. Dal sistema operativo del tuo computer, smartphone o smartwatch, dai software ai siti internet, da macchinari dotati di display come ad esempio un bancomat o una stampante...
Bene, se non ci fossero le interfacce utente sarebbe un bel problema, perché queste ci permettono di adoperare strumenti/sistemi che altrimenti non saremmo in grado di gestire o comunque non così facilmente.
User Interface Design
Veniamo al design. Se da utenti utilizziamo le UI ogni giorno, quasi mai ci fermiamo a pensare al tipo di lavoro che sta dietro al progetto di tali interfacce (beh, in realtà se siete del settore vi fermerete a pensarci più di quanto vorrete).
Il designer che realizza le UI prende quindi il nome di User Interface Designer (abbreviato UI designer).
UI Design e UX Design
A volte si fa confusione, ma UI design e UX design sono 2 cose ben distinte, o meglio potremmo definire UI design come qualcosa che sta sotto il grande obrello della UX design (User Experience Design).
Mentre lo UI designer si occuperà puramente della parte visuale dell'interfaccia, lo UX designer dovrà curare l'esperienza utente al fine di garantire una piacevole fruizione del prodotto/servizio.
Sono 2 ruoli diversi, ma complementari. Per la nostra interfaccia possiamo sviluppare la grafica più bella di questo mondo, ma se sarà poco usabile, difficile da utilizzare, allora tutto il lavoro di UI design sarà vano. Alla base di un buon progetto di design di un'interfaccia ci sta sicuramente un lavoro di UX design.
Anche se parliamo di 2 figure differenti, sempre più spesso le aziende cercano designer con competenze sia di UI che UX.
Qualcosina in più
Se vuoi approfondire l'argomento ti consiglio alcuni articoli:
Web design, UX design, UI design: qual è la differenza?
C'è sempre un primo post
Ciao, in primis mi presento. Sono Gabriele Malaspina, sono un designer freelance e mi occupo di user experience e user interface design.
Questo è il primo articolo di uiux.it, uno spazio che non si pone alcun obiettivo serio o nobile, non salveremo assolutamente il mondo dalle cattive interfacce, dal design brutto o non funzionale (queste cose ci saranno sempre, facciamocene una ragione).
È solo un contenitore di storie, idee, opinioni e appunti su tovagliolini.
A presto! 🖖🏻