Lista de verificación UX de 30 puntos para aplicaciones móviles

Este artículo es un recordatorio sobre lo que debe verificar en el diseño de su aplicación antes de enviarla a AppStore / GooglePlay. La lista se divide en bloques temáticos:

1. Iniciar sesión / Registrarse
2. Primera experiencia
3. Interacciones diarias
4. Notificaciones
5. Configuraciones de cuenta
6. Cinta
7. Buscar
8. AppStore / GooglePlay

Este artículo fue traducido con el apoyo de EDISON Software, una compañía que desarrolla aplicaciones y sitios , y también se ocupa de las interfaces de usuario .

1. Iniciar sesión / Registrarse

1. Salvapantallas

Se muestra una pantalla de bienvenida cuando se inicia la aplicación. Esto es lo primero que ve el usuario, esto crea la primera impresión del producto, incluso antes del inicio del trabajo.


Pantalla de bienvenida con logo de Gleb Kuznetsov


Rider Launch Transition de Uber

Aquí hay algunos consejos para hacer buenos protectores de pantalla .

2. Olvidé tu contraseña

La persona promedio está registrada en 90 servicios en línea que requieren una contraseña. Por lo tanto, las contraseñas a menudo se "olvidan". Según las estadísticas, el 21% de los usuarios olvida su contraseña durante 2 semanas y el 25% olvida una contraseña al menos una vez al día. Si su aplicación requiere una contraseña, cuide el formulario de recuperación de contraseña.


Olvidé el flujo de contraseña por Emmanuel Torres

2. Primera experiencia

3. Pantalla de bienvenida / instrucción en la primera ejecución (incorporación)

La incorporación es un término de diseño UX que significa cómo entender al usuario qué hacer con su aplicación, cómo navegar por ella, dónde hacer clic. Una buena incorporación aumenta la probabilidad de que los "recién llegados" se conviertan en "permanentes".


Experiencia de incorporación animada por Cuberto

Aquí hay consejos prácticos para una buena incorporación .

Aquí hay conceptos creativos para la incorporación .

4. Pantalla con notificación de confirmación exitosa de datos

Muchas aplicaciones móviles solicitan confirmación de correo / teléfono. Una notificación sobre una operación de confirmación de datos exitosa aparece después de que el usuario ha completado todo lo necesario.


Pantallas de confirmación por Diana Caballero

Para esta pantalla, es vital garantizar:

• la posibilidad de enviar nuevamente un código de confirmación (para teléfonos)
• instrucciones sobre cómo encontrar un mensaje de confirmación (buscar por título, buscar en spam, etc.) (para correo)

5. Stubs para "Aún no hay contenido"

El contenido es para lo que los usuarios instalan la mayoría de las aplicaciones. Es importante pensar en aquellos lugares donde el usuario logró mirar, donde todavía no hay contenido. Estos lugares inexplorados no deben estar vacíos.

En lugar de dejar un vacío, inserte un tutorial o instrucciones sobre qué hacer a continuación.


Symplicity carreras aplicación estado vacío

6. Avatar de usuario predeterminado

La mayoría de los usuarios (~ 95% según Jared M. Spool ) no cambian la configuración predeterminada. Esto significa que los usuarios tendrán el avatar que hayas elegido para ellos.


Lindo avatar de usuario predeterminado en Dropbox

Aquí hay algunas ideas sobre cómo hacer un avatar predeterminado .

3. Interacciones diarias

7. Pantalla de solicitud de resolución

Cuando un usuario abre una nueva aplicación, lo último que quiere ver es una gran cantidad de ventanas emergentes que preguntan:

• Permita que la aplicación acceda a su ubicación.
• Permita que la aplicación acceda a sus contactos.
• Permita que la aplicación acceda a su cámara

Dichas solicitudes afectan negativamente la experiencia del usuario y conducen al hecho de que la aplicación se puede eliminar con enojo. Dichas solicitudes de permiso tienen un impacto muy negativo en la experiencia del usuario y, por lo general, provocan el abandono de la aplicación. Por lo tanto, es mejor pedir permiso en el momento de la interacción del usuario.


Diálogo de permiso de notificación por Anton Tkachuk

Aquí con más detalles sobre la solicitud de permiso .

8. Varios estados para elementos interactivos

Los botones y otros elementos interactivos tienen varios estados. Es muy importante pensar en los estados predeterminados / presionados / no disponibles para cada elemento interactivo en su aplicación.


