• Author / Uploaded
• Mario Rodrigo Cruz Rosas

Citation preview

DISEÑO UX

GUÍA COMPLETA

ÍNDICE DISEÑO UX .............................................................................................................................

2

FORMAS DE DESARROLLO DE UN PRODUCTO DIGITAL ........................................................

3

METODOLOGÍA CENTRADA EN EL USUARIO .........................................................................

4

ETAPAS UX .............................................................................................................................

5

Etapa 1 Investigación ...................................................................................................

6

Etapa 2 Definición e ideación .......................................................................................

19

Etapa 3 Prototipado .....................................................................................................

27

Etapa 4 Prueba ............................................................................................................

33

DISEÑO UX El Diseño de Experiencia de Usuario, UX, viene tomando mayor fuerza en estos últimos tiempos. Se ha vuelto vital para poder emprender un nuevo proyecto o rediseño de alguna plataforma tanto digital como presencial. UX se resume en equilibrar los objetivos del negocio con las necesidades que presentan los usuarios objetivos de la empresa. Este proceso se logra mediante la metodología Design Thinking, en ella se realizan diferentes talleres de co-creación para obtener insights que ayuden a definir estrategias. Sin esto, no estaríamos generando una verdadera experiencia de usuario. En muchos de los productos digitales se busca la rentabilidad, por ello es necesario incluir los puntos mencionados, objetivos y necesidades; siendo inclusive más relevante que la tecnología a ser empleada. El objetivo de este e-book es presentar los diferentes conceptos que hoy en día se utilizan durante las diferentes etapas en un diseño con procesos de UX tales como: la usabilidad, investigación con usuarios, la arquitectura de información, el diseño de interacción, etc. Estos procesos ayudan a generar la unión armoniosa entre personas y tecnología. De este resultado nace un conjunto de valoraciones al producto o servicio que pueden ser medidos y comprobados.

2

FORMAS DE DESARROLLO DE UN PRODUCTO DIGITAL Existen dos formas de enfocar las etapas de desarrollo de un producto digital: lineal e iterativo. Enfoque lineal: Consiste en pasar

Enfoque iterativo: Se realiza haciendo

secuencialmente por las cuatro etapas del

repeticiones del propio ciclo hasta lograr

UX: Investigación (empatizar y definir),

el producto deseado. Es la vía más

Ideación, Prototipado y Prueba.

recomendada.

Aprende lo que los usuarios piensan testeando.

Empatiza con ellos definiendo el problema.

Empatizar

Definir

Testea crear nuevas ideas para el proyecto.

Idear

Prototipar

Testear

Aprende de los prototipos para generar nuevas ideas.

Los test revelan hallazgos que redefinen el problema.

3

METODOLOGÍA CENTRADA EN EL USUARIO El concepto de diseño centrado en el usuario se utilizó hace muchos años como marco de trabajo, investigación y desarrollo de principios del diseño de interfaces de usuario.

Como señala Norman (1983), la imagen del

usará?, ¿Qué es lo que va a hacer con él? y

sistema guía al usuario en la adquisición y

¿Qué información necesitará para alcanzar

construcción de un modelo mental ajustado

sus objetivos?.

al modelo conceptual creado por el diseñador.

Henry Dreyfuss, autor del libro Designing For People (1955) popularizó la concepción del

De este modo, el enfoque del diseño

diseño como proceso a partir de sus diseños

centrado en el usuario busca asegurar la

de teléfonos de la serie 500 para Bell

consecución de un producto con la

Telephones. Este diseñador industrial,

funcionalidad adecuada para los usuarios

pionero del diseño centrado en el usuario,

concretos.

estudió cómo se construían los teléfonos,

El objetivo de esta filosofía es ofrecer respuesta a preguntas tales como: ¿Quién usará este sistema?, ¿Cómo y cuándo lo

además de cómo se percibían y eran utilizados por las personas. Sus conclusiones fueron aplicadas a un nuevo diseño donde se corrigen aspectos como la forma, el tamaño, las proporciones y el color.

