INTERFACES DE LAS APLICACIONES

MOVILES
¿QUÉ SON LAS APLICACIONES?
¿QUÉ SON LAS APLIC ACIONES?

• Las aplicaciones —también llamadas apps— están presentes en los

teléfonos desde hace tiempo; de hecho, ya estaban incluidas en los
sistemas operativos de Nokia o BlackBerry años atrás. Los móviles de
esa época, contaban con pantallas reducidas y muchas veces no táctiles,
y son los que ahora llamamos feature phones, en contraposición a los
Smartphone, más actuales. En esencia, una aplicación no deja de ser un
software. Para entender un poco mejor el concepto, podemos decir
que las aplicaciones son para los móviles lo que los programas son
para los ordenadores de escritorio.
• Actualmente encontramos aplicaciones de todo tipo, forma y color,
pero en los primeros teléfonos, estaban enfocadas en mejorar la
productividad personal: se trataba de alarmas, calendarios, calculadoras
y clientes de correo.
DIFERENCIAS ENTRE APLICACIONES Y
WEB MÓVILES
DIFERENCIAS ENTRE APLIC ACIONES
Y WEB MÓVILES

• Las aplicaciones comparten la pantalla del teléfono con las webs

móviles, pero mientras las primeras tienen que ser descargadas e
instaladas antes de usar, a una web puede accederse simplemente
usando Internet y un navegador; sin embargo, no todas pueden verse
correctamente desde una pantalla generalmente más pequeña que la
de un ordenador de escritorio. Las que se adaptan especialmente a un
dispositivo móvil se llaman «web responsivas» y son ejemplo del
diseño líquido, ya que se puede pensar en ellas como un contenido que
toma la forma del contenedor, mostrando la información según sea
necesario. Así, columnas enteras, bloques de texto y gráficos de una
web, pueden acomodarse en el espacio de una manera diferente —o
incluso desaparecer— de acuerdo a si se entra desde un teléfono, una
tableta o un ordenador.
EL ESTILO DE LAS INTERFACES
EL ESTILO DE LAS INTERFACES

• La interfaz de una aplicación es como la ropa que viste para salir a la

calle. Es también la capa que hay entre el usuario y el corazón funcional
de la app, el lugar donde nacen las interacciones. En mayor medida está
compuesta por botones, gráficos, íconos y fondos, que tienen una
apariencia visual diferente en cada uno de los sistemas operativos,
porque Android, iOS y Windows Phone tienen su propia forma de
entender el diseño. El trabajo del diseñador consiste en interpretar la
personalidad de cada sistema operativo, aportando su propia visión y
estilo de diseño, para conseguir aplicaciones que, además de ser fáciles
de usar, sean distintas a las demás y tengan coherencia visual con la
plataforma que las acoge.
 EL ESTILO DE LAS INTERFACES

LA BELLEZA SIMPLE DE ANDROID

• El diseño en Android está basado en una pulcritud

brillante en la composición de la interfaz. Cada
gráfico, botón y texto está acompañado por la idea
de limpieza visual pero, a la vez, deslumbra con
pequeños detalles. Roboto, la tipografía propia de
este sistema operativo, es en gran parte su seña de
identidad y se combina con un estilo de botones y
colores bien definido. Android se apoya en la
simplicidad, controlada pero no aburrida, que, en
ocasiones, rompe o trasciende sus propios
formalismos para encantar al usuario.
EL ESTILO DE LAS INTERFACES

IPHONE, EN BUSCA DE LA LIGEREZA

VISUAL
• Dejando atrás un estilo que lo marcó hasta su versión 6, iOS
defiende actualmente una ideología compartida también con
otros sistemas operativos: despojarse de elementos
innecesarios, privilegiando el contenido por sobre el
contenedor. Para conseguir esto reduce controles y gráficos
a su mínima expresión, siempre con la idea de aligerar
visualmente los elementos en pantalla. Este concepto se
respalda con una elección tipográfica —Neue Helvética,
muchas veces en sus variables más light— y la elección de
colores —blancos para fondos y fuertes para íconos y
textos—. Cada componente de la interfaz se trata como una
capa superpuesta a la otra, a veces con cierto grado de
transparencia y difuminado, transmitiendo una sensación de
continuidad y permanencia en el contexto
EL ESTILO DE LAS INTERFACES

EL DISEÑO PLANO DE WINDOWS

PHONE

• El estilo de diseño de Windows Phone se basa

