J. Linares N. Rodrguez y A. Sanchis 50 http://dx.doi.org/10.4995/eme.2015.

3630

El gesto
como icono
Anlisis de la evolucin de
los elementos interactivos
en el mbito digital

Jordi Linares
Nuria Rodrguez
lvaro Sanchis
Diseo artculo: Elizabeth Cerd Ilustracin de lvaro Sanchis
 Eme n3 2015 51 pp. 50-61. ISSN 2253-6337

En el mbito digital, la evolucin de los entornos interactivos
ha estado siempre vinculada a los progresos tecnolgicos y al
asentamiento de la experiencia de uso colectiva. En la actua-
lidad, tras la llegada de los dispositivos mviles inteligentes,
asistimos a una nueva etapa en la evolucin de los entornos
digitales. El icono, frecuentemente establecido como la clave de
toda interaccin en los sistemas operativos, est dejando paso a
nuevos recursos comunicativos capaces de convivir y estructurar
experiencias de uso distintas al servicio de la informacin.
In the digital field, the evolution of interactive settings
has always been linked to technological progress and
the settling of collective use experience. Currently with
the arrival of smart mobile devices we attend to a new
stage in the evolution of digital settings. The icon, fre-
quently established as key to all interaction in operative
systems, has given way to new communicative resources
capable of coexisting and structuring different use
experiences in the service of information.

Palabras clave:
Diseo grfico, interfaz, digital,
aplicacin mvil, telfono,
tableta, tctil, icono.
Key Words:
Graphic design, interface, digital,
mobile application, telephone,
tablet, tactile, icon.

La relacin entre tecnologa y usuario a travs de entornos interactivos

plantea un interesante campo de investigacin. En los ltimos aos, la
adaptacin social masiva de los dispositivos mviles inteligentes ha ge-
nerado un vasto campo para la experimentacin grfica. Los smbolos e
iconos, presentes desde los inicios de la tecnologa domstica, han su-
frido un proceso de evolucin grfica y semntica fundamentado en la
sntesis que nos obliga a plantearnos el futuro de estos elementos inter-
media. Est superando el propio medio tctil al sistema comunicativo
predominante en el mbito digital desde los aos setenta?
Desde el auge de la tecnologa domstica tras la revolucin industrial, el
ser humano se ha rodeado de mquinas y dispositivos que han configurado
una gramtica visual instaurada en el imaginario colectivo. Estos objetos,
dotados de una o varias funciones especficas, se relacionan con el usua-
rio a travs de elementos de carcter interactivo, como botones, palancas,
conmutadores, mens, etc. En todo acto de lectura de un objeto, el usuario
necesita de descriptores y smbolos que doten de significado a estos ele-
mentos, configurando una interfaz y por tanto facilitando la comprensin
del uso de la mquina. El mbito digital, plagado de elementos iconogr-
ficos desde sus inicios, ha utilizado smbolos y metforas para permitir la
conexin entre individuo y mquina. Paradjicamente, la tecnologa se ha
valido de los sistemas ms primitivos de comunicacin como los smbolos

