Errores ¿cómo gestionarlos en UX copy y UI design?

Nuestro trabajo de diseñadores UX es evitar enseñar alertas de error a los usuarios porque causan frustración y casi siempre demuestran que existe algún tipo de falla en nuestro diseño o desarrollo.
Nuestro papel es asistir el usuario para que no encuentre estos errores.

Validación de un formulario

El ejemplo el más obvio es la validación linear (inline validation) de un formulario que indica, cuando un campo ha sido rellenado, si la información cumple con los criterios esperados a gracias al uso de una palomita verde o de una cruz roja acompañado su mensaje de error.
De tal manera, no esperamos que el usuario cliquea en el botón que se ubica al final del formulario para comunicarle si lo relleno de forma correcta o no.

muestra de validación linear

OJO personalmente hago una diferencia entre inline validation, y live validation o validación en caliente. Esa última consiste a validar lo que escribe un usuario mientras lo está escribiendo.

Lee más sobre la live validation, llamada inline validation en el articulo de baymard.com


Sugestiones a errores de redacción

Otro ejemplo sería de corregir el usuario al momento que realiza una acción al proponerle una serie de propuestas alternativas que se acercan lo más a lo que quiere.
La autosugestión (autosuggest) de un buscador permite corregir un error de ortografía. No esperamos que el usuario acabe de escribir para proponerle un vocabulario correcto.

De cualquier caso, proponemos un resultado al usuario y la posibilidad de corregir lo que parece ser un error. En caso de no tener resultado, facilitar al usuario la manera de seguir navegando.

Navegación

El concepto de navegación explicado por Mike Stern en una conferencia de Apple (WWDC 2017), es resumido bajo el concepto de wayfinding, tomando como analogía la señaletica de los aeropuertos. Guiar el usuario de lo más global a lo más preciso, permitiéndole cambiar de ruta considerando su ubicación actual, o salir. Siempre indicando al usuario:

  • dónde se encuentra
  • dónde puede ir
  • cómo salir

y dándole la posibilidad de regresar al punto anterior.

La preguntas que un usuario se hace y a las cuales tenemos que contestar son:

  • dónde estoy? (app bar, menu bar, título)
  • dónde puedo ir? (todos los botones de navegación)
  • qué encontraré cuando estaré? (los iconos ayudan a eso)
  • qué hay cerca? (inpage navegación, back)
  • cómo salgo? (back, tab)

Accesibilidad por contraste y legibilidad

Brand designer, visual concept designer, diseñadores de estrategia de comunicación, diseñadores de service design,… eso es para ustedes.

La elección de una paleta de colores para nuestros productos digitales es una de las cosas que en lo particular me emociona más que otra cosa: con 3 colores y sus variantes un diseño toma vida, una identidad se materializa: la mágia opera.

Ok, pero luego de estar satisfecho de nuestra elección, la realidad nos enfretan a problemas de lectura por falta de contraste entre el color aplicado a la fuente y el color del fondo en el cual se encuentra. Un efecto de vibración.

Una herramienta de Material Design, el Color Tool,  no ayuda al momento de comprobar la accesibilidad de nuestra selección de colores cuando esas se superpone, y actuar en consecuencia: cambiarla o tomarlo en cuenta para definir las reglas de nuestro sistema de diseño (carta gráfica para los principiantes).

Muestra de Color Tool de Material Design
La herramienta Color Tool de Material Design para comprobar el nivel de accesibilidad de nuestra paleta de los colores. © Material Design.

Una buena práctica que les ahorrará dolores de cabeza para resolver en parte este problema de legibilidad.

Resolución del problema de vibración causado por la falta de contraste entre dos elementos gracias a la aplicación de opacidad.
© Material Design.

Podemos aplicar los ajustes siguientes para resolver el  problema:


ajustes de opacidad para evitar el efecto de vibración provocado por la falta de contraste
Observamos una mejor legibilidad del texto al cual se aplico una opacidad (izquierda), mientras que el problema de vibración persiste en el texto sin ajuste de opacidad. © Material Design.