Introducció
Una icona és un signe gràfic que representa un objecte o un concepte. En entorn digital, el terme «icona» es refereix específicament a un element gràfic simple que representa continguts o accions.
Semiòtica de les icones
La semiòtica és la disciplina que analitza com utilitzem els signes per a comunicar significats. En semiòtica es distingeixen tres tipus d’elements —icones, índexs i símbols—, que corresponen a allò que en disseny coneixem sota el nom únic d’«icona». Per tant, en una interfície interactiva és possible trobar icones, índexs i símbols, encara que els anomenem tots «icones».
Icona
En semiòtica, la icona pròpiament dita és un element gràfic molt estilitzat que representa un objecte basant-se en similituds formals.
Per exemple, l’acció d’«Inserir imatge» sol representar-se en aplicacions interactives mitjançant una icona que remet directament a la idea formal d’una imatge:
Opció d’«Inserir imatge» de Google Docs.
Índex
L’índex correspon a un element gràfic que té una relació directa amb el seu referent sense mantenir-hi una similitud formal: per exemple, el fum és índex de foc.
En aplicacions interactives hi ha nombrosos casos d’utilització d’índexs per a representar accions o conceptes abstractes. Per exemple, l’opció d’«Imprimir» sol representar-se mitjançant una icona d’impressora, que relaciona el significat amb la forma del dispositiu que executa l’acció:
Opció d’«Imprimir» de Google Docs.
La lupa que sol associar-se a l’opció de cerca és un altre exemple d’utilització d’índexs en interfícies gràfiques:
Opció de «Cercar» de Google Docs.
Símbol
El símbol correspon a un element gràfic que s’associa al seu referent estrictament per convenció. Sol utilitzar-se per a representar els conceptes més abstractes: els símbols matemàtics o musicals són exemples d’aquesta categoria d’icones.
En aplicacions interactives solen utilitzar-se símbols per a representar conceptes sobre els quals hi ha una forta convenció cultural al món físic i, per tant, són fàcilment recognoscibles. Un exemple és el símbol «+» fet servir per a afegir elements a un conjunt:
Opció de «Crear nou document» de Google Drive. La utilització del símbol «+» remet a la idea d’afegir un nou document als que l’usuari tingui ja creats.
També solen utilitzar-se símbols en casos en què la convenció cultural se cenyeix a l’àmbit digital, però està molt arrelada i, per tant, és fàcilment recognoscible per a l’usuari.
Opcions de «Desfer/Refer» a Google Docs.
Relació entre icona i referent
La relació entre la icona (a partir d’ara entenem «icona» en el seu concepte ampli, incloent-hi icones, índexs i símbols) i el seu referent s’estableix principalment per mitjà de tres figures retòriques: metàfora, metonímia i sinècdoque.
Metàfora
La metàfora consisteix en la translació del significat d’un concepte a un altre, que estableix entre ells una relació d’analogia.
Es tracta de la figura retòrica més utilitzada en el disseny d’icones en interfícies gràfiques, de la qual hi ha nombrosos exemples en els elements que formen part de l’escriptori de l’ordinador —de fet, la idea d’«escriptori de l’ordinador» és en si mateixa una metàfora—. La icona de paperera és una de les metàfores més conegudes, basada en una analogia entre l’objecte físic i l’acció d’eliminar arxius de l’ordinador.
La icona de la paperera constitueix, en entorn digital, una metàfora clarament recognoscible per a indicar l’opció d’eliminar arxius. Els arxius que s’arrosseguen fins a la icona romanen provisionalment a la paperera fins que l’usuari decideix «buidar-la», moment en què es procedeix a la seva eliminació definitiva. La seqüència d’accions en entorn digital és anàloga a la que es duu a terme al món físic per a eliminar objectes reals.
Font: https://pixabay.com/vectors/trash-icon-waste-junk-clean-2935441/.
Al llarg de la història de les interfícies gràfiques, la utilització de metàfores ha resultat molt útil per a introduir l’usuari en un entorn al qual no està habituat. En els primers anys de difusió dels ordinadors personals entre el gran públic (últimes dues dècades del segle XX), l’ús de metàfores en interfícies era molt freqüent, ja que permetien als usuaris establir paral·lelismes entre el món físic en el qual sempre havien viscut i el món digital que descobrien.
Actualment, les interfícies gràfiques estan repletes de metàfores que passen desapercebudes; en alguns casos, l’usuari s’hi ha acostumat fins a tal punt que poden arribar a perdre el vincle amb els referents originals. És el cas de la icona que generalment s’utilitza per a representar l’opció que permet desar un arxiu:
Per a representar l’opció d’emmagatzemar o desar un arxiu, nombroses aplicacions utilitzen la icona del disquet. El disquet es feia servir a la fi del segle XX per a emmagatzemar arxius, i al començament del segle XXI es va anar substituint progressivament per altres dispositius. Actualment, ja fa anys que els disquets no es fan servir i, de fet, els usuaris més joves no han hagut d’utilitzar-los mai. No obstant això, la icona del disquet continua sent una referència habitual i reconeguda en les interfícies gràfiques: es tracta d’una icona que ha adquirit autonomia respecte al seu referent original.
Font: https://commons.wikimedia.org/wiki/file:Save_font_awesome.svg.
Metonímia
La metonímia és un tipus de metàfora en la qual una cosa o idea es representa mitjançant una altra cosa amb la qual manté alguna relació semàntica.
La utilització en algunes interfícies d’un rellotge de sorra per a indicar l’accés a les funcions d’un rellotge normal, constitueix una metonímia.
Font: https://commons.wikimedia.org/wiki/file:Font_Awesome_5_regular_hourglass.svg.
Sinècdoque
La sinècdoque consisteix a representar un objecte mitjançant una de les seves parts, o a representar una part de l’objecte mitjançant el tot.
En MacOS Mojave, la icona d’altaveu s’utilitza per a representar l’accés a totes les funcions d’àudio del sistema, tant les de sortida (altaveus, auriculars i altres dispositius) com les d’entrada (micròfon i altres dispositius).
Font: captura de pantalla de MacOS.
Icones i interacció
Les icones es fan servir sovint en interfícies interactives, ja que presenten diversos avantatges:
- Estalvien espai: generalment una icona és més compacta que el text necessari per a mostrar la informació equivalent. A més, poden utilitzar-se recursos d’interacció per a reunir diverses icones en un espai petit (per exemple, una paleta desplegable d’icones).
- Poden identificar-se ràpidament: una icona ben dissenyada o estàndard es pot reconèixer d’un cop d’ull.
- Són vàlides per a múltiples idiomes: una icona no necessita traducció (sempre que es dissenyi tenint en compte les diferències culturals que hi pugui haver entre els usuaris a qui es destina).
- Enriqueixen l’aspecte visual d’una interfície.
- Permeten proporcionar continuïtat visual a una interfície, si hi ha una coherència d’estil entre les diferents icones utilitzades en una aplicació. En el cas de famílies de productes interactius, un bon sistema d’icones proporciona cohesió al conjunt.
Malgrat tots els avantatges implícits, és important tenir en compte que hi ha icones que, en haver-se convertit en estàndards, són fàcilment recognoscibles per tots els usuaris (per exemple, la impressora per a imprimir); no obstant això, quan es dissenya una nova icona res no garanteix que pugui ser entesa per tots els usuaris, tret que se’n facin comprovacions exhaustives.
La icona d’hamburguesa que s’utilitza per a menús desplegables en interfícies mòbils no és fàcilment recognoscible per tothom. En proves d’usabilitat s’ha comprovat que hi ha usuaris que no identifiquen que poden visualitzar el menú prement aquesta icona, de manera que alguns dissenyadors recomanen complementar-la amb el text «Menú» per a fixar-ne el significat.
Pautes per a dissenyar icones
Quan es dissenyen icones per a una aplicació interactiva, és important tenir present l’impacte que representen en el desenvolupament de la interacció, ja que un disseny deficient pot impedir que l’usuari entengui com funciona la interfície.
Per a garantir un disseny òptim d’icones en un entorn interactiu, es poden seguir les pautes següents:
- El disseny d’una icona s’ha de mantenir simple i esquemàtic. Cal evitar detalls innecessaris i centrar-se en els elements que caracteritzen l’objecte. L’objectiu no és fer una representació que sigui realista, sinó prioritzar que es pugui reconèixer ràpidament.
- Sempre que sigui possible, cal recórrer a icones que resultin familiars als usuaris. Per exemple, per a representar l’opció de cerca, la lupa es pot reconèixer fàcilment, mentre que un monocle no.
- Les icones no tenen com a objectiu decorar la interfície: si no comuniquen un contingut, no cal incloure-les.
- Quan es genera una nova icona que no correspon a cap estàndard existent, és molt recomanable comprovar si els usuaris l’ entendran correctament. L’avaluació pot ser molt senzilla: n’hi ha prou de preguntar a diversos usuaris què creuen que significa la icona en qüestió.
- Pel que fa a l’avaluació, és molt útil tenir en compte la regla dels 5 segons: si l’usuari triga més de 5 segons a reconèixer el significat d’una icona, és que no és adequada.
- Cal evitar utilitzar icones similars per a funcions diferents, o diferents icones per a una mateixa funció.
- Per a ajudar els usuaris a entendre’n el sentit, cal complementar amb una etiqueta textual breu i clara les icones que es refereixen a conceptes molt abstractes o que no estan estandarditzades.
En el cas de la icona d’hamburguesa per a menús desplegables en mòbils, que, com hem vist anteriorment, pot resultar problemàtica, una etiqueta textual ajuda a fixar-ne el significat.
Font: https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377.
Aparença visual de les icones
A més de les qüestions directament relacionades amb la interacció, hi ha també pautes que cal tenir presents en el pla gràfic:
- D’acord amb la necessitat de mantenir la icona simple i esquemàtica, es recomana no utilitzar més de 3 colors per al seu disseny. A més, cal evitar qualsevol element gràfic innecessari o purament decoratiu.
- Dins d’una aplicació, les icones han de ser enteses com un sistema: cal aplicar uns criteris gràfics coherents que dotin de continuïtat el conjunt i el facin identificable. Aquest sistema ha de preservar la coherència, en totes les icones, de les característiques bàsiques referents al gruix de les línies, radi dels vèrtexs, estil volumètric (pla, 3D, amb ombra, etc.) i paleta de colors.
- La mida d’una icona no és la mateixa en una interfície per a escriptori que en una per a pantalla tàctil. En escriptori n’hi ha prou de col·locar el cursor damunt de la icona per a activar-la, de manera que el clic sobre ella pot fer-se amb molta precisió. En la pantalla tàctil, l’element activador és el dit, que té una superfície molt més ampla que el cursor i és, per tant, menys precís. Encara que en escriptori la mida d’una icona es tria sobretot tenint en compte el context gràfic en el qual s’inclou, en pantalla tàctil cal tenir en compte el factor de poca precisió de l’activació. Per això, l’àrea d’activació hauria de ser de 45-50 dp (density-independent pixel) aproximadament: no cal que la icona ompli tot aquest espai, sinó que l’àrea que ocupa (i que pot incloure marges al voltant) sigui d’aquestes dimensions.
La guia d’estil de Material Design (Android), per exemple, indica que en aquest entorn una icona ha d’ocupar una àrea d’activació de 48 dp, encara que el gràfic com a tal es redueix a una àrea de 24 dp.
Font: https://material.io/design/iconography/system-icons.html#system-icon-metrics.
- Comprovar l’escalabilitat del disseny: la icona, es veu bé en qualsevol de les mides en què apareix, tenint en compte la diversitat de dispositius?
Referències
Babich, N. (2018). Checklist for Using Icons In UI [article en línia]. UX Planet. <https://uxplanet.org/checklist-for-using-icons-in-ui-acb6dee36e8a>. [Data de consulta: 25 de gener de 2021].
Golde, A. (2018). How to Design an Icon Set: Simple Checklist for Graphic Designers [article en línia]. Icons8. <https://icons8.com/articles/design-icon-set-simple-checklist-graphic-designers/>. [Data de consulta: 25 de gener de 2021].
Google (2019). Icons [article en línia]. Material Design. <https://material.io/design/iconography/#design-principles>.[Data de consulta: 25 de gener de 2021].
Harlwy, A. (2014). Icon Usability [article en línia]. Nielsen Norman Group. <https://www.nngroup.com/articles/icon-usability/>. [Data de consulta: 25 de gener de 2021].
Lewis, S. (2016). 6 Easy Steps To Better Icon Design [article en línia]. Smashing Magazine. <https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/>. [Data de consulta: 25 de gener de 2021].