La lista de verificación de diseño UX

Durante el proceso de diseño, algunos defectos en su producto pasarán desapercibidos. Esas cosas pequeñas (o a veces grandes) pueden hacer mucho para dañar la experiencia que el usuario tiene al usar su software. Recopilamos una lista de puntos para que verifique antes de que se apruebe el diseño.

Tenga en cuenta que no todos estos puntos se aplican a todos los productos, pero en general estos son los más relevantes.

La caja de herramientas de diseño UX
Descargas ilimitadas: más de 1,000,000 de plantillas Wireframe y UX, kits de interfaz de usuario, activos de diseño y mucho más.

Descargar ahora

Diseño de interacción

01 – Las acciones repetitivas o actividades frecuentes se sienten sin esfuerzo

Por qué es importante: Las acciones repetitivas para el mismo resultado (por ejemplo, llenar diferentes formularios con la misma información) es una tarea extenuante que no ayuda al usuario a alcanzar sus objetivos más rápido o mejor. Es probable que el usuario también intente encontrar una forma de evitarlo: por ejemplo, buscando competidores que puedan ayudarlo a hacerlo más rápido / mejor.

Cómo probarlo: Debe comenzar analizando todos los flujos de su producto y observando el comportamiento del usuario. Desea asegurarse de que, si hay acciones repetitivas, hay una manera de facilitarlas: por ejemplo, una opción para usar la información ingresada previamente.

02 – Los usuarios pueden recuperarse fácilmente de los errores

Por qué es importante: A menudo, los usuarios realizan acciones no deseadas o acciones que no condujeron a los resultados deseados, y permitirles regresar e intentarlo nuevamente significa que no se sentirán frustrados y se recuperarán fácilmente y seguirán avanzando.

Cómo probarlo: Primero, asegúrese de que su sistema de navegación permita el regreso y que las acciones se puedan deshacer. Luego, cuando realice pruebas de usabilidad, cree escenarios en los que el usuario probablemente realice la acción incorrecta y verifique si puede recuperarse fácilmente.

03 – Los usuarios reciben un soporte adecuado de acuerdo con su nivel de experiencia

Por qué es importante: Es importante asegurarse de que los usuarios novatos de su producto tengan una experiencia de aprendizaje fluida. Sin embargo, una vez que ya estén familiarizados con el producto, eso debería dar lugar a herramientas que lo ayuden a moverse más rápido a través de los flujos. Ambos escenarios mejoran la usabilidad y la retención. Por ejemplo, accesos directos para usuarios expertos, sugerencias de herramientas para usuarios novatos, etc.

Cómo probarlo: Primero, verifique si tiene herramientas para ambos públicos. Luego, realice pruebas de usabilidad con usuarios novatos y expertos para ver si estas herramientas se están utilizando correctamente.

04 – Acceder a la ayuda no impide el progreso del usuario

Por qué es importante: Los usuarios solicitan ayuda cuando están atrapados en una determinada parte de su producto. Es importante que la ayuda, en línea o fuera de línea, sea adicional y permita al usuario reanudar el trabajo donde lo dejó.

Cómo probarlo: Cree escenarios de prueba donde los usuarios pedirán ayuda y vea si sus flujos de trabajo y progreso se interrumpen.

Diseño visual

05 – No más de tres colores primarios

Por qué es importante: Esta no es una regla fija, y a veces, para casos específicos, se pueden usar más de tres colores primarios. Sin embargo, tenga en cuenta que combinar tres colores ya es difícil, por lo que en la mayoría de los casos se debe evitar más.

Cómo probarlo: Asegúrese de que la paleta de colores que utilizó al diseñar el producto no tenga más de tres colores primarios.

06 – El color solo no se usa para transmitir jerarquía, contenido o funcionalidad

Por qué es importante: Tener un producto accesible no es una ventaja, es imprescindible. Para las personas con discapacidades visuales, como el daltonismo, depender únicamente del color para transmitir jerarquía, contenido o funcionalidad significa que no podrán usar su producto y serán un grupo demográfico excluido.

Cómo probarlo: colorfilter.wickline.org le permitirá colocar un filtro de color en la parte superior de su página web y probarlo para detectar diferentes tipos de daltonismo. También puede capturar en pantalla su producto y convertirlo a escala de grises en un editor de imágenes y ver si puede distinguir los colores fácilmente.

07 – La jerarquía visual dirige al usuario a la acción requerida

Por qué es importante: Los usuarios confían en la jerarquía y las pistas del producto para saber qué hacer y a dónde ir; es esencial comprender esto y guiarlos adecuadamente utilizando esa jerarquía.

