Dale credibilidad a tus proyectos UX/UI diseñando con estándares ISO

Francisco Mujica Romero
Crehana
Published in
9 min readDec 29, 2022

Uno de los principales desafíos a los que nos enfrentamos en nuestra labor como diseñadores es lograr que nuestros clientes y colaboradores confíen en nosotros, especialmente en el ámbito de la dirección de proyectos. Y Aunque en los últimos años el valor del diseño ha aumentado, en ocasiones subestimamos la necesidad de implementar estrategias de UX y UI en las empresas, lo que puede llevar a simplificar excesivamente nuestros procesos y resultados.

Seguramente te resulté familiar que al finalizar un proyecto solo se presente un figma con el diseño editable y el prototipo, pero… ¿será esta la mejor manera de trabajar? la respuesta es no, enseguida te menciono algunos problemas que pueden surgir al trabajar de esta manera:

  1. Falta de contexto: Si solo se presenta el proyecto de esta manera, puede ser difícil entender cómo se relacionan los distintos elementos y cómo encajan en el flujo general de la aplicación o sitio web.
  2. Problemas de comunicación: Si no se establecen de manera clara los objetivos y expectativas del proyecto, puede haber problemas de comunicación y malentendidos durante el proceso de desarrollo.

La confianza como punto clave para presentar tus proyectos

Para superar este desafío, debemos recordar que el diseño no es solo un conjunto de herramientas técnicas, sino también un proceso de comunicación y colaboración con las personas que utilizarán el producto final. Debemos ser transparentes en nuestro proceso de diseño y en cómo llegamos a nuestras decisiones, y estar dispuestos a escuchar y considerar la retroalimentación de nuestros clientes, usuarios y stakeholders. De esta manera, podremos generar confianza y construir relaciones duraderas.

¿Pero como los Estándares ISO pueden ayudarnos a resolver este problema? bueno esto es por que existe un estándar que propone una metodología de diseño, pero antes de continuar, es importante aclarar qué son los Estándares ISO.

¿Entonces… que son los estándares ISO? 🤔

En palabras sencillas podríamos definirlo como un conjunto de reglas internacionales que garantizan la calidad de los productos que compramos, protegiéndonos a nosotros y a nuestras familias al asegurarnos de que sean seguros y eficientes.

Algunos de los beneficios de utilizar estos estándares en nuestro proceso de diseño son:

  • Ayudan a detectar y corregir problemas de usabilidad: los estándares ISO proporcionan guías y herramientas para evaluar la usabilidad de un producto digital, lo que nos permite detectar y corregir problemas de usabilidad antes de lanzar el producto al mercado.
  • Ayuda a cumplir con regulaciones y normativas: al seguir estándares ISO, podemos asegurarnos de que nuestro producto cumpla con las regulaciones y normativas aplicables, lo que nos permite operar de manera legal y cumplir con las obligaciones de la empresa. por ejemplo, cumplir con la ley general de accesibilidad para las personas con discapacidad.
  • Definir buenas prácticas: hay diferentes opiniones sobre las mejores prácticas, pero las normas internacionales ofrecen una guía autorizada, independiente y comprobada para garantizar la calidad y la usabilidad de nuestros productos digitales.
  • Garantizar la coherencia: los estándares proporcionan un punto de referencia consistente para ayudar a los equipos de diseño a evitar molestas inconsistencias en la interfaz de usuario.

¿En verdad podemos diseñar con estándares ISO? 🤯

Por supuesto, en la actualidad, tenemos a nuestra disposición una gran cantidad de estándares que nos ayudan a mejorar nuestros diseños y procesos. Por ejemplo tenemos al estándar ISO 29138 que se centra en la evaluación de la accesibilidad de la interfaz de usuario o el estándar ISO 9241 que tiene como objetivo mejorar la calidad de la interacción entre personas y sistemas de computación, asegurando que sean fáciles de usar.

Este último está compuesto por diferentes partes, entre las que se encuentran:

  • Las que se centran en los requisitos ergonómicos para el trabajo en oficina con terminales de visualización (Partes 1, 2, 4, 5, 6, 9, 11, 12, 13, 14, 15, 16 y 17)
  • Las que se centran en la ergonomía de la interacción hombre-sistema (Partes 20, 100, 110, 151, 171, 210, 300, 302, 303, 304, 305, 306, 307, 308, 309, 400, 410, 420, 910, 920) y muchas más.

