Tu aplicación vivirá y morirá por su diseño.

Lo creas o no, el diseño de la aplicación juega un papel importante en mantener a tus usuarios. No importa necesariamente si es difícil de usar o simplemente fea, la gente decidirá que no vale su tiempo o esfuerzo. Entonces, ¿cómo creas un diseño de aplicación que sea atractivo para tus usuarios? Vamos a profundizar.

Entendiendo el diseño de aplicaciones

Un buen diseño de aplicación toma en cuenta una variedad de factores, pero siempre debe hacerse con un enfoque "primero el usuario" – y definitivamente no puede ser tu último pensamiento al crear una aplicación. También es importante tener en mente los principios generales del diseño y cómo se traducirán al espacio digital.

UI vs. UX

Interfaz de usuario (UI) y experiencia de usuario (UX) son comúnmente confundidos como lo mismo. Aunque van de la mano, son diferentes conceptualmente y en ejecución.

El diseño de la interfaz de usuario de la aplicación es la apariencia y sensación de tu aplicación, incluyendo su presentación e interactividad.

El diseño de la experiencia de usuario de la aplicación son los aspectos técnicos de usabilidad y funcionalidad de tu aplicación.

Piensa en tu aplicación como un proyecto de construcción. Un diseñador de UX es como el arquitecto que es responsable de la estructura y sus planos, que son similares a los wireframes. Un diseñador de UI es el diseñador de interiores de la casa, eligiendo papel tapiz y muebles como colores y fuentes.

(Imagen cortesía de Medium)

UI/UX es similar a la diferencia entre el desarrollo front-end y back-end. Estos dos componentes del diseño de aplicaciones tienen que trabajar juntos para crear algo que se vea bien y funcione bien. Si la experiencia de usuario no coincide con el diseño, hace que sea más difícil para los usuarios navegar por tu aplicación. En resumen, no quieres que el camino menos transitado sea el camino que pretendías que tomaran tus usuarios.

Sistemas de diseño de aplicaciones

Hay dos sistemas de diseño principales: Guías de Interfaz Humana en iOS y Material en Android. Estas son guías de diseño específicas para cada sistema operativo que contienen principios y patrones para elementos comúnmente usados como encabezados, hojas inferiores, tarjetas, etc. Utilizar un sistema de diseño puede hacer que el proceso de actualización de tu aplicación sea un poco más fluido.

Mientras que el software de diseño de aplicaciones asegura el rendimiento, también pueden ser flexibles. Normalmente se ajustan ligeramente, o en algunos casos se personalizan completamente, por el diseñador. Estas guías permiten a los equipos trabajar de manera más inteligente, incluso entre departamentos.

(Imagen cortesía de Airbnb)

Airbnb utiliza un sistema de lenguaje de diseño para comunicarse mejor de manera transversal, usando un vocabulario compartido entre diseño, ingeniería y otros departamentos. Es esencialmente el diccionario de diseño de tu aplicación, más imágenes.

5 consejos de diseño de aplicaciones

Para hacer que tu aplicación sea más amigable para el usuario, tus diseños de UI y UX deben trabajar juntos sin problemas.

1. No agotes la batería

Si tu aplicación consume mucha batería, es menos probable que tus usuarios la abran. El brillo de la pantalla y el color de la pantalla son los mayores factores en el consumo de batería móvil, junto con servicios en segundo plano como la ubicación.

Google realmente admite que estaba equivocado. ¿Decir eso de nuevo? La iniciativa de Material Design de Google anima a los diseñadores a usar el blanco como su color principal para las aplicaciones.

(Imagen cortesía de Google)

Las aplicaciones que requieren mucho tiempo de pantalla como YouTube han comenzado a implementar el "modo oscuro" para reducir el uso de batería. Según Google, cuando se usa a pleno brillo en su smartphone Pixel, YouTube en modo oscuro usó un 43 por ciento menos de energía que el modo normal.

2. La navegación simple siempre gana

No deberías intentar reinventar la rueda. Intenta usar secuencias estándar para tu menú de navegación, como la barra de pestañas de iOS o el cajón de navegación de Android. Los usuarios están familiarizados con estos patrones comunes, por lo que tu aplicación será más intuitiva para ellos.

