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

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 actualidad, 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.

51

pp. 50-61. ISSN 2253-6337

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, frequently 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.

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.

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 generado un vasto campo para la experimentacin grfica. Los smbolos e
iconos, presentes desde los inicios de la tecnologa domstica, han sufrido un proceso de evolucin grfica y semntica fundamentado en la
sntesis que nos obliga a plantearnos el futuro de estos elementos intermedia. 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 usuario 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 elementos, configurando una interfaz y por tanto facilitando la comprensin
del uso de la mquina. El mbito digital, plagado de elementos iconogrficos 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
para representar las funciones de sus dispositivos ms avanzados1.
Los iconos que encontramos en los dispositivos tecnolgicos configuran elementos unitarios dotados de significado, pues comunican una
funcin especfica que se anticipa a su activacin. En general, entendemos 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 Communication. Illinois, Waveland Press, 2011.
04
Maltese Corrado: Semiologa del
mensaje objetual, Madrid, Alberto Corazn, 1972, p. 166.
05
Sebeok, Thomas: Signos: una introduccin a la semitica, Madrid, Paidos,
1996, p. 25.
06
Erickson, Thomas: The Art of
Human Computer Interface Design, Massachussets, Addison-Wesley, 1990.
07
Stephenson, Neal: En el principio,
fue la lnea de comandos. En Mapas, Madrid, 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 avances en la creacin de interfaces grficas en
la Xerox Star, una computadora muy avanzada 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 semitica se centra en el modo en que los productores crean smbolos y cmo la audiencia
los comprende3. Estos smbolos responden a
una representacin semitica de su funcin a
realizar, generndose una transcripcin grfica 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 encontramos los cimientos de la comunicacin 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 interfaz 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 establece pues una relacin de encoding (codificacin por parte del emisor) y decoding (lectura 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 definir al profesional multidisciplinar que es capaz de integrar en un mismo proyecto tareas
de ingeniera, diseo grfico, comunicacin
y psicologa. A continuacin analizaremos el
proceso de creacin de los iconos interactivos hipermedia, as como su evolucin esttica 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 descriptores y smbolos para codificar su funcionamiento. 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 directa, 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 pictogramas y smbolos, establecidos en el imaginario colectivo de gran parte de las sociedades
evolucionadas, poseen carcter universal y son
capaces de resolver estos problemas en dcimas 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: durante las primeras etapas de uso de la interfaz,
los diseadores optan por una configuracin
visual donde el entorno est definido mayoritariamente por descriptores textuales, entendindose esto como una aproximacin al
usuario para ayudarle a comprender su funcionamiento. Cuando dicha tecnologa toma
carcter universal y su funcionamiento bsico
es comprendido por el conjunto de usuarios,
evoluciona hacia interfaces formadas por iconos 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 primeros dispositivos que permitan la reproduc-

Eme n3 2015

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 tipogrfico 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 diseo de Phillips capitaneado por el diseador
Phillip Orson configur un nuevo lenguaje
universal con la incursin de los iconos que
actualmente conocemos y que configuraron un estndar inmediato dentro del sector
(Fig. 2). Tomando como base signos direccionales 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 reproduccin. Para la funcin de stop, se us el
smbolo del rectngulo, (probablemente apoyndose en la estabilidad del cuadrado), as
como para la funcin de pausa, el smbolo universal qued configurado por el rectngulo con
un hueco en su centro, dividindolo en dos y
dando a entender una pausa temporal de posterior reproduccin. La sencillez de estos elementos representa un ejemplo de modernidad y diseo 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 fundamentado en iconos se ha dado en la informtica
personal durante los ltimos cuarenta aos.
Durante la dcada de los 70, tras aos basando la relacin entre usuario y sistema operativo en interfaces textuales, los avances en la
compaa Xerox PARC dieron lugar a la primera metfora de escritorio8, plantendose lo

53

pp. 50-61. ISSN 2253-6337

Fig. 1. Grabador/reproductor de cintas modelo Grundig-TK-14,

de 1961, con descriptores tipogrficos
Fig. 2. Controles de reproductor Philips N2205, de 1968,
donde destaca el uso de pictogramas
*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.

En l, las distintas funciones eran representadas por elementos referentes al mbito fsico
como el sistema de carpetas y archivos, papelera, bote de pintura, etc. (Fig. 3). Este uso de
un entorno metafrico implica la apropiacin
de la experiencia cognitiva previa del individuo, en favor de una mejor asimilacin del

funcionamiento por similitud a la mecnica

de los procesos mentales10. De ese modo, el
icono en la interfaz, establecido como smbolo, es la llave del proceso cognitivo de interpretacin entre humano y dispositivo.
Esta idea fue implementada posteriormente por el equipo de Apple en su computadora Lisa con mayor xito y difusin

Eme n3 2015

55

pp. 50-61. ISSN 2253-6337

Fig. 3. Iconos de la interfaz de usuario producida por Xerox Parc, 1973

Fig. 5. Iconos pertenecientes a la primera
versin de Windows en 1985

09
comercial. Es fundamental aludir al trabajo
de la diseadora Susan Kare11 en esta etapa, responsable tanto del primer diseo de
iconos aparecido en el Macintosh de 1984
como de dar forma definitiva a estas metforas instauradas en el imaginario tecnolgico 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 representadas manteniendo un criterio coherente
entre ellas (Fig. 4). Encontramos en este trabajo dos factores especialmente crticos, en
primer lugar, el proceso de interpretacin y
codificacin de las tareas realizables al vincularse con elementos metafricos altamente reconocibles. Por otro lado, cabe destacar
el excelente trabajo de encriptacin grfica,
donde dentro de una retcula de pxeles reducida, la diseadora consigui construir
un programa de iconos reconocible capaz
de generar un excelente cdigo visual12, minimizndose factores clave en el diseo de
interfaces como el tiempo de aprendizaje, la
velocidad de realizacin de tareas o el porcentaje de errores de los usuarios13.

Este medio tuvo un desarrollo continuo durante las dcadas posteriores en las que se fue
produciendo un refinamiento del aspecto grfico de todo el entorno, lento pero constante,
hacia un estado actual ms normalizado. La
evolucin del aspecto de los iconos informticos 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 limitaciones 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 paleta, 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 alegrico iniciado en los aos 70 permaneci
prcticamente intacto, creciendo en complejidad visual y matices pero conservando los cdigos clave anteriormente comentados. Es en
este mbito cabe destacar el conjunto de iconos 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

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 metfora 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 interfaces grficas, con proyectos entre los
que destacan iconos para sistemas operativos 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 Experimenta nm. 51, Madrid, 2005, p. 59.
13
Shneiderman, Ben y Plaisant,
Catherine: Diseo de interfaces de
usuario, estrategias para una interaccin
persona-computadora efectiva, Washington, 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

Fig. 6. Evolucin del icono de la papelera de reciclaje en los distintos SO de Apple.

Fig. 7. Primera versin de iOS en

iPhone, 2007.

15

Skeumorfismo, Esta palabra, proveniente

del latn skeus (herramienta) y morphe
(forma), define a un estilo concreto de
diseo, potenciado especialmente por la
propia Apple en los ltimos aos, que se
fundamenta en otorgar a los elementos
grficos un aspecto similar al que tendran en el mundo real, evidentemente
segn el uso y funcin de la aplicacin.
16
Ms informacin en: http://www.slideshare.
net/jasonmesut/the-future-of-user-interfaces/
17 Ms informacin sobre la evolucin de
los iconos de escritorio en: http://www.
pencilscoop.com/2013/12/the-evolutionof-icon-design-from-1981-2013/

una evidente vocacin skeumrfica15, el cual haca uso de

una potencia grfica inslita para representar iconos de
aspecto realista, similares a botones reales de aspecto fotorealista. El skeumorfismo, del cual hablaremos ms adelante, supone para algunos analistas como Jason Mesut
un recurso esttico fundamentado en el uso de la referencia a la obsolescencia para minimizar el shock que puede 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 diferenciacin 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, superficies similares al cristal y transparencias (Fig. 6). Responda 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).
Un nuevo medio, nuevos iconos. El camino hacia la creacin 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 experimentacin a los diseadores de interfaces. La tecnologa
tctil que fue implementada en el primer iPhone (Fig. 7) y
posteriormente en todos los dispositivos tctiles, cambi
el modo en que los diseadores conceptualizaron la interactividad entre usuario y dispositivo. Con claras similitudes al entorno de escritorio conocido en los ordenadores
de sobremesa, estas nuevas interfaces contaban con un
condicionante dramtico: la reducida dimensin de sus
pantallas y su limitada densidad de pxeles obligaban a replantear el medio para permitir una lectura cognitiva adecuada y, por tanto, una experiencia de uso satisfactoria.
As, del mismo modo que encontramos una evolucin
estilstica en los iconos de los mbitos tecnolgicos anteriormente comentados, en el caso de las interfaces tc-

