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)

Material Design ama a Sketch y lo comprueba con el plugin Material Theme Editor

Que sea para trabajar en nuevos productos, o darle un update a una app o website, aconsejo seriamente ocupar Material Design que desde luego ofrece el mejor UI kit y guía para una experiencia de usuario consistente y robusta (IOS, website y Android por supuesto).

Material Design ha evolucionado mucho estos últimos años, desarrollándose a misma velocidad que las multiples aplicaciones de diseño de wireframe de mediana y alta fidelidad, dejando así pasar el tiempo necesario para identificar cual de ellos (Sketch, Adobe XD, UX Pin, Figma, Framer,…) tenía más potencial (en términos técnicos, oferta comercial, comunidad de usuarios,…). MD eligió el ganador al poner el plugin Material Theme Editor disponible para Sketch.

El plugin permite elaborar más rapidamente que nunca un wireframe a partir de 4 modelos de diseño realizados con Material Design, en los cuales puedes aplicar los cambios necesarios para alinearlos al branding de la marca del producto en el cual trabajas, cambiando los colores a partir de la paleta de color de MD que se reflejará en todos los símbolos. Los cambios que realizarás en las formas, y en las fuentes se propagarán de igual manera a todos los símbolos y componentes de la librería.

Además de la paleta de colores de Material Design, el plugin Material Theme Editor incluye la integralidad de la librería de componentes (iconos, botones, cards,…) y permite compartir el trabajo directamente en MD Gallery para poner a disposición la última versión del trabajo a todo el equipo involucrado en el desarrollo de la app o del website.

Entendemos que eso no simplifica de mucho el proceso de trabajo, de gestión de proyecto, de entendimiento y consistencia del producto. Sin hablar que todo eso está disponible en 2 clicks:

  • 1 click simple: download plugin,
  • 1 doble click para abrir e instalar el plugin.

Todos los componentes con 100% personalizables.
El color por ejemplo. Al seleccionar uno, el editor deduce automaticamente las variantes. ¡Una chulada!


La libraría de Material design es totalmente personalizable
Inferfaz del plugin Material Theme Editor en Sketch

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.