Lo que la mayoría no sabe sobre el diseño de aplicaciones móviles

Sobre el tema:

Contenido

Hay muchas cosas a tener en cuenta en el diseño de aplicaciones móviles. Estoy seguro de que estos consejos le ayudarán a deshacerse un poco de ese dolor de cabeza al crear aplicaciones.

Más que nunca, la gente está interactuando con sus teléfonos en momentos cruciales. El usuario promedio de EEUU pasa 5 horas al día en dispositivos móviles. La gran mayoría de ese tiempo se pasa en aplicaciones y en sitios web.

La diferencia entre una buena aplicación y una mala aplicación suele ser la calidad de su experiencia de usuario (UX). Una buena experiencia de usuario es lo que separa las aplicaciones exitosas de las que no han tenido éxito.

Hoy en día, los usuarios móviles esperan mucho de una aplicación: tiempo de carga rápido, facilidad de uso y buena experiencia durante la interacción. Si desea que la aplicación tenga éxito, debe considerar la experiencia de usuario no solo como un aspecto menor del diseño, sino un componente esencial de la estrategia del producto.

Hay muchas cosas a tener en cuenta al diseñar para dispositivos móviles. En este artículo, he resumido una gran cantidad de recomendaciones prácticas que puedes aplicar a tus diseños.

La coherencia y consistencia en el diseño de tus aplicaciones móviles

Las interfaces de usuario que no son consistentes o coherentes a menudo producen usuarios confusos y frustrados, y esto puede conducir incluso a los productos más prometedores al fracaso.

Pero, ¿qué es exactamente la consistencia en el diseño de la interfaz de usuario? La consistencia en el diseño de aplicaciones móviles se refiere a asegurarse de que los elementos de una interfaz de usuario sean uniformes. Se verán y se comportarán de la misma manera en toda la aplicación. Esto ayuda a probar constantemente las suposiciones de un usuario sobre el manejo de la interfaz de usuario, creando una sensación de control, familiaridad y confiabilidad.

Para desarrollar la consistencia en el diseño de la interfaz de usuario, debe tener como objetivo ser coherente con las directrices y comportamientos de la interfaz de usuario del dispositivo, otras aplicaciones o sitios similares y con su propio diseño.

Diseño de aplicaciones móviles como un PRO

Haz que el diseño sea coherente

La consistencia es un principio fundamental del diseño. La consistencia elimina la confusión. Mantener una apariencia coherente general en toda una aplicación es esencial. En cuanto a la aplicación móvil, la coherencia significa lo siguiente:

  • Coherencia visual. Los tipos de letra, los botones y las etiquetas deben ser coherentes en toda la aplicación.
  • Coherencia funcional. Los elementos interactivos deben funcionar de forma similar en todas las partes de la aplicación.
  • Coherencia externa. El diseño debe ser coherente en varios productos. De esta manera, el usuario puede aplicar conocimientos previos al utilizar otro producto.

Estas son algunas recomendaciones prácticas sobre cómo hacer que un diseño sea coherente:

De un vistazo rápido a esta app, las pantallas de ambos dispositivos tienen el mismo aspecto. Pero si miras detenidamente, notarás algunos cambios sutiles, como la colocación de elementos de navegación dentro del encabezado los cuales derivan de las directrices de ambas plataformas.
  • Respete las directrices de la plataforma.

    Diferentes plataformas tienen diferentes pautas de interfaz de usuario y usabilidad que debe observar al diseñar. Si está diseñando la interfaz de usuario de una aplicación iOS, por ejemplo, debe familiarizarse con las directrices de interfaz humana de iOS y esforzarse por adherirse a ellas. Si está diseñando para Android, debe echar un vistazo a Material Design.

    Al diseñar para plataformas nativas, siga las directrices de diseño del sistema operativo para obtener la máxima calidad. La razón por la que seguir las pautas de diseño es importante es simple: los usuarios se familiarizan con los patrones de interacción de cada sistema operativo, y cualquier cosa que contradiga las directrices creará fricción.
  • No imite los elementos de la interfaz de usuario de otras plataformas.

    A medida que creas la aplicación para Android o iOS, trata de no transferir elementos de interfaz de usuario de otras plataformas. Los iconos, elementos funcionales (campos de entrada, casillas de verificación, interruptores) y tipos de letra deben tener una sensación nativa. Usa componentes nativos tanto como sea posible, para que las personas confíen en tu aplicación.
  • Mantenga la aplicación móvil coherente con el sitio web.

    Este es un ejemplo de coherencia externa. Si tiene un servicio web y una aplicación móvil, asegúrese de que ambos comparten características similares. Esto permitirá a los usuarios realizar transiciones sin fricción entre la aplicación móvil y la web móvil. La incoherencia en el diseño (por ejemplo, un esquema de navegación diferente o un esquema de color diferente) puede causar confusión.

