Mapas Mentales

En muchos proyectos de tecnología no se genera una documentación inicial que englobe todos detalles que el producto debe de contener. Los mapas mentales son una herramienta útil para evitar huecos en el diseño de la experiencia del usuario.

El ámbito de la publicidad es muy común ignorar esos detalles, y se pasa directamente del brief del cliente al diseño y luego a desarrollo, sin ningún proceso de planeación.

Esta falta ocasiona que en la etapa de desarrollo aparezcan huecos que nunca fueron planeados: una sección adicional o procesos rutinarios como las pantallas de registro o recuperación de contraseña, pero que al no haber sido consideradas desde el inicio aumentan el tiempo del proyecto y con ello el stress y las pérdidas económicas de la agencia.

Una herramienta útil para evitar estos contratiempos son los mapas mentales. Con ellos podemos de forma creativa, lógica y organizada tener un vistazo completo a todas los elementos del proyecto.

Los mapas mentales parten de una idea central, de la que se desprenden los elementos que la integran, los cuales pueden ser, por ejemplo, las secciones de una página o funciones específicas de un app.

Mapa Mental
Mapa Mental para pedir pozole.

En la imagen podemos ver un mapa mental para una aplicación móvil ficticia para pedir pozole. En el mapa lo que encontramos no son los flujos del app, ni las secciones en específico, pero si los elementos que debe de contener. De esta forma este documento servirá de referencia para los diseñadores, desarrolladores y project managers que tendrán de una forma más sencilla una visualización lo que debe de incluirse en el producto.

El lápiz y el papel pueden usarse siempre para crear mapas mentales, pero quisiera recomendar un par de programas:

MindNode

MindNodeSin duda la mejor aplicación de su género para Mac y iPad, con la que hice la imagen de ejemplo del app pozolera. Es limpio y muy sencillo de utilizar, y permite personalizar con facilidad el look & feel de nuestros mapas. Existe una versión libre para Mac, pero limitada. Los documentos creados en MindNode Pro, la versión pagada de la app, se pueden compartir entre la versión de escritorio y la de iPad mediante iCloud.  En cualquier versión se puede exportar a documentos en formatos PDF, PNG, JPG o FreeMind.

FreeMind

FreeMindComo el nombre lo dice, FreeMind es una herramienta de software libre; está escrita en Java, lo que permite que se pueda utilizar en Windows, Mac OS y Linux sin costo. La herramienta es bastante buena y eficiente, pero la interfaz no es del todo amigable. Es una muy buena opción para empezar a implementar mapas mentales en nuestros proyectos.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO

UX: una gran mancha de tinta

Hablar sobre User Experience (UX) puede ser como ver un test de manchas de tinta: aquello que te importe, es lo que terminas viendo en ella.

Leah Buley inicia con esta frase el libro The User Experience Team of One para intentar definir este controversial término, cada vez más común en la jerga cotidiana, pero tan ambiguo y abstracto en ocasiones que la analogía parece bastante acertiva.

Desde disciplina científica hasta término fancy empleado por millennials, el concepto User Experience ha transitado por una gran variedad de acepciones y matices en un periodo de vida relativamente corto. Te presento aquí una mirada, tan fugaz como profunda, sobre lo que es y no es User Experience.

Historia (mínima) sobre User Experience (y más allá)

Según cuenta la leyenda, en 1993 Don Norman llegó a Apple Computer para ser el líder del equipo que realizaría la investigación y diseño de la nueva línea de productos de la empresa de la manzana. Norman pidió que lo llamaran “Arquitecto de Experiencia de Usuario”, siendo el primero en la historia en desempeñar un puesto con ese título. Existe una frase célebre pronunciada por Norman sobre el porqué creó un nuevo término para describir su trabajo en Apple:

“Inventé el término porque pensé que interfaz y usabilidad eran demasiado limitados: quise cubrir todos los aspectos de la experiencia de una persona con un sistema, incluyendo el diseño industrial, gráficos, la interfaz, la interacción física y la manual”.