01
Frutiger, Adrian: Signos,
smbolos, marcas, seales. Madrid, GG
Diseo, 2005, p. 77.
02
Mandel, Theo: The elements of
user interface design, Nueva York,
Wiley, 1997, p. 15.
para representar las funciones de sus dispositivos ms avanzados1.
Los iconos que encontramos en los dispositivos tecnolgicos confi-
guran elementos unitarios dotados de significado, pues comunican una
funcin especfica que se anticipa a su activacin. En general, entende-
mos esta relacin desde el punto de vista de la comunicacin entre el
ser humano y el hardware/software2, aunque tambin abarca desde los
botones fsicos de un electrodomstico de gran sencillez hasta los pul-
J. Linares N. Rodrguez y A. Sanchis 52
03
Littlejohn, Stephen & Foss,
Karen: Theories of Human Communica-
tion. Illinois, Waveland Press, 2011.
04
Maltese Corrado: Semiologa del
mensaje objetual, Madrid, Alberto Cora-
zn, 1972, p. 166.
05
Sebeok, Thomas: Signos: una intro-
duccin a la semitica, Madrid, Paidos,
1996, p. 25.
06
Erickson, Thomas: The Art of
Human Computer Interface Design, Mas-
sachussets, Addison-Wesley, 1990.
07
Stephenson, Neal: En el principio,
fue la lnea de comandos. En Mapas, Ma-
drid, Traficantes de sueos, 2003, p. 24.
08
En el equipo de desarrollo destacaron
tcnicos como Alan Kay, Larry Tesler y Dan
Ingalls, quienes implementaron sus avan-
ces en la creacin de interfaces grficas en
la Xerox Star, una computadora muy avan-
zada aunque de escaso xito comercial.
El gesto como icono. Anlisis de la evolucin de los elementos interactivos
sadores domticos instalados en cualquier
hogar. Citando a Stephen Littlejohn, la se-
mitica se centra en el modo en que los pro-
ductores crean smbolos y cmo la audiencia
los comprende3. Estos smbolos responden a
una representacin semitica de su funcin a
realizar, generndose una transcripcin grfi-
ca de un resultado fsico o virtual. Los iconos
que configuran estos activadores poseen una
especial capacidad de deteccin cognitiva y
son entendidos como "objetos", debido a su
carcter unitario, construyendo smbolos a
travs de sus elementos grficos4.
En la relacin entre smbolo y objeto en-
contramos los cimientos de la comunica-
cin entre objeto y usuario, generndose un
acto de comunicacin en el que participan
varios actores: los diseadores industriales,
grficos e ingenieros que han planteado la
funcin y forma del dispositivo se establecen
como emisores y se encargan de sintetizar
las funciones. stos, utilizan la propia inter-
faz del dispositivo como canal, configurando
un cdigo visual a travs de sus iconos. El
funcionamiento y modo de uso constituyen
el mensaje que llega a un receptor final, el
usuario de la mquina o dispositivo. Se esta-
blece pues una relacin de encoding (codifi-
cacin por parte del emisor) y decoding (lec-
tura y asimilacin por parte del receptor)5.
Esta relacin es la clave en lo que podramos
determinar lectura del objeto, y conocer su
significado puede resultar clave en tareas de
diseo de entornos interactivos propios de
los medios actuales. La figura del diseador
es tan crucial dentro de este proceso, que
algunos autores como Thomas Erikson han
acuado el trmino superdiseador6 para de-
finir al profesional multidisciplinar que es ca-
paz de integrar en un mismo proyecto tareas
de ingeniera, diseo grfico, comunicacin
y psicologa. A continuacin analizaremos el
proceso de creacin de los iconos interacti-
vos hipermedia, as como su evolucin est-
tica y semntica.
Nacimiento y evolucin de los iconos en el
mbito digital
La irrupcin de una nueva tecnologa lleva
consigo la creacin de nuevos entornos de
usuario, requiriendo stos a su vez descrip-
tores y smbolos para codificar su funciona-
miento. En el mbito inicial del desarrollo de
la interfaz de un nuevo producto, las primeras
aproximaciones de diseo se suelen resolver
mediante descriptores tipogrficos, facilitando
mediante un sistema lxico el uso de cada uno
de estos elementos. Esta opcin, clara y direc-
ta, implica evidentes limitaciones lingsticas
que perjudican la universalidad de su uso, as
como una mayor dificultad para los sectores
poco acostumbrados al manejo de sistemas
fundamentados en texto7. En cambio, los pic-
togramas y smbolos, establecidos en el imagi-
nario colectivo de gran parte de las sociedades
evolucionadas, poseen carcter universal y son
capaces de resolver estos problemas en dci-
mas de segundo, a travs del uso de metforas
o por la esquematizacin mediante signos de
las funciones bsicas (como por ejemplo el
uso de flechas direccionales para acciones de
volver atrs o siguiente).
An as, los entornos de uso interactivos
no estn exentos de evolucin semntica y
grfica, repitindose un patrn constante: du-
rante las primeras etapas de uso de la interfaz,
los diseadores optan por una configuracin
visual donde el entorno est definido mayo-
ritariamente por descriptores textuales, en-
tendindose esto como una aproximacin al
usuario para ayudarle a comprender su fun-
cionamiento. Cuando dicha tecnologa toma
carcter universal y su funcionamiento bsico
es comprendido por el conjunto de usuarios,
evoluciona hacia interfaces formadas por ico-
nos con una importante carga metafrica.
Podemos encontrar un excelente ejemplo
de esta argumentacin en el diseo de los
elementos grficos del mbito audiovisual en
los aos 60. Con el lanzamiento de los prime-
ros dispositivos que permitan la reproduc-
 Eme n3 2015 53 pp. 50-61. ISSN 2253-6337

cin de cintas de casete, comenz la era de

