técnicas-y-herramientas-ux
Marketing digital

Técnicas y herramientas de diseño UX

Irene Ferrer, Docente de la Escuela, participó en los Directos #EnCasaConIEM donde disfrutamos con ella hablando sobre el diseño de experiencia de usuario y las fases de diseño del ‘design thinking’.

A continuación os dejamos un listado de las herramientas que mencionó en la charla. Como comentamos, las fases del diseño son las siguientes: investigación, definición, ideación, prototipado y por último validación. Hay que recordar que el proceso de diseño no es un proceso lineal, sino que es un proceso cíclico e iterativo.

Fase de investigación

Durante la fase de investigación podemos acercarnos a nuestro usuario para entender sus necesidades, entorno, preocupaciones, motivaciones, etc. Para ello, podemos realizar entrevistas 1:1, métodos co-participativos, observación contextual e investigación de mercado.

✐ No existe una receta perfecta ni una receta única a igual que no existen dos usuarios exactamente iguales.

Para las entrevistas 1:1, métodos co-participativos y observación podemos utilizar herramientas como Mural o Excel para digitalizar de forma colaborativa toda la información que nos van facilitando nuestros usuarios.

Mural ‘https://mural.co/’ herramienta fabulosa para que todos los oyentes puedan escribir sus notas de forma colaborativa. Dispone de un amplio abanico de plantillas de diseño organizadas por sus fases/necesidades.

herramientas ux mural
https://mural.co/

Investigación de mercado. En el caso de la investigación de mercado podemos emplear fuentes de investigación de mercado de pago o gratuitas. A continuación adjunto un listado de estudios de mercado y de comportamiento del usuario muy interesantes.

Think with google. Nos ofrece insights y recomendaciones digitales de marketing, experiencia de usuario, comportamiento… Tiene opción de suscripción. https://www.thinkwithgoogle.com/

herramientas ux insights
https://www.thinkwithgoogle.com/

TCK. Publica anualmente un informe anual sobre las últimas tendencias de consumo en el mercado. Realiza su informe con las siguientes cifras; 160 estudios150.000 entrevistas200 Focus Group o 600 entrevistas en profundidad y lo comparte gratuitamente en su web.https://the-cocktail.com/insights/tendencias-del-consumidor-espanol-en-2018

BBVA Research. Investigaciones de consumo de los usuarios e impacto económico segmentado por geografías. https://www.bbvaresearch.com/

Nilsen. Nielsen Holdings plc (NYSE: NLSN) es una compañía global de medición y análisis de datos que proporciona una radiografía completa y precisa de los consumidores y los mercados en todo el mundo. https://www.nielsen.com

Telefónica. Informe anual sobre los usuarios y el consumo de las tecnologías. El informe de 2019 de Telefónica hace foco en humanizar la tecnología y utilizar este medio para conectar a los usuarios.https://www.telefonica.com/es/web/about_telefonica/publicaciones/informes-anuales

Fase de definición

Pasemos a la siguiente, fase de definición, en esta fase tenemos que volcar todo lo que sabemos y hacer una convergencia de toda la información que hemos sacado, es cuando empezamos hacer perfiles, mapas de empatía, journeys… En este caso hay herramientas colaborativas online que funcionan estupendamente por ejemplo:

UX Pressia. Tiene plantillas para crear customer journeys, personas e impact maps. Además ofrece plantillas adaptadas al sector al que vayamos dirigido. https://uxpressia.com/

herramientas ux uxpressia
https://uxpressia.com/

Miro. Miro es una herramienta muy flexible, la podemos emplear para investigación, diseño, para crear flujos de trabajo, estrategias y planificación así como para realizar diagramas para mapear nuestro sitio o servicio. https://miro.com/

herramienta ux miro
https://miro.com/

Custellence. Esta herramienta es exclusiva para realizar journeys pero permite personalizarlos con mucho detalle. https://custellence.com

herramienta ux custellence
https://custellence.com

Prototipado

Una vez definido el alcance del proyecto y el backlog de tareas lo demás es cantar y coser. Seleccionamos la herramienta colaborativa de prototipado que en la que queremos trabajar, creamos la galería en caso de que no exista de forma colaborativa y a tirar wireframes. Herramientas colaborativas para prototipado;

