Design

10 orrori di progetto per una icona

[l’articolo originale potete trovarlo qui]

Ho trovato interessantissimo questo articolo –per non parlare del sito su cui è stato scritto– a proposito del design delle icone e dell’approccio progettuale ad esse riservato.
Ho quindi deciso di tradurre “alla buona” le parti più significative per il pubblico italiano. Molti aspetti sono tipici e conosciuti, ma un buon ripasso non fa mai male (sto parlando per me).

  • L’ndiferenziazione fa male

Senza un set ben studiato, le icone possono assomigliarsi anche troppo con evidenti problemi di confusione.

Il problema è aggravato quando si passa a dimensioni relativamente piccole.

Small similar icons
  • Troppi elementi tutti insieme

Non a caso la regola del bacio, Keep It Simple, Stupid, è una legge che vale quasi sempre e per la maggior parte delle cose: è preferibile mantenere un numero di elementi ridotto per icona. Come prima, nel piccolo i problemi si moltiplicano proporzionalmente alla comlessità dell’icona stessa.

Mistakes in Windows Vista icons
  • Non necessità

Se un elemento evidentemente non è necessario, allora perché metterlo? Un’icona deve essere facile da leggere. Meno elementi, meglio è: proprio come sopra. Tutta l’immagine deve essere rilevante e non solo una parte di essa, facendo però sempre attenzione al contesto in cui ci si trova.

Unnecessary elements in icon

Unnecessary elements in icon

  • Mancanza di unità

Per fare un buon set di icone serve una certa unità per quanto riguarda i colori di base, la prospettiva, le dimensioni ed anche per quanto riguarda la tecnica di rapresentazione serve una ben precisa linea. I problemi in questo caso crescono con il numero di icone presenti nel set: è più facile “mettere insieme” poche icone che tutte quelle di un intero sistema operativo.

  • 3D, prospettiva e ombreggiature

Sebbene quesi siano attributi di cui tenere conto per definire un set, sono da tenere a conto per icone di piccole dimensioni? Assolutamente no! Il rischio è quello di non vedere più bene ciò che invece è importante.

  • Immagine iconica

Icona sta per “immagine che conserva un rapporto di somiglianza con l’oggetto a cui fa riferimento”. Per creare una icona serve un buon compromesso tra riconoscibilità ed originalità, senza però eccedere con la seconda.

Overly original metaphors

  • Attenzione alle culture

Caratteristiche peculiarmente culturali possono non essere universalmente riconosciute da differenti persone, tenendo anche conto del fatto che, soprattutto la tecnologia, e quindi le icone ad essa associate, tramite internet fanno in un lampo il giro del mondo.

“Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.”

Apple’s Guideline to Human Interface
  • Icona, non interfaccia

Non bisogna mai usare altri elementi tipici dell’interfaccia grafica per disegnare una icona: l’utente inconsciamente tenderà a usare l’icona come un pulsante o una freccia di scorrimento!

  • A proposito del testo

Adattare il logotipo all’icona è un lavoro difficile e reso ancora più arduo dalle ridotte dimensioni, se poi si pensa che spesso il nome è già presente, allora risulta una mera ripetizione.

  • Vector Vs Raster

Con i vettori tutto sembra più bello e preciso… certo, per le grosse dimensioni. Scalato in piccolo saltano all’occhio tutte le imperfezioni dovute principalmente all’anti–aliasing che sfoca i bordi degli oggetti.

Cito inoltre un altro articolo a proposito di ques’ultimo punto: Tutte le strade portano alle bitmap.

Standard

2 thoughts on “10 orrori di progetto per una icona

  1. Pingback: Sketchin - There is life inside experience design » Icon design: 10 Mistakes

  2. Pingback: Cubi « Bread Butter ‘n’ Rock&Roll

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...