la produccin masiva de dispositivos de alta
fidelidad. Estas primeras unidades, posean
distintos pulsadores para sus funciones ms
bsicas (reproduccin, pausa, avance rpido).
En sus primeras versiones, estos pulsadores
solan ir acompaados de un descriptor ti-
pogrfico que revelaba su uso, pudindose
leer play, stop, rec, forward sobre cada uno
de ellos (Fig. 1). Alrededor de 1963, con el
sistema en plena expansin, el equipo de di-
seo de Phillips capitaneado por el diseador
Phillip Orson configur un nuevo lenguaje
universal con la incursin de los iconos que
actualmente conocemos y que configura-
ron un estndar inmediato dentro del sector
(Fig. 2). Tomando como base signos direc-
cionales fundamentales, se conect la accin
de reproduccin con el signo del tringulo
apuntando hacia la derecha, representando
el movimiento de las cintas. A partir de esta
premisa, se duplic el tringulo para indicar
reproduccin rpida y mediante su direccin
quedaba claro el avance o retroceso de la re-
produccin. Para la funcin de stop, se us el
smbolo del rectngulo, (probablemente apo-
yndose en la estabilidad del cuadrado), as
como para la funcin de pausa, el smbolo uni-
versal qued configurado por el rectngulo con
un hueco en su centro, dividindolo en dos y
dando a entender una pausa temporal de poste-
rior reproduccin. La sencillez de estos elemen-
tos representa un ejemplo de modernidad y di-
seo funcional, trascendiendo el propio soporte
tecnolgico para mantenerse en los sistemas
de reproduccin electrnicos actuales.
Pero sin duda, el caso ms interesante de
evolucin de un cdigo grfico fundamen-
tado en iconos se ha dado en la informtica
personal durante los ltimos cuarenta aos.
Durante la dcada de los 70, tras aos basan-
do la relacin entre usuario y sistema opera- Fig. 1. Grabador/reproductor de cintas modelo Grundig-TK-14,
tivo en interfaces textuales, los avances en la de 1961, con descriptores tipogrficos
Fig. 2. Controles de reproductor Philips N2205, de 1968,
compaa Xerox PARC dieron lugar a la pri- donde destaca el uso de pictogramas
mera metfora de escritorio8, plantendose lo *Ilustracin de lvaro Sanchis
J. Llinares N. Rodrguez A. Sanchis 54 El gesto como icono. Anlisis de la evolucin de los elementos interactivos

Fig. 4. Conjunto de iconos diseados por Susan Kare para el primer Macintosh en 1984

que conocemos como sistema WYSIWYG9. funcionamiento por similitud a la mecnica

En l, las distintas funciones eran representa-
das por elementos referentes al mbito fsico
como el sistema de carpetas y archivos, pape-
lera, bote de pintura, etc. (Fig. 3). Este uso de
un entorno metafrico implica la apropiacin
de la experiencia cognitiva previa del indivi-
duo, en favor de una mejor asimilacin del
de los procesos mentales10. De ese modo, el
icono en la interfaz, establecido como smbo-
lo, es la llave del proceso cognitivo de inter-
pretacin entre humano y dispositivo.
Esta idea fue implementada posterior-
mente por el equipo de Apple en su com-
putadora Lisa con mayor xito y difusin

Fig. 3. Iconos de la interfaz de usuario produ-
cida por Xerox Parc, 1973
Fig. 5. Iconos pertenecientes a la primera
versin de Windows en 1985
comercial. Es fundamental aludir al trabajo
de la diseadora Susan Kare11 en esta eta-
pa, responsable tanto del primer diseo de
iconos aparecido en el Macintosh de 1984
como de dar forma definitiva a estas met-
foras instauradas en el imaginario tecnol-
gico actual. Los iconos y smbolos de Kare,
de carcter mucho ms humanista y conciso
que los planteados por la Xerox PARC, se
configuraban en una retcula de 32x32px
en blanco y negro, ilustrando un conjunto
de acciones nunca anteriormente represen-
tadas manteniendo un criterio coherente
entre ellas (Fig. 4). Encontramos en este tra-
bajo dos factores especialmente crticos, en
primer lugar, el proceso de interpretacin y
codificacin de las tareas realizables al vin-
cularse con elementos metafricos altamen-
te reconocibles. Por otro lado, cabe destacar
el excelente trabajo de encriptacin grfica,
donde dentro de una retcula de pxeles re-
ducida, la diseadora consigui construir
un programa de iconos reconocible capaz
de generar un excelente cdigo visual12, mi-
nimizndose factores clave en el diseo de
interfaces como el tiempo de aprendizaje, la
velocidad de realizacin de tareas o el por-
centaje de errores de los usuarios13.
Eme n3 2015 55
Este medio tuvo un desarrollo continuo du-
rante las dcadas posteriores en las que se fue
produciendo un refinamiento del aspecto gr-
fico de todo el entorno, lento pero constante,
hacia un estado actual ms normalizado. La
evolucin del aspecto de los iconos informti-
cos estuvo marcada por el acelerado aumento
de la potencia de los ordenadores. Durante un
amplio periodo de tiempo los diseadores de
iconos estaban condicionados por las limita-
ciones de los dispositivos de visualizacin14.
A partir de una primera fase monocromtica
y de baja resolucin, se pas al uso de colores
(de un mximo de 4, 16 y 256 en modo pale-
ta, a los actuales TRUE COLOR de ms de 16
millones), como las interfaces del Atari TOS
(1985), el sistema AMIGA (1985) o Windows
1.0 (1985, Fig. 5). An as, el sistema visual ale-
grico iniciado en los aos 70 permaneci
prcticamente intacto, creciendo en compleji-
dad visual y matices pero conservando los c-
digos clave anteriormente comentados. Es en
este mbito cabe destacar el conjunto de ico-
nos diseados en 1989 en la empresa NeXT
para su equipo NeXTstep, obra de nuevo de
la diseadora Susan Kare bajo la supervisin
del propio Steve Jobs. Podemos afirmar que
se trata del primer ecosistema de iconos con
pp. 50-61. ISSN 2253-6337
09
WYSIWYG (What You See Is What You
Get) es un trmino relacionado con las
investigaciones en Xerox Park durante
los aos 70, capitaneadas por Warren
Teitelman. Se fundamentaba en la
representacin en pantalla a travs de un
sistema grfico del trabajo realizado por
el usuario, apoyndose de metforas e
interfaces visuales.
10
Felip Miralles, Francisco: La me-
tfora interactiva. Arquitectura funcional
y cognitiva de la interface, Tesis doctoral
no publicada, Valencia, Universitat
Politcnica de Valncia, Facultad de Bellas
Artes, 2008.
11
Susan Kare. Nacida en 1954, esta artista
y diseadora grfica posee una extensa
trayectoria en el diseo de iconos e in-
terfaces grficas, con proyectos entre los
que destacan iconos para sistemas ope-
rativos de las firmas Apple, IBM, NeXT,
Microsoft y Motorola. Ms informacin
en www.kare.com
12
Vit, Armin: Es sencillo lo que nace
sencillo: la obra de Susan Kare, en Experi-
menta nm. 51, Madrid, 2005, p. 59.
13
Shneiderman, Ben y Plaisant,
Catherine: Diseo de interfaces de
usuario, estrategias para una interaccin
persona-computadora efectiva, Washing-
ton, Pearson Educacin, 2005, p. 17.
14
Molina Ruiz, Juan Luis: 25 aos de la
revolucin de los iconos en el escritorio. En
Revista I+Diseo: revista internacional de
investigacin, innovacin y desarrollo en
diseo, Vol. 2, n 2, Madrid, 2010, pp. 13-17.
 J. Linares N. Rodrguez y A. Sanchis 56 El gesto como icono. Anlisis de la evolucin de los elementos interactivos

