La experiencia del usuario ocurre cuando nuestros usuarios tocan, ven, escuchan, sienten y usan aplicaciones, sitios, dispositivos, servicios, productos y sistemas. 

El diseño de la experiencia del usuario se trata de cómo hacemos que estas experiencias se sientan sin esfuerzo y se adapten perfectamente a las necesidades de nuestros usuarios y logren los objetivos comerciales. 

Aunque esta experiencia no depende solamente del diseño, sino que implica lo que representa una marca y lo que hace sentir a sus usuarios.

El objetivo es buscar todas las formas posibles para facilitarle la vida al usuario, y para eso que hay que tener en cuenta varios temas de la psicología.

• La percepción: que nos llama la atención, cómo influyen los colores, como miramos la pantalla.

• Las emociones: cómo se generan y qué implicaciones tienen.

• La memoria: pensar en las limitaciones de las personas para recordar.

• La mentalidad: creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean.

• La motivación: cómo generamos motivación en los usuarios.

• El aprendizaje: tenemos que enseñarle los pasos que tiene que seguir para que consiga su objetivo.

La UI (por sus siglas en inglés User Interface) o en español Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema. 

La interfaz de usuario o UI es el conjunto de elementos de la pantalla que permiten al usuario interactuar con una página web, es la suma de una arquitectura de información + patrones de interacción +  elementos visuales.

Uno de los expertos a nivel mundial en UI es Jakob Nielsen, quien ha desarrollado una serie de mejoras en cuanto a usabilidad e interfaz en la web. Según Nielsen, los elementos más importantes de una UI son los siguientes.

• Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.

• Ayuda al usuario: el sistema de navegación tiene que estar a la vista y también tiene que incluir un sistema de búsqueda adicional.

• Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).

• Diseño funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere.

Design Thinking es un proceso iterativo en el que buscamos comprender al usuario, cuestionar las suposiciones y redefinir los problemas en un intento de identificar estrategias y soluciones alternativas que podrían no ser evidentes instantáneamente con nuestro nivel inicial de comprensión. 

Design Thinking gira en torno a un profundo interés en desarrollar un entendimiento de las personas para quienes diseñamos los productos o servicios. 

Nos ayuda a observar y desarrollar empatía con el usuario objetivo y cuestionar el problema, cuestionar los supuestos y cuestionar las implicaciones.

• Empatizar: Debemos ser capaces de ponernos en la piel de las personas para generar soluciones consecuentes.

• Definir: filtramos la información recopilada, y nos quedamos con lo que realmente aporta valor.

• Ideamos: creamos una propuesta con el objetivo de generar varias opciones.

• Prototipar: construimos un modelo “rápido” que nos ayudará a dar forma a lo que hasta ahora era una idea.

• Testeamos: ahora lo probamos con la ayuda del público objetivo hacia el que se orienta la solución.

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. 