Para muchos, User Experience nació a partir de ese momento y evolucionó con el advenimiento del iPhone, las apps, redes sociales y demás vorágine propia de nuestros días. Nada más erroneo.

Aunque es un término relativamente reciente, User Experience se relaciona con un conjunto de disciplinas, tecnologías y acontecimientos importantes en la historia, por lo menos, desde el último siglo.

UX Timeline
Acontecimientos relevantes en la historia para User Experience

Los pioneros

Hagamos un efímero recuento cronológico: omitiendo al hombre de las cavernas y saltandonos a Leonardo Da Vinci, dentro de los precursores de lo que ahora conocemos como User Experience podemos mencionar a Frederick Taylor y a Henry Ford, quienes investigaron sobre la eficiencia de la interacción entre los trabajadores y sus herramientas, dando origen al Taylorismo. Después encontramos al Sistema de Producción de Toyota con la filosofía “respeto a la gente” que dio lugar a la participación de los trabajadores en la solución de problemas y la optimización de los procesos del que eran parte.

Mención especial merece el trabajo del diseñador industrial Henry Dreyfuss y su aportación a los campos de la ergonomía, la antropometría y los factores humanos; los métodos que describió en su libro Designing for People son todavía utilizados hoy día por los diseñadores de experiencia de usuario.

El psicólogo experimental Paul Morris Fitts también contribuyó enormemente en la misma área, fundó uno de los primeros laboratorios de investigación sobre el rendimiento humano y el procesamiento de información; creó además un modelo predictivo de la conducta psicomotora humana basado en el tiempo y la distancia conocido como la Ley de Fitts, clave en el diseño de interacción y diseño web.

A la par de la ergonomía, otra disciplina fue tomando forma en aquellos años: la ciencia cognitiva, que combina el interés en los fenómenos de la cognición humana (principalmente de la memoria a corto plazo) con conceptos como la inteligencia artificial, la lingüística o la antropología, por mencionar algunos. Estos fueron los albores del interés por estudiar la interacción entre el hombre y los objetos.

¿Y el iPhone ‘apá?

Vamos para allá: una serie de impresionantes avances tecnológicos sucedieron de manera vertiginosa a partir de la década de los 50, la invención del transistor (1947), del circuito integrado (1957) y del microprocesador (1971) fueron el preludio al advenimiento de la microelectrónica y la evolución de los sistemas de cómputo.

La historia registra como primera computadora electrónica a la ENIAC en 1946, posteriormente aparecieron la UNIVAC 1 (1951), Altair 8800 (1974), Apple I (1976) y la IBM PC (1981), definitivamente, la llegada del Macintosh Apple en 1984 marcó el primer paso hacia una informática orientada al usuario.

Así es, existió un universo antes del iPhone y de la MacBook Pro, pregúntenle a sus padres. Lo importante de todo esto es entender que la rápida evolución de los dispositivos microelectrónicos y la intensificación, tanto en hardware como en software, de los equipos informáticos permitió su abaratamiento y, en consecuencia, la masificación de su uso.

¿Qué no todo empezó con las redes sociales?

Pues no: a partir de la década de los 60, los continuos avances y la rápida difusión de las Tecnologías de la Información y las Comunicaciones (TIC) empezó a caracterizar a la sociedad, creando un nuevo paradigma para interpretar el accionar social, económico, político y cultural, soportados ahora en el acceso y uso de las TIC. Un considerable número de autores, principalmente de las ciencias sociales, vaticinó que el nuevo paradigma implicaría la desaparición de la sociedad industrial, característica del siglo XX, para dar surgimiento a un nuevo tipo de sociedad: la Sociedad de la Información. No se equivocaron. Observen a su alrededor en este momento.

Nicholas Negroponte lo expresó de forma magistral en su libro Being Digital: “la transformación de átomos a bits es irrevocable e imparable”, la informática “ya no se ocupará sólo de las computadoras, sino de la vida misma” porque “nos relacionaremos en comunidades digitales en las que el espacio físico será irrelevante y el tiempo jugará un papel diferente”. Being Digital fue escrito en 1995. Mark Zuckerberg tenía 11 años entonces.