una evidente vocacin skeumrfica15, el cual haca uso de

una potencia grfica inslita para representar iconos de
Fig. 6. Evolucin del icono de la papelera de reciclaje en los distintos SO de Apple.
aspecto realista, similares a botones reales de aspecto fo-
torealista. El skeumorfismo, del cual hablaremos ms ade-
lante, supone para algunos analistas como Jason Mesut
un recurso esttico fundamentado en el uso de la referen-
cia a la obsolescencia para minimizar el shock que pue-
de suponer para el usuario el encuentro con una interfaz
desconocida16.
Llegado el final de la dcada de los 90, asistimos a un
proceso de refinamiento grfico en favor de interfaces
ms cercanas y agradables para el usuario, en las que
el diseo grfico toma un papel fundamental en la dife-
renciacin entre competidores. Adems, en esta etapa
encontramos la aparicin de las primeras tendencias de
diseo en el medio, existiendo en la dcada de los 2000
una clara evolucin hacia la adicin de reflexiones, su-
perficies similares al cristal y transparencias (Fig. 6). Res-
ponda esto a una apuesta por aprovechar al mximo las
posibilidades de los displays y por continuar acercando
al usuario entornos diferenciales de aspecto cercano y
atractivo17 (ver casos como la interfaz Aqua presentada
por Apple en el ao 2000 o Windows Vista en 2007).
Fig. 7. Primera versin de iOS en
iPhone, 2007.
Un nuevo medio, nuevos iconos. El camino hacia la crea-
cin de un cdigo
Entre el inicio de la metfora de escritorio durante los
aos 70 hasta finales de la dcada de los aos 2000, la
lnea de los iconos interactivos traz una clara pendiente
hacia la estandarizacin. En el ao 2007, la incursin de
una nueva tecnologa abrir un nuevo campo de experi-
mentacin a los diseadores de interfaces. La tecnologa

15
Skeumorfismo, Esta palabra, proveniente
tctil que fue implementada en el primer iPhone (Fig. 7) y
posteriormente en todos los dispositivos tctiles, cambi
del latn skeus (herramienta) y morphe el modo en que los diseadores conceptualizaron la inte-
(forma), define a un estilo concreto de ractividad entre usuario y dispositivo. Con claras similitu-
diseo, potenciado especialmente por la
propia Apple en los ltimos aos, que se des al entorno de escritorio conocido en los ordenadores
fundamenta en otorgar a los elementos de sobremesa, estas nuevas interfaces contaban con un
grficos un aspecto similar al que ten-
dran en el mundo real, evidentemente
condicionante dramtico: la reducida dimensin de sus
segn el uso y funcin de la aplicacin. pantallas y su limitada densidad de pxeles obligaban a re-
16
Ms informacin en: http://www.slideshare.
plantear el medio para permitir una lectura cognitiva ade-
net/jasonmesut/the-future-of-user-interfaces/ cuada y, por tanto, una experiencia de uso satisfactoria.
17 Ms informacin sobre la evolucin de As, del mismo modo que encontramos una evolucin
los iconos de escritorio en: http://www.
pencilscoop.com/2013/12/the-evolution- estilstica en los iconos de los mbitos tecnolgicos an-
of-icon-design-from-1981-2013/ teriormente comentados, en el caso de las interfaces tc-
 Eme n3 2015 57 pp. 50-61. ISSN 2253-6337