Se mide estudiando la relación que se produce entre las herramientas (sistema de navegación, las funcionalidades y los contenidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo.

Abordar la Usabilidad implica también revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen. 

Facilidad de aprendizaje: en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla y realizar operaciones básicas.

Facilidad y eficiencia de uso: la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.

Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las características y forma de uso para volver a utilizarlo a futuro.

Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios cuando deban enfrentar los errores al usar el sistema.

Satisfacción subjetiva: satisfacción de los usuarios en cuanto a la facilidad y simplicidad de uso de sus pantallas.

Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo.

Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios.

Control y libertad del usuario: a veces los usuarios eligen funciones por error y necesitan una salida de emergencia.

Consistencia y estándares: los usuarios no deben cuestionarse si las acciones significan lo mismo que en las convenciones establecidas.

Prevención de errores: realizar un diseño preventivo en la ocurrencia de problemas.

Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones y ser recuperables cuando sea necesario.

Flexibilidad y eficiencia de uso: lo accesos directos ofrecen una interacción más rápida a los usuarios expertos.

Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada. 

Ayudar a los usuarios a diagnosticar y recuperarse de errores: los mensajes de error deben ser claros y simples y sugerir una solución.

Ayuda y documentación: es necesario ofrecer apoyo fácil de buscar y con foco en lo importante.

El tamaño de la fuente no solo debe adaptarse al tamaño de la pantalla, sino que también ha de tener en cuenta la distancia normal que hay entre esta y el usuario. 

Seguramente dicha distancia será menor para la pantalla de un smartphone que para grandes monitores de un equipo de mesa. El tamaño de la fuente también depende de la resolución de la pantalla.

El interlineado debería ajustarse siempre a la pantalla, el interlineado justo para una buena legibilidad depende, entre otras cosas, de la longitud de las líneas.

El diseño de la página ha de dejar, asimismo, suficientes espacios tipográficos o áreas sin escritura en el fondo, ya que esto también repercute en la legibilidad de un texto.

No hay que olvidar, por otro lado, que el color de la fuente debería ser algo más intenso y el contraste algo más alto para una mejor visualización en pantallas pequeñas. 

Los dispositivos móviles no se usan siempre en espacios cerrados, sino precisamente en movimiento y en espacios abiertos, donde no siempre se pueden controlar las condiciones atmosféricas de luz. 

La accesibilidad se trata de empatizar con el usuario, y tener una web no accesible, supone dejar de lado a casi 50 millones de habitantes de América Latina.

Existe un porcentaje de la población con problemas para percibir los colores, ya sea a la hora de diferenciar determinados colores o porque padecen alguna forma de ceguera que solo les permite percibir un espectro reducido de colores. 

El contraste de luminosidad entre el color del fondo y el color del texto debe ser suficiente para garantizar una buena legibilidad del texto en situaciones desfavorables de mucha luz, pantallas con poco contraste o brillo y para personas con problemas de visión.

Las pautas de accesibilidad del contenido web establecen en su nivel AA el ratio de contraste suficientes de 4.5 para textos menores a 18 puntos y de 3 para textos mayores a 18 puntos.

Podemos decir que con mayor contraste mayor facilidad de lectura del texto, con independencia de la combinación de colores.

En la mayoría de las situaciones, lo más recomendable es texto negro sobre fondo blanco o colores muy cercanos a estos, como gris oscuro y tonos sepia.

Atraer

• ¿A quiénes estamos atrayendo?

• ¿Qué están buscando?

• ¿Dónde están buscando?

Clarificar

• ¿Qué problema estamos resolviendo?

• ¿Cómo lo estamos resolviendo?

• ¿Qué espera el usuario?

Disponibilizar

• ¿Dónde comenzará proceso del usuario?

• ¿Cómo eliminamos la fricción y obstáculos?

• ¿Dónde terminará el proceso del usuario?

Adaptación

• ¿Dónde está el usuario durante el día?

• ¿Cómo está accediendo al software?

• ¿Cómo nos acomodamos a su rutina diaria?

El factor wow

• ¿Qué sabemos del usuario?

• ¿Cómo podemos aprender de ellos?

• ¿Cómo entregarles más de lo que esperan?

Extender

• ¿Qué herramientas le entregamos a los usuarios para que nos promocionen?

• ¿Cómo estamos obteniendo feedback de ellos?

Definir perfiles y situaciones que se utilizarán, ayuda a que todo el equipo determine los límites de las funcionalidades y contenidos que deben implementar.

Los arquetipos de usuarios son las personas que utilizamos para entender las metas y modelos mentales. 

Ponemos a las personas en escenarios y bosquejamos para encontrar el diseño de interacción adecuado.

Documentamos los cambios en nuestro diseño para comunicarlos a todos los miembros de nuestro equipo.

Por ejemplo, para un sitio que ofrezca trámites de un servicio determinado, será importante determinar quiénes son los usuarios habituales del mismo. 

Si se sabe que son de la tercera edad y con limitados conocimientos sobre el uso del computador, se podrá diseñar una "persona" que sea un hombre que sólo quiere realizar el trámite en el menor número de pasos posibles, con una interfaz con la menor cantidad de elementos tecnológicos y la mayor simplicidad posible, con el fin de hacer la acción que se necesita y terminar consiguiendo un comprobante que le ayude posteriormente a demostrar que ya hizo la gestión.

Estrategia y contexto (PO)

• Análisis de la competencia

• Análisis de clientes

• Estructura del producto / estrategia

• Desarrollo de contenidos, redacción y terminología

• Diseño de producto

El proceso (UX)

• Investigación y Brainstorming

• Elegir dirección

• Entrevistas con personas

• Construir personas

• Hacer mapas de empatía

• Determinar objetivos de usuario

• Crear un flujo de usuario

• Arquitectura de información y taxonomía

Wireframes y prototipos (UI)

• Wireframing

• Diseño de interfaz

• Diseño de interacción y usabilidad

• Prototipar

• Revisar checklist

Ejecución y Analítica (DE)

• La planificación del desarrollo

• Coordinación con UI UX Designer

• Coordinación con desarrolladores

• Objetivos de seguimiento e integración

• Análisis e iteración

Figma

Figma es un programa que ofrece todas las herramientas necesarias para diseñar un proyecto. Sobre todo es ideal para crear interfaces de usuario tanto para web como para móvil. También permite crear prototipos,  generar código para el traspaso (hand-off) e ilustrar.

Componentes

Cuando hay un elemento que se deben utilizar en varias pantallas, Figma da la oportunidad de convertirlo en un “componente” para que cualquier cambio que se aplique sobre éste, quede automáticamente actualizado en sus instancias en todas las pantallas.

Plugins

Herramienta colaborativa

Pero lo más potente que tiene Figma es que permite que varias personas puedan colaborar dentro del mismo proyecto simultáneamente y a tiempo real. Además, siempre se van guardando los cambios en el archivo de forma que los usuarios siempre verán los últimos cambios sin la necesidad de estar siempre sincronizados o de enviarse documentos. En definitiva, eso ayuda a que varios usuarios puedan trabajar, por ejemplo en el diseño de una app, de forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado.

Trello

Trello es una herramienta para la organización de tareas. Es ideal para la coordinación de equipos de trabajo y se basa en la metodología Kanban, la cual propone un sistema de uso colaborativo. Para utilizar esta aplicación, ya sea en su versión de escritorio o de dispositivos inteligentes, solamente deberemos registrarnos con un correo electrónico y posteriormente ingresar a trabajar.

Respecto a su funcionamiento, la distribución de pendientes se realiza en base a un tablero principal, en donde se generan diversas listas con títulos para cada etapa o ítem del proyecto.

• En cada una de las listas, separadas por temática, se pueden agregar varias tarjetas (asociadas a las tareas que contiene cada uno de los ítems del proyecto).

• Las tarjetas, que contienen actividades por realizar, pueden ser editadas y re-ordenadas, arrastrándolas y soltándolas con el cursor del mouse.

• En las tarjetas es posible incorporar imágenes, plazos de entrega, listas de tareas, etiquetas separadas por color y comentarios asociados a cada tarea.

• En palabras simples, el tablero es la página que contiene todas las listas asociadas a un proyecto en específico, que pueden ser añadidas o archivadas.

Images

• https://www.freepik.com/

• https://www.pexels.com/

• https://unsplash.com/

• https://pixabay.com/

Ilustraciones

• https://undraw.co/illustrations

Iconos

• https://www.flaticon.com/

• http://thenounproject.com/

Vectores

• https://www.freepik.com/

Inspiration

• https://www.pages.xyz/

• http://www.awwwards.com/

• http://www.webbyawards.com/

• https://bestwebsite.gallery/

• https://www.thebestdesigns.com/

Reference

• http://uxarchive.com/

• https://attachmedia.com/guia-ux/

• https://uxdesign.cc/

• https://uxplanet.org/

• https://api.slack.com/best-practices

• https://www.designkit.org

• https://diytoolkit.org/tools