Interacción Humano-Computadora, Usabilidad y UX: el Padre, el Hijo y el Espíritu Santo

La revolución de las tecnologías de información (TICs) y toda su parafernalia, despertó el interés de la comunidad científica y académica en estudiar de manera formal y sistemática las relaciones entre humanos y computadoras.

Abordada de manera inicial sólo por las ciencias computacionales, muy pronto se hizo evidente que se requería de la perspectiva de otras disciplinas que incorporaran aspectos humanos al diseño de dispositivos y sistemas interactivos, como la ergonomía, las ciencias cognitivas, entre otras. Así surgió la Interacción Humano-Computadora (HCI, por sus siglas en inglés) definida como la disciplina dedicada al diseño, evaluación e implementación de sistemas de cómputo interactivos para uso humano y al estudio de los fenómenos que rodean a la interacción.

El carácter multidisciplinario de HCI se ve reflejado en la currícula de ACM SIGHCI. Un profesor y gran amigo (@sirpeto) siempre nos decía: “en HCI cabemos todos”.

Currícula de la ACM SIGCHI para Interacción Humano-Computadora
Currícula de la ACM SIGCHI para Interacción Humano-Computadora

Gracias a la disciplina de Interacción Humano-Computadora, a partir de la década de los 90 empezaron a popularizarse conceptos como el de usabilidad, diseño de interacción, arquitectura de información, entre otros. Surgieron personajes influyentes en la naciente industria web como Jakob Nielsen, Steve Krug o Alan Cooper, algo así como los tweetstar de HCI, sólo que Twitter aún no existía.

Sin lugar a duda, la usabilidad es uno de los componentes intrínsecos de HCI y el que le permitió traspasar la barrera de la investigación académica y llegar a la industria. La usabilidad se define actualmente como la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico (norma ISO 9241). No siempre fue definida de esa forma tan cool y rimbombante.

La palabra producto sustituyó al término software, empleado en una primera definición de usabilidad (norma ISO 9126), es decir, antes se concebía a la usabilidad como un grado o medida de evaluación únicamente de productos de software; actualmente, cualquier producto, incluso de la vida cotidiana, es susceptible de ser evaluado en términos de usabilidad.

El término “contexto de uso” no figuraba en la definición ISO 9126. Al considerar o reconocer la importancia de la experiencia total con la que un usuario está involucrado durante la interacción con un producto, incluso antes y después de la interacción misma, la usabilidad dio origen a User Experience.

Y como dicen en las películas, aquí termina la historia y comienza la leyenda.

Definición (mínima) de User Experience

Existen tantas definiciones de User Experience como interpretaciones a la mancha de tinta. Sin entrar en controversia, considero que la definición mínima y más aproximada de UX es la generada por la norma ISO 9241-210: Ergonomics of human–system interaction — Part 210: Human-centred design for interactive systems, que dice más o menos así:

Experiencia de Usuario:
Percepciones de una persona y las respuestas resultantes del uso y/o el uso previsto de un producto, sistema o servicio.

NOTA 1. La experiencia del usuario incluye todas las emociones de los usuarios, creencias, preferencias, percepciones, las respuestas físicas y psicológicas, comportamientos y logros que ocurren antes, durante y después de su uso.

NOTA 2. La experiencia del usuario es una consecuencia de la imagen de marca, la presentación, la funcionalidad, el rendimiento del sistema, el comportamiento interactivo y capacidades de asistencia del sistema, el estado físico e interno del usuario como resultado de experiencias previas, actitudes, habilidades y personalidad, y el contexto de uso.

NOTA 3. Usabilidad, si se interpreta desde la perspectiva de las metas personales de los usuarios, puede incluir el tipo de aspectos perceptivos y emocionales típicamente asociados con la experiencia del usuario. Los criterios de usabilidad pueden ser usados para evaluar los aspectos de la experiencia del usuario.

Mi definición de UX es esta:

La experiencia de usuario es todo el conjunto de fenómenos que rodean la interacción de un usuario específico con un producto específico en un contexto específico, antes, durante y después de la interacción misma.

Si tú ves dos elefantes bebés trepando un árbol en esa gran mancha de tinta, quizá compartimos una visión común sobre UX, es lo que yo veo. O Puede ser que no, siendo esto lo deseable, porque en UX también cabemos todos.

Conclusiones

  • UX es un término que ha transitado por una gran variedad de acepciones y matices en un periodo de vida relativamente corto.
  • UX se relaciona y tiene su origen en un conjunto de disciplinas, tecnologías y acontecimientos importantes en la historia que datan desde el último siglo.
  • Es imposible comprender la naturaleza y el sentido de UX sin la existencia previa de una disciplina como Interacción Humano-Computadora y de todas las ciencias que le dan soporte.
  • La usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico. UX es la nueva usabilidad.

Conociendo el contexto que le dio origen, concibe tu propia definición de UX: interpreta la mancha.

Diseñador de Experiencia de Usuario. Scrum Master Certified. Fotógrafo. Ha participado en proyectos vinculados a HCI, usabilidad y UX en el ámbito académico, empresarial y gobierno desde 2007. Es parte del equipo de UX Nights.

Sobre la experiencia de usuario

Se habla mucho sobre “Experiencia de Usuario”, pero ésta es una disciplina amplia que cambia mucho y constantemente. ¿De qué hablamos cuando hablamos de UX?

Ante la cambiante forma de interactuar que el usuario tiene debido a los avances de la tecnología, la ciencia y otras cosas, esta experiencia ha experimentado cambios radicales en su operación, en su orientación teórica y práctica en las últimas décadas. Surgen así varios paradigmas, como el contexto de la temporalidad de cada década y los artefactos que salen al mercado para consumo masivo.

El usuario siempre se encontrará con ciertas limitaciones en la interacción con la tecnología y se ha dedicado más tiempo en la promoción en la inmediatez de resolver las necesidades. Por ejemplo: con la implementación de propuestas de diseño de una interfaz gráfica y/o física vemos que los elementos básicos en el diseño como la iconografía, las imágenes, la navegación, la productividad o el diseño de contenidos son apenas uno de los muchos elementos que permiten una experiencia de usuario enriquecida. Es importante recordar que existen elementos con aspectos cualitativos o cuantitativos que dan valor agregado a la experiencia de un usuario.

He visto que en las distintas emisiones de UX Nights, los asistentes plantean interrogantes a los ponentes sobre quiénes deberían integrar un equipo de UX, cuál es el perfil idóneo que debe tener un a persona que se dedique sólo a hacer análisis o cuáles son las mejores prácticas para hacer análisis de UX, entre muchas otras preguntas.

Las interacciones en la experiencia que tiene un usuario se vuelven posibilidades, dejando ideas sobre cómo una buena experiencia de usuario es aquella donde el enfoque es siempre la interfaz que debe ser siempre accesible, cuál es el equipo idóneo que debe estar involucrado y quién puede hacer un uso más efectivo de la UX.

Las interfaces, sistemas o artefactos siempre presentarán “limitaciones”, y me refiero a las limitaciones que en la experiencia de usuario van cambiando en el momento en el que se incorporan más o menos elementos.

Aquí surgen preguntas importantes: ¿qué va a suceder con la experiencia de usuario como área de análisis e investigación, procesos o incluso como disciplina? ¿Cómo será vista en el futuro cercano? ¿Seguirá llamándose “Experiencia de Usuario”? Así concluyo, dejando más preguntas que respuestas.

Diseñadora gráfica y psicóloga especializada en diseño editorial e hipermedios, ha sido investigadora y consultora en usabilidad, user experience y diseño emocional desde 2007.

Accesibilidad para sitios web

La accesibilidad en aplicaciones web para usuarios invidentes no es difícil de implementar, si se conocen las especificaciones que le dan soporte, como WAI ARIA.