La tecnologa tctil ha tenido

tiles podemos encontrar dos itinerarios cla- un importante calado social gracias
ramente diferenciados: en primer lugar, un
progreso esttico definido por el vnculo con
al principio de la manipulacin directa
las tendencias grficas de estos ltimos aos, frente a la indirecta del ratn.
junto con una importante evolucin semnti-
ca donde los smbolos han progresado desde
un aspecto completamente evidente y vincu-
lado al descriptor textual a un estado actual
ms sinttico que se sustenta en la experien-
cia de uso colectiva de los dispositivos.
Adems, las nuevas tecnologas mviles ejemplos responden a los iconos de configu- Fig. 8. Smbolo actualmente estan-
permitieron mediante sus tiendas el desarrollo racin (representadas por tuercas o sistemas darizado para la funcin "buscar"

de aplicaciones por parte de terceros. Esto sig-
nific que los usuarios no solo encontraran
interfaces diseadas por las grandes compa-
as de software, sino que equipos de desarro-
llo independientes fueron capaces de publicar
sus proyectos y, por tanto, permitir al medio
permeabilidad directa de las tendencias glo-
bales de diseo. Esto, junto con la enorme
adaptacin que los dispositivos mviles tcti-
les tuvieron entre los aos 2007 y 2009, pro-
vocaron que el medio evolucionara a un ritmo
nunca antes visto en el mbito digital.
Esta evolucin y madurez del mbito tctil
ha generado sus estndares y cdigos pro-
pios. stos permiten y facilitan la evolucin
del medio, pues bajo el aspecto sinttico y
ligero de las aplicaciones actuales, existen
una serie de convenciones clave que nos
permiten llevar hasta el lmite la sntesis de
estos elementos intermedia. Resulta sencillo
encontrar claros casos de estandarizacin de
smbolos en las apps que utilizamos a diario,
como el caso de la lupa para representar toda
accin vinculada a la bsqueda o filtrado de
mecnicos), las pginas de perfil (siluetas
de personajes), o el omnipresente icono de
home para representar la funcin de regreso
al punto de partida inicial.
Un interesante caso de representacin sim-
blica de una funcin lo encontramos en el
icono conocido como hamburguer. A travs de
sus tres barras horizontales se ha erigido como
el estndar para describir mens desplegables.
Apareci por primera vez en la interfaz de la
Xerox Star, y tras unos aos en desuso fue res-
catada por el equipo de diseo de Apple para
su primera versin de iOS. En pocos aos se
ha convertido en un nuevo estndar del sector
que aparece en todo men oculto desplegable,
as como en muchos navegadores web y soft-
ware de escritorio actuales18.
La tecnologa tctil ha tenido un impor-
tante calado social gracias al principio de la
manipulacin directa frente a la indirecta
del ratn. Esto ha permitido acercar dichos
dispositivos a sectores de poblacin nunca
antes familiarizados con la informtica do-
mstica, independientemente de su edad y