Tres estados de botón


Botón de diseño de material por Vadim Gromov

Aquí hay consejos sobre cómo diseñar botones .

9. Conjunto de iconos

Será mejor si tus iconos son del mismo estilo.


Iconos de la barra de pestañas en la aplicación de Twitter para iOS

Aquí hay una lista de verificación para los iconos .

10. Mensajes de error

El mejor mensaje de error es uno que no aparece en absoluto. Una mejor manera de evitar cometer un error es instruir adecuadamente al usuario con anticipación. Pero si, sin embargo, se ha producido un error, entonces un mensaje de error competente no solo le enseña al usuario cómo prevenirlo en el futuro, sino que también le deja claro al usuario que está siendo atendido y no ignorado.


Interacción de error por Dwinawan

Aquí hay algunos casos en los que debe pensar en los mensajes de error:

• No hay conexión a internet. Piense en lo que el usuario debería ver cuando no hay conexión.
• El usuario ingresó los datos incorrectamente.
• Error del sistema

Aquí hay un artículo sobre cómo hacer buenos mensajes de error .

11. El proceso de arranque

Aunque la respuesta instantánea de la aplicación es la mejor, hay momentos en que su aplicación tendrá que "sumergirse". Una mala conexión a Internet puede causar una respuesta lenta o la operación en sí puede llevar mucho tiempo. En tales casos, para minimizar el estrés del usuario, debe asegurar a los usuarios que la aplicación está trabajando en su solicitud. Cuando una aplicación no puede notificar a los usuarios que lleva tiempo completar una acción, los usuarios a menudo piensan que la aplicación no ha recibido la solicitud y lo intentan nuevamente. Debido a la falta de comentarios, el usuario puede presionar todos los botones con fuerza.

Un indicador de progreso animado es la forma más común de proporcionar el estado del sistema a los usuarios cuando algo sucede o se carga.


Cargador de sonrisas para diseño de producto AI por Gleb Kuznetsov

Aquí hay algunos consejos para crear indicadores de carga .

12. El mensaje de que hiciste todo bien

Los estados de éxito son pantallas que mostramos a los usuarios cuando completan tareas. Los diseñadores deben considerar los siguientes tipos de condiciones de éxito:

• Estados asombrosos (primer éxito). En el momento en que el usuario realiza por primera vez una tarea importante, tiene una gran oportunidad para crear una conexión emocional positiva entre él y su producto. Deje que sus usuarios sepan que están teniendo éxito, reconociendo su progreso y celebrando el éxito con el usuario.
• Pantalla de confirmación. Una pantalla de confirmación es una pantalla requerida para las aplicaciones de comercio electrónico. En el momento en que el usuario completa la compra, debemos mostrar una pantalla que proporcione toda la información necesaria sobre la compra.

Pantalla de confirmación en Booking.com

13. Autocompletar

Los diseñadores siempre deben esforzarse por minimizar el costo de la interacción eliminando acciones innecesarias. Autocompletar simplifica la entrada del usuario al reducir el número de clics que el usuario debe completar para completar la solicitud.


Imagen: Louise Chang

14. Cancelar la operación

Todos cometemos errores, pero cuando se trata de interactuar con el usuario, es extremadamente importante proporcionar una opción que ayude al usuario a recuperar datos importantes.


Deshacer para Eliminar elemento. Imagen: Sashoto Seeam


Deshacer para enviar correo electrónico. Imagen: Tyler Beauchamp

15. Localización / Internacionalización

Dado que muchos equipos de desarrollo tienen planes de alcance global, es importante hacer que la localización / internacionalización sea una parte natural del proceso de diseño. Las propiedades visuales de los elementos (por ejemplo, el tamaño) y las copias UX deben seleccionarse en función de la localización / internacionalización.


Botón de voto a favor en diferentes idiomas. Imagen: Chier Hu

16. Ayuda / Instrucciones

Cuando los usuarios tienen un problema, su primera reacción natural será encontrar una solución en la aplicación. Por lo tanto, es una buena idea proporcionar un enlace a la sección de ayuda / preguntas frecuentes en la aplicación.


Ayuda y comentarios de Alex Muench

17. Accesibilidad

La accesibilidad permite a las personas con todas las capacidades percibir, comprender e interactuar con su producto. Aquí hay un gran resumen de Lillian Xiao sobre lo que los diseñadores necesitan saber sobre la disponibilidad de dispositivos móviles.