en un diseño plano, despojado de relieves,
degradados y decoraciones estéticas excesivas.
Esta limpieza visual también se aplica a los
contenidos, donde solo aquellos importantes
permanecen en pantalla, luciéndose en su
contexto. La interfaz consiste en una
aproximación infográfica para sus íconos, con
un marcado uso de la retícula y la tipografía
como uno de los principales recursos para
dotar de personalidad al diseño.
 INTERFACES NATIVAS O
PERSONALIZADAS

• Las interfaces nativas se basan en elementos —botones, listas y encabezados— que vienen
preestablecidos en cada plataforma. Tienen un aspecto ya definido en cuanto a las características básicas
de su apariencia como color, tamaño o tipo de fuente, que pueden ajustarse en mayor o menor medida
para que se correspondan con la estética buscada. En el momento de comenzar a diseñar es
recomendable definir la interfaz con elementos nativos. De esta forma, se consigue una buena base sobre
la cual trabajar y no es necesario crear todos los elementos desde cero. El inconveniente de las interfaces
nativas es que limitan la personalidad del diseño y, en algunos casos, es necesario ir un paso más allá. En
situaciones como esta, todos o algunos elementos de la interfaz pueden ser personalizados, lo cual se
logra creándolos de nuevo como imágenes. Por ejemplo, un elemento visual personalizado podría ser un
campo de entrada de texto de un formulario que se genera como imagen, para aprovechar la posibilidad
de incluir texturas, relieves o sombras específicas, que un elemento nativo no ofrece.
Diseñar una interfaz personalizada tiene que planearse de antemano porque representa una mayor
complejidad y tiempo de desarrollo. De la misma manera, no siempre los diseños de este tipo de interfaces
se trasladan a la aplicación funcional de forma fidedigna, pues su correcta implementación queda en manos
de la pericia del desarrollador.
 I N T E R FAC E S N AT I VA S O P E R S O N A L I Z A DA S

¿CUÁNDO USAR UNA U OTRA

INTERFAZ?

• En la mayoría de los casos no se trata de elegir entre una u otra, sino de alcanzar el
balance adecuado combinando ambas. La situación más habitual suele ser partir de una
interfaz nativa y personalizar solo aquellos elementos que se consideren necesarios. El
tipo de aplicación también tiene incidencia en este asunto. Por ejemplo, las aplicaciones
que dan valor a los detalles visuales y a la experiencia en general, suelen contar con
más de un elemento personalizado.
• Además del objetivo o del tipo de aplicación, hay otras variables para considerar. Las
interfaces nativas tienen un punto a favor y es que están constituidas por elementos
que el usuario ya conoce y a los que está habituado, por lo tanto, no representan un
nuevo aprendizaje. Esto puede incidir favorablemente en la usabilidad de la app. Por
otro lado, las interfaces personalizadas pueden ofrecer una apariencia más acabada,
pero al trabajar con ellas hay que considerar la compatibilidad con múltiples
dispositivos —cómo se visualiza el mismo diseño en teléfonos diferentes— y el
rendimiento general —un uso excesivo de imágenes puede hacer que la app sea más
lenta—.
 LA IDENTIDAD VISUAL

• Una aplicación es, entre otras cosas, una pieza de comunicación.

Forma parte de un sistema y es una oportunidad para extender la
identidad de una empresa o producto. A través de las diferentes
pantallas de la app, los colores, tipografías y fondos actúan como
elementos que reflejan esa identidad.
• Claramente, uno de los componentes de la identidad es la marca.
Aunque sea tentador hacer un uso extensivo y repetido de ella, se
recomienda incluirla en lugares propicios para tal fin, como
pantallas introductoras, pantallas para ingresar clave y usuario, o
en la sección «Acerca de». De esta forma, se puede asegurar una
correcta exhibición de la identidad sin afectar la navegación y la
experiencia de uso.
 ÍCONOS Y PANTALLA INICIAL

• Dicen que la primera impresión es la que cuenta.

En el mundo de las aplicaciones esa primera
impresión está limitada a dos componentes
visuales: el ícono de lanzamiento y la pantalla
inicial —también llamada splash— que se
mostrará muchas veces al abrir la aplicación. Estos
elementos se verán antes que nada, incluso, antes
de empezar a usar realmente la aplicación. No
menospreciar su importancia y darles la atención
que merecen, garantiza arrancar con el pie
derecho.
Í CONOS Y PANTAL L A I NI CI AL

ÍCONO DE LANZAMIENTO