Aunque, en este post, nos enfocaremos únicamente en la parte 210, que propone una metodología de pruebas de usabilidad con usuarios reales para evaluar la facilidad de uso y la usabilidad de una interfaz de usuario.

Diseñando con el estándar ISO 9241–210:2010 Ergonomics of Human System Interaction 😍

Proceso de diseño propuesto por la ISO 9241–210:2010

Este estándar establece los requisitos que deben cumplir los sistemas de información para que sean considerados fáciles de usar por parte de los usuarios mediante una metodología de cuatro pasos que incluye:

  1. Comprender y especificar el contexto de uso:
    En este primer paso, debemos identificar las necesidades y expectativas tanto de los stakeholders, así como de las personas que van a usar el sistema, producto o servicio. Para lograrlo, primero debemos tener una reunión de contextualización en donde se nos explique toda la información necesaria para desarrollar el proyecto de forma efectiva, esto lo podemos hacer mediante un brief e incluso con una acta de Constitución del Proyecto (PID). Una vez que todos entienden el proyecto y sus objetivos, el equipo de UX Research puede llevar a cabo entrevistas, encuestas y observaciones con el fin de conocer las características de los usuarios, sus tareas, el equipo y el entorno, tanto social como físico.
  2. Especificar los requerimientos de uso:
    En esta actividad, nuestro objetivo es determinar qué necesita lograr el usuario a través del sistema. En otras palabras, los requisitos de uso nos indican qué debe ser capaz de hacer el usuario con el sistema, según sus necesidades. Personalmente recomiendo el uso de “Storyframes” y adaptarlas para nuestros proyectos antes de pasar al diseño de Wireframings y diseño UI.
  3. Desarrollar una solución de diseño que cumpla con los requisitos de uso:
    Es momento de diseñar una solución que cumpla con los requisitos de uso que se han identificado en las etapas previas del proyecto. Esta solución puede ser un prototipo de baja o alta fidelidad, según lo que requieran los objetivos y el alcance del proyecto. Como sugerencia, en esta etapa pueden realizarse presentaciones con el equipo de UX y UI para asegurar de que el contenido es correcto y verificar que el prototipo funcione correctamente.
  4. Evaluar la solución de diseño:
    Para finalizar, llevamos a cabo pruebas de usabilidad con usuarios reales que se ajusten a las características que identificamos en los primeros pasos. Estas pruebas nos ayudan a detectar y corregir posibles problemas en el diseño y mejorar la experiencia del usuario de nuestro producto.

En resumen, la metodología propuesta por el estándar ISO 9241–210 se enfoca en el diseño centrado en las personas, con un enfoque iterativo y basado en pruebas para garantizar éxito de tu proyecto.

Caso de estudio

Para ilustrar mejor cómo funciona esta metodología, te propongo que desarrollemos una aplicación sencilla como ejemplo. De esta manera, podremos ver en acción cómo se aplican estos conceptos.

Supongamos que se nos encarga desarrollar una aplicación móvil para una empresa de transporte aéreo. En la reunión de contextualización, se nos informa que la empresa quiere mejorar la experiencia de sus usuarios al ofrecerles una aplicación que les ayude a conocer el estatus de sus maletas que no llegaron a tiempo.

En el primer paso, Comprender y especificar el contexto de uso, el equipo de UX Research identifico que:

  • Los usuarios de la aplicación son principalmente viajeros que quieren saber el estado de sus maletas en todo momento, ya sea porque tienen un vuelo conectado o porque tienen una reunión importante en su destino final.
  • Los usuarios valoran la comunicación clara y precisa por parte de la aerolínea, y esperan poder acceder a la información de manera rápida y sencilla a través de la aplicación.
  • Los usuarios quieren poder recibir notificaciones en tiempo real sobre el estado de sus maletas y tener la opción de recibir alertas cuando haya cambios en el estado de su equipaje.

En el segundo paso, Especificar los requerimientos de uso, utilizamos los resultados de nuestras entrevistas y encuestas para converger la información en una posible solución. Por ejemplo, hemos decidido que usaremos un estilo formal y que permita a nuestros usuarios conocer el estatus de su maleta mediante un código de seguimiento.

