El icono de una app, aún siendo un elemento gráfico muy pequeño, es responsable de atraer al usuario y una de las razones por las cuales podría llegar a descargarse (o no) la app, lo que le convierte en uno de los factores clave en el App Store Optimization.

Se trata del primer elemento visual con el que nos vamos a encontrar tanto en las stores como en nuestra pantalla de inicio. Entre millones de aplicaciones ya creadas, el nuestro debe ser capaz de destacar y reconocerse por su diseño atractivo y funcional. El diseño del icono tiene por lo tanto la misma importancia que crear un buen producto.

Como decimos en PickASO, “el diseño bien concebido es una potente herramienta de ventas“.

Distinguir entre el icono y el logotipo

Antes que nada, hay que saber distinguir entre un icono y un logotipo. Parece obvio, pero no todo el mundo sabe distinguirlos y suele caer en el error de diseñar un logotipo demasiado recargado o un icono llegando a los extremos de lo abstracto.

¿Qué es el logotipo?

Un logotipo es un elemento gráfico como una marca con/o una tipografía debidamente cuidada que en conjunto forma parte de la representación visual de una entidad, organización, un producto etc. Se puede escalar el porcentaje que queramos, siempre tendrá el mismo aspecto.

Cherz icon logo

Imagen: Cherz icon

¿Qué es el icono de tu app?

Su función es diferente a la del logotipo de una marca. Este ayuda a comprender y reconocer de qué trata la app, debe trabajarse en un perímetro cuadrado y no son escalables, según medium.com.

Un ejemplo el de My manilla mail donde se ve claramente que al reducir las medidas de los iconos para diferentes soportes, el diseñador debe tener en cuenta el espacio dado y aprovecharlo al máximo siempre y cuando se entienda el propósito de la app.

Icono manilamail

Imagen: My manilla mail

Crea un icono reconocible por los usuarios

Cuando nos preguntamos sobre el factor más importante que puede decidir el éxito de un icono, pensamos en que debe ser visualmente atractivo, simple y que siga con las guidelines específicas de cada plataforma. Estos son evidentemente los puntos relevantes para el diseño de un icono, pero si éste no es reconocible, no conseguirá el objetivo planteado.

1. Competidores: ¿contra qué iconos compites en las stores?

Primero de todo, es importante saber contra qué iconos estaremos compitiendo constantemente por conseguir la atención del usuario, y estos se encuentran en nuestra misma categoría en las stores. De esta manera, podremos analizarlos y fijarnos en los elementos gráficos que podríamos usar para hacer de nuestro icono un icono único y reconocible ante la competencia.

En el siguiente ejemplo, vemos la categoría “Productividad” del año 2016, donde se observa que las apps que pertenecían a esa categoría en su momento no tuvieron en cuenta los iconos de sus competidores en la Store, ya que todos decidieron usar el “check” como elemento principal del icono.

Competidores Productividad App Icon

Imagen: medium.com

Actualmente, al entrar nuevas apps y renovando los estilos, se observa un cambio y mucha más variedad entre los iconos de las apps que componen esa categoría.

2. Simplicidad para diseñar el icono de tu app

Por otra parte, ser reconocible también implica usar bien el espacio del que disponemos. Un icono es un elemento cuadrado, pequeño y donde pocas cosas caben en él, por lo tanto quien destaque será quien sepa usar de manera más eficiente ese espacio.

Usar la simplicidad y minimalismo como herramienta para diseñar, parece estar muy de moda hoy en día. Sin embargo, pasarse de simple y tirar hacia lo abstracto es una vía que puede dificultar el reconocimiento al usuario.

En el siguiente ejemplo, la app Games Center hizo un cambio drástico en su icono, y aunque mucha gente ya sabía qué era Games Center, al principio costó hacerse a la idea que se trataba de esa app debido a la simplicidad que rozaba lo abstracto.

Games Center App icon ante sy después

Imagen: UX Planet

En cuanto a los colores, según los guidelines de Google Material, éstos deberían ser “inesperados e intensos”. Google sugiere que se limite la selección de colores escogiendo 3 a partir de la paleta de los colores primarios y un “accent color” de la paleta de colores secundarios.

3. No utilices palabras en el icono de tu app

No es necesario incluir el nombre de la aplicación en el icono, ya que generalmente acompañará al icono tanto en las stores como en el menú principal. Palabras e imágenes son herramientas de representación que van por separado, y mezclarlas en lo que se supone que es una representación gráfica suele conducir a una experiencia difícil de descifrar y poco trabajada gráficamente.

El ejemplo de la app de The Walking Dead es un claro ejemplo de cómo el uso del nombre de la app no aporta una información necesaria y podría ser prescindible.

The Walking Dead App icon

Imagen: UX Planet

Si queréis usar una letra en concreto (tal y como lo hace Facebook) y pensáis que puede encajar ya que le da un toque único, representa más que una letra un mero elemento gráfico, entonces podría encajar. Aún así, se trataría de una excepción más que una regla.

4. Prueba el icono de tu app sobre diferentes fondos

Diseñar un icono reconocible y minimalista no es lo único que habría que tener en cuenta.

Un diseñador UI tiene el control total de cómo va a resultar la interfaz y sabe en todo momento con qué fondo van a interactuar los diferentes elementos de la app. En cuanto a los diseñadores que se encargan de crear el icono de una app, no tienen este control, ya que resulta imposible predecir qué tipo de fondo tendrán los usuarios al descargarse la app. Por esta razón hay que verificar cómo luce en diferentes fondos, patterns y degradados.

Nosotros proponemos una norma, que es la de no tan sólo probar en un par de fondos, sino en fondos variados, y sobretodo no optar por poner fondo transparente al icono.

Menu apps icon iphone

Imagen: UX Planet

En el siguiente menú, podemos ver cómo la app “Stocks” se camufla con el fondo oscuro, ya que el mismo icono tiene casi el mismo tono que el fondo de pantalla. En este caso, aconsejaríamos, sin tocar los elementos que representan las gráficas, cambiar el fondo negro por blanco o un color que destaque más.

El diseño del icono influye en las descargas de tu app

Los iconos son pequeñas piezas de diseño concentrado y si consigues dominar  la escalabilidad, el reconocimiento y la simplicidad puedes crear un icono efectivo para conseguir más installs para tu app. El icono y los screenshots de tu app tienen un impacto directo en el App Store Optimization y no tenerlos en cuenta es uno de los errores más comunes, tal y como comentamos en el post 16 Errores App Store Optimization que sí o sí deberías evitar.

Cada app es un mundo y cada diseñador, según sus necesidades, puede adaptar los consejos que aparecen en este post. Todo dependerá de lo atrevidos que seamos, la lógica que usemos y saber contra quién vamos a competir. De esta forma, podemos crear un buen icono para destacar en las Stores y obtener más descargas.

¿Necesitas ayuda con el diseño de icono y screenshots de tu app? Contáctanos y te ayudaremos a mejorarlo.

Gemma Mier

Author Gemma Mier

More posts by Gemma Mier

Leave a Reply

 

Contacta con PickASO

Llámanos: 936 38 61 26

Escríbenos: [email protected]

Visítanos (previa cita): Rambla Catalunya, 60 (Principal-2ª), 08007, Barcelona (Spain)

Todas las noticias de App Marketing en tu Email:

Trataremos tus datos para enviarte nuestras novedades por email. Puedes revocar el consentimiento, ejercer tus derechos de acceso, rectificación, cancelación, supresión, oposición, limitación del tratamiento, portabilidad y supresión escribiéndonos a [email protected] Más información en la Política de Privacidad.

Expertos en ASO & App Marketing