Cómo probarlo: Comprenda cómo funcionan los flujos dentro de su producto y si sus acciones clave están siendo incentivadas por la jerarquía visual.

08 – Los elementos en la parte superior de la jerarquía visual son los más importantes

Por qué es importante: La jerarquía visual permite a los usuarios escanear información rápidamente, priorizando el contenido en función de sus necesidades inmediatas. Los elementos cerca de la parte superior de la jerarquía visual deben ser los más importantes para el negocio y los más relevantes para los usuarios.

Cómo probarlo: Capture la pantalla de su producto digital, luego Gaussian difumine esa captura de pantalla en un radio de alrededor de 5px. Al mirar el resultado, visualizará instantáneamente la jerarquía y notará qué elementos se destacan. ¿Son los más importantes para el negocio y el usuario?

09 – La acción primaria es visualmente distinta de las acciones secundarias

Por qué es importante: Tener acciones primarias y secundarias distintas significa que el usuario no se confundirá al interactuar con su producto y será menos propenso a cometer errores. Por ejemplo, "Enviar" y "Cancelar" deben ser claramente distintos.

Cómo probarlo: Al realizar pruebas de usabilidad, observe los errores comunes que no resultan de la intención del usuario, sino de acciones primarias y secundarias poco diferenciadas. Además, al revisar el diseño, asegúrese de que el color, el tamaño, el posicionamiento y otros elementos diferencien las acciones.

10 – Los elementos interactivos no se abstraen

Por qué es importante: Al usar un nuevo producto, los usuarios vienen con un conjunto de expectativas creadas a partir de su experiencia previa con otros productos digitales, por ejemplo, cómo deberían ser los botones y cómo deberían funcionar. Cumplir esas expectativas significa que no estás creando fricciones innecesarias.

Cómo probarlo: Primero, revise su producto buscando áreas donde no se usen patrones comunes. Por ejemplo, enlaces que no parecen enlaces.

11 – El envío del formulario se confirma de una manera visualmente distinta

Por qué es importante: Es esencial dar al usuario la confirmación de si una acción se realizó con éxito o no. Por ejemplo, después de enviar un formulario, un mensaje de confirmación claro en forma de un banner de color significará que el usuario puede pasar a la siguiente tarea.

Cómo probarlo: Verifique todas las áreas de su producto donde el usuario ingresa información. Una vez completada la entrada del usuario, active una confirmación sobre si esa acción fue exitosa o no. Asegúrese de que la retroalimentación sea clara con respecto al estado final.

12 – Los mensajes de alerta son consistentes

Lo que es: Los mensajes de alerta tienen el mismo estilo visual y aparecen en la misma ubicación de la misma manera.

Por qué es importante: Tener mensajes de alerta consistentes significa que el usuario siempre comprenderá lo que merece atención de inmediato. No ser coherente con las alertas significaría una carga mental adicional cada vez que aparece una nueva alerta.

Cómo probarlo: Asegúrese de que los mensajes de alerta tengan el mismo estilo visual y que su posicionamiento sea similar o idéntico.

13 – Los mensajes de alerta son visualmente distintos

Por qué es importante: Al asegurarse de que los mensajes de alerta estén claramente diferenciados de otros elementos de la pantalla, el usuario puede notarlos y / o actuar en consecuencia.

Cómo probarlo: Después de comprobar la diferenciación visual usted mismo, vea cómo los usuarios reaccionan a los mensajes de alerta en las pruebas de usabilidad.

Arquitectura informacional

14 – La navegación es consistente

Por qué es importante: La forma en que los usuarios se orientan y luego navegan por su producto influye directamente en si pueden completar sus objetivos independientemente de su página actual.

Cómo probarlo: Verifique la documentación de su arquitectura de información y asegúrese de que se pueda acceder a la navegación en cada página y de que no cambie ni desaparezca. Antes de sumergirse en el diseño visual, intente ordenar las tarjetas o probar los árboles para asegurarse de que las rutas de su arquitectura de información sean lo más intuitivas posible.

15 – Espacio para el crecimiento

Por qué es importante: No puede rediseñar el sistema de navegación e información de un producto cada vez que surgen nuevas características o contenido. Los menús de navegación y el diseño general deben admitir más categorías / temas sin interrupciones. Diseñar con espacio para el crecimiento significa que los principales esfuerzos de diseño y desarrollo se escalan fácilmente a través de la interfaz.

Cómo probarlo: Pregunte a todos los interesados ​​sobre cómo el contenido podría crecer con el tiempo en el producto. ¿Apoyará más contenido estático? ¿La arquitectura necesitará soportar videos?

Tipografía

