UX / UI

De qué hablamos cuando nos referimos a experiencia de usuario. Si se busca el concepto en Internet, la cantidad de resultados arrojados por la web puede agobiar y confundir bastante. La jerga técnica tampoco ayuda lo suficiente para despejar las dudas. Este artículo pretende desentrañar el concepto y llevar un poco de luz a esta disciplina tan en boga en la actualidad.

Comienza este contenido con el primer interrogante:

¿Qué es la experiencia de usuario?

Experiencia de usuario es la traducción de User eXperience (UX), y contempla todos los aspectos que participan en la interacción del usuario final con la empresa, sus servicios y productos. Tiene como objetivo principal satisfacer sus necesidades y deseos sin impedimentos ni frustraciones.

Por qué estamos donde estamos

A comienzos del siglo XX, durante la segunda Revolución Industrial, comienzan a crearse diferentes tipos de máquinas para la realización de procesos industriales. Fue entonces necesario optimizar la eficiencia y facilidad del uso de dichas máquinas, contando con lo que se denomina actualmente experiencia de usuario.

En esta época comienza el Taylorismo, un sistema de organización del trabajo y sus tiempos de ejecución. Se basa en la metodología empresarial que contempla la producción en cadena y división del trabajo. Dicho sistema fue creado por el ingeniero estadounidense, Frederick Taylor (1856-1915).

De la mano del Taylorismo nace el Fordismo, un sistema de producción en cadena implementado por el empresario y emprendedor estadounidense, Henry Ford (1863-1947). Este sistema, a diferencia del Taylorismo, incorpora la mecanización que contempla producción y trabajo como un todo que logra mejores resultados.

Otras de las disciplinas provenientes de la experiencia de usuario es la ergonomía, que según la definición de la Asociación Internacional de Ergonomía: “es el conjunto de conocimientos científicos aplicados para que el trabajo, los sistemas, productos y ambientes se adapten a las capacidades y limitaciones físicas y mentales de la personas.”

Otro gran aporte a la experiencia de usuario fue la Bauhaus (1919), escuela de arquitectura, diseño, artesanía y arte fundada por el arquitecto, urbanista y diseñador alemán, Walter Gropius (1883-1969), que plantea: “la forma se adecua a la función o el uso”. La Bauhaus considera un precedente de la usabilidad.

Las Leyes de la Gestalt, una serie de reglas que explican el origen de las percepciones a partir de los estímulos, también fue una herramienta determinante para los diseñadores modernos. Su ley principal fue: “el todo es más que la suma de sus partes”.

Algunos consideran a Walt Disney (1901-1966) como el primer diseñador de experiencia de usuario, con la creación de Disneyland, un parque temático que ponía al usuario como centro de la experiencia para generar momentos únicos. Un concepto innovador, creado alrededor de 1955, que utilizaba los datos de tráfico del público para mejorar el servicio, una práctica usada actualmente en la experiencia de usuario.

En 1960, surge la disciplina científica Human Computer Interaction (HCI), en español Interacción Persona-Ordenador (IPO), creada para mejorar la comunicación entre personas y máquinas. Esta disciplina, fruto de la psicología aplicada y la ergonomía, estudia la memoria y la adquisición de habilidades, la percepción y el aprendizaje. Por ejemplo: la resolución de problemas, el sistema de búsqueda o procesamiento de la información. Se logró de esta manera, sentar las bases teóricas al diseño y la evaluación de aplicaciones informáticas.

En 1971, el estadounidense Wilfred J. Hansen, en su libro User Engineering Principles for Interactive Systems, en español Principios de ingeniería del usuario para sistemas interactivos, realiza la primera enumeración de principios para el diseño de sistemas interactivos.

En esta década, comienza a desarrollarse en Xerox la primera interfaz gráfica, con la utilización de ventanas, ratón, iconos y puntero, un trabajo basado en las investigaciones del Stanford Research Institute y que Apple y Microsoft utilizaron como punto de partida para los sistemas operativos de sus ordenadores.

En los años 90, con el auge de internet, comienzan a surgir muchas terminologías utilizadas actualmente en la experiencia de usuario: usabilidad, arquitectura de la información, y diseño de interacción, entre tantas otras.