De acuerdo con el último censo de INEGI en el año 2010, en México había entonces cerca de 1,292,201 personas con discapacidad visual, esto es poco más del 1% de la población del país. Si sumamos a las personas que no son completamente invidentes pero tienen algún problema visual el número sube a 48,575,560 personas, o al 43.24% de la población, de los que la tercera parte son niños en edad escolar.

En México la segunda discapacidad más común es la visual, y es la más temida por la población en general. No es sorpresa si consideramos que de toda la información que una persona recibe en su vida, el 80% de ella ingresa por los ojos. Esto es particularmente cierto cuando hablamos de la web y de los medios digitales.

Muchas personas que trabajan diseñando o desarrollando sitios web creen que para hacer sus sitios accesibles es necesario una tecnología adicional a lo que ya utilizan. En realidad no se necesita nada adicional, sino tener en consideración algunas guías para que su trabajo sea accesible a todas las personas, incluyendo a las que tienen problemas visuales.

La W3C ha creado una especificación técnica para la implementación de accesibilidad para sitios web llamada WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), enfocada especialmente a aplicaciones web que utilizan Javascript y AJAX, ya que estos patrones de desarrollo cambian dinámicamente el contenido de una página web, haciéndola poco accesible para personas que utilizan lectores digitales u otras tecnologías para usuarios con discapacidades.

WAI-ARIA describe cómo añadir contenido semántico y metadatos al contenido HTML para hacer los controles de la UI y el contenido dinámico más accesible. Por ejemplo, con WAI-ARIA es posible identificar enlaces en el menú de navegación incluso si éste se encuentra colapsado.

La especificación WAI-ARIA está basada en tres diferentes atributos: roles, estados y propiedades. Estos atributos tienen las siguientes funciones:

  • Roles (roles): describen algunos de los elementos y widgets comunes en la UI web pero que no están disponibles en HTML, como sliders, pestañas, etc., contruidos con HTML, CSS y JavaScript. También se utilizan para describir la estructura de la página incluyendo encabezados, tablas y otros elementos.
  • Propiedades (properties): describen los estados de los widgets. Por ejemplo, cuando un elemento en la página es “arrastrable”, tiene un elemento popup asociado con él.
  • Estados (states): describen si un elemento es interactivo o no, es decir, los ‘estados’ informan a los lectores digitales si el estado de un elemento en la página es ‘ocupado’, ‘deshabilitado’, ‘seleccionado’ u ‘oculto’.

Revisemos este código web sencillo para una navegación de pestañas:

<!-- ¿Cómo sabrías que este es un widget de pestañas solo viendo el código? -->

<ol>
    <li id="chapter1Tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel">Contenido del capítulo 1</div>
    <div id="chapter2Panel">Contenido del capítulo 2</div>
    <div id="quizPanel">Contenido del examen</div>
</div>

Ahora el mismo código, pero con WAI ARIA:

<!-- He añadido atributos de roles para describir cada pestaña y su contenido asociado -->

<ol role="tablist">
    <li id="chapter1Tab" role="tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab" role="tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab" role="tab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel" role="tabpanel" aria-labelledby="chapter1Tab">
        Contenido del capítulo 1
</div>
    <div id="chapter2Panel" role="tabpanel" aria-labelledby="chapter2Tab">
        Contenido del capítulo 2
</div>
    <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
        Contenido del examen
    </div>
</div>

Al añadir los atributos de WAI-ARIA al etiquetado HTML, las tecnologías de apoyo a personas discapacitadas pueden interactuar también con controles creados con JavaScript. De hecho, la implementación de WAI-ARIA está pensada para hacer accesibles sitios en navegadores viejos sin soporte a las etiquetas semánticas de HTML5.

El grupo de trabajo de WAI ARIA en el W3C ya está trabajando en una nueva versión de la especificación para integrarla con HTML5 y otros lenguajes como SVG. También han creado una herramienta llamada “Generador de reportes de evaluación de accesibilidad de sitios web” para revisar la integración de WAI ARIA y otras especificaciones de accesibilidad en sitios web existentes.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.