Índice de contenidos
Diseño de aplicaciones móviles
Principios de una buena interfaz de usuario para aplicaciones móviles
Consistencia
Un componente clave de una buena interfaz de usuario móvil es la coherencia. Diseñar una experiencia intuitiva es fundamental para crear una aplicación atractiva.
Familiaridad
Mantener la coherencia de una aplicación requiere el equilibrio adecuado de pantallas familiares y el uso de experiencias conocidas para reducir la curva de aprendizaje necesaria para utilizar su aplicación.
Por ejemplo, un newsfeed es una pantalla que puede ser extremadamente compleja. Sin embargo, muchos usuarios están familiarizados con un newsfeed. Están acostumbrados a utilizar este tipo de pantalla en el escritorio y en el móvil. Esto significa que los usuarios están probablemente preparados para utilizar un newsfeed a una capacidad razonablemente alta, incluso sin haber estado expuestos a él antes.
As an app designer, it’s important to embrace these familiar screens and create a design which is familiar to your users. Leveraging services like instinctools for web application development ensures intuitive user experiences through consistent and familiar design elements.
Puede ver más ejemplos de este concepto en acción dirigiéndose a la sección de pantallas de este artículo.
Diseño intuitivo
El diseño intuitivo es similar a la familiaridad. Mientras que la familiaridad se centra en el uso de las tendencias de diseño establecidas para impulsar la participación en la aplicación, la intuición es ligeramente diferente.
Cuando un usuario interactúa con su aplicación móvil, no debería tener que pensar en el proceso.
La experiencia del usuario debe ser intuitiva: debe permitirle alcanzar el objetivo deseado sin dedicar demasiado tiempo al proceso.
Para conseguirlo, los diseñadores deben tener la mentalidad adecuada y entender cómo van a interactuar los usuarios con su aplicación. Esto implica definir el flujo del usuario y centrarse en minimizar el tiempo que tardará en entender y completar los pasos entre estos.
Conseguir un diseño intuitivo adecuado es una parte crucial del proceso de diseño de la interfaz de usuario móvil. Sin él, las tasas de abandono serán más altas, el compromiso se verá sofocado y la tasa de abandono aumentará.
Minimalismo y sencillez
Minimalismo funcional
Diseñar una experiencia móvil significa entender el concepto de minimalismo y aplicarlo a la experiencia de tu aplicación. La simplicidad es fundamental en los dispositivos móviles. El margen de error es pequeño, así que es mejor no abrumar a los usuarios.
El desorden es un gran ejemplo de minimalismo en acción. Como regla general, si la información no es necesaria, no la incluyas. Esta regla no solo se aplica al contenido, sino también a los menús y otras secciones funcionales de la aplicación.
Sobrecargar al usuario con demasiadas cosas a la vez es otro punto negativo. Una excelente solución para esto son los elementos plegables o la divulgación progresiva. Puede parecer complicado, pero es un concepto sencillo que permite al usuario controlar la cantidad de información en la pantalla.
Hacia una navegación sencilla
El minimalismo debe aplicarse tanto a la navegación del usuario como al contenido y los elementos. Estás ayudando a tus usuarios a navegar por tu aplicación de forma sencilla y eficiente en el tiempo.
Perderá usuarios si la navegación de su aplicación es demasiado complicada, lleva demasiado tiempo o no es coherente con otros elementos.
To counter this, there are a few tips to follow when thinking about navigation:
- Mantenga la navegación visible en todo momento.
- Usar componentes estándar en la navegación - esto significa en Android usar el cajón de navegación o utilizar la barra de pestañas para iOS.
- Mantenga la coherencia: no mezcle diferentes patrones y mantenga un único patrón de navegación en toda la aplicación.
- Permitir que el usuario comprenda dónde se encuentra. Conseguirlo significa tener visible en todo momento el lugar actual en la navegación.
Minimizar la entrada de usuarios
Escribir en una pantalla de móvil nunca va a ser tan cómodo como usar un teclado más grande. Muchos problemas con la entrada del usuario ocurren cuando el usuario está usando un formulario. Estos son comunes en las aplicaciones móviles y a menudo no se pueden evitar.
Un error común es tomar un formulario que fue diseñado para aparecer en un ordenador de sobremesa o portátil y reutilizarlo para móviles. Esta solución rápida no es una buena práctica, y en el mundo del mobile-first en el que nos encontramos, es vital pensar en el mobile-first a la hora de diseñarlos.
Algunos principios fundamentales a los que atenerse cuando se requiere la entrada del usuario:
- Menos es más: los campos que no son 100% necesarios pueden eliminarse. Son bloqueadores y deben dejarse fuera.
- El autocompletado es el mejor amigo de los diseñadores cuando se trata de la entrada de datos del usuario.
- La validación dinámica es fundamental para los móviles. No hay nada más frustrante que esperar a que una página se actualice para que se le diga que un campo es incorrecto. Tal vez un usuario no se moleste en pasar por el proceso una segunda vez.
Control (poner al usuario en control)
Para crear una gran UX móvil, el usuario debe sentir que controla su experiencia con la aplicación. Para lograrlo, la aplicación debe ofrecer un elemento de control al usuario, a través de un diseño coherente y predecible.
Mantener la coherencia y la previsibilidad de los elementos
Si un usuario predice cómo usar una aplicación y esto resulta ser cierto, entonces esto da la sensación de que el usuario tiene el control. Crear esta experiencia es una parte fundamental del servicio de diseño de UI y UX para móviles.
En los móviles, los usuarios no pueden permitirse el lujo de pasar el ratón por encima de los elementos para ver el tipo de interactividad que ofrece cada uno de ellos. Eso significa que nuestro trabajo consiste en crear componentes que sean coherentes y ayuden al usuario a entender lo que quiere hacer rápidamente.
El aspecto de un elemento debe informar al usuario de lo que ocurrirá cuando lo utilice, toque, deslice o interactúe con él. No cruce los diseños con la interacción. No hacerlo llevará a la confusión y molestará rápidamente a tus usuarios.
Todos cometemos errores, y los abordamos.
Sería inútil sugerir que las aplicaciones deben evitar los errores. Eliminar todos los errores es imposible. Los errores existen y mitigarlos es una parte crucial del diseño móvil.
A veces los errores se producen por un fallo de la propia aplicación. Otras veces puede ser el usuario. Sea lo que sea, la experiencia se estropea si no se gestionan de forma correcta.
Lo mejor es indicar explícitamente qué es lo que ha fallado e indicar qué puede hacer el usuario para evitar que el error vuelva a producirse.
¿De vuelta a dónde exactamente?
Un error común a medida que las aplicaciones crecen y el número de pantallas y flujos aumenta tiene que ver con el botón de retroceso. Un botón de retroceso mal diseñado puede obstaculizar gravemente el flujo de una aplicación.
Una experiencia mal diseñada implica llevar al usuario de vuelta a una pantalla de inicio. Intenta asegurarte de que este proceso lleva a los usuarios hacia atrás de forma incremental.
Esta regla garantiza que los usuarios puedan navegar hacia atrás para comprobar la información introducida o verificar otros contenidos sin tener que volver a navegar por todo el flujo.
Texto, imágenes, vídeo y otros consejos técnicos de diseño para móviles
Diseño del texto
El texto es la principal forma de comunicar información a los usuarios. Por lo tanto, es crucial que lo hagas bien. La tipografía de tu aplicación debe ser fácil de leer y legible.
Las siguientes directrices son un buen comienzo a la hora de considerar un tipo de letra para su aplicación móvil:
- Font family – remember when we talked about familiarity? This concept also applies when choosing your font family. Google uses Roboto and iOS uses San Fransisco. You’d do well to continue this into your app. However, while these fonts are functional, you should also consider incorporating some aesthetically pleasing and stylish fonts that can give your app a modern and unique flair.
- Tamaño de la fuente - Yo recomendaría 16px. Este tamaño puede cambiar ligeramente dependiendo de su tipo de letra.
- Contraste - Es importante que el contraste entre el tipo de letra de tu aplicación y la página sea lo suficientemente grande como para que tu contenido sea legible. A algunos les gusta la idea de un tipo de letra más claro sobre un fondo gris, pero son difíciles de leer. Además, como muchos dispositivos se utilizan en el exterior, el resplandor de la pantalla puede dificultar o imposibilitar la lectura de contenidos con poco contraste.
En casos individuales, lo siguiente le ayudará a mantener su texto legible:
- Limitar la longitud de las líneas: esto permite al usuario el lujo de no tener que pellizcar el zoom mientras lee.
- Mayúsculas: en la mayoría de los casos es mejor evitarlas.
- El espacio entre líneas: si se hace bien, se mejora la experiencia de lectura. Si es demasiado pequeño, parecerá que está aplastado; si es demasiado grande, parecerá que está expandido.
Nota al margen - Sea un rompejergas
La eliminación de la jerga es más bien una elección de diseño, pero supongo que es relevante aquí. No cree términos inteligentes para las expresiones regulares. Tus usuarios se confundirán. Limítate a "home", "buy" o "profile" en lugar de utilizar palabras nuevas que tus usuarios tendrán que aprender para usar tu aplicación.
Imágenes
Las pantallas de los móviles son ahora unas de las más avanzadas y ofrecen pantallas de alta calidad y resolución.
Para hacer justicia a estas pantallas, las imágenes deben conservar la relación de aspecto. Las imágenes estiradas son un verdadero inconveniente.
La mejor solución es tener una solución adaptativa. Este proceso detectará el tamaño de la pantalla y ajustará la resolución de las imágenes de tu aplicación en consecuencia.
Con los nuevos dispositivos que adoptan nuevas formas y el potencial de los dispositivos plegables y otras innovaciones extrañas y maravillosas, será más importante contar con una solución adaptable.
El iPhone X es probablemente el mejor ejemplo de ello. El dispositivo utiliza una resolución diferente a la de la mayoría de los demás dispositivos y parte de ella está oculta detrás de un bisel, lo que la convierte en un espacio técnicamente muerto.
Vídeo
El vídeo se está convirtiendo rápidamente en uno de los medios más importantes, especialmente en los móviles. Es fundamental que lo hagas bien en tu aplicación.
Las investigaciones demuestran que a muchos usuarios les gusta ver los vídeos en modo vertical. Esta preferencia significa que tendrás que pensar en cómo aparecen tus vídeos tanto en modo horizontal como vertical.
Facebook live y youtube son probablemente los mejores ejemplos de esto.
Otros consejos de diseño ydesarrollo de aplicaciones móviles
Zona del pulgar
Este concepto ayuda a los diseñadores a pensar en el uso práctico de los dispositivos. Pensar en esto nos permite entender cómo se sostiene el dispositivo y cómo esto afecta a nuestro diseño.
Muchos usuarios sostienen su dispositivo con una sola mano. A veces es en la izquierda, a veces en la derecha. Esta elección significa que sólo una parte de la pantalla es fácil de alcanzar con el pulgar cuando el dispositivo se sostiene en una mano.
Esta zona se denomina zona del pulgar. Cambia entre dispositivos, en función del tamaño de la pantalla.
Basándose en la imagen de abajo, intente seguir las siguientes pautas.
- El área verde es donde deben estar la navegación y otras acciones de uso frecuente.
- El área reg es donde deben estar las opciones que podrían causar daños a la experiencia del usuario si se presionan incorrectamente.
Capacidad de respuesta y rapidez
Con cada avance de la tecnología, nos volvemos más impacientes. Por ello, el tiempo de carga es importante para la experiencia del usuario.
Cuanto más tarda tu aplicación en cargar una página, más probable es que pierdas usuarios. Ahora bien, a veces esto es inevitable. Por suerte, algunos trucos te permitirán crear la ilusión de que tu aplicación se carga rápidamente.
Tenga en cuenta los siguientes consejos si no puede reducir más el tiempo de carga:
- Demuestre claramente cuándo se está cargando algo: las pantallas en blanco harán que el usuario piense que la aplicación está rota. Lo mínimo que puedes hacer es incluir una animación giratoria o algo similar. Si algo tarda habitualmente más de 5 segundos en cargarse, opta por una barra de progreso.
- Dar prioridad a la zona visible del dispositivo: centrarse en cargar el contenido inicial que aparece en la vista al entrar en una página. El resto puede cargarse al desplazarse o en segundo plano. Este truco crea la ilusión de que toda la página se ha cargado rápidamente.
- Existen otros métodos para ayudar a crear la ilusión de una carga rápida: un ejemplo es proporcionar una animación que también actúe como distracción.
- Los usuarios entienden que las pantallas esqueleto se cargan más rápido que una pantalla en blanco. Implementarlas en el diseño de tu app ayudará a mejorar la experiencia del usuario.
Personalización
Existen innumerables formas de personalizar la experiencia de tu aplicación y de aumentar la participación en la misma. Es una forma fantástica de conectar con tus usuarios.
Empuje
Intenta que tu comunicación a través de las notificaciones push sea personal. Para crear una gran UX y una gran copia de UX hay algunos métodos diferentes que puedes emplear para asegurar que la estrategia de notificaciones push de tu aplicación se mantenga personal.
Ubicación
Utilizar la ubicación de forma inteligente es otra forma de proporcionar una experiencia valiosa a los usuarios. Se pueden añadir experiencias contextuales si se conoce la ubicación del dispositivo. Añadir soporte de localización a su aplicación puede impulsar la personalización de todo, desde las notificaciones push hasta el contenido de la aplicación. Todo ello contribuye a mejorar la experiencia de la aplicación.
Accesibilidad
Diseñar para todos
Un diseño bien pensado debe permitir que usuarios de todo tipo utilicen tu aplicación. Ten en cuenta cómo los problemas de audición, visión y otras discapacidades pueden afectar a la usabilidad de tu aplicación móvil.
Los siguientes son aspectos que debes tener en cuenta a la hora de diseñar tu aplicación:
- Ceguera al color: alrededor del 5% de la población mundial es daltónica en alguna medida. La forma más común es la incapacidad de distinguir entre el rojo y el verde. Desgraciadamente, estos son los colores más comunes para los mensajes de error y éxito. Añadir un icono independiente que lo indique evitará el problema.
Ejemplos de pantallas y aplicaciones
En esta sección, examinaremos pantallas específicas. Basándonos en todo lo que hemos aprendido en las secciones anteriores, nos centraremos en ejemplos en los que los diseñadores han hecho un gran trabajo en estas pantallas concretas.
Pantalla de bienvenida
¿Recuerdas lo que te dijo tu madre sobre las primeras impresiones? Pues, por desgracia, tenía razón. Al menos en términos de UX móvil.
Crear una impresión positiva en el primer uso de su aplicación es increíblemente importante. La tasa de abandono es más alta en los primeros días después de la descarga, lo que sugiere que las primeras impresiones son cruciales para impulsar la retención.
La pantalla de inicio es la primera que ve el usuario al abrir una aplicación. Son minimalistas y suelen consistir en un nombre o un logotipo de la marca. Pueden ayudar a los tiempos de carga de la pantalla de inicio.
Intenta que estas pantallas duren menos de 5 segundos. Una buena idea es mantener todo centrado para que se vea bien en todas las pantallas.
Incorporación
La incorporación es una pantalla (o conjunto de pantallas) importante para sus usuarios. Cuando un usuario abre una aplicación por primera vez, normalmente se le presenta un recorrido de incorporación. En esta pantalla se enseña al usuario a utilizar la aplicación y a sacar el máximo partido de sus funciones.
El objetivo es demostrar que la aplicación es útil para el usuario. Es fundamental que el proceso de incorporación sea sencillo, eficaz y no demasiado largo o corto. He aquí algunos consejos:
- Las ilustraciones personalizadas son una buena idea. Ayudan a explicar características específicas y a que los usuarios las recuerden.
- Muchas aplicaciones utilizan una mascota para guiar al usuario en el proceso de incorporación. Recuerdas el búho de duo-lingo antes de que empiece a enviarte molestas notificaciones?
- El texto lo es todo. Un texto claro y conciso es lo más importante que hay que hacer en un proceso de incorporación. Debe ser útil, breve y fácil de leer.
Inicio de sesión y perfil
Para crear aplicaciones muy personalizadas es necesario que los usuarios se hagan una cuenta. La respuesta de la mayoría de los usuarios al ver una pantalla de registro no es positiva, así que es importante hacerlo bien.
- Mantener el número de campos cortos
- Ofrecer inicios de sesión sencillos con un solo clic (como el inicio de sesión de Google y Facebook)
- Recuerde que en las páginas de inicio de sesión debe incluirse una opción para inscribirse
En el centro de la aplicación altamente personalizada está la pantalla de perfil. Esta pantalla permite al usuario interactuar con su aplicación de forma personalizada. El perfil debe ser claro. Debe perfilar información personalizada relacionada con la aplicación. Sin embargo, es importante no incluir demasiada información.
Es importante trabajar en el sistema de navegación. Asegúrese de que la página de perfil forma parte de cualquier menú con pestañas. Investigar a tus usuarios y las funciones más comunes puede ayudarte a entender cuál es la mejor información a priorizar en una vista de perfil.
Pantallas de inicio (menús)
La pantalla de inicio es potencialmente una de las pantallas más importantes de tu aplicación. Es la pantalla por la que navegan tus usuarios. Es el lugar al que acudirán para realizar tareas críticas al instante e interactuar con las partes esenciales de la aplicación.
Por ello, la pantalla de inicio tendrá un aspecto totalmente diferente entre aplicaciones. Sin embargo, algunos elementos clave siguen siendo los mismos.
- Muchas pantallas de inicio contienen una barra de búsqueda o una función de búsqueda para permitir a los usuarios obtener inmediatamente el contenido o la página adecuados. Esta función de búsqueda debe colocarse de forma clara y centralizada.
- La pantalla de inicio debe contener elementos de navegación claros que permitan al usuario acceder rápidamente a las páginas más importantes de su aplicación. Deben ser sencillos y fáciles de entender. Los usuarios no quieren perder tiempo averiguando qué significa cada término.
- Muchas pantallas de inicio muestran estas selecciones en el propio contenido. A veces esto se hace en forma de tarjetas. Si se hace así, es importante incluir sólo las opciones más importantes. Demasiadas pueden confundir al usuario.
Permisos
Los permisos son importantes para muchas aplicaciones. Sin embargo, los diseñadores deben encontrar el equilibrio adecuado entre pedir permisos y afectar negativamente a la experiencia del usuario.
Todos hemos abierto una nueva aplicación y hemos sido bombardeados con solicitudes de permiso. Esta es una forma rápida de aumentar la rotación de usuarios y obstaculizar la UX.
Hay algunos conjuntos de herramientas para ayudar con esto que permiten recoger múltiples preferencias. También permitirán al desarrollador predeterminar las situaciones en las que es aceptable pedir permisos al usuario.
Comercio electrónico
La función principal de una aplicación de comercio electrónico es incitar a los usuarios a comprar un producto y cerrar la compra. Hay algunas pantallas que son exclusivas de este tipo de aplicaciones, y hay algunos consejos críticos de interfaz de usuario que hay que tener en cuenta al diseñarlas.
Pantalla del catálogo
El catálogo es el hogar de la aplicación de comercio electrónico. Puede tener un aspecto ligeramente diferente de una aplicación a otra.
Por lo general, en estas pantallas los productos están dispuestos en columnas (a veces en columnas simples), y el usuario se desplazará por ellas. La tarea del diseñador consiste en crear una vista que dé prioridad a determinados artículos y proporcione una forma rápida y sencilla de que los usuarios naveguen por varios productos.
Las páginas de catálogo más avanzadas muestran los artículos en horizontal y el usuario hace un gesto de deslizamiento hacia la izquierda o la derecha. Este diseño funciona mejor cuando hay menos artículos, ya que el usuario sólo puede navegar de uno en uno. Añadir una navegación separada puede ayudar en este caso.
Algunas reglas críticas para este tipo de pantalla son:
- Las fotos e ilustraciones deben ser de alta calidad
- La CTA (llamada a la acción) debe estar presente y ser fácil de identificar
- La pantalla del catálogo debe tener el CTA al igual que dentro de la página del producto. De este modo, los usuarios pueden añadir artículos a la cesta directamente desde la pantalla del catálogo.
Pantalla del producto
Esta pantalla educará a los usuarios con más detalle sobre el producto. Una pantalla de producto es importante porque permite a los usuarios profundizar en el producto, responder a cualquier pregunta que puedan tener y proporcionar más información sobre el producto para cerrar la venta.
Los elementos clave son:
- Imagen característica de alta calidad
- La descripción detallada y fácil de leer
- Especificaciones del producto
- Comentarios
Pantalla de pago
El móvil se está convirtiendo rápidamente en la principal forma en que los usuarios realizan sus compras. La UX móvil debe hacer que el proceso sea lo más sencillo y sin complicaciones posible. El proceso de compra es la etapa final de este proceso y debe ser cómodo para el usuario.
- Incluya elementos visuales que indiquen que la información personal importante está segura.
- Apoyar las opciones de pago rápido puede ser una excelente manera de mantener la experiencia sin dolor
Noticias
El newsfeed es un elemento crucial para muchas aplicaciones sociales. Sin embargo, muchas otras categorías de aplicaciones utilizan ahora un newsfeed para transmitir contenidos cambiantes a los usuarios. Puedes priorizar un tipo de contenido específico (como las nuevas publicaciones) en la parte superior.
Algunas pautas para ello:
- intente mantener 1-2 elementos en la pantalla para evitar el exceso de carga
- Una nueva tendencia en los feeds de noticias es tener dos columnas, pero esto puede ser muy fácil de equivocarse.
- Deslizar horizontalmente para revelar diferentes feeds locales es una mejor manera de incluir información extra. Piensa en cómo funcionaban los hashtags de Instagram y anteriormente la interfaz de usuario de Snapchat (antes de que la cambiaran).
Pruebas y comentarios
El diseño de una gran interfaz de usuario móvil y la comprensión de la experiencia del usuario (UX) implican la realización de pruebas y la actualización periódica del diseño sobre la base de los comentarios y el comportamiento de los usuarios.
Todo lo que hemos comentado le ayudará a diseñar una mejor experiencia de aplicación móvil. No sustituirán la necesidad de realizar pruebas sólidas y recibir comentarios de los usuarios.
Testing your UX with real users in real-world situations is a must if you want to create a UI that keeps users engaged.
Circuitos de retroalimentación
El feedback de los usuarios es increíblemente importante para el diseño UX. Para obtenerlo en cantidades fiables, debes diseñar el producto de retroalimentación en tu aplicación.
Hay innumerables formas de hacerlo; lo más importante es que funcione. Puede ser cualquier cosa, desde un formulario hasta una analítica en segundo plano que registre cómo interactúan los usuarios con tu aplicación.
Herramientas
Un mal artesano siempre culpa a sus herramientas. Sin embargo, con el diseño y el desarrollo de aplicaciones, es importante contar con el conjunto de herramientas adecuado para desarrollar, implementar y probar la UX de su aplicación. Aunque, puede pensar en contratar una agencia de UX que le ofrezca servicios de diseño de UX completos.
Prototipos y planificación
El lugar donde comienzan la mayoría de los diseñadores de UX. Muchas soluciones de prototipado ofrecen plugins directos.
Una potente integración de prototipos que permite pasar del diseño al código rápidamente.
Una solución interactiva y rápida de creación de prototipos
Creador de prototipos muy realistas.
Una herramienta gratuita de creación de prototipos diseñada por Facebook y utilizada para crear algunas de sus aplicaciones.
Pruebas y comentarios
Una solución integral para las pruebas de usuarios
Grabación de usuarios que le ayuda a comprender cómo utilizan su aplicación los usuarios
Otra herramienta que permite registrar las interacciones de los usuarios.
Pruebas de UX basadas en datos cuantitativos
Cursos y recursos
Una aplicación para Android que ofrece definiciones detalladas de todos los términos relacionados con el diseño UX de aplicaciones.
Un libro electrónico en profundidad para los novatos en el mundo de la UX.
Un excelente sitio que permite ver cómo algunas de las mejores aplicaciones y productos del mundo se han adaptado a lo largo del tiempo.
Un fantástico curso en forma de boletín informativo que le guía a través de los principios rectores de la UX móvil
Un complemento de Chrome que muestra una nueva cita relacionada con la UX cada vez que se abre una nueva ventana.
Herramientas de diseño
Permite un acceso rápido a los logotipos y al diseño de su aplicación.
Guía definitiva con herramientas que le ayudarán a acertar con su diseño.
Otras herramientas
Diseñar para conseguir más clientes potenciales en el móvil
James es el jefe de marketing de Tamoco
Dejar una respuesta