Usa pantallas familiares

Las pantallas conocidas son pantallas que los usuarios ven en muchas aplicaciones. Pantallas como «Introducción o Inducción«, «Qué hay de nuevo» y «Resultados de búsqueda» se han convertido en estándares de facto para las aplicaciones móviles. No requieren una explicación adicional porque los usuarios ya están familiarizados con ellos. Esto permite a los usuarios utilizar la experiencia previa para interactuar con la aplicación, sin curva de aprendizaje.

Tu propio diseño

La ubicación, el estilo, las opciones de tipo y el diseño son solo unos pocos elementos que deben permanecer coherentes en toda la interfaz de usuario. Mover, cambiar o desaparecer elementos no solo confundirá a tus usuarios, sino que incluso los motivará a desinstalar tu aplicación.

Si quieres darle un poco de sabor a las cosas para evitar un diseño aburrido, hazlo estratégicamente. Utiliza las incoherencias moderadamente para mejorar tu UI o aumentar la UX.

Poner al Usuario en Control

Mantenga los elementos interactivos, familiares y predecibles

Ser predecible es un principio fundamental del diseño de experiencia de usuario. Cuando las cosas funcionan de la manera que los usuarios predicen, sienten una sensación de control más fuerte. A diferencia del escritorio, donde los usuarios pueden usar efectos de desplazamiento para comprender si algo es interactivo o no, en dispositivos móviles, los usuarios solo pueden comprobar la interactividad tocando un elemento.

Es por eso que, con botones y otros elementos interactivos, es esencial pensar en cómo el diseño comunica la accesibilidad. 🚀

Haz que las animaciones sean opcionales

Los usuarios que sufren de mareo por movimiento a menudo desactivan los efectos animados en su configuración del sistema operativo. Cuando la opción para reducir el movimiento está habilitada en las preferencias de accesibilidad, la aplicación debe minimizar o eliminar sus propias animaciones.

Ten cuidado con el uso de gestos en la UI

El uso de gestos en el diseño de interacción puede ser tentador. Pero en la mayoría de los casos, es mejor evitar esta tentación. Cuando los gestos se utilizan como una opción de navegación principal, pueden causar una experiencia de usuario terrible. ¿por qué? Porque los gestos son controles ocultos.

La mayor desventaja de usar gestos en una interfaz de usuario es la curva de aprendizaje. Cada vez que se reemplaza un control visible con un gesto, la curva de aprendizaje de la aplicación aumenta. Esto sucede porque los gestos tienen menor capacidad de detección: siempre están ocultos y las personas necesitan ser capaces de identificar estas opciones para poder usarlas. Es por eso que es esencial usar solo gestos ampliamente aceptados (los que los usuarios esperan en la aplicación).

Señala Thomas Joos en su artículo «Más allá del botón: abrazar la interfaz basada en gestos«

Cuando se trata de usar gestos en una interfaz de usuario, siga algunas reglas simples:

  • Utilice gestos estándar.

    Por «estándar», me refiero a los gestos que son más naturales para la aplicación en su categoría. La gente está familiarizada con los gestos estándar, por lo que no se requiere ningún esfuerzo adicional para descubrirlos o recordarlos.
  • Ofrezca gestos como un suplemento a, no un reemplazo de, opciones de navegación visibles.

    Los gestos pueden funcionar como accesos directos para la navegación, pero no como un reemplazo completo de los menús visibles. Por lo tanto, siempre ofrecen una manera simple y visible de navegar, incluso si significa algunas acciones adicionales.

Estética local

El diseño de aplicaciones móviles minimalista, que es popular en el mundo occidental hoy en día, podría considerarse demasiado desnudo para otras culturas. Si quieres que tu producto tenga éxito en los mercados emergentes, presta atención a la estética cultural. Diseñar de acuerdo con la estética local hará que su producto se sienta más familiarizado.

Específicos de la región

Cuando Google adaptó Google Maps para India, consideró que la India es el mercado de dos ruedas más grande del mundo, y los millones de motociclistas tienen necesidades diferentes que los conductores de automóviles. Se lanzó el modo de dos ruedas en Maps. Este modo muestra las rutas de viaje que utilizan accesos directos, no accesibles para coches y camiones.

Otras aplicaciones similares y prácticas en general

No es ningún secreto que tus usuarios pasarán tiempo en otras aplicaciones, algunas que son bastante similares a la suya. Como resultado, estarán familiarizados y cómodos con patrones populares, reglas e interacciones utilizadas en ese tipo de aplicaciones. Tener esto en cuenta y modelar su diseño con ellos en mente es una gran manera de aumentar la usabilidad. Cuando un usuario busca una app es muy probable que haya acumulado experiencias anteriores, y si tomas ventajas de esto, no tendrá que preocuparte de que se confunda por una interfaz de usuario nueva o desconocida.

