La lista de verificación de diseño de UX

Durante el proceso de diseño, algunas fallas en su producto pasarán desapercibidas. Esas pequeñas (o, a veces, grandes) cosas pueden hacer mucho para dañar la experiencia que el usuario tiene mientras usa su software. Reunimos una lista de puntos para que los verifiques antes de aprobar 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.

Diseño de interacción

01 – Las acciones repetitivas o las 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 lograr 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 o mejor.

Cómo probarlo: debes comenzar analizando todos los flujos de tu producto y observando el comportamiento del usuario. Quiere asegurarse de que, si hay acciones repetitivas, hay una forma de facilitarlas: una opción para usar 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 volver atrás e intentarlo de nuevo significa que no se sentirán frustrados y se recuperarán fácilmente y seguirán avanzando en el flujo.

Cómo probarlo: primero, asegúrese de que su sistema de navegación permita volver atrás y que las acciones se puedan deshacer. Luego, al realizar 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 el apoyo 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 les 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, información sobre herramientas para usuarios novatos, etc.

Cómo probarlo: primero, verifica si tienes herramientas para ambas audiencias. 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 piden ayuda cada vez que se atascan 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 verán si sus flujos de trabajo y su 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 que eso.

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 por sí solo no se utiliza para transmitir jerarquía, contenido o funcionalidad

Por qué es importante: tener un producto que sea accesible no es una ventaja, es imprescindible. Las personas con discapacidades visuales, como el daltonismo, confían únicamente en el color para transmitir jerarquía, contenido o funcionalidad. Esto 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 diferentes tipos de daltonismo. También puede hacer una captura de pantalla de 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 adónde ir; es esencial entender esto y guiarlos adecuadamente usando 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 rápidamente la información, 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: haga una captura de pantalla de su producto digital, luego desenfoque gaussiano de esa captura de pantalla a un radio de alrededor de 5px. Al mirar el resultado, visualizará instantáneamente la jerarquía y notará qué elementos se destacan. ¿Son estos 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á cuando interactúe 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 son el resultado de la intención del usuario, sino de acciones primarias y secundarias mal diferenciadas. Además, al revisar el diseño, asegúrese de que el color, el tamaño, la posición 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 la experiencia previa con el uso de otros productos digitales, por ejemplo, cómo deberían verse los botones y cómo deberían funcionar. Cumplir con esas expectativas significa que no está creando fricciones innecesarias.

Cómo probarlo: Primero, revise su producto buscando áreas donde no se utilizan 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 confirmación de si una acción se realizó con éxito o no. Por ejemplo, después de enviar un formulario, un claro mensaje de confirmación 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 los comentarios sean muy claros con respecto al estado final.

12 – Los mensajes de alerta son consistentes

Qué 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 entenderá qué es lo que merece atención inmediata. No ser consistente 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 su ubicación sea similar o idéntica.

13 – Los mensajes de alerta son visualmente distintos

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

Cómo probarlo: después de verificar usted mismo la diferenciación visual, vea cómo reaccionan los usuarios 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: consulte la documentación de la arquitectura de la información y asegúrese de que se pueda acceder a la navegación en todas las páginas y que no cambie ni desaparezca. Antes de sumergirse en el diseño visual, pruebe la clasificación de tarjetas o las pruebas de árbol 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 se 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 escalan fácilmente a través de la interfaz.

Cómo probarlo: pregunte a todas las partes interesadas cómo podría crecer el contenido con el tiempo en el producto. ¿Apoyarás más contenido estático? ¿La arquitectura necesitará soportar videos?

Tipografía

16 – No se utilizan más de dos familias tipo distintas

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. Para fines visuales y de usabilidad, ceñirse a dos simplifica su jerarquía tipográfica, lo que mejora la comprensión.

Cómo probarlo: asegúrese de que su diseño no mezcle más de dos familias tipográficas. Sería útil si también se asegurara de que las familias que eligió coincidan correctamente (obtenga más información aquí).

17: las fuentes utilizadas para el contenido de texto tienen un tamaño mínimo de 12 px

Por qué es importante: una vez más, no es una regla fija (en teoría, podría usar tamaños más pequeños para propósitos particulares), pero en términos generales, la legibilidad se reduce severamente para tamaños inferiores a 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úsculas facilita la comprensión: es menos pesado visualmente y más fácil de digerir para el usuario. Debe usarse específicamente para énfasis o casos muy restringidos, acrónimos, por ejemplo.

Cómo probarlo: realice una verificación exhaustiva del contenido y asegúrese de que las palabras en mayúsculas se limiten solo a encabezados, etiquetas o acrónimos.

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

Por qué es importante: debe haber indicadores claros sobre qué es contenido y qué son controles, es decir, con qué puede interactuar el usuario. Esos indicadores pueden ser tamaño, color, posición, 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 destaquen 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: tiene un gran impacto en la legibilidad y la comprensión. Hacer una distinción clara entre títulos, 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 usen diferentes tamaños y pesos de fuente.

Interfaz de usuario

21 – Proximidad y alineación

Por qué es importante: el usuario tiende a agrupar, funcional o contextualmente, elementos que están cerca unos de otros. 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 entiende instantáneamente su interfaz.

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

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

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

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 las personas con discapacidades visuales. También mejora la curva de aprendizaje y la comprensión del usuario. La distinción clara facilita la navegación, llama más la atención sobre los botones y aumenta la facilidad de uso en general.

Cómo probarlo: haga una captura de pantalla de su producto y desenfoque gaussiano de esa captura de pantalla a un radio de alrededor de 3px a 5px. Al mirar el resultado, ¿puede distinguir 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 seguir probando, recopilando comentarios de los usuarios y seguir iterando.