A mitad de los 90, el ingeniero, informático y psicólogo estadounidense, Donald Norman, considerado el padre de la experiencia de usuario, publica el libro The design of everyday things, en español La psicología de los objetos cotidianos. Posteriormente, se une a los equipos de trabajo de Apple y autodenomina su puesto como “User Experience Architect”, cuya traducción es Arquitecto en experiencia de usuario.

Don Norman es el cofundador de Nielsen Norman Group, un grupo de consultores dedicados a la investigación de disciplinas relacionadas a la experiencia de usuario.

El diseño UX y sus metodologías

El diseño UX, o diseño de experiencia de usuario, no se refiere al diseño gráfico de una web ni a su estética, sino al uso de diversas habilidades en pos de la creación de una nueva experiencia. Para tal fin existen varias metodologías, pero este artículo desarrollará dos de las más importantes: Modelo de doble diamante y Design Thinking.

El modelo de doble diamante

En diseño, todas las disciplinas tienen en común el mismo proceso creativo denominado: El Doble Diamante, un mapa visual con la forma de dos diamantes (rombos). Uno de ellos simboliza el Proceso Creativo: las fases Descubrir y Definir, y el otro corresponde al proceso de Prototipado: las fases Diseñar y Desarrollar.

Descubrir (Discover): Esta fase sirve para entender y contextualizar el problema a resolver. Es necesario tener una mente abierta, sin aferrarse a una idea o posible solución. El protagonista es el usuario y hay que preguntarse qué necesita y evaluar cómo se comporta.

Definir (Define): La fase descubrir genera mucha información y es necesario gestionarla. El material obtenido se filtra y organiza para lograr una “definición” del problema. Tiene como finalidad elaborar un brief creativo que contemple: el problema, contexto y alcance del proyecto, las oportunidades y los recursos descartados.

Desarrollar (Develop): Esta etapa se encarga de evaluar soluciones diversas al problema que surgió en las fases descubrir y definir. Puede abarcar diferentes disciplinas y metodologías, pero siempre el foco deberá estar en desarrollar prototipos con iteraciones previamente testeadas a través del feedback con los usuarios.

Entregar (Deliver): En esta etapa el usuario, a través de la validación, determina cuál es la opción para resolver el problema planteado. Después de esto, el producto o servicio pasa a producción y se lanza finalmente al mercado. Una vez lanzado el producto o servicio, el ciclo de mejoras e interaciones continúa con la participación de los usuarios.

Design Thinking

Design Thinking, cuya traducción es Pensamiento de Diseño, es una metodología orientada plenamente al usuario, la cual permite la generación de soluciones de acuerdo a problemas planteados. Los productos y servicios generados mediante Design Thinking aportan valor a las personas, ya que porque fueron diseñados para ellas. Esta metodología se divide en las siguientes etapas: empatizar, definir, idear y prototipar.

Empatizar: Aquí se define el público al cual está dirigido el producto o servicio. Es el momento de ponerse en la piel del usuario para identificar sus deseos y necesidades. En esta etapa se marcan los objetivos de investigación y se utilizan técnicas para recopilar datos, por ejemplo: la entrevista.

Definir: Es el momento de recopilar e identificar las posibilidades de brindar soluciones relevantes para los deseos y necesidades del usuario. Existe una técnica denominada Clusterizado, en la cual se vuelca la información recopilada en post its multicolores, se la agrupa y se le asigna una frase que sintetice dicha información.

Idear: En esta etapa se diseña la solución. En la fase Idear o Ideación se trata de abrir la mente y generar multiplicidad de ideas para filtrarlas posteriormente. El brainstorming es la herramienta por excelencia, pero existen también otras que posibilitan el vuelco de ideas por parte del equipo.

Prototipar: En esta fase se seleccionan las ideas anteriores para prototipar. Es el momento de moldearlas y volverlas tangibles para exponerlas al usuario, quien nos dará su feedback sobre la posible solución o no a sus necesidades o deseos. Es importante entender que es una etapa de aprendizaje y no de venta.

Roles en UX: la suma de las partes forma un todo

La experiencia de usuario es un proceso en el cual intervienen diferentes perfiles especializados en los equipos de trabajo. Estos perfiles provienen, desde la antropología, la ingeniería o la psicología, hasta la comunicación y las letras. A continuación, se desarrollan algunos de ellos:

UX Researcher

Se encargan de la investigación cualitativa y cuantitativa durante el proceso de diseño de un producto o servicio con el objetivo lograr un diagnóstico. Comprender el comportamiento del usuario y ponerse en sus zapatos es clave para este rol.

