Radiografía de una ventana modal

¿Se puede aprender algo analizando un (simple) mensaje de seguridad?

12 MIN DE LECTURA

El otro día recibí un cargo que Revolut consideró sospechoso y, por precaución, bloqueó temporalmente mi tarjeta. Al revisar el cargo, tenía la posibilidad de desbloquear la tarjeta o cancelarla definitivamente pero, en esta última, la forma en que ofrecían las opciones de la ventana modal me generó más dudas de las previstas. Es éste:

¿Vamos a cancelar la tarjeta? ¿Confirmar la cancelación de la tarjeta? ¿Cancelar la cancelación de la tarjeta? No es raro que nos encontremos con casos así, y cada cual tiene una opinión al respecto, viendo los comentarios sobre el tema que hubo en LinkedIn y en Twitter.

Con estas situaciones aparentemente simples se pueden sacar ideas valiosas para diseñar mensajes y definir buenas experiencias de uso. A ver si sacamos algo en claro viendo esto por partes.

*Aviso: es probable que la palabra «Cancelar» y similares aparezca con una frecuencia cansinamente elevada.

El contexto

Aquí están los flujos de pantallas, para que entiendas mejor el escenario. Esencialmente se bifurca en el segundo paso (revisar transacción), para desbloquear la tarjeta o cancelarla definitivamente. Éste es el flujo de desbloqueo de tarjeta:

Y éste el flujo de cancelación de tarjeta, que será en el que me centre, especialmente en la ventana modal que hay en el tercer paso (spoiler: el botón «Confirmar» es el que cancela definitivamente la tarjeta):

La ventana modal

Al llegar a esta ventana modal de cancelación de tarjeta, la persona procede de una pregunta: ¿Has hecho tú esta transacción? > Respuesta: No > Ventana modal para cancelar tarjeta.

Conceptualmente la relación es lógica (si no he hecho la transacción, lo suyo es cancelar la tarjeta, por si acaso) pero también es ligeramente tangencial: la ventana modal no se dispara por un botón que diga «Cancelar tarjeta», se dispara por responder «No» a si he realizado la transacción. Es decir, aunque sea lógico, no es evidente que al seleccionar «No» se me ofrecerá la modal. Es importante tenerlo en cuenta porque, al diseñar, tenemos que contemplar las expectativas de la persona al pedirle que realice una tarea o tome una decisión. En cualquier caso, en este caso no lo consideraría un problema si la ventana modal fuera más clara y no generara cierta confusión.

El mensaje

Dan por hecho que van a cancelar la tarjeta.
Ya está decidido; un grupo de personas que no conozco va a cancelar mi tarjeta. Me lo dicen en el título y lo reiteran en la descripción. Sin embargo, en el último momento, viendo los botones me piden que lo confirme. Si (lógicamente) necesitan mi confirmación, ¿no sería más claro que me preguntaran directamente si quiero cancelarla, en lugar de afirmarlo con tanta rotundidad?

Transmiten bien la importancia de la situación.
proteger mi dinero y evitar ser víctima de fraude me parecen buenos motivos. Demuestran que se preocupan por mí y con un tono serio pero no alarmista.

La relación entre la descripción y las acciones es confusa.
Cancelar es la palabra clave de esta ventana modal; «Cancelar la tarjeta» es la expresión que ha elegido Revolut para dicha acción (aunque el botón asociado es «Confirmar»). Sin embargo, «Cancelar» de forma estándar para cerrar ésta y otras ventanas modales de Revolut. ¿Puede haberlo hecho Revolut con intención preventiva por si alguien pulsa «Cancelar» por error, que no pase nada? Tal vez, pero no resulta claro. Si sustituimos «Confirmar» por «Cancelar» tendremos que solucionar cómo denominamos al botón que cierra la ventana. O si le llamamos «Cancelar tarjeta» la semejanza entre ambos botones sería peligrosamente elevada, por semántica, posición y forma. Y me resisto a que «Confirmar cancelación» sea la opción más clara.