datos. Este smbolo, que en los primeros na-
vegadores web apareca representado como
unos prismticos, ha resultado finalmente es-
tandarizado y lo encontramos en la inmensa
mayora de apps actuales (Fig. 8). Casos simi-
lares son los iconos vinculados a funciones
de localizacin. La cartela con puntero hacia
abajo (redondeada o cuadrada) es el smbolo
clave que describe este tipo de funcin. Otros
formacin. Podemos dar por sentado que el
imaginario colectivo creado por el desarrollo
de estas plataformas est alcanzando verda-
deras cotas de universalidad.
La vuelta a la sntesis. Flat design
Si bien hemos evidenciado como el me-
dio tctil ha generado un vasto cdigo de
smbolos propios, no podemos obviar la
18
El icono hamburguesa (hamburguer
icon) fue diseado por Norm Cox
dentro del equipo de desarrollo del
Xerox Star. Su aspecto responde a
una sntesis de un men con varias
opciones y se ha estandarizado como
el elemento clave en el diseo actual
de aplicaciones. Ms informacin
online en: http://www.blog.placeit.net/
history-of-the-hamburguer-icon/
J. Linares N. Rodrguez y A. Sanchis 58
Fig. 9. Plantilla bsica de diseo de interfaz mvil propuesta por
Google en su manual Material, en 2014.
19
Norman, Donald: Diseo emocional.
Por qu nos gustan o no los objetos
cotidianos, Madrid, Paids Transiciones,
2005.
20
Material es la nomenclatura que Google
ha dado a su ltimo libro de estilo, en el
cual recomienda una serie de premisas
para conseguir un aspecto renovado en
aplicaciones, webs y dems interfaces.
Predominan los colores planos, sombras
arrojadas, informacin segn niveles y
pastillas y un inters por la sntesis y el
uso de gestos direccionales. Ms informa-
cin en: http://www.google.com/design/
spec/material-design/introduction.html
El gesto como icono. Anlisis de la evolucin de los elementos interactivos
Fig. 10. Pantalla principal de la interfaz Metro desarrollada por Microsoft
evolucin grfica que estos iconos han expe-
rimentado en los ltimos aos. En la evolu-
cin de las interfaces de escritorio analizada
anteriormente, hemos podido entrever una
clara curva ascendente respecto a la com-
plejidad del detalle visual de los iconos in-
teractivos. Partiendo de sistemas claramente
limitados que obligaban a plantear solucio-
nes sintticas, la evolucin tcnica de los
dispositivos nos llev a entornos con gran
variedad de detalles y de clara inspiracin
skeumrfica. Con la llegada de los disposi-
tivos mviles inteligentes, la tendencia per-
maneci de un modo similar, pues hemos de
entender que las interfaces que plantearon
los diseadores implicados en las prime-
ras versiones de iOS y Android mantenan
una clara conexin visual con la metfo-
ra de escritorio anteriormente comentada.
Esto responde a la bsqueda de universali-
dad del medio, es decir, facilitar el acceso a
la interfaz de la mayor cantidad de pblico
posible19. Adems, los elementos de sea-
lizacin bsicos (encargados de funciones
como volver, siguiente o ms informa-
cin) estuvieron determinadas mayorita-
riamente por descriptores textuales embebi-
dos dentro de flechas, sntomas que indican
una clara intencin introductoria ante una
falta de conocimiento del medio. Si bien el
planteamiento de mantener estas metforas
result exitoso y dichas interfaces tuvieron
una gran aceptacin, tras pocos aos estos
entornos mostraron signos de estancamien-
to y fue necesario replantear su aspecto de
un modo radical.
A partir del ao 2010, aparece una nue-
va tendencia contraria al diseo de iconos y
smbolos skeumrficos tan extendida en el
inicio del medio. En esta ocasin, aparece la
sntesis de elementos como un pretexto cla-
ve para la experimentacin grfica. Podemos
resumir los motivos de este cambio de para-
digma en dos puntos clave: en primer lugar,
la madurez de uso de este medio determin
una familiarizacin por parte de los usuarios
con las funciones bsicas, siendo por tanto
ms fcil representarlas grficamente con
menor cantidad de elementos. Por otro lado,
encontramos tambin una clara necesidad de
diferenciacin por alguna de las compaas
clave del entorno, siendo Google (que desa-
rroll su propio libro de estilo para webs y
apps llamado material20) y Microsoft (con su
interfaz Metro) las pioneras en plantear siste-
mas visuales distintos al entorno skeumrfico
tan presente en los diseos de Apple (Figs. 9
y 10). En estos sistemas tomaban protagonis-
mo una sntesis clara de los elementos visua-
les de las interfaces, desde los iconos hasta
las propias ventanas de trabajo, descartando
los degradados y efectos para centrarse en la
potencia de los colores planos, el contraste
entre formas y un preciso trabajo tipogrfico.
El trabajo de sntesis realizado por ambas
compaas trajo consigo consecuencias: el
 Eme n3 2015 59 pp. 50-61. ISSN 2253-6337

Figura 11. Rediseo del icono de la aplicacin Chrome en 2012

Figura 12. Comparativa del diseo inicial del icono inicial de
Foursquare con el del 2012
Figura 13. Rediseo del icono de Windows realizado por Pentagram
(2012)
Figura 14. Evolucin del icono Finder de OSX entre 2010 y 2013
Figura 15. Rediseo del icono Safari en OSX entre 2010 y 2013

mbito entero del diseo grfico entendi el cambio de

direccin y la tendencia se extendi tanto al diseo de
webs, como en los propios iconos de los sistemas ope-
rativos de escritorio. La tendencia, bautizada como Flat
Design se hizo cada vez ms evidente y no solo tuvo un
rpido crecimiento en las interfaces mviles, sino que
contagi a otros soportes anteriormente estancados
como el diseo web, el diseo de sistemas operativos de
escritorio e incluso el estilo del diseo grfico corporati-
vo. Son buenos casos de esta tendencia el rediseo del
icono del navegador Chrome de Google en 2012 (Fig.
11) o el aspecto plano que tom el icono de la aplicacin
Foursquare el mismo ao (Fig. 12). La propia Apple re-
plante sus principios lanzando en septiembre de 2013
iOS7, una nueva versin de su sistema operativo mvil
de aspecto renovado y de clara inspiracin flat. Desde la
propia modernizacin del logotipo de Microsoft realiza-
do por Pentagram (Fig. 13), hasta el restyling de los ico-
nos en iOS Maveriks (vase el icono del Finder en Fig. 14
o el de Safari en la Fig. 15), asistimos a un claro giro pen-
dular respecto a la complejidad de los smbolos e iconos
en el mbito digital.
Adems, otro factor que est generando claras conven-
ciones en el diseo de aplicaciones para smartphones y
tablets radica no tanto en el aspecto de los iconos clave,
sino ms bien en su ubicacin dentro del espacio fsico
de la pantalla de los dispositivos. Por ejemplo, resulta di-
fcil encontrar aplicaciones donde el botn home no se
encuentre ubicado en la parte izquierda de la pantalla.
Del mismo modo, los iconos de configuracin y de per-
fil suelen ocupar la parte derecha, quedando el espacio
intermedio reservado para iconos vinculados a servicios
de cmara, galeras, geolocalizacin, etc. La universaliza-
cin de estos parmetros se suma adems a los criterios
estticos anteriormente comentados, aspectos que nos
pueden servir para clasificar los diseos de aplicaciones
como buenos o malos segn criterios de usabilidad, ac-
tualidad y estructuracin de contenidos21.