4

ETAPAS UX Asimismo, este esquema o marco de trabajo nos permite conocer también las exigencias, expectativas

Las etapas UX permitirán

y objetivos del usuario final e involucrados en la

identificar los objetivos y

interacción del producto digital. Con esto podremos

necesidades para obtener

valorar las reacciones que presenten los usuarios.

mejores resultados. Por ello, es importante seguir el orden de

Para realizar las actividades en todas las etapas UX

cada una de las etapas.

son necesarias las aplicaciones de técnicas y herramientas, las que en esta guía son llamadas Métodos UX.

Cabe destacar que no todos los métodos mostrados en esta guía son de obligatoria aplicación, dependerá de cada desafío el seleccionar los más adecuados, inclusive combinar y diseñar nuevas técnicas para obtener resultados específicos al desafío.

5

ETAPA 1 INVESTIGACIÓN Las actividades que se realizan en esta etapa son: Se trata de obtener la mayor cantidad de información

Identificación de motivaciones, frenos,

tanto del cliente como de los

necesidades y expectativas del usuario

usuarios, ya que es necesario

objetivo. Aquí se hallan los principales

un correcto balance entre

insights.

demandas y necesidades de

Exploración y comprensión del modelo

uno y otro lado para crear un

mental de los usuarios en estudio con

producto exitoso. Mediante

respecto a la claridad, organización y

la aplicación de métodos

priorización del contenido del canal en

adecuados, se logra obtener

estudio.

la información que se quiere

Identificación y análisis de puntos mágicos

conocer.

y de dolor en el antes, durante y después del uso del canal en estudio. Análisis de data actual mediante: herramientas de analytics, encuestas, redes sociales, correos de usuarios finales, etc. Análisis de tendencias del diseño de productos digitales locales e internacionales del rubro sobre el canal en estudio.

6

ETAPA 1

Co- Creación Sesiones donde se generan

Si se realiza con stakeholders, se busca

ideas y se recopila información

recopilar y definir los propósitos y usuarios

de los participantes de manera

objetivo.

consensuada, democrática y

Si se realiza con usuarios finales, permite

100% participativa.

que contribuyan con la modificación de un producto existente o creación de uno nuevo.

7

ETAPA 1

Entrevistas grupales e individuales La entrevista grupal sirve para tener una amplia visión del entorno del reto, entender las relaciones entre los usuarios internos y/o público objetivo, las tensiones que se generan y mucho más.

Una entrevista grupal representa el inicio de una fase de empatía, permitiendo generar una primera idea de la complejidad del reto y sus alcances, dejando vislumbrar qué usuarios son los más adecuados para la entrevista individual. En las sesiones individuales sí se busca profundizar más en temas específicos.

8

ETAPA 1

Buyer Persona Es una representación arquetípica

Está representada por un ficha y es parte de

de nuestro usuario final y

los resultados de la investigación con usuarios

potencial, construida a partir de

objetivos realizado por especialistas en UX.

su información demográfica,

Nos ayuda a traer al usuario a la mesa de

comportamiento, necesidades y

trabajo en las etapas de prototipado y prueba.

motivaciones.

.

.

. . . . .

.

9

ETAPA 1

Card sorting Método usado en el diseño de experiencia de usuario que sirve para evaluar un árbol de categorías, es decir, la estructura de la información de una interfaz. En ella, los usuarios deben ordenar, agrupar y categorizar una serie de tarjetas.

Existen varios tipo de card sorting. Abierto es más usado para diagnosticar una arquitectura y el cerrado para crear una nueva junto a los usuarios.

10

ETAPA 1

Observación Contextual Método de investigación

Una variante de este método es el Shadowing,

cualitativa donde se observa al

en él se le avisa previamente al usuario que

usuario en su contexto real, en

será observado.

vez de hacerlo en laboratorio o en una situación artificial.

11

