[google-translator]

El color: la belleza en la App

Estrategias de Marketing

EL TRATAMIENTO DEL COLOR EN EL DISEÑO DE APP

Hemos hablado de Experiencia de Usuario -UX-, del viaje del usuario como plataforma para la construcción de una App y del diseño visual de la misma. ahora queremos profundizar en más detalles sobre algunos elementos que tenemos en cuenta en el diseño de la App. También hemos introducido la importancia de la tipografía en el mismo contexto.

En el presente artículo pretendemos ahondar sobre otros elementos de diseño visual igualmente críticos a atender en el diseño de app.

app color

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.

 

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:

app 157

  • 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.
  • 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.

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.

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 videos, ya que ayuda a resaltar estos elementos.

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.

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 se está viendo.

app 158

Idealmente, como los encabezados están presentes en diferentes secciones de la aplicación, debe haber una consistencia cromática a medida que se navega por las diferentes partes de la app. Sin embargo, otras apps —como la del periódico inglés «The Guardian»— aprovechan los encabezados para jugar con variaciones de color que marcan una diferencia visual entre cada una de las secciones. De esta forma, el encabezado sirve también para extender su identidad visual y al mismo tiempo, darle una pista al usuario de la sección en la que se encuentra.

COLORES POR DEFECTO DE CADA SISTEMA OPERATIVO

Android y Windows Phone usan temas —themes en inglés— que afectan el color de sus aplicaciones y pueden ser claros u oscuros. En Windows Phone la elección entre los temas disponibles está también en manos del usuario, ya que pueden cambiarse en las preferencias del teléfono, modificando la visualización de la interfaz a través de todo el sistema operativo.

app 159

Todos los elementos nativos de las aplicaciones se ven afectados por esta decisión: diálogos, botones y fondos de listas se verán en consonancia con el tema elegido. Sin embargo, en Windows Phone, respetar la elección del usuario queda en manos de cada aplicación, porque aun cuando este haya elegido un color para su tema, la app puede decidir usar una opción cromática diferente. Por ejemplo, incluso si el usuario elige un color oscuro como tema, la aplicación puede mostrar elementos en blanco si así se ha establecido previamente.

Mantener o no la selección que hace el usuario del tema, tiene ventajas y desventajas que deben valorarse cuando se decide el diseño de la app. Por ejemplo, usar el color del tema elegido brinda consistencia visual y comodidad a través de todo el sistema operativo, además, el usuario se siente siempre dentro del mismo contexto. No obstante, la diferenciación respecto a otras apps puede ser baja y disminuye la posibilidad de incorporar a la aplicación los colores corporativos.

app 160

En Android, la elección del tema no es una opción para el usuario; son los diseñadores quienes deben decidir si aplicar temas oscuros o claros a toda la aplicación, o solo a determinadas pantallas.

En los dos casos, los colores de los temas se combinan con otros secundarios que tienen la función de resaltar aquellos elementos que requieren atención. En Windows Phone, este color secundario también puede ser elegido por el usuario dentro de una lista de opciones en las preferencias, pero también en este caso, la app puede haber optado por un color diferente. Mientras tanto, aunque su paleta cromática propone otras opciones que pueden ser tenidas en cuenta a la hora de plantear el diseño visual, en Android se recomienda el azul como color secundario.

app 161

Por último, el caso de iPhone es diferente porque no usa temas. Su propuesta de color nativa, establecida por defecto, se basa en la claridad: blanco y grises muy claros para fondos, barras de herramientas y encabezados de secciones. Estos elementos cuentan también con cierta transparencia que deja ver lo que se encuentra detrás. Mientras que el negro se destina para elementos informativos, el azul se usa como color para resaltar la tipografía en etiquetas de botones y formularios, y otros elementos que necesitan destacarse (iconos, pestañas seleccionadas, controles). Aun así, los colores de estos elementos pueden cambiarse fácilmente.

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.

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.

app 163Otro 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.

GRÁFICOS EFÍMEROS

Es necesario considerar también el diseño de aquellos elementos que aparecen por poco tiempo en la pantalla. Por ejemplo, si la conexión es lenta, puede ser que el usuario tenga que pasar más tiempo de lo esperado viendo la pantalla de carga y en ese caso, estos detalles visuales tienen su momento de gloria.

app 164

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. Por ejemplo, en la aplicación de Google+ cuando se arrastra y suelta la pantalla para actualizar los contenidos, aparece una serie de tiras de colores, un detalle no visible hasta que realizamos esta acción.

app 165

Animando la app

Las animaciones son más difíciles de diseñar y, en ocasiones, de percibir que los llamados detalles visuales, pero también hacen una diferencia en la experiencia de usuario, pues llenan de vida la aplicación y hacen más agradable su uso, a la vez que acompañan una función principal o una acción. Seguramente no son fundamentales, porque lo mismo podría representarse sin estar animado, pero sin duda influyen mucho en cómo se siente el usuario al interactuar con los elementos en pantalla.

De acuerdo a su función o a la forma de utilizarlas, las animaciones pueden servir para diferentes cosas:

  1. Como feedback. Los gráficos en pantalla pueden animarse para mostrar el resultado de una acción. Tal sería el caso de un elemento que desaparece de la pantalla después de ejecutarse una acción, mostrando hacia dónde va y qué ha pasado con él.

app 166

2. Como transiciones. Las animaciones pueden ayudar a hacer las transiciones entre pantallas más fluidas. Esto puede representar una buena experiencia de navegación cuando se va de un contenido hacia otro.app 167

3. Como herramientas informativas. Especialmente cuando se usa la app por primera vez, puede ser necesario mostrar algún elemento en la pantalla señalando cómo se usa o destacar la presencia de un componente nuevo que no existía en versiones anteriores. En casos como estos, la animación puede ayudar para dirigir la atención, que es, de hecho, una de sus funciones principales.

4. Puro «caramelo visual». A veces, una animación no cumple otra función más que «endulzar» el ojo del usuario. Puede ser un simple detalle que no todos vean, pero que sin duda causará una buena impresión visual al ser notado.

estrategias de marketing sello

En Estrategias y Marketing .com desarrollamos plataformas web responsive, app para negocios y app internas para empresas, gestión de redes sociales, posicionamiento SEO/SEM, diseño publicitario y mantenimiento para herramientas  de acciones online y Estrategias de Marketing. Queremos ser tu socio. Somos los adecuados para ayudarte a conseguir tus objetivos.

Añadimos cookies para mejorar tu experiencia como usuario. Leer Política de cookies
SI, ACEPTO