Los UX Research ayudan a encuadrar un problema y descubrir o validar una solución posible a través de las respuestas generadas con personas reales. Algunas de las técnicas y herramientas más utilizadas son: las entrevistas y encuestas, métricas de negocio, pruebas de usabilidad y card sorting, entre otras.

UI Designers

Los UI Designers (User Interface Designers), cuya traducción es Diseñadores de interfaz de usuario, son los encargados de diseñar la experiencia visual del producto. En este rol es importante entender cómo se percibe la experiencia, teniendo en cuenta la usabilidad, patrones de interacción y elementos estéticos.

Algunas de sus funciones son: el diseño de interacción, es decir, la forma en que responde el sistema; las guías de interacción, que comprende los estados del sistema; el diseño de sus elementos: botones y formularios; diseño visual, tanto iconos, como imágenes; y las guías de estilo a seguir por el resto del equipo, como las paletas de color y sus fuentes (fonts), entre otras.

UX Writer

Según la Licenciada en Ciencias de la comunicación y UX Writer argentina, Marisol Parnofiello, en su libro UX Writing en español. El ABC de la disciplina con Ñ, define el rol del UX Writer como: “escritor de productos y servicios digitales que se encarga de escribir todo lo que hace a la interfaz de un producto o servicio digital; los textos con los que el usuario se vincula para lograr tareas.”

En este rol deben realizarse varias preguntas, por ejemplo: qué sucede, a quién le sucede, por qué le sucede, cuándo sucede y cómo se puede solucionar.

UX o UI: opuestos que se complementan

Llega el momento de la gran confusión: ¿es lo mismo UX que UI?, pues no. Tanto UX como UI son los encargados del diseño de productos y servicios digitales y ambos coexisten en la experiencia de usuario. Una comparación muy gráfica es pensar los roles como un iceberg. UX sería la parte “oculta”, y UI la “visible” del proceso.

Cuando se habla de UI, se refiere específicamente al dibujo de las pantallas (lo visible) con la finalidad de que sean amigables, llamativas y placenteras para los usuarios durante la navegación. Un ejemplo: Netflix. Una plataforma cargada de información (películas, series y documentales). Para organizar visualmente su contenido y que el usuario sepa a dónde dirigirse es necesario el rol del UI para gestionarlo.

En cambio, si se piensa en UX, se refiere a toda la investigación que está detrás (lo oculto) en el proceso.

Un UX se encarga del Flujo de tareas (Task flows), aquellos pasos que recorre un usuario para realizar determinada acción. Por ejemplo: si la tarea es la compra de un servicio, será necesario evaluar los pasos que recorrerá el usuario hasta llegar a la compra del mismo. Es determinante detectar las situaciones en las cuáles el usuario abandona este proceso, caso contrario la empresa no convierte, es decir no se produce la venta.

UX también se ocupa de la usabilidad, la facilidad de uso de un producto o servicio digital para los usuarios, los cuales deben ser fáciles de ubicar, leer e interactuar durante la navegación para lograr el objetivo sin atravesar frustraciones.

La accesibilidad es otro punto a tener en cuenta. Un UX se encarga de las experiencias para personas con discapacidad que incluye aquellas discapacidades relacionadas con la edad, usuarios inexpertos y limitaciones con el idioma.

Otro punto, es la arquitectura de la información. Su rol principal es organizar la información de un producto o servicio en la web. Por ejemplo, una plataforma de e-learning tiene muchos cursos para ofrecer y se necesita organizar los contenidos para que el usuario no se encuentre en un callejón sin salida. La arquitectura de la información es como el plano de una vivienda.

Accesibilidad y Usabilidad: juntas por la causa

Accesibilidad

El objetivo de la accesibilidad es crear webs para personas con discapacidad. Están basadas en la Web Content Accessibility Guidelines (WCAG) 2.1, en español Pautas de accesibilidad al contenido web, una serie de documentos desarrollados por la W3C World Wide Web Consortium, cuya traducción es Consorcio Mundial de la red, y que en cooperación con organizaciones de todo el mundo, tienen el objetivo de proveer un estándares para la accesibilidad de contenido web.