Es importante que el menú de navegación de tu aplicación siempre sea visible y no salte mientras el usuario se mueve por la aplicación. Si decides usar íconos en tu barra de navegación, asegúrate de que su propósito sea claro para el usuario. Deberías priorizar ciertas funciones sobre otras en tu navegación. Si es necesario, crea un menú primario, secundario e incluso terciario.

Este concepto utiliza un menú de navegación reducido, solo una flecha para representar un comando de "volver" y una lupa que significa "buscar". Estos dos símbolos nunca se mueven mientras te desplazas por la aplicación.

(Imagen cortesía de A. Salomon)

Este patrón de navegación de aplicaciones también aprovecha algunos gestos comunes, como deslizar de izquierda a derecha para clasificar los diversos temas de noticias.

3. Elige colores y fuentes sabiamente

Los colores son importantes tanto para el diseño UX como para el UI. ¿Deberías sacrificar tu apariencia limpia y blanca para ahorrar batería? ¿Cuántos colores son demasiados? Piensa en tu identidad de marca cuando estés tomando estas difíciles decisiones de diseño.

Por ejemplo, los colores de alto contraste pueden hacer que tu interfaz de usuario "resalte" más que si usaras colores similares. Pero hay más en la elección de colores que solo la apariencia. Piensa en la legibilidad de las fuentes y los colores.

¿Sabías que casi el 5% de la población mundial experimenta daltonismo? Tienes que pensar en la función de los colores al diseñar tu aplicación.

(Imagen cortesía de Smashing Magazine)

Obviamente, el verde significa avanzar. Pero sin estos símbolos junto a los campos del formulario, un usuario daltónico no sabría qué entrada está creando el error.

4. El peso visual hace la diferencia

Es necesario que anticipes las necesidades de tus usuarios sin anticipar sus acciones. Rápidamente da a tus usuarios la información que están buscando usando diferentes pesos para diferentes secciones. Piensa en los titulares y el cuerpo del texto: el peso de estos dos elementos debe reflejar su nivel de importancia.

El objetivo principal de la aplicación Watering Tracker es decir a los usuarios cuándo es el momento de regar sus plantas. La información más vital tiene el mayor peso visual.

(Imagen cortesía de Tubik)

¿Qué llama tu atención? Aunque la aplicación da a los usuarios un montón de otra información sobre la salud de la planta, el usuario puede ver rápidamente que necesita ser regada mañana.

5. La consistencia es clave

El diseño de tu aplicación debe ser consistente en toda la propiedad, visual y funcionalmente. Debe verse y actuar de la misma manera en cada página. Ten en cuenta que el diseño de tu aplicación para Android e iOS será diferente y eso está bien. Solo sé consistente en cada plataforma y mantén el aspecto y la sensación central del diseño. Además, es probable que tu desarrollador de aplicaciones también use al menos un kit de desarrollo de software (SDK), como el inicio de sesión de perfil de Facebook, así que intenta diseñar tu aplicación teniendo esto en mente también.

El diseño de tu aplicación también debe trasladarse a tu sitio web y a todos los demás materiales de marca. La consistencia externa ayudará a construir credibilidad y evitar confusiones con tus usuarios. 

La marca de Uber es fácil de detectar desde lejos. Desde la aplicación móvil centrada en el pasajero hasta el sitio web centrado en el conductor, Uber es consistente con colores, fuentes y el aspecto moderno en general.

(Imagen cortesía de Uber)

¿Te resulta familiar este formulario? Eso es porque es muy similar a los campos que llenarías si estuvieras solicitando un viaje dentro de la aplicación.

Relacionado: Las habilidades de diseño de aplicaciones son cruciales si estás considerando seguir una carrera de ingeniería de software a tiempo completo. Aprende qué más se necesita para ser un desarrollador de aplicaciones de los expertos.

Incorporando el diseño de aplicaciones en el marketing

En G2 estamos comprometidos con obtener opiniones de expertos, por lo que pedimos a cinco expertos en diseño que opinen sobre cómo incorporan el diseño de UI de una aplicación en una estrategia de marketing, e incluso más allá.

1. Cuando tengas dudas, captura la pantalla

“Cuando haces marketing para una aplicación, estás dando al usuario una muestra de la UX/UI y quieres imitar eso muy claramente en tu anuncio. Encuentro que los anuncios con capturas de pantalla y fondos muy limpios (para no distraer de la oferta única de características de la aplicación) tienen más éxito.

