Share
Il numero di icone che vediamo ogni giorno è sorprendente. Sono ovunque intorno a noi, sia online che offline. Ci piace usarli. Migliorano l'estetica dei nostri siti e possono offrire un'esperienza utente migliore. A volte, tuttavia, dimentichiamo il motivo dietro l'utilizzo di un'icona, e in quel momento diventa facile per le icone perdere la loro efficacia.
L'attributo principale per le icone è l'a linguaggio visivo comune che colma efficacemente le lacune linguistiche. Sono immediatamente riconoscibili e rimuovono l'interpretazione aperta. Questo li rende perfetti per un contesto digitale, poiché Internet è condiviso da molte persone e dalle loro culture corrispondenti.
Screenshot di The Noun Project Progettare un'icona che sia universalmente leggibile è ancora una grande sfida. Le nostre culture hanno tutte convenzioni grafiche che possono portare a confusione sul significato di alcune icone personalizzate.
Esplorare una nuova interfaccia composta da molte icone può essere una sfida a prima vista. Ci vuole un po 'per renderci conto di dove tutto è e abituarsi al significato di ogni icona. Per questo motivo, le icone di etichettatura (usando il titolo attributo, o forse tooltip personalizzati) miglioreranno l'efficacia per l'apprendimento di una nuova interfaccia ed è considerata una best practice. In realtà, è ampiamente accettato che le icone in combinazione con le etichette vengano elaborate più rapidamente dagli utenti.
Uno degli errori più comuni che facciamo è quello che usiamo troppi icone in una data impostazione. Le icone sono più efficaci quando migliorano l'interesse visivo e catturano l'attenzione dell'utente. Aiutano a guidare gli utenti mentre navigano su una pagina. Usa troppe icone e diventeranno nient'altro che decorazioni. Il loro uso per la navigazione su una pagina web può spesso causare una diluizione.
Facebook usa così tante icone, non servono più a creare interesse visivo ma ad agire più come decorazione. 
Alcune interfacce Windows utilizzano icone complicate, che non forniscono un'interfaccia pulita e quindi riducono la facilità d'uso. Limitando la quantità di icone che usi, attirerai l'attenzione dell'utente più rapidamente, semplificando la navigazione.
Il piè di pagina di The Verge fa un uso intelligente delle icone. Qui, le icone hanno un chiaro valore aggiunto e il layout non sembra ingombrante. 
In questa schermata di Behance, le icone sono attentamente bilanciate per rendere più rapida la comprensione della pagina. 
Anche se questa pagina artistica su Artsy contiene molte icone, a causa del semplice branding del sito Web, le icone funzionano perfettamente per aiutare l'utente a effettuare le scelte di navigazione. I kit di icone sono fantastici, ma a volte è meglio provare e progettare le proprie icone o modificare icone esistenti (con autorizzazione) in base alle proprie esigenze. L'aspetto grafico di un sito Web dovrebbe riflettersi nelle icone che utilizzi. Come puoi vedere negli esempi, questo non dovrebbe essere necessariamente un compito molto difficile, ed è sicuramente qualcosa che puoi tenere a mente per migliorare il marchio del tuo sito web. Sono i piccoli dettagli che fanno la differenza tra un ottimo sito Web e un sito Web eccezionale.
D'altra parte, la creazione di un contrasto dal marchio regolare può rendere ancora più facile costruire un interesse visivo. Ecco un esempio da Twitter. Guarda come spicca il pulsante per scrivere un tweet?
In termini di immagini visive, le icone dell'interfaccia dovrebbero essere abbastanza diversificate per essere distintive, pur essendo abbastanza coerenti da funzionare come un insieme coerente.
La più grande trappola è nell'uso delle icone perché offrono un'estetica, non perché comunicano. Le icone grandi sono visivamente piacevoli e comunicano con gli utenti.
Senza icone, saremmo obbligati a utilizzare il testo per descrivere determinate funzionalità ai nostri utenti. Mentre questo rende le interfacce accessibili, puoi immaginare un video player usando solo il testo che dice "play", "pause", "like", "fullscreen"? Le icone forniscono metafore familiari per comunicare velocemente.
Il potere delle icone è usato per capire come funziona questo lettore video in modo abbastanza rapido ed efficiente. 
La combinazione di colori e un'icona riconoscibile fornisce feedback: qualcosa non va. È anche possibile dare agli utenti risposta attraverso icone, di solito fatte in combinazione con il colore. Ad esempio, un segno di spunta verde mostra agli utenti che è disponibile un nome utente. Una croce in una casella rossa indica all'utente che non ha reinserito correttamente una nuova password. Le icone possono aggiungere un supporto meraviglioso, specialmente se applicate in tempo reale. Nell'esempio sopra, ricevo una notifica se inserisco qualcosa che non è un URL tempo reale. Il concetto alla base di questo ha molti potenziali scopi, i quali migliorano l'esperienza dell'utente.
Ora viviamo in un momento con schermi di dimensioni diverse, layout fluidi e densità di pixel variabili. Ciò ha avuto un'influenza importante nel modo in cui trattiamo le immagini e quindi ha senso solo che influenzi anche il modo in cui gestiamo le icone.
Abbiamo sempre più l'abitudine di ottimizzare le immagini per diversi dispositivi, ma possiamo anche personalizzare le nostre icone per creare un'esperienza impeccabile. Un'icona particolare può funzionare molto bene a 200px, ma il suo messaggio è ancora chiaramente trasmesso a 12px o i suoi dettagli diventano sfocati? Recentemente, abbiamo pubblicato un articolo che tratta dell'iconografia reattiva, spiegando ulteriormente questo concetto.
Le icone vengono abusate ignorando le pratiche comuni. Quando gli utenti si abituano a riconoscere un'icona nel senso di qualcosa, alterare l'azione dietro quell'icona è estremamente confusa.
Per questo motivo, vengono continuamente proposti standard e perfezionata l'iconografia esistente. Dai un'occhiata a ciò che Andy Clarke ha da dire su uno standard di icone per la navigazione reattiva .
La regola più importante rimane comunque: non allontanarsi dagli schemi utente esistenti. Anche se una nuova fantastica icona del menu sembra un ottimo modo per mettere alla prova le tue capacità progettuali e realizzare un design unico, allo stesso tempo potrebbe essere un disastro per l'usabilità.
Più recentemente, un post sul blog pubblicato su Medium ha criticato l'uso di icone vuote, dopo la recente versione di iOS 7. Ha affermato che l'uso di icone vuote richiede più "lavoro" da parte degli utenti. Questo post sul blog è stato ampiamente discusso nella comunità di web design. Ci sono diversi punti di vista interessanti. Tuttavia, ciò su cui siamo tutti d'accordo è il fatto che l'iconografia dovrebbe avere senso per l'utente. Il che, ovviamente, riguarda le convenzioni.
Avevo in mente un obiettivo quando scrivevo questo articolo: ricordarci a tutti noi di chiederci perché stiamo usando icone sui siti Web che creiamo. Per molti di noi è diventata un'automazione per includerli nei nostri progetti naturalmente. La prossima volta, chiediti quale sia il valore aggiunto di quell'icona in più e in che modo si confronta con le altre icone sul sito web.
Accentsconagua