Y aquí hay una lista de herramientas para verificar el contraste de color .

4. Notificaciones

18. Notificaciones de aplicaciones / notificaciones push

¿Sabía que las notificaciones pésimas son la razón principal por la cual los usuarios desinstalan la aplicación?


Las notificaciones molestas son la razón por la cual las personas desinstalan aplicaciones móviles (el 71% de los encuestados dice).

Sin embargo, puede convertir este antipatrón UX en algo significativo y útil tanto para la empresa como para el usuario. Para lograr buenos resultados con las notificaciones en la aplicación, los diseñadores necesitan una estrategia de publicación que se adapte mejor a los dispositivos móviles.

Aquí hay un artículo que proporciona información sobre cómo crear buenas notificaciones .

Y aquí hay algunas ideas de diseño inspiradoras .

19. Configuración de notificaciones

Siempre es un placer dar a los usuarios libertad de elección. En el contexto de las notificaciones móviles, esto significa poder elegir qué notificaciones desean recibir.


Establecer opciones de notificación en Slack

5. Configuración de la cuenta

20. Herramienta para recortar foto de perfil

Permita que los usuarios no solo carguen un avatar, sino que también lo modifiquen según sus necesidades directamente en su aplicación.


Editando un avatar de Scott Thomas

21. Pantallas para ver / cambiar datos personales

Permita a los usuarios editar sus datos personales directamente en la aplicación móvil. Cree pantallas para obtener una vista previa de la información de envío / facturación y agregar esta información a una lista editable.


Las direcciones de casa y oficina son editables. Seleccione una dirección de envío de Dhiraj S. Karki

22. Cerrar sesión

Si su aplicación requiere iniciar sesión, entonces también debería haber una oportunidad para cerrar sesión.


Cerrar sesión en Facebook para iOS

23. Términos de uso

Agregue los Términos de uso a su aplicación para evitar acciones legales.


Imagen: Cristian Dina / Shutterstock

24. Configuraciones de privacidad

Permita que los usuarios vean qué datos le envían y que puedan elegir.


Imagen: Vitaly Friedman

Aquí hay consejos sobre cómo lidiar con la privacidad en las aplicaciones .

25. Enviar comentarios

Al proporcionar una forma rápida de compartir comentarios sobre su producto, no solo recopila información valiosa sobre su producto de usuarios reales, sino que también les hace creer que sus comentarios son valiosos para usted.


Skype para iOS ofrece a los usuarios la opción de "Dejar comentarios", "Informar un problema" o "Sugerir una función".

6. cinta

26. Desplazamiento

Las pantallas móviles son pequeñas. Para ahorrar espacio en la pantalla, los diseñadores a menudo desean optimizar la información mostrada y ocultar todo lo que no tiene valor para el usuario. Es por eso que muchas pantallas de canales tienen dos estados: el estado predeterminado (la pantalla que los usuarios ven cuando ingresan al canal) y el estado de desplazamiento (cuando el usuario se desplaza hacia arriba para ver más contenido).


Tenga en cuenta que el área del título se contrae al desplazarse. Craiglist Mobile animation por Aurélien Salomon

Buscar dentro de la aplicación

27. El comportamiento predeterminado

Wang necesita decidir cuál será el orden de búsqueda predeterminado. Por ejemplo, si está diseñando una página de resultados de búsqueda para una aplicación de comercio electrónico, debe decidir si clasifica la salida de acuerdo con la mejor coincidencia / precio / tiempo de entrega.

28. Compartir / Marcador

Permita que los usuarios compartan y marquen lo que encuentren.


Me gusta, Marcar y compartir opciones en la aplicación AE por Martin Berbesson

29. Formulario vacío para "Sin resultados"

¿Qué verán los usuarios si están buscando algo, pero no hay resultados de búsqueda? La pantalla "Sin resultados" no debe significar el final. Dígale al usuario qué paso tomar a continuación.


La aplicación Google Flights ofrece a los usuarios borrar todos los filtros para encontrar vuelos

8. AppStore / GooglePlay

30. Ícono para la aplicación

Debe diseñar un icono pegadizo para su aplicación, algo que refleje la esencia de su producto y despierte el interés entre los usuarios potenciales.


Monument Valley es un juego hermoso, y el ícono de la aplicación del sistema operativo es perfecto para la maravillosa aventura que estás a punto de emprender.

Lee también el blog
Empresa EDISON:

20 bibliotecas para
espectacular aplicación para iOS