ETAPA 1

Customer Journey Map Método que nos permite mapear la

Este puede ser realizado por los

experiencia de los usuarios en los

stakeholders de la empresa a manera de

diferentes canales de un negocio, desde

hipótesis y luego validarla involucrando a

etapas previas a tener contacto hasta

los usuarios finales para obtener un mapeo

las etapas posteriores de la interacción

real de la experiencia de su consumidor.

con la empresa.

12

ETAPA 1

Service Blue Print Es un método que nos permite mapear

Es complementario al Journey Map

de manera visual, todos los procesos

ya que te permite identificar

que definen un determinado servicio en

aquellos aspectos que están detrás

uno o todos sus canales de la empresa,

del viaje del cliente y son invisibles a

permitiendo identificar aquellos puntos

este. Como por ejemplo, la actividad

a mejorar y que ofrezcan una

de preparación del plato dentro de la

experiencia óptima al usuario final.

cocina del restaurante mientras el cliente solo espera.

13

ETAPA 1

Análisis de data del negocio Implica el análisis de la información

comentarios en el Fan page de la marca o a

con la que cuenta el negocio. Ya sean

través de herramientas de Social Listening,

herramientas de Click stream (Google

encuestas, entre otros.

Analytics, Adobe Analytics, etc),

14

ETAPA 1

Análisis de data Son herramientas que monitorizan la actividad de los usuarios en una página web y/o aplicación.

Crean mapas de calor del comportamiento del usuario (clics, scroll y movimiento del mouse) y en ciertos casos permiten grabar toda la interacción para ver visualizada de manera individual. Dentro de las más comunes se encuentran Crazy Egg y Hotjar. enlace https://www.crazyegg.com/ enlace https://www.hotjar.com/

15

ETAPA 1

Recorrido Cognitivo Este método plantea la revisión de los flujos de pantalla más críticos de un producto digital existente por usuarios expertos, identificando bajo un contexto y escenario propuesto los problemas que podrían enfrentarse los usuarios en base al inclumplimiento de determinadas leyes de la percepción y buenas prácticas de usabilidad.

Se plasma los resultados en un documento, indicando el nivel de criticidad que tiene cada problema con el fin de priorizar su solución.

16

ETAPA 1

Benchmark Método donde se realiza un estudio

El objetivo del benchmark es mejorar de

comparativo de productos y

manera continua tanto el diseño y look and

servicios de un tema en específico,

feel, así como la estructura y la experiencia

con el fin de detectar las mejores

del usuario proponiendo como hipótesis

prácticas y cómo aplicarlo.

ideas de otros a ser validadas en la etapa de prueba.

17

ETAPA 1

Lego Serious Play Es un método de indagación de The Lego

pilares de una organización, definir su

Group cuyo objetivo es facilitar la

manifiesto, visión y misión.

comunicación y solución a problemas. Busca que todos los participantes expresen

En una sesión, el grupo puede atravesar

claramente su opinión y que a su vez,

varios ciclos. Cada ciclo está compuesto

comprendan la idea de los demás.

por cuatro fases:

Es bien usado para aterrizar definiciones de

Reto.

manera individual y compartida de conceptos

Fase de construcción.

que son complicados en explicarlos con

Momento de compartir.

palabras. Por ejemplo encontrar los valores y

Cierre del reto.

18

ETAPA 2 DEFINICIÓN E IDEACIÓN

Etapa en la que el consultor UX usa los resultados del estudio (primera etapa) para definir el qué es lo que debe de diseñar, apoyándose con el uso de métodos de pensamiento creativo y en el uso de fuentes de inspiración como las megatendencias en tecnología y/o diseño y los resultados de investigación de especialistas o expertos.

Esta solución planteada puede estar representada por mapas mentales, líneas de acción o cualquier otro modelo conceptual que ayude a comunicar cómo se debe encarar la solución.

19

ETAPA 2

Mapa Mental