Eme n3 2015

tiles podemos encontrar dos itinerarios claramente diferenciados: en primer lugar, un

progreso esttico definido por el vnculo con
las tendencias grficas de estos ltimos aos,
junto con una importante evolucin semntica donde los smbolos han progresado desde
un aspecto completamente evidente y vinculado al descriptor textual a un estado actual
ms sinttico que se sustenta en la experiencia de uso colectiva de los dispositivos.
Adems, las nuevas tecnologas mviles
permitieron mediante sus tiendas el desarrollo
de aplicaciones por parte de terceros. Esto signific que los usuarios no solo encontraran
interfaces diseadas por las grandes compaas de software, sino que equipos de desarrollo independientes fueron capaces de publicar
sus proyectos y, por tanto, permitir al medio
permeabilidad directa de las tendencias globales de diseo. Esto, junto con la enorme
adaptacin que los dispositivos mviles tctiles tuvieron entre los aos 2007 y 2009, provocaron 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 propios. 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
datos. Este smbolo, que en los primeros navegadores web apareca representado como
unos prismticos, ha resultado finalmente estandarizado y lo encontramos en la inmensa
mayora de apps actuales (Fig. 8). Casos similares 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

57

pp. 50-61. ISSN 2253-6337

La tecnologa tctil ha tenido