Mantén el texto ligero y directo al grano. Si puedes crear un gif pulido o un pequeño video que pueda hacer una demostración rápida de las mejores características de la aplicación, eso es aún mejor. Tienes alrededor de 3-5 segundos para enganchar a tu audiencia antes del desplazamiento - ¡no pases por alto el diseño de tu anuncio, no importa cuán pequeño sea! Prueba toneladas de imágenes de anuncios - diferentes colores, diferentes tamaños de fuentes, diferentes capturas de pantalla, diferentes tamaños de activos.”

– Ciara Hautau, Estratega Principal de Marketing Digital en Fueled

2. Crea un frente unido (final)

“Una forma de asegurarte de que el aspecto y la sensación de la UI de tu aplicación se exprese en tus materiales de marketing, es tomar ciertos elementos del diseño de la aplicación y usarlos como piezas de acento. Por ejemplo, si tu aplicación tiene secciones con ilustraciones, transfiérelas a tu propuesta, con el mismo estilo exacto.

Otro consejo es prestar atención al estilo de los botones y cuadros en la aplicación. Si tu aplicación usa rectángulos como botones, sin esquinas redondeadas; tu material de marketing debe seguir este estilo, y nunca usar bordes redondeados en nada. Esto también se aplica a las sombras, tamaños de fuente, transparencia, etc.”

– Jenna Erickson, Gerente de Marketing en Codal

3. Sé consistente con el color

“Piensa en una marca consistente. Recomiendo usar una paleta de colores muy limitada cuando estés diseñando la UI para una aplicación. Si llevas esto a través de todo tu marketing es muy fácil lograr consistencia y, más importante, reconocimiento para la marca.

Actualmente estoy creando una UI para una aplicación. He tomado el color rojo original de la marca y lo he usado como un fondo de lavado de color para todos los materiales de marketing. El resultado final es una marca audaz, muy reconocible que la gente recuerda.”

– Jean H. Paldan, Fundador y CEO de Rare Form New Media

4. Habla el mismo idioma

“Incorporamos directamente elementos de nuestra UI en nuestras campañas de marketing para dar a nuestra audiencia una mejor comprensión de cómo funciona nuestra aplicación y qué beneficios podrían obtener del producto. Nuestra aplicación es una plataforma de búsqueda por palabras clave para encontrar personas con intereses similares cerca a través de intereses comunes. Estamos usando las etiquetas de palabras clave, exactamente como se ven en la aplicación, en nuestras campañas en Instagram y Facebook para presentar los diferentes intereses a través de los cuales podrías conectarte. Esto da a nuestra audiencia una muestra de nuestro producto antes de descargarlo.

Aísla los elementos clave de tu producto. ¿Qué lo hace único? ¿Qué lo hace atractivo? Luego intenta, de una manera no demasiado obvia, incluir este elemento en todo. Es importante pensar en algo que sea atractivo y posiblemente incluso participativo, como una campaña de hashtag.”

– Melanie Aronson, Fundadora de Panion

5. Transmite tu punto

“A lo largo de todo nuestro material de marketing–nuestras páginas web, en nuestros folletos, dentro de nuestros correos electrónicos, a lo largo de nuestros videos, etc.–nos aseguramos de resaltar visualmente nuestra elegante UX/UI y realmente demostrar la facilidad de uso y accesibilidad que nuestra interfaz de aplicación de un solo clic proporciona.

Es importante involucrar a la audiencia describiendo cómo el diseño de la aplicación mejora la experiencia del usuario. Tienes que encontrar una manera de transmitir cómo la UI beneficia a tus clientes y cómo atrae a posibles clientes potenciales. Tu mensaje debe centrarse en cómo la interfaz de usuario crea una experiencia aún más simple, fluida y fácilmente accesible para todos los usuarios.”

– Sagi Gidali, Co-Fundador y CPO de Perimeter 81

Un momento de hacerlo funcionar

OK, sabemos que el diseño de aplicaciones definitivamente afecta el presupuesto general de desarrollo. Pero hay más. Descubre cómo hacer el mejor uso de tu prototipo de aplicación y responde a la pregunta: ¿cuánto cuesta hacer una aplicación?