Los recursos tctiles tras el icono tradicional

21
La unin de los dos aspectos analizados en el apar-
tado anterior (creacin de convicciones estticas junto
con la distribucin predeterminada de los elementos) Nielsen, Jakob y Budiu, Raluca:
Usabilidad en dispositivos mviles,
est dando lugar en los ltimos aos a nuevas estrate- Madrid, Ediciones Anaya Multimedia,
gias de diseo que en ocasiones suplen a los iconos. 2013, p. 75.
J. Linares N. Rodrguez y A. Sanchis 60
Fig. 16. Comparacin entre los iconos de Instagram y la app Phhhoto
22
Entindase wearable como toda tecnologa
vinculada a prendas y complementos de ves-
tir como relojes, pulseras y dems accesorios.
El gesto como icono. Anlisis de la evolucin de los elementos interactivos
Estamos asistiendo a un proceso de sntesis
que est encriptando el aspecto de los sm-
bolos interactivos hasta su mnima expre-
sin. Algunos incluso comienzan a perder el
vnculo metafrico con su funcin para con-
vertirse en reclamos cognitivos que el usua-
rio, fundamentndose en su experiencia de
uso anterior, ya es capaz de desencriptar. Por
ejemplo, un smbolo circular en el centro de
una aplicacin mvil puede entenderse como
activador de una funcin cmara (ver la com-
paracin entre el icono de Instagram y el de
la aplicacin Phhhoto en Fig. 16), mientras
que el mismo smbolo en la parte superior
derecha de la pantalla puede intuirse como
activador de un desplegable de opciones de
usuario.
Es posible adems encontrar soluciones
alternativas al estancado uso de iconos en
todas las funciones de las apps, como el fe-
nmeno de los activadores invisibles. stos
permiten interacciones a travs de gestos de
deslizamiento o intuitivos toques en los bor-
des de la pantalla. De ese modo, el navegador
mvil Safari muestra la barra de bsqueda
solo cuando el usuario desliza el scroll hacia
el inicio de la pgina web, quedando oculta el
resto del tiempo. Los vdeos y galeras de la
app mvil de Facebook han prescindido del
smbolo cerrar caracterstico (aspa), reali-
zndose esta accin deslizando el elemento
hacia arriba o abajo, generndose una expe-
riencia de navegacin ms natural.
De ese modo, respondiendo a la incgnita
que plantebamos al inicio de este artculo,
la evolucin de las interfaces tctiles y sus
smbolos est tomando un rumbo dirigido
por la discriminacin del smbolo en favor
del gesto, pues la propia naturaleza tctil
del medio ha comenzado a desechar la inte-
raccin a travs de iconos que ha dominado
hegemnicamente las interfaces grficas
durante los ltimos cuarenta aos. Si bien
sera arriesgado profetizar la desaparicin
del icono en los mbitos digitales (la pro-
pia naturaleza tctil sigue requiriendo su
uso para construir sus itinerarios visuales),
la incursin de las interacciones gestuales
nos ayuda a intuir un futuro donde predo-
mine la informacin a favor de una interfaz
mnimamente invasiva fundamentada en
la experiencia de uso colectiva. Adems, la
aparicin de nuevos dispositivos con forma-
tos y dimensiones distintas a las ya conoci-
das, pueden resultar clave en la deriva que
los smbolos interactivos nos deparan en los
prximos aos. Soportes como la tecnologa
wearable22 estn aproximando los sistemas
operativos a las superficies de relojes, pul-
seras y todo tipo de complementos, donde
encontramos iconos milimtricos de gran
sntesis visual. Adems, dichos dispositivos
se fundamentan en el uso de sistemas hp-
ticos que permiten mandar notificaciones al
usuario valindose de pequeos estmulos
que son percibidos por el individuo a travs
de su piel, generndose nuevos canales de
comunicacin entre usuario e interfaz que
funcionarn conviviendo con los cdigos vi-
suales que hemos analizado.
El mbito del diseo de elementos in-
teractivos ha demostrado una evidente
permeabilidad respecto a los avances tec-
nolgicos, culturales y estticos. Las caracte-
rsticas de los nuevos dispositivos junto con
los cdigos generados por el uso colectivo
del propio medio estn generando nuevos
paradigmas de diseo. La hegemona de los
iconos deja paso a una nueva etapa donde
la experiencia de uso, los gestos tctiles y la
interaccin sensorial con los dispositivos se
establecern como los recursos clave al ser-
vicio de la informacin.