un importante calado social gracias
al principio de la manipulacin directa
frente a la indirecta del ratn.

ejemplos responden a los iconos de configuracin (representadas por tuercas o sistemas

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 simblica 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 rescatada 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 software de escritorio actuales18.
La tecnologa tctil ha tenido un importante 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 domstica, independientemente de su edad y
formacin. Podemos dar por sentado que el
imaginario colectivo creado por el desarrollo
de estas plataformas est alcanzando verdaderas cotas de universalidad.
La vuelta a la sntesis. Flat design
Si bien hemos evidenciado como el medio tctil ha generado un vasto cdigo de
smbolos propios, no podemos obviar la

Fig. 8. Smbolo actualmente estandarizado para la funcin "buscar"

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

El gesto como icono. Anlisis de la evolucin de los elementos interactivos

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 informacin en: http://www.google.com/design/
spec/material-design/introduction.html

Fig. 10. Pantalla principal de la interfaz Metro desarrollada por Microsoft

evolucin grfica que estos iconos han experimentado en los ltimos aos. En la evolucin de las interfaces de escritorio analizada
anteriormente, hemos podido entrever una
clara curva ascendente respecto a la complejidad del detalle visual de los iconos interactivos. Partiendo de sistemas claramente
limitados que obligaban a plantear soluciones 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 dispositivos mviles inteligentes, la tendencia permaneci de un modo similar, pues hemos de
entender que las interfaces que plantearon
los diseadores implicados en las primeras versiones de iOS y Android mantenan
una clara conexin visual con la metfora de escritorio anteriormente comentada.
Esto responde a la bsqueda de universalidad del medio, es decir, facilitar el acceso a
la interfaz de la mayor cantidad de pblico
posible19. Adems, los elementos de sealizacin bsicos (encargados de funciones
como volver, siguiente o ms informacin) estuvieron determinadas mayoritariamente por descriptores textuales embebidos 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 estancamiento y fue necesario replantear su aspecto de

un modo radical.
A partir del ao 2010, aparece una nueva 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 clave para la experimentacin grfica. Podemos
resumir los motivos de este cambio de paradigma 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 desarroll su propio libro de estilo para webs y
apps llamado material20) y Microsoft (con su
interfaz Metro) las pioneras en plantear sistemas visuales distintos al entorno skeumrfico
tan presente en los diseos de Apple (Figs. 9
y 10). En estos sistemas tomaban protagonismo una sntesis clara de los elementos visuales 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 operativos 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 corporativo. 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 replante 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 realizado por Pentagram (Fig. 13), hasta el restyling de los iconos en iOS Maveriks (vase el icono del Finder en Fig. 14
o el de Safari en la Fig. 15), asistimos a un claro giro pendular respecto a la complejidad de los smbolos e iconos
en el mbito digital.
Adems, otro factor que est generando claras convenciones 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 difcil 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 perfil suelen ocupar la parte derecha, quedando el espacio
intermedio reservado para iconos vinculados a servicios
de cmara, galeras, geolocalizacin, etc. La universalizacin 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, actualidad y estructuracin de contenidos21.
Los recursos tctiles tras el icono tradicional
La unin de los dos aspectos analizados en el apartado anterior (creacin de convicciones estticas junto
con la distribucin predeterminada de los elementos)
est dando lugar en los ltimos aos a nuevas estrategias de diseo que en ocasiones suplen a los iconos.