Una vez definida la solución podemos identificar los requisitos de uso. Como mencionamos anteriormente, utilizaremos los storyframes para visualizar y planificar nuestro diseño de manera efectiva. En esta actividad, utilizaremos ejemplos sencillos para ilustrar cómo podemos aplicar esta técnica en nuestro proceso de diseño.

1er caso de uso:

Está genial ¿no?… pero que pasa si tenemos más de 5 o 10 casos de uso 😲, esto se convertiría en una carga de trabajo enorme ¿verdad?, la solución es simplificar la descripción y enfocarnos en la idea principal del flujo.

Realicemos el ejemplo:

Mucho mejor.

Bien, ahora que se han definido los casos de uso, podemos seguir con el tercer paso, desarrollar una solución de diseño que cumpla con los requisitos de uso. Para este ejemplo, podemos tomar como referencia el caso de uso “1. happy path aeropuerto” y desarrollar wireframes que muestren cómo se vería el producto digital en esa situación.

En esta primera iteración, podemos centrarnos en las pantallas clave de la aplicación y en cómo los usuarios interactúan con los “objetos” en ellas (a esto se llama diseño orientado a objetos), para aprender más sobre este enfoque, puedes ver este video en donde explico la metodología con diferentes ejemplos.

La siguiente tarea sería complementar nuestros casos de uso con wireflows para que nos ayuden a visualizar y comprender el flujo de navegación.

Ejemplo de wireflow del caso de uso 1: Happy path aeropuerto

¿Pudiste notar que en los wireflows tenemos muchas más pantallas de las que vimos en un inicio? Esto es por que básicamente son adaptaciones de las pantallas clave, por lo cuál diseñarlas fue bastante sencillo.

(Si no puedes ver a detalle la captura del wireflow, he adjuntado el figma en formato embed para facilitar su visualización).

Link: https://www.figma.com/proto/7r2cUfsIMgZmCMbGyi6uHe/Wireflow?node-id=0%3A1&scaling=min-zoom&page-id=0%3A1

Este diseño de wireflows nos permitirá tener sesiones de revisión con stakeholders para identificar posibles errores de diseño. Además nos permitirá comunicar de manera clara la estructura de la interfaz de usuario a los diseñadores, desarrolladores y otros miembros del equipo de proyecto.

El cuarto y último paso es evaluar nuestra solución de diseño. Para llevar a cabo esta evaluación, podemos utilizar diferentes herramientas y métodos, como prototipos de alta fidelidad, pruebas de usabilidad con usuarios reales, entrevistas con los stakeholders, etc.

Para ayudar a entender mejor el ejemplo, he creado un archivo de Figma que muestra cómo se vería y funcionaría la aplicación de transporte aéreo. Puedes acceder al archivo siguiendo este enlace

Recomendaciones finales 🥷

  • Recuerda que además de los estándares ISO también puedes usar las leyes de UX, las heurísticas de usabilidad y las leyes de gestalt para guiar y darle credibilidad a tus proyectos.
  • Mantente al tanto de las actualizaciones de este estándar (Actualmente la última versión públicada es la del 2019) y evalúa cuál se acopla mejor a tu proceso de diseño.
  • Complementa esta metodología con un marco de trabajo ágil, como por ejemplo Scrum. Esto nos ayudará a asignar tareas y objetivos por sprint, evitando reuniones innecesarias y enfoque en nuestros proyectos asignados.

¡Muchas gracias por leer!

Espero que hayas encontrado la información útil y que hayas aprendido algo nuevo. Si tienes cualquier pregunta o comentario, no dudes en ponerte en contacto conmigo a través de mi perfil de LinkedIn.

Referencias:
https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-1:v1:en
https://www.uxbooth.com/articles/designing-usability-standards/
https://www.riadis.org/wp-content/uploads/2020/10/Norma_INEN_ISO_IEC_29138_2_Extracto_Consideraciones-de-Accesibilidad-para-personas-con-discapacidad_Inventario-de-las-normas.pdf

--

--

Francisco Mujica Romero
Crehana
Editor for

Diseñador UX/UI con poco más de 3 años de experiencia, he trabajado en agencias de publicidad, Fintech y actualmente en el área de ED Tech con Crehana.