Algunas ideas sobre todo esto

Percepción de control y decisiones automatizadas

Nos gusta tener el control de aquello que consideramos nuestro, y más si se trata de dinero; al realizar acciones no solicitadas por la persona y que generan cierto trastorno (rechazar transacción, bloquear tarjeta) hay que tener especial cuidado en explicar claramente el motivo. Como cliente de Revolut puedo pensar que una máquina o una persona tiene una serie de criterios justificables, pero tienen que explicarme (y convencerme) de que han bloqueado mi tarjeta por un buen motivo.

Por mi propia experiencia, diseñar mensajes de seguridad adecuados es complicado: ser claros puede pasar por entrar en detalles, entrar en detalles puede llevarnos a contar cosas complejas y esto implique ser poco claros o extendernos en exceso. Revolut usa expresiones algo inespecíficas pero efectivas (proteger tu dinero, evitar el fraude, transacción sospechosa), y teniendo en cuenta el contexto de limitación de espacio creo que mantienen un buen equilibrio entre ofrecer información de valor y orientar a la persona hacia un objetivo.

Revisar en conjunto los mensajes que formen parte de una misma secuencia de pasos nos ayuda a ver la coherencia entre los términos y si los distintos mensajes se conectan bien para formar el discurso adecuado. Sería así:

Relaciones contextuales y distancia semántica

Los elementos que forman parte de un mismo contexto acaban estableciendo ciertas relaciones entre sí debido a distintos factores (tamaño, posición, forma, color…). Las palabras también están sujetas a estas reglas, y la relación mediante significado es uno de los más evidentes.

Un ejercicio muy simple pero muy potente que suelo emplear al diseñar es identificar los elementos clave (palabras incluidas) que aparecen en un contexto determinado y ver cómo se relacionan. En nuestra ventana modal, con sólo prestar atención a la palabra «Cancelar» vemos que el vínculo visual del mensaje se establece con el botón opuesto al de la acción que, efectivamente, permite cancelar la tarjeta. Con esto se ve muy claro:

Y esto me lleva a la idea de «distancia semántica», con la que me refiero al grado de relación entre dos términos mediante su significado. Cuando hablamos de términos incluidos en una interfaz, se establece una relación más: la de acción. Dos acciones que hacen cosas opuestas ofrecidas en un mismo contexto deben evitar compartir «territorio», y para ello hay que incrementar su distancia semántica.

En los contextos digitales hay ciertas palabras, como «cancelar», que están muy ligadas a determinadas acciones, por lo que es conveniente bordear ese «territorio» para evitar confusiones. Si «cancelar» es la palabra que Revolut emplea de forma general para cancelar acciones, en esta acción específica y extraordinaria se podría buscar una solución alternativa (aunque no hay mucho margen porque la acción en sí es la que es).

Reversibilidad, consecuencia y destrucción

Hay que tener cuidado con las acciones irreversibles y/o que tienen una consecuencia importante para la persona.

En los procesos digitales suele haber un punto de no retorno a partir del cual la persona no puede corregir su acción sin que suponga cierto grado de molestia (cancelar una tarjeta, comprar un vuelo, reservar un restaurante, pedir comida). No es lo mismo comprar un vuelo con un botón «Continuar» que con un «Comprar billetes».

A veces las acciones son incluso irreversibles. Es sus especificaciones de interfaz, Apple habla de «acciones destructivas»: borrar los archivos de la papelera del ordenador es algo destructivo.

Por estos motivos es fundamental que la persona sepa qué va a ocurrir exactamente según lo que haga, o pulse. Tenemos que incrementar la probabilidad de que la persona selecciona aquello que quiere seleccionar y, en gran medida, depende del mensaje que tiene delante (y que hemos diseñado).

Prevenir errores