Diagrama que representa conceptos relacionados a partir de un tema principal o palabra clave. El tema principal se ubica al centro y se expande en todas direcciones con los conceptos relacionados – ideales para hacer lluvias de ideas y organizar información de manera espontánea.

20

ETAPA 2

Visual Thinking Proceso donde se expresan ideas y pensamientos de forma gráfica, facilitando de esta manera la comprensión y asimilación de conceptos que por su complejidad son más difíciles de explicar de otra manera. Un claro ejemplo son las infografías que pueden expresar con Imágenes y poco texto el resumen de un proceso largo o complicado de entender.

21

ETAPA 2

SCAMPER Es una lista de verificación generadora de ideas basadas en verbos de acción que sugieren cambios a un producto, servicio, idea o proceso existente: Cada uno de estos conceptos incluye una serie de preguntas por las que deberemos ir pasando, tratando de contestarlas de todas las formas posibles. Todas esas respuestas serán ideas que irán saliendo a

S …… ¿Qué podemos sustituir para…? C …… ¿Qué pasaría si combinásemos …? A …… ¿Cómo podemos adaptar….? M …… ¿Qué podemos modificar….? P …… ¿Qué usos se pueden dar….? E …… ¿Qué podemos eliminar….? R …… ¿Qué pasa si reordenamos….?

la luz y que serán de utilidad para encontrar nuevas rutas creativas.

22

ETAPA 2

Conexiones Forzadas Este método fue desarrollado por Charles

Ejemplo:

S. Whiting en el año 1958. Su utilidad nace

“Queremos ideas para mejorar los

de un principio muy sencillo: cuando se

parques infantiles públicos”.

combina lo conocido con lo desconocido se

Elementos más conocidos:

crea una nueva situación. De este proceso

columpios, toboganes, cama

pueden surgir ideas muy originales. De

saltarina.

hecho, este método es extremadamente útil

Elementos menos conocidos:

para darle un nuevo empuje al brainstorming

juegos acuáticos, talleres, yoga

cuando se deja de producir ideas.

kids.

La idea resultante está inspirada por esos

Idea: Crear un espacio de recreación

cruces pero no tiene porqué incluir todos los

donde se dicte talleres de jardinería

aspectos del mismo.

para niños.

23

ETAPA 2

SIT Método para estimulación grupal o

Ejemplos:

individual del pensamiento creativo

Sustracción: A la bicicleta se le sustrajo una

que gira alrededor de dos principios

rueda creando la bicicleta estática.

fundamentales: Mundo cerrado y la

Multiplicación: La doble cuchilla de la

función sigue a la forma. Al aplicarlas

rasuradora, la primera debilita el vello y la

estos provocan un pensamiento

segunda lo corta, esto produce una mejor

“dentro de la caja” logrando una

afeitada.

estimulación creativa a partir de la

División: Los monitores con pantallas divididas.

alteración de un producto o servicio ya

Unificación de tareas: El autoservicio de los

existente.

restaurantes (unir restaurante y clientes). Dependencia de atributos: Creación de mouse izquierdo para personas no diestras.

24

ETAPA 2

Creative Problem Solving Es un método de trabajo que ayuda a redefinir los problemas y oportunidades, con el fin de alcanzar respuestas y soluciones innovadoras para tomar acción.

Consta de cuatro fases: Exploración: Se muestra el reto definido y luego deben generar la mayor cantidad de reformulaciones. Divergencia: Partiendo de la reformulación elegida, se procede a la generación de ideas para solucionar dicho problema. Convergencia: Se intercambian puntos débiles entre las ideas de todos los participantes para mejorarlas. Venta:Realizar una presentación de venta, donde expliquen su idea final en base a mejoras realizadas, detallando la manera en que se va a probar.

25

ETAPA 2

Serious games (gamification) La gamification es el uso de elementos

Gamification no es hacer de todo un juego,

de juegos y técnicas de diseño de juegos

se trata de seleccionar las mecánicas de

en contextos no lúdicos, lo que nos