• Hay que pensar en la aplicación como un producto

que estará en un escaparate junto a muchos otros y
el ícono de lanzamiento es el packaging que lo
envuelve. En primer lugar, este ícono servirá para
representar a la app en las diferentes tiendas de
aplicaciones —junto a las pantallas y textos
promocionales— como elemento de venta para
convencer al usuario de descargarla.
• Sorteado este paso, y una vez instalada en el teléfono,
la aplicación convivirá con muchas otras que el
usuario haya instalado; por eso, el ícono de
lanzamiento debe ser distintivo y representativo de la
app.
Í CONOS Y PANTAL L A I NI CI AL

ÍCONO DE LANZAMIENTO

Siendo aún más específicos, cada uno de los SO tiene diferentes

requisitos que debe cumplir el ícono de lanzamiento. Tanto Android1
como iOS2 ofrecen detalladas guías del estilo visual y características
técnicas que debe tener esta imagen.

En Android los íconos son objetos

representados frontalmente con una ligera
perspectiva, como si fueran vistos desde
arriba. Dan sensación de volumen y
profundidad, jugando con transparencias para
integrarse mejor a la pantalla. Las formas son
distintivas y con medido realismo.
Í CONOS Y PANTAL L A I NI CI AL

ÍCONO DE LANZAMIENTO

La situación es diferente en iOS: los íconos son por lo

general representaciones muy simplificadas de objetos
reales, o abstracciones del concepto de la app. Por lo
general el ícono contiene un solo elemento principal, sin
muchos detalles, que reposa sobre un fondo opaco. Para
completar la apariencia visual que el ícono tiene en la
pantalla del teléfono, iOS añade bordes redondeados a la
imagen, que debe ser cuadrada y cubrir la totalidad del
tamaño requerido en cada caso.
Í CONOS Y PANTAL L A I NI CI AL

ÍCONO DE LANZAMIENTO

Por su parte, en Windows Phone tienen un estilo

bastante característico: los íconos son pictogramas.
Formas extraordinariamente simples y de colores
planos —sobre todo blanco—, casi sin detalles e
integradas perfectamente a su contenedor. En este
caso, la transparencia es fundamental ya que las
imágenes están ubicadas dentro de una forma
cuadrada, que puede cambiar el color de fondo de
acuerdo a las preferencias cromáticas del usuario
 Í CONOS Y PANTAL L A I NI CI AL

ÍCONOS INTERIORES

• Ya dentro de la aplicación, los íconos interiores tienen un

papel menos estelar y más funcional que los de lanzamiento.
Puede ser que pasen desapercibidos, pero su trabajo es
importante y silencioso y, como tal, digno de tener en
cuenta. Su uso suele estar asociado a tres escenarios. El
primero, como ayuda visual para reforzar información, por
ejemplo, en un cuadro de diálogo con una alerta. En el
segundo caso, los íconos interiores actúan como
complemento de elementos interactivos, como cuando se
encuentran dentro de botones o pestañas. Finalmente, su
función puede ser la de mejorar la utilización del espacio, en
este caso, el ícono resume visualmente algo que en forma
de texto sería muy extenso o complejo de entender.
Í CONOS Y PANTAL L A I NI CI AL

PANTALLA INICIAL

Conocida también como splash, es la primera pantalla

que verá el usuario al iniciar la app. Su uso está siendo
cada vez más limitado —y evitado—, por lo que
generalmente se muestra rápidamente la primera vez
que se abre la aplicación. Esta pantalla sirve como
presentación del contenido mientras se realiza la carga
inicial, por tanto, es normal que se incluya un elemento
indicativo de carga junto a los demás elementos gráficos.
 COLOR

• El color es un recurso vital en el diseño de

una aplicación. Su uso abarca encabezados,
textos, botones, fondos y muchos otros
elementos que conforman la interfaz. En
algunas ocasiones, está asociado a la
identidad —color corporativo— y en
otras, responde a criterios estéticos y
decisiones de diseño. Un color por sí solo,
salvo en el caso de colores reservados, no
indica mucho. Como parte de un sistema
cromático, el uso consistente, consciente y
vinculado al contexto donde se aplica, es lo
que lo llena de significado para el usuario
COLOR

COLORES RESERVADOS

Hay ciertos colores que deben emplearse de forma cuidadosa porque

tienen connotaciones que no pueden obviarse. Se llaman justamente
«colores reservados» porque su uso debería limitarse especialmente a
los nombrados a continuación:

• Rojo: Para errores y alertas importantes.

Es un color que naturalmente indica
peligro y llama la atención para centrarse
inmediatamente en lo que está ocurriendo
 COLOR

COLORES RESERVADOS

Amarillo: Prevención. Señala que la acción que va a

realizarse implica la toma de una decisión que ocasiona
alguna consecuencia, por lo cual hay que estar alerta.

Verde: Mensajes de éxito y confirmación de que una

acción se ha realizado correctamente.
 COLOR

EN TEXTOS

• El color se puede usar para destacar aquellas frases o

palabras que pueden ser pulsadas, como enlaces. En este
caso, es importante mantener la consistencia visual para
permitir al usuario, intuitivamente y a simple vista, saber
cuáles son los elementos tipográficos interactivos. Otra
función que cumple el color al ser usado en textos es la de
jerarquizar el contenido. La información complementaria
puede ser destacada o minimizada dependiendo del color
que se use; por ejemplo, aquella que reviste cierta
importancia podría destacarse en el texto con un color
diferente. De la misma forma, el color también puede
usarse para identificar información secundaria, usando
tonos más claros sin tanto protagonismo
 COLOR

EN FONDOS

• En el caso del color de fondo, este debe estar en

consonancia con el elegido para la tipografía, ya que es
necesario un contraste mínimo por cuestiones de
legibilidad y accesibilidad. Hay que tener en cuenta que
los fondos oscuros suelen cansar la vista más
rápidamente, por lo tanto, si la app es de uso frecuente o
requiere pasar cierto tiempo leyendo, es conveniente
revisar la elección cromática y llevar el color de fondo
hacia alternativas más claras. Sin embargo, los colores
oscuros en el fondo sí pueden ser una buena alternativa
cuando el contenido sea muy visual, como fotografías o
vídeos, ya que ayuda a resaltar estos elementos.
COLOR

EN ELEMENTOS INTERACTIVOS

• El color puede utilizarse como respuesta o feedback a

acciones concretas del usuario, un uso que muchas veces
no se tiene en cuenta. Para ilustrar con un ejemplo, los
elementos seleccionados o pulsados, como botones o
filas, pueden destacarse con un color que indique
visualmente dónde se ha pulsado, lo cual suele ser
particularmente difícil de saber en un móvil. En el caso
de elementos deshabilitados, generalmente el color es
más claro que cuando están en su estado normal,
incluso, puede apelarse al uso de transparencias. De
cualquier forma, el objetivo es indicar de una forma
evidente que ese elemento no producirá ningún efecto
al ser pulsado.
 COLOR

EN ENCABEZADOS

• Además de destacarlos como elemento

principal, cuando el color se usa en
encabezados tiene que armonizar
completamente con el fondo y los otros
elementos de la pantalla. A fin de cuentas, se
trata de un importante espacio que se usará,
por ejemplo, para poner los diferentes títulos
de sección y otros elementos interactivos que
tengan incidencia en el contenido de la pantalla
que se está viendo.
 DETALLES VISUALES

Es verdad que la diferencia radica en los detalles.

Ellos pueden separar una aplicación regular de una
genial. En una primera instancia no se presta atención
a estos detalles que mejoran la experiencia del
usuario e incluso, cambian su estado de ánimo; y es
normal, al principio hay otros aspectos de diseño de
los cuales hay que ocuparse. Pero a medida que la
interfaz va llegando a su fin, es importante
considerarlos para no pasar por alto algo que pueda
arruinar el trabajo realizado.
DETALLES VISUALES

PANTALLAS VACÍAS

Los diseños tienen que considerar no solo los

escenarios ideales, como una lista que ya está
completa o una pantalla llena. Es necesario plantear
también el diseño para cuando la aplicación
comienza a ser utilizada y aún no se dispone de
cierta información. Por ejemplo, cómo se vería una
pantalla vacía, sin ítems, cuando todavía no hay nada
para mostrar. Otro escenario a tener en cuenta, es
aquel relacionado con los fondos que irán detrás de
aquellas listas que no alcanzan a cubrir toda la
pantalla o los gráficos contenedores donde
aparecerán las imágenes una vez que estén cargadas.
DETALLES VISUALES

SECRETOS VISUALES

• A la hora de darse pequeños lujos visuales, se

puede pensar en aquellos gráficos que están ocultos
a primera vista, que no son de fácil acceso para el
usuario, pero que una vez descubiertos generan un
placer especial ayudados por la complicidad.