Axure. Axure es una de las herramientas más potentes que existen para hacer interacción, permite inyectar código y generar variables. Ideal para diseños que requieren mucha interacción como banca, brokers, logística… Aunque no se suele utilizar para diseño visual, ofrece las funciones básicas para que se pueda llevar a cabo. Disponible para Mac y PC. https://www.axure.com

herramienta ux axure
https://www.axure.com

Adobe XD. XD Ofrece la posibilidad de hacer el visual y hacer animaciones, aunque su verdadera potencia está en el visual y permite aprovechar diseños realizados en psd. La interacción no es tan potente como la de Axure pero los acabados del visual son más potentes. Disponible para Mac y PC. https://www.adobe.com/es/products/xd.html

herramienta ux adobe xd
https://www.adobe.com/es/products/xd.html

Sketch. Es el programa estrella, el más utilizado por los diseñadores, combinado con el plugin Craft permite interconectar pantallas y exportarlas a Invision, donde podemos seguir generando animaciones y subirlo a la nube para poder visualizarlo. https://www.sketch.com/

herramienta ux sketch
https://www.sketch.com/

Invision. Desarrollada principalmente para crear interacciones, con esta herramienta podemos subir los diseños creados en Photoshop, Skechtapp o directamente imágenes para posteriormente ser animado. https://www.invisionapp.com

herramienta ux invision

Arquitectura

La arquitectura de la información consiste básicamente en que el usuario pueda encontrar lo que está buscando satisfactoriamente. Se compone de 4 ingredientes básicos; taxonomía, jerarquía, búsqueda y navegación.

Optimal Sort. Es una herramienta muy potente que nos permite hacer test de arquitectura de forma online. Nos devuelve los resultados de forma gráfica, además permite hacer pruebas de forma gratuita con 10 usuarios. https://www.optimalworkshop.com

herramienta ux optimalsort
https://www.optimalworkshop.com

Test con usuarios

✐ Hay que probar para errar y errar para aprender de nuestro usuario.

Hotjar. Hotjar es una herramienta todo en uno ya que incluye tanto analítica como la recogida de feedback de los usuarios. Esta herramienta tiene como objetivo ayudarte a entender lo que los visitantes hacen en tu web. Algunas funcionalidades que dispone Hotjar son; crear mapas de calor, grabaciones de ratón, embudos de conversión y encuestas.

herramienta ux hotjar
https://www.hotjar.com/

La herramienta posee una versión gratuita, que registra las interacciones de hasta mil visitantes por día, pero también existen los paquetes pagados que varían según la cantidad de datos que pretendes recoger (de 20 mil a 400 mil visitantes diarios). https://www.hotjar.com/

Crazy Egg. Muestra dónde hace clic la gente y dónde no: con una escala de gradación de color, se podrán identificar aquellas zonas que más clicks recibieron con un color más brillante y dónde no, con unos colores más oscuros. De un vistazo, se puede observar: Dónde hacen más scroll los usuarios, o bien, dónde se paran, de dónde vienen estos usuarios y dónde se hace más click. https://www.crazyegg.com/

herramienta ux crazy egg
https://www.crazyegg.com/

Yandex Métrica. Podemos observar los clics de los usuarios, desplazamientos, movimientos del ratón y escrituras grabados en un vídeo. Con ello podemos identificar los obstáculos en el proceso de compra, la intención detrás de los clics. Yandex permite ver qué partes de la página atraen más la atención y dónde se encuentran Dispone de un tablero en vivo para hacer evaluaciones rápidas. Cada métrica se muestra como un widget de informes, en el que se puede seleccionar el intervalo de fechas, el tipo de gráfico o incluso el segmento de público. https://metrica.yandex.com/

herramienta ux yandex
https://metrica.yandex.com/

ʕ•́ᴥ•̀ʔっ♡ Recordad, las herramientas y las metodologías son elementos que nos ayudan a cumplir un objetivo.

Debemos entender muy bien qué queremos conseguir y después seleccionar la herramienta y metodología que más encaje para llevar a cabo nuestro proyecto.

Artículo de Irene Ferrer, Design Lead en Everis – Madrid.

Docente Máster de CRO y Analítica Web en IEM Business School.

Docente Curso de UX. Diseño de experiencia de usuario y usabilidad de IEM Business School.