juego para conseguir una motivación extra en

permitire introducir métodos que son

el mundo real. En ocasiones solo se piensa

utilizados en el desarrollo de juegos y

en ámbitos de empresa o de marketing, pero

videojuegos en nuestro día a día.

la gamification puede introducirse en muchos otros ámbitos como en salud, formación, contenido en webs o entretenimiento.

26

ETAPA 3 PROTOTIPADO Es la etapa en la que se crean las pantallas y flujos, sumado a los requerimientos técnicos que nos brindan. Con ello buscamos generar en un inicio bocetos que sean comprendidos por los clientes, equipo de trabajo y sobre todo los usuarios. Quienes son finalmente los que usarán el producto.

Las actividades que se realizan en esta etapa son: Definir el user flow o flujos de los principales procesos. Definir el mapa de navegación y mapa de contenidos de la solución. Definir las pantallas del producto. Crear prototipos funcionales interactivos de las tareas a ser testeadas.

El principal objetivo de tener un prototipo es medir la usabilidad que tiene nuestro producto antes de pasar al diseño final. Con ello garantizamos que la encontrabilidad, navegabilidad y utilidad del producto tiene un adecuado grado de aceptación.

27

ETAPA 3

Prototipado colaborativo Método que usa la inteligencia colectiva como base para la co-creación de pantallas teniendo como resultado un flujo final.

En su aplicación pueden intervenir como participantes un conjunto de consultores UX, cliente o usuario final. Todos deben conocer el modelo de negocio o propósito que tiene la web o la aplicación. Usualmente se suele resolver los flujos más críticos del producto.

28

ETAPA 3

Balsamiq mockup Es una herramienta de diseño que permite crear wireframes de baja fidelidad de manera rápida y sencilla.

enlace https://balsamiq.com/wireframes

29

ETAPA 3

Marvel App Es una herramienta para crear prototipos interactivos de plataformas digitales.

enlace enlace: https://marvelapp.com/signin

30

ETAPA 3

Figma Es una herramienta para diseñar interfaces que se ejecuta en el navegador, donde se pueden hacer proyectos de diseño colaborativos.

enlace enlace: https://www.figma.com/

31

ETAPA 3

Axure Es una herramienta especialmente orientada al diseño de wireframes de manera mucho más real. enlace https://www.axure.com

32

ETAPA 4 PRUEBA

Es la etapa en la que se comprueban las propuestas en prototipos de alta fidelidad. Las pruebas se realizan a usuarios finales previa aprobación del cliente, con el objetivo de saber si se han logrado los objetivos y demandas planteadas. El fin de hacer pruebas con usuarios es saber si están resueltas las necesidades identificadas.

Las actividades que se realizan en esta etapa son: Definición del público objetivo a probar. Reclutamiento del público objetivo. Elaboración de pauta de prueba o guía de testeo. Coordinación con los usuarios para definir las sesiones de testeo. Sesiones de user testing de observación. Inventariar resultados. Generación de informe de prueba o reporte de testeo. Ajustes a las pantallas. Definición de nueva ronda de testeos.

33

ETAPA 4

Recorrido cognitivo El recorrido cognitivo plantea la

Se plasma los resultados en un documento

revisión de los flujos de pantallas

indicando principalmente el nivel de

más críticos de un producto digital

criticidad que tiene cada problema con el fin

por usuarios expertos, identificando

de priorizar su solución.

bajo un contexto y escenario propuesto los problemas que podrían enfrentarse los usuarios en base al inclumplimento de determinadas leyes de la percepción y buenas prácticas de usabilidad.

Este método es recomendado aplicar antes de empezar con las sesiones de user testing con el fin de depurar las interfaces de errores provocados por el mal uso de los principios de usabilidad ya estandarizados.

34

ETAPA 4