21

Nielsen, Jakob y Budiu, Raluca:

Usabilidad en dispositivos mviles,
Madrid, Ediciones Anaya Multimedia,
2013, p. 75.

J. Linares N. Rodrguez y A. Sanchis 60

El gesto como icono. Anlisis de la evolucin de los elementos interactivos

Fig. 16. Comparacin entre los iconos de Instagram y la app Phhhoto

22

Entindase wearable como toda tecnologa

vinculada a prendas y complementos de vestir como relojes, pulseras y dems accesorios.

Estamos asistiendo a un proceso de sntesis

que est encriptando el aspecto de los smbolos interactivos hasta su mnima expresin. Algunos incluso comienzan a perder el
vnculo metafrico con su funcin para convertirse en reclamos cognitivos que el usuario, 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 comparacin 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 fenmeno de los activadores invisibles. stos
permiten interacciones a travs de gestos de
deslizamiento o intuitivos toques en los bordes 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), realizndose esta accin deslizando el elemento
hacia arriba o abajo, generndose una experiencia 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 interaccin 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 propia naturaleza tctil sigue requiriendo su
uso para construir sus itinerarios visuales),
la incursin de las interacciones gestuales
nos ayuda a intuir un futuro donde predomine la informacin a favor de una interfaz
mnimamente invasiva fundamentada en
la experiencia de uso colectiva. Adems, la
aparicin de nuevos dispositivos con formatos y dimensiones distintas a las ya conocidas, 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, pulseras y todo tipo de complementos, donde
encontramos iconos milimtricos de gran
sntesis visual. Adems, dichos dispositivos
se fundamentan en el uso de sistemas hpticos 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 visuales que hemos analizado.
El mbito del diseo de elementos interactivos ha demostrado una evidente
permeabilidad respecto a los avances tecnolgicos, culturales y estticos. Las caractersticas 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 servicio de la informacin.

Eme n3 2015

61

pp. 50-61. ISSN 2253-6337

BIBLIOGRAFA
ERICKSON, THOMAS: The Art of Human
Computer Interface Design, Massachussets,
Addison-Wesley, 1990.
FRUTIGER, ADRIAN: Signos, smbolos, marcas, 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 interface design, Nueva York, Wiley, 1997. p.,15.
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
NIELSEN, JAKOB Y BUDIU, RALUCA: Usabilidad en dispositivos mviles, Madrid, Ediciones Anaya Multimedia, 2013. p. 75.
NORMAN, DONALD: Diseo emocional. Por
qu nos gustan o no los objetos cotidianos, Madrid, Paids Transiciones, 2005.
SEBEOK, THOMAS: Signos: una introduccin
a la semitica, Madrid, Paidos, 1996. p. 25.
SHNEIDERMAN, BEN Y PLAISANT, CATHERINE: Diseo de interfaces de usuario, estrategias para una interaccin persona-computadora efectiva, Washington, Pearson Educacin,
2005, p. 17.
STEPHENSON, NEAL: En el principio, fue la
lnea de comandos. En Mapas. Madrid, Traficantes 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

Gua Material user interface. Disponible en:

http://www.google.com/design/spec/materialdesign/introduction.html
HOWARD, JOE: The evolution of icon design
from 1981-2013. Disponible en: http://www.
pencilscoop.com/2013/12/the-evolution-oficon-design-from-1981-2013/
MESUT, JAMES: The future of user interfaces.
Disponible en: http://www.slideshare.net/jasonmesut/the-future-of-user-interfaces/
Place it Blog. A brief history of the hamburguer icon. Disponible en: http://www.blog.
placeit.net/history-of-the-hamburguer-icon/

Jordi Linares

Doctor en Informtica por la Universitat Politcnica de Valncia. Su actividad acadmica e investigadora se centra en los
sistemas interactivos, realidad virtual y realidad aumentada, videojuegos, juegos serios y sistemas educativos.

Nuria Rodrguez

Artista, docente y diseadora grfica. Profesora Titular en laUniversitat Politcnica de Valncia. Directora de Unit. Edicin Experimental e Interactiva, grupo investigador multidisciplinar especializado 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 Valncia y en Diseo Interior por la EASD Valencia. Actualmente
realiza su tesis doctoral sobre el diseo de interfaces en aplicaciones mviles. Adems, forma parte del equipo de trabajo Unit.
Edicin Experimental e Interactiva, especializado en la produccin 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.