BIBLIOGRAFA
ERICKSON, THOMAS: The Art of Human
Computer Interface Design, Massachussets,
Addison-Wesley, 1990.
FRUTIGER, ADRIAN: Signos, smbolos, mar-
cas, seales, Madrid, GG Diseo, 2005. p. 77.
LITTLEJOHN, STEPHEN & FOSS, KAREN:
Theories of Human Communication, Illinois,
Waveland Press, 2011.
MALTESE, CORRADO: Semiologa del mensaje
objetual, Madrid, Alberto Corazn, 1972. p. 166.
MANDEL, THEO: The elements of user inter-
face design, Nueva York, Wiley, 1997. p.,15.
MOLINA RUIZ, JUAN LUIS: 25 aos de la
revolucin de los iconos en el escritorio. En Re-
vista I+Diseo: revista internacional de investi-
gacin, innovacin y desarrollo en diseo. Vol.
2, N. 2, Madrid, 2010, pp. 13-17
NIELSEN, JAKOB Y BUDIU, RALUCA: Usa-
bilidad en dispositivos mviles, Madrid, Edi-
ciones Anaya Multimedia, 2013. p. 75.
NORMAN, DONALD: Diseo emocional. Por
qu nos gustan o no los objetos cotidianos, Ma-
drid, Paids Transiciones, 2005.
SEBEOK, THOMAS: Signos: una introduccin
a la semitica, Madrid, Paidos, 1996. p. 25.
SHNEIDERMAN, BEN Y PLAISANT, CATHE-
RINE: Diseo de interfaces de usuario, estrate-
gias para una interaccin persona-computado-
ra efectiva, Washington, Pearson Educacin,
2005, p. 17.
STEPHENSON, NEAL: En el principio, fue la
lnea de comandos. En Mapas. Madrid, Trafi-
cantes de sueos, 2003. p. 24.
VIT, ARMIN: Es sencillo lo que nace sencillo:
la obra de Susan Kare, en Experimenta nm.
51, Madrid, 2005, p. 59.
RECURSOS WEB
FELIP MIRALLES, FRANCISCO: La metfora
interactiva. Arquitectura funcional y cognitiva
de la interface. Tesis doctoral no publicada.
Valencia, Universitat Politcnica de Valncia,
Facultad de Bellas Artes, 2008. Disponible en
www.riunet.upv.es
Eme n3 2015 61 pp. 50-61. ISSN 2253-6337
Gua Material user interface. Disponible en:
http://www.google.com/design/spec/material-
design/introduction.html
HOWARD, JOE: The evolution of icon design
from 1981-2013. Disponible en: http://www.
pencilscoop.com/2013/12/the-evolution-of-
icon-design-from-1981-2013/
MESUT, JAMES: The future of user interfaces.
Disponible en: http://www.slideshare.net/ja-
sonmesut/the-future-of-user-interfaces/
Place it Blog. A brief history of the hambur-
guer icon. Disponible en: http://www.blog.
placeit.net/history-of-the-hamburguer-icon/
Jordi Linares
Doctor en Informtica por la Universitat Politcnica de Valn-
cia. Su actividad acadmica e investigadora se centra en los
sistemas interactivos, realidad virtual y realidad aumentada, vi-
deojuegos, juegos serios y sistemas educativos.
Nuria Rodrguez
Artista, docente y diseadora grfica. Profesora Titular en laUni-
versitat Politcnica de Valncia. Directora de Unit. Edicin Expe-
rimental e Interactiva, grupo investigador multidisciplinar espe-
cializado en Realidad aumentada aplicada a eventos culturales.
Doctora en Bellas Artes y titulada en Diseo Industrial por la
Escuela Superior de Diseo de Valencia. Ha publicado artculos
en revistas especializadas y organizado jornadas, seminarios y
conferencias donde se tratan temas que reproducen la creciente
interdisciplinaridad entre arte, diseo e ilustracin.
lvaro Sanchis
Licenciado en Bellas Artes por la Universitat Politcnica de Va-
lncia y en Diseo Interior por la EASD Valencia. Actualmente
realiza su tesis doctoral sobre el diseo de interfaces en aplica-
ciones mviles. Adems, forma parte del equipo de trabajo Unit.
Edicin Experimental e Interactiva, especializado en la produc-
cin de aplicaciones para publicaciones y espacios expositivos.
Paralelamente a su labor en el mbito acadmico, trabaja como
diseador e ilustrador en proyectos de mbito cultural.