Evaluación Heurística Es la inspección de la usabilidad sin usuarios, donde se examina la calidad de uso de una interfaz por parte de evaluadores expertos a partir del cumplimiento de los heurísticos de usabilidad. Se toman en consideración los diez principios de heurísticos de Norman Nielsen. Al igual que el recorriedo cognitivo, este método es recomendado aplicar antes de empezar con las sesiones de user testing con el fin de depurar las interfaces de errores provocados por el mal uso de los principios de usabilidad ya estandarizados.

35

ETAPA 4

User Testing Método para evaluar interfaces y validar

Se usa la observación para identificar

la usabilidad, eficiencia y utilidad de los

hallazgos de problemas y éxitos sobre el

flujos más críticos que tiene un producto

uso de los elementos de interacción de

al usarlo.

las interfaces. Interviene un moderador, el usuario y opcionalmente observadores. La sesiones se ejecutan con el público meta o potencial.

36

ETAPA 4

Eye tracking Método en la cual se registra todo lo que

Así, el eye tracking aporta 3 datos

observa el usuario sobre una interfaz

esenciales:

dentro de su navegación mediante

Dónde mira exactamente el usuario.

herramientas que captan la mirada del participante.

Cuánto tiempo observa un elemento del mensaje. Cuál es el orden en el que el usuario observa los diferentes elementos de la interfaz, es decir, su trayectoria visual.

37

ETAPA 4

A/B testing Método donde se prueba la versión original o hacen dos versiones del mismo producto, éstas se lanzan a la vez para evaluar cuál funciona mejor en base a las métricas planteadas.

38

ETAPA 4

Lookback Es una herramienta donde se puede grabar internamente o de forma remota y sin equipo, tanto la pantalla, como al usuario y su voz.

enlace https://lookback.io/

39

ETAPA 4

Camtasia Studio Es una herramienta para registrar un video en pantalla. enlace https://camtasia-studio.uptodown.com/windows

40

AUTORES

Percy Negrete Director de Innovación y Experiencia Usuaria en Attach. Certificado en Arquitectura de Innovación por el SIT y Máster en Innovación Empresarial de la Universidad de Barcelona. Cuenta con más de 14 años de experiencia en proyectos UX para prestigiosas empresas locales e internacionales.

Carlo Rodríguez CEO y VP Regional de Transformación Digital de Attach. Cuenta con más de 17 años de experiencia en el ámbito digital donde ha trabajado la estrategia digital de marcas top en rubros como Finanzas, Telecomunicaciones, Viajes, Consumo masivo, Retail, Educación, entre otros.

41

Makarena Olivera Psicóloga del consumidor, Investigadora UX en Attach. Certificada en Behavior Design por Juega Innova e IMEC. Experiencia en investigaciones con usuarios y dinámicas grupales.

Jazmine Ginet Psicóloga del consumidor, Investigadora UX en Attach. Experiencia en investigaciones con usuarios en proyectos UX en el sector corporativo y gobierno.

42

SOBRE ATTACH Somos una consultora dedicada a entender el futuro para ayudar a las empresas a generar negocios. Pioneros en el desarrollo de soluciones digitales para nuestros clientes habiendo impactado con éxito en sus negocios durante más de 17 años, a través del uso innovador de la tecnología y la data.

¿Quiere conseguir una sesión de diagnósticos gratuita? Contáctenos. https://attachmedia.com/

https://twitter.com/attach_sac

https://www.linkedin.com/company/attach-sac

https://www.facebook.com/Attach.sac

https://www.instagram.com/attach_sac/

43

PERÚ Av. Faustino Sánchez Carrión 465 Of. 1202 Magdalena del Mar Teléfono: (51-1) 7131433 E-mail: [email protected]

USA Americas: 201 South Biscayne Blvd, Miami, FL 33131 Teléfono: (+1) 9544017926 E-mail: [email protected]

MÉXICO Torre Reforma, Piso 14, Avenida Paseo de la Reforma 483, Col. Cuauhtémoc, CP 06500 Teléfono: (55) 73162302 E-mail: [email protected]

44