Esto no significa robar el diseño de otra persona. No deseas copiar otra aplicación. La idea es familiarizar tus usuarios con patrones de interfaz de usuario que se están utilizando para mejorar tu propio diseño.

Trabajando con patrones conocidos en múltiples plataformas

En este punto todos deberían conocer las pautas de Google Material Design y Apples Human Interface. Si todavía no has trabajado con guías, te recomiendo que lo hagas.

Trabajar con cualquiera de estas guías mencionadas tiene muchos beneficios para la plataforma de destino, como los siguientes:

  • Diseños y experiencias mas intuitivos para los usuarios.
  • Una guía bien definida que se mantiene actualizada constantemente.
  • Usan las mejores practicas para el diseño, usabilidad y experiencia de usuario.
  • Etc…
Aquí puedes ver varios ejemplos de adaptaciones a la plataforma objetivo, por ejemplo: la barra de navegación, la posición del titulo, los iconos, y el botón de ir hacia atrás.

Tanto si tu, o tu equipo, utilizan patrones como Material Design, por ejemplo, lo mas recomendable es adaptar tus diseños a cada plataforma, ya que las convenciones de diseño difieren entre las mismas. Estas diferencias en las convenciones pueden afectar a la capacidad del usuario para comprender la interfaz de usuario o completar ciertas tareas.

En tales casos, se recomienda adaptarse a convenciones específicas de la plataforma. En áreas donde las diferencias de diseño son mínimamente disruptivas, la adaptación a la plataforma es opcional.

Se fiel a la marca

Utilizar un patrón no significa usar un estilo específico. Hay muchos buenos ejemplos de productos que han adoptado un patrón manteniendo su identidad de marca.

Los patrones de diseño fueron desarrollados para un punto de partida para que los diseñadores y desarrolladores puedan mejorar su identidad. Cada caso y cada marca es diferente, por lo que los patrones de interfaces de usuarios ofrecen una gama de componentes que se pueden adoptar o no.

Beneficios de la consistencia en el diseño de aplicaciones móviles

Entonces, ¿Si pretendes ser coherente con las directrices y comportamientos de la interfaz de usuario de los dispositivos, otras aplicaciones, tu propio diseño para tu aplicación y los usuarios?

Como todos sabemos, Material Design (izquierda) tiene algunas opciones diferentes cuando se trata de navegación. Lo más probable es que se haya encontrado con el menú de hamburguesas que revela el navigation drawer. En Apples Human Interface Guidelines la famosa configuración de navegación inferior llamada The tab bar es muy popular.

Algunos beneficios clave son:

Minimiza la carga cognitiva

Una de las ventajas de la consistencia en los diseños es disminución de la carga cognitiva, que aquí se refiere a la cantidad de energía cerebral necesaria para utilizar la aplicación. El cerebro humano tiene una cantidad limitada de poder de procesamiento, y cuando una aplicación proporciona demasiada información a la vez, podría abrumar al usuario y hacer que abandonen la tarea.

Mayor usabilidad

La coherencia facilita a los usuarios navegar y usar la aplicación porque no tienen que aprender nuevas formas para moverse. Saben qué esperar porque lo han aprendido anteriormente dentro de la aplicación o en otro lugar. Naturalmente, esto ayudará a que los usuarios se sientan cómodos, felices y los motivará a seguir comprometidos con su aplicación.

Elimina la confusión

Las interfaces de usuario coherentes facilitan la comunicación. Utilice la coherencia visual para priorizar el contenido, hacerlo navegable o resaltar partes importantes del del misma. Mediante el uso de la coherencia puede crear una estructura lógica y definir claramente dónde los usuarios pueden encontrar lo que buscan, así te ahorrarás usuarios confundidos y frustrados.

Evocar una respuesta emocional

Hemos mencionado que la coherencia en el diseño de aplicaciones móviles puede facilitar a los usuarios navegar y usar tu aplicación. Esto ayudará a tus usuarios a sentirse seguros en su capacidad para manejar lo que está bajo sus pulgares y evocará una respuesta emocional positiva resultante de una experiencia agradable.


Espero que con estos consejos puedas crear mejores diseños para tus aplicaciones móviles, si tienes algún consejo o comentario que aportar lo podéis dejar en comentarios 😉

Para obtener contenido pequeños tips como estos, sígueme en Instagram y LinkedIn! ¡Gracias por leer!

¿Qué opinas de este contenido?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Suscribirte
Notificar de
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Buscar en el sitio