Técnicas de Diseño Web centradas en el Usuario
-
Upload
interlat-group -
Category
Design
-
view
2.238 -
download
0
description
Transcript of Técnicas de Diseño Web centradas en el Usuario
![Page 1: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/1.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
METODOLOGÍAS DE DISEÑO CENTRADAS EN EL USUARIOESTEFANÍA TRISOTTI
![Page 2: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/2.jpg)
#FormaciónEBusiness
ESTE WEBINAR ES REALIZADO GRACIAS A
TU NUEVO CANAL DE NEGOCIOS EN INTERNET.
![Page 3: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/3.jpg)
#FormaciónEBusiness
COMPARTE Y DEBATE#WEBINARSINTERLAT#CXREDLeague
#WebinarsINTERLAT #CXREDLeague
![Page 4: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/4.jpg)
#FormaciónEBusiness
CUENTA DEL DOCENTE@TRI_
#WebinarsINTERLAT #CXREDLeague
![Page 5: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/5.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
“La experiencia del consumidor al usar un producto es lo que realmente marca la diferencia.”― Steve Jobs
![Page 6: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/6.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
DISEÑO CENTRADO EN EL USUARIO
EMPATÍA SISTEMA
• necesidades• pensamientos• frustraciones• deseos• sentimientos
• objetivos• interacciones• capacidades• tareas específicas
![Page 7: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/7.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
DISEÑAR PARA PERSONAS ESPECÍFICAS
![Page 8: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/8.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
OBJETIVOS
PROBLEMAS
DISEÑO CENTRADO EN EL USUARIO
![Page 9: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/9.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
DISEÑO CENTRADO EN EL USUARIO
![Page 10: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/10.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
DISEÑO CENTRADO EN EL USUARIO
Usuarios productivos y satisfechos
![Page 11: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/11.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeagueJesse James Garret (2002)
CONSIDERACIONES CLAVE QUE FORMAN EL DESARROLLO DE LA EXPERIENCIA DE
USUARIO.
ELEMENTOS DE LA EXPERIENCIA DE USUARIO (UX)
![Page 12: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/12.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
¿POR QUÉ TRABAJAMOS EN BASE A PERSONAS?
Porque nos otorgan información base para trabajar en el diseño
Podemos crear descripciones detalladas acerca de nuestros usuarios
Nos permiten enfocarnos en los atributos específicos de nuestros usuarios objetivos
Involucra y sincroniza a todas las personas que trabajan en el equipo
![Page 13: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/13.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ANALIZAR DATA
![Page 14: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/14.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ANALIZAR DATA
CUALITATIVO
Estadísticas Observación
CUANTITATIVO
¿Qué? ¿Por qué?
![Page 15: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/15.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ANALIZAR DATA
USUARIOSYO
![Page 16: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/16.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ANALIZAR DATA
![Page 17: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/17.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
NO OLVIDAR QUE...
Las metodologías que usemos y cómo las usemos, dependen de las características del proyecto que estemos desarrollando.
![Page 18: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/18.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
Entre más complejo es un sistema, más planificación y diseño centrado en el usuario necesitaremos.
![Page 19: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/19.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CREAR PERSONAS
![Page 20: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/20.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
Al crear personas construimos perfiles representativos de nuestros usuarios claves, transparentando sus necesidades y entornos.
![Page 21: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/21.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeaguehttp://adpearance.com/blog/using-personas-in-web-design
![Page 22: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/22.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CONSIDERACIONES PARA CREAR PERSONAS
• Actitudes (modelos mentales, etc.)
• Conocimientos técnicos (relacionado a lo digital u otros)
• Trabajo
• Entorno
• Frustaciones (obstáculos)
• Objetivos (motivaciones, etc)
• Otros
?
![Page 23: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/23.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
EJEMPLO
Padres
Alumnos enseñanza básica
Alumnos enseñanza media
Universitarios
Profesores
Posibles compradores (anónimo)
![Page 24: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/24.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
![Page 25: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/25.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CREAR PERSONAS
![Page 26: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/26.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
SABER IDEAR
![Page 27: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/27.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
SABER IDEAR
Pensamiento Analítico
Pensamiento Intuitivo
DesignThinking
Analít ico
Lógico
Preciso
Repetit ivo
Organizado
Detallado
Científ ico
Literal
Secuencial
Creativo
Imaginario
General
Intuit ivo
Conceptual
Empático
Figurativo
Irregular
Solucionar problemas con necesidades humanas en el centro
![Page 28: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/28.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
SABER IDEAR
Desarrollo de ideas y conceptos
Abrir posibilidades
Formular preguntas
Crear hipótesis
Realizar representaciones gráficas de los conceptos
![Page 29: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/29.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
PROTOTIPOS DE PAPEL
Ilustración por Claire Murray http://www.flickr.com/photos/flat61/
![Page 30: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/30.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
PROTOTIPOS DE PAPEL
Ilustración por Claire Murray http://www.flickr.com/photos/flat61/
![Page 31: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/31.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
PROTOTIPOS DE PAPEL
Ilustración por Claire Murray http://www.flickr.com/photos/flat61/
Aunque existen numerosas aplicaciones que sirven de herramientas para el trabajo del diseñador de experiencia de usuario, el papel y el lápiz han sido y siguen siendo las más usadas.
![Page 32: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/32.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ESCENARIOS Y STORYBOARDS
![Page 33: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/33.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ESCENARIOS Y STORYBOARDS
Se define un equipo de personajes que usarán el producto o servicio que estamos desarrollando
Considera detalles personales de cada personaje
Se identifican momentos claves en que los usuarios interactuan con nuestro producto o servicio
Puede realizarse como storyboard, y ser corroborado por todo el equipo
![Page 34: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/34.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ESCENARIOS Y STORYBOARDS
![Page 35: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/35.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
BENCHMARK
![Page 36: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/36.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
BENCHMARK
Un benchmark es un análisis comparativo de productos o de servicios de la competencia, que se revisan para estudiar sus características en contraste a lo que uno está desarrollando.
Se evalúa cómo funcionan y vemos qué beneficios de ello podríamos obtener, además de ubicarnos en un contexto del negocio.
![Page 37: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/37.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
EJEMPLO
?
![Page 38: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/38.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CARDSORTING
![Page 39: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/39.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CARDSORTING
Es una técnica de categorización de contenidos centrados en el usuario
Permite establecer patrones sobre cómo los usuarios esperan encontrar un contenido o una funcionalidad
Perfil Cambiar Contraseña
Invitar amigos
Equipo Enviar Mensaje
Subir una imagen
Misimágenes Eventos Otros...
![Page 40: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/40.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
MARCA Y ESTILOS
Ejemplo de usuario
![Page 41: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/41.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
ENTREVISTAS Y ENCUESTAS
Se puede obtener tanto información cualitativa como cuantitativa
Relación directa con usuarios tipo
Para la búsqueda de información, también se utilizan técnicas como focus group.
![Page 42: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/42.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
PLANIFICAR LA IMPLEMENTACIÓN
Ilustración por Claire Murray http://www.flickr.com/photos/flat61/
![Page 43: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/43.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
“Una meta sin un plan es solo un deseo”― Antoine de Saint-Exupéry
![Page 44: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/44.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
¿CUÁL ES EL BALANCE ADECUADO?
Producto inútil Producto mínimo viable
Producto completo
(apreciado pero limitado) (costo es mayor)
![Page 45: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/45.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
EJEMPLO PLANIFICACIÓN SPOTIFY
![Page 46: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/46.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CONCLUSIÓN
AL REALIZAR DISEÑO CENTRADO EN EL USUARIO, LOGRAMOS DESARROLLAR EXPERIENCIAS DIGITALES QUE SON VALIOSAS PARA NUESTROS USUARIOS.
OBJETIVOS
PROBLEMAS
![Page 47: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/47.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
CONCLUSIÓN
Nos permite realizar diseños de forma colaborativa, involucrando a diferentes personas que aportan a partir de diferentes puntos de vista
Podemos resolver los problemas reales de los usuarios
Optimizamos tiempos de trabajo
OBJETIVOS
PROBLEMAS
ADEMÁS...
![Page 48: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/48.jpg)
#FormaciónEBusiness#WebinarsINTERLAT #CXREDLeague
Estrategia de Diseño
Diseñode interacción
Diseñode Interfaz
Estrategia de Diseño
Definir Idear RealizarPrototipos Construir Analizar
Iteraciones
PRONTO EN EL DIPLOMADO
![Page 49: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/49.jpg)
#FormaciónEBusiness
GRACIAS.ESTEFANÍA TRISOTTI@TRI_
![Page 50: Técnicas de Diseño Web centradas en el Usuario](https://reader034.fdocuments.mx/reader034/viewer/2022052322/557ae784d8b42a590b8b54e7/html5/thumbnails/50.jpg)
#FormaciónEBusiness
SINTONIZA INTERLAT.TVPARA PRÓXIMAS EMISIONES…