WCAG 2.1 consiste en un: “conjunto de directrices tecnológicas independientes y criterios de éxito para ayudar a crear contenido web accesible para, y utilizable por, personas con discapacidades. Brindan asesoramiento a autores, diseñadores y desarrolladores de contenido web para garantizar que los recursos que producen sean lo suficientemente accesibles para la mayor cantidad de personas, independientemente de cualquier discapacidad que tengan; por ejemplo, problemas visuales o auditivos, dificultades de aprendizaje, limitaciones relacionadas con la edad, entre otras.”

Se basa en 4 principios:

Perceptible: la información debe ser percibida con facilidad y de manera instantánea por los usuarios, incluyendo textos alternativos para todos los contenidos, adaptables a diversas formas sin perder la información, y contando con alternativas al contenido tempo-dependiente.

Operable: la navegación para los usuarios debe ser accesible desde cualquier dispositivo, permitiendo acceder a todas las funciones a través del teclado. Es importante brindarles a los usuarios tiempo suficiente para la lectura y comprensión del contenido, evitando aquellos que provoquen frustración.

Comprensible: el contenido debe ser legible, claro y comprensible para evitar equivocaciones. El proceso de navegación en la web tiene que ser predecible y proporcionar ayuda a los usuarios para prevenir o corregir los errores.

Robustez: el contenido debe ser suficientemente robusto y compatible para poder interpretarse por múltiples agentes de usuarios actuales y futuros, incluyendo las tecnologías de asistencia.

Usabilidad

Jakob Nielsen, considerado el maestro de la usabilidad, fue el encargado de crear las 10 reglas generales para el diseño de interacción denominadas “heurísticas”. Estas son:

1. Mostrar estado del sistema: el usuario debe saber en todo momento lo que está sucediendo.

2. Hablar el lenguaje del usuario: utilización de palabras, frases y conceptos adecuados durante la navegación.

3. Control y libertad: el usuario debe navegar libremente contemplando situaciones de equivocación y ante estas pueda hacer y deshacer sin frustraciones.

4. Consistencia y estándares. seguir convenciones establecidas para que el usuario no deba preguntarse si determinados términos o acciones responderán siempre de igual manera.

5. Prevenir errores: nunca mejor acertado el dicho “mejor prevenir que curar”, por eso es mejor ayudar a los usuarios a no cometer errores antes que decirles cómo solucionarlos.

6. Aliviar la carga en la memoria: el usuario debe retener la menor cantidad de acciones y opciones, haciéndolas visibles en todo momento. La disposición de las instrucciones de uso del sistema debe ser de fácil acceso.

7. Flexibilidad y eficiencia. los atajos son maneras de lograr mayor facilidad de navegación, generalmente utilizados por usuarios expertos.

8. Estética y minimalismo: tener en cuenta la jerarquía de la información al momento de diseñar los diálogos, considerando aquella más relevante para que no compita con la que no lo es.

9. Comunicar errores con claridad: nada más frustrante para el usuario que un mensaje de error durante la navegación, este debe ser claro y sugerir una solución al problema.

10. Ayuda y documentación: es necesario ofrecerles ayuda y documentación a los usuarios, las cuales deben ser fáciles de encontrar y ser diseñadas para su correcta interpretación.

El Espacio Vacío: la tendencia del momento

El espacio vacío o White Space se define como el espacio vacío alrededor de cada elemento del layout (diseño). Los criterios que utiliza son los siguientes:

• Mejorar la experiencia de usuario (UX): La utilización de White Space jerarquiza y limita los elementos de la web favoreciendo a su navegación. Un ejemplo: las tiendas online, quienes se ven beneficiadas con el uso del espacio vacío, ya que mejora la experiencia de usuario y logra mayor conversión.

• Favorecer la lectura: Agregar espacio entre títulos y párrafos son las bases de la maquetación editorial que proporciona espacio a las jerarquías tipográficas (H1, H2) mejorando la estructura visual para su lectura.

• Creación de grupos: La Ley de proximidad plantea que los elementos con poca distancia entre sí pertenecen al mismo grupo. Aplicando esta regla al diseño se pueden crear y organizar grupos sin la utilización de líneas divisorias.

En el mundo del diseño UX intervienen diferentes metodologías, roles y herramientas. Este artículo pretende dar el puntapié inicial a una serie de contenidos relacionados a la experiencia de usuario. Por esta razón, te invitamos a estar atento a nuestro blog, estaremos publicando material especializado sobre esta apasionante temática.