16 – No se utilizan más de dos familias de tipos distintos

Por qué es importante: Esta no es una regla fija: a veces es posible lograr más de dos. Pero en términos generales, hacer coincidir más de dos no es un trabajo fácil. Por razones de usabilidad y visuales, apegarse a dos simplifica su jerarquía tipográfica, lo que mejora la comprensión.

Cómo probarlo: Solo asegúrese de que su diseño no mezcle más de dos familias de tipos. También debe asegurarse de que las familias que elija coincidan correctamente (obtenga más información aquí).

17 – Las fuentes utilizadas para el contenido de texto tienen al menos 12 píxeles de tamaño

Por qué es importante: Nuevamente, no es una regla fija: en teoría, podría usar tamaños más pequeños para propósitos muy específicos, pero en general la legibilidad se reduce severamente para tamaños por debajo de 12 píxeles.

Cómo probarlo: Verifique todo su contenido y asegúrese de que las fuentes utilizadas para ellos tengan un tamaño de al menos 12 píxeles.

18 – Reserve palabras en mayúsculas para etiquetas, encabezados o siglas

Por qué es importante: Se sabe que limitar el uso de palabras en mayúscula facilita la comprensión: es menos visualmente pesado y más fácil de digerir para el usuario. Debería usarse específicamente para enfatizar o casos muy restringidos – acrónimos, por ejemplo.

Cómo probarlo: Realice una comprobación exhaustiva del contenido y asegúrese de que las palabras en mayúscula se limiten a los encabezados, etiquetas o acrónimos.

19 – Se utilizan diferentes estilos de fuente o familias para separar el contenido de los controles

Por qué es importante: Debe haber indicadores claros sobre qué es el contenido y qué son los controles, es decir, con qué puede interactuar el usuario. Esos indicadores pueden ser tamaño, color, posicionamiento, fuente, etc. La fuente es importante: el uso de diferentes estilos o familias significa que el usuario no se confundirá e identificará fácilmente con qué se puede interactuar.

Cómo probarlo: Identifique todos los controles en su producto y asegúrese de que se destacan del contenido. Cuando ejecute pruebas de usabilidad, preste atención a si los usuarios tienen dificultades para interactuar con los controles.

20 – El tamaño / peso de la fuente diferencia entre los tipos de contenido

Por qué es importante: Afecta fuertemente la legibilidad y la comprensión. Hacer una distinción clara entre encabezados, subtítulos y párrafos reduce la sobrecarga mental al digerir ese contenido. También tiene beneficios visuales: se ve y se siente mejor.

Cómo probarlo: Al revisar el contenido dentro de su producto, asegúrese de que los encabezados, subtítulos y párrafos estén usando diferentes tamaños y pesos de fuente.

Interfaz de usuario

21 – Proximidad y alineación

Por qué es importante: El usuario tiene una tendencia a agrupar, funcional o contextualmente, elementos que están cerca uno del otro. Una barra de navegación es un buen ejemplo de esto. Seguir este patrón y agrupar elementos que están conectados significa que el usuario comprende instantáneamente su interfaz.

Cómo probarlo: Busque elementos que tengan una funcionalidad similar y compruebe si (cuando sea posible) están agrupados.

22 – Indicador de progreso para flujos de trabajo de varios pasos

Por qué es importante: Especialmente para flujos de trabajo de varios pasos, el usuario puede sentirse fácilmente abrumado o preguntarse cuánto tiempo hasta que finalmente se haga. Un indicador de progreso lo ayuda a ubicarse, pero lo más importante es que crea una sensación de logro y reduce las tasas de caída.

Cómo probarlo: Verifique todos los flujos dentro de su producto donde hay diferentes pasos para lograr algo, luego asegúrese de que el progreso se indique a través de un indicador.

23 – Los elementos de primer plano (como el contenido y los controles) se distinguen fácilmente del fondo

Por qué es importante: Importante para personas con discapacidad visual. También mejora la curva de aprendizaje y la comprensión del usuario. La distinción clara facilita la navegación, presta más atención a los botones y aumenta la usabilidad en general.

Cómo probarlo: Capture la pantalla de su producto y Gaussian difumine esa captura de pantalla en un radio de alrededor de 3px a 5px. Al mirar el resultado, ¿puede decir fácilmente qué hay en primer plano y qué hay en segundo plano?

¡Felicitaciones por revisar la lista!

… Sin embargo, este no es el final.

Su producto ahora es más sólido y es posible que haya mejorado en varias áreas, tal vez ahora sea más accesible, por ejemplo, pero recuerde siempre realizar pruebas, recopilar comentarios de los usuarios y seguir iterando.

Botón volver arriba