No soy el primero ni seré el último en hablar de los Poka-yoke, un término japonés que significa «a prueba de errores» (algunas personas majas usan baka-yoke, que significa «a prueba de tontos»). Se refiere a técnicas, mecanismos y diseños que impiden o reducen la probabilidad de que se produzcan errores o accidentes.

Con prestar un poco de atención, vemos que hay multitud de «poka-yokes» a nuestro alrededor, algunos tan sutiles o familiares que no los consideramos como tales: el microondas que no se enciende si la puerta está abierta, el cajero que expulsa la tarjeta antes de ofrecerte el dinero (para que no se nos olvide) o tu querido USB que nunca introduces a la primera (que también tiene una explicación de ahorro de costes). Si te interesa el tema tanto como a mí, te recomiendo profundizar en el sistema de producción Toyota y ver este artículo de Juan Leal, que os comparto porque lleva años reflexionando y contando cosas muy interesantes sobre diseño (y porque es mi hermano, y la familia debe apoyarse).

La prevención de errores va muy ligada a captar la atención de la persona sobre algo específico, evitando automatismos y despistes. ¿Se podrían aplicar mecanismos poka-yoke en nuestra ventana modal? Lo veremos.

Composición de las ventanas modales

En las ventanas modales suele haber una acción primaria y otra(s) secundaria(s). En general, la primaria suele corresponder con el objetivo principal de la ventana modal y/o la que confirma la acción que quiere realizar la persona. Esto cumple con la buena práctica en Experiencia de Usuario de facilitar que la persona pueda alcanzar el objetivo que se ha propuesto (aunque hay particularidades). Por ejemplo, si queremos guardar un archivo, el botón principal de la ventana debería ser el de «Guardar», no «Eliminar».

¿Cómo identificar cuál es la acción primaria?

Por posición: en nuestra lectura occidental de izquierda a derecha, estamos habituados a que el botón derecho sea la acción primaria. Esta posición del botón es casi una representación espacial, en la que con el botón derecho «avanzamos» y con el izquierdo «retrocedemos».
Por aspecto: la acción primaria suele destacar de algún modo respecto de la secundaria: el texto está en negrita, el botón tiene un color destacado...

Una ventana modal en árabe invierte las posiciones de los botones (a nuestros ojos).

¿Cuál es la mejor solución?

La solución ideal sería la que no genera ninguna duda a ninguna persona y la que consigue que ninguna persona pulse por error el botón equivocado. ¿Cómo nos acercamos a esto? Habría un montón de combinatorias, con estas cosas no hay solución perfecta, lo importante es saber qué requisitos queremos, debemos y podemos cumplir. Por ser práctico, me he autorrestringido a que solo podría modificar la ventana modal.

Ésta sería una de mis posibles soluciones 🥁:

He tratado de…

Asegurar una correcta distancia semántica entre elementos opuestos.
Definimos como expresión de la acción primaria «Anular tarjeta», y «Volver» como término de la acción secundaria (tampoco es mi palabra favorita pero es de uso común, «Cerrar» podría encajar). Es cierto que con este cambio podríamos conservar «Cancelar» en el botón secundario, pero en procesos sensibles e irreversibles no sobran las precauciones. Para la acción primaria también podría emplearse «Cancelar tarjeta» pero teniendo una alternativa factible como «anular», me he decantado por ello. Cuantas menos excepciones tenga una determinada pauta de comunicación más clara resultará. Sin embargo, cuando las circunstancias lo justifican, se pueden hacer excepciones, y ésta puede ser una de ellas, cambiando el nombre del botón secundario a uno que no sea «problemático». Puedes ver cómo se ha reajustado la relación entre los elementos:

Ser explícitos en el mensaje de la acción destructiva.
¿Cancelar qué? ¿Confirmar qué? Podemos reducir la probabilidad de error completando el mensaje del verbo; para esta solución hay que tener en cuenta el espacio disponible en el botón, y en un producto multiidioma esto es especialmente importante. El botón se llama «Anular tarjeta» y no sólo «Anular», para que no haya dudas. Son dos palabras y las dos son cortas.

Conectar la información ofrecida con la acción primaria.
Titular y botón primario usan la misma expresión, «Anular tarjeta». Si usamos los mismos términos en el título que informa y en el botón que permite la acción, será más fácil que la persona establezca la relación entre ambos, incluso sin necesidad de leer la descripción.

Hacer partícipe a la persona de las decisiones que le afectan.
Con el titular en formato de pregunta implicamos a la persona en la decisión que, a fin de cuentas, es suya. El uso de la primera persona del plural es intencional porque tiene su sutileza: la persona es libre de interpretar la frase. Puede referirse a la persona + Revolut (expresamos cercanía y compromiso), o solo a Revolut (expresamos predisposición) . En cualquiera de los dos casos, estamos indicando que la persona tiene el control y que Revolut está a su servicio.

Expresar nuestra postura experta y justificar nuestras decisiones.
La persona tiene el control pero Revolut tiene el criterio. En la descripción damos contexto argumentamos el motivo y, usando la expresión «es conveniente» aclaramos cuál nuestra opinión (experta) sobre lo que es más adecuado en este caso. Con ello transmitimos confianza y profesionalidad.

Anticipar las consecuencias.
En la misma descripción hacemos algo más que explicar el motivo: nos adelantamos a una posible duda. La consecuencia obvia si cancelas una tarjeta es que necesitas otra nueva. Nos adelantamos a la pregunta con un mensaje de cierre. El mensaje podría afinarse según si la tarjeta a anular es física o virtual, pero usando el verbo «facilitar» cubrimos ambos casos. Esto es una propuesta; en la práctica tendríamos que asegurarnos de cómo es el proceso de emisión de una nueva tarjeta.

Ofrecer información contextual.
Siempre que el espacio y la circunstancias lo permitan. En el titular, que es lo primero que se lee, incluimos los dígitos de la tarjeta, para facilitar que la persona sepa fácilmente a cuál nos referimos. Con esto la persona puede pasar de leer el titular al botón en un plis.

Prevenir posible errores captando la atención de la persona.
En este caso, para captar la atención nos basamos en varios factores: usamos el color rojo (color de atención por antonomasia) y generamos una «mancha de tinta» mayor (el mero hecho de que tenga más caracteres genera un contraste entre ambos botones). Es conveniente que la prevención de errores no se base en un único factor, y en este caso con más motivo, ya que el color no es un factor accesible para personas con problemas de visión. Si queremos hacer un buen trabajo, nuestras soluciones deben ser lo más integrales posibles.
Se podría poner la acción destructiva a la izquierda pero creo que la suma de todos los pequeños ajustes a priori sería suficiente para evitar errores, y, aparte, así respetamos ese desplazamiento cuasifísico a algo anterior que evoca el término «volver» (aunque en este caso, ese volver esté debajo).

Crear soluciones similares para contextos análogos.
Aunque la persona no pasará por ambos flujos porque son alternativas, por consistencia sería conveniente que las decisiones tomadas se adapten también, de algún modo, en la ventana modal del desbloqueo de tarjeta (o al menos revisar para ver cómo quedaría). Esto sería una posible adaptación:

Extra: tener en cuenta las particularidades por país

Sumado a todo lo anterior se tendría que tener en cuenta significados y costumbres según región: según indica Malko Gallegos, «Cancelar» se entiende como «Pagar» en Perú y, según Tati Belzunces, en Argentina es habitual «dar de baja» una tarjeta.

¿Ha dado bastante juego este simple mensaje, no? Soluciones hay muchas, y las alternativas, ideas o comentarios son más que bienvenidos.

⁂

Cualquier pregunta, idea o sugerencia que tengas es más que bienvenida, y si no eres de conversación pública, escríbeme a aloha@tuelfworks.com directamente y charlamos de lo que nos apetezca, quién sabe si no saldrá una buena idea de ahí.