user experience, ux & ui

Download User Experience, UX & UI

Post on 13-Jun-2015

654 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

User Experience

TRANSCRIPT

  • 1. DISEO: Juan Daniel Pacheco dennieru@facebook.com

2. valioso CONVERGENTE accesible til deseable creble hallable usable 3. CONSIDERACIONES Diseo en UX, NO es diseo de interfaz de usuario!!! UX, NO es un paso en el proceso!!! UX esta integrada en todo lo que haces. UX, NO es solo usabilidad o tecnologa !!! UX es complejo y multidisciplinario!!! UX, NO es solo un tema de usuario!!! UX se trata del diseo y del negocio, sobre las necesidades que tienen que satisfacerse Para todos. Experiencia para todos: consumidores, clientes, empleados, competidores gente. Cuantas personas interacten con tu producto, servicio o compaa. ! 4. DEFINICIN UX (User Experience) que se traduce como: Experiencia de usuario, es un proceso de diseo centrado en el usuario. El cual usa un conjunto de herramientas durante cada tarea del ciclo de vida del producto software. No esta nicamente enfocado en las necesidades del usuario, tambin toma vital importancia en las necesidades del negocio como tal. Se enfoca principalmente en resolver el: Que Cuando Donde Por que Como en el producto que vamos a desarrollar. 5. ENFOQUE UX Tu programa. Como lo ve el usuario. Como tu lo ves. Como deberas verlo. 6. Multidisciplinario. UX Es principalmente una tarea multidisciplinaria: Arquitectura de la informacin Diseo de interaccin. Etnografa. (Branding) Marcas comerciales. Ciencia de libreras. Usabilidad. Experto en UX Un profesional en UX posee cualidades tanto de programacin, anlisis de datos y sistemas como de diseo, sociologa y psicologa. ! 7. Actividades bsicas para la mayora de tipos de diseo, estas actividades (disear, analizar, implementar y evaluar) se refieren genricamente a: Diseo, anlisis, implementacin evaluacin. (The wheel)Plantilla del ciclo de vida. Ciclo de vida 8. Ciclo de vida Disear Prototipar Evaluar Analizar Iterar Iterar Iterar Iterar Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa (The wheel) 9. INDAGACIN CONTEXTUAL ESTRATEGIA Definir la Misin y la Visin ayudara a articular la caractersticas, principios y guas dentro la organizacin. El entendimiento de nuestro campo de accin nos permitir tener una idea mas clara de como construir las metas del proyecto. Nuestra estrategia es, el conjunto de metas las cuales responden preguntas, como: Que es lo que la organizacin espera alcanzar con el proyecto? El xito del proyecto se lograra cuando? Que alcance tendr el proyecto para sus usuarios? Conceptualizacin o declaracin del Sistema. Es un resumen descriptivo del sistema o producto, una visin inicial. Es la declaracin de la misin del proyecto. Tcnicas de estrategias CARD SORTING. 10. INVESTIGACIN Actividades de recoleccin de datos. Contextual Design (CD) es una tcnica de recoleccin de datos de campo utilizada para capturar informacin detallada acerca de cmo los usuarios de un producto interactan con el producto en su entorno de trabajo habitual. Esta informacin es capturada por: Observaciones al comportamiento de los usuarios y/o por conversaciones con el usuario mientras que l o ella trabaja. Identificar aspectos emocionales en el trabajo. Es un tema de identificacin y entendimiento de factores emocionales durante el trabajo, el, como afecta el impacto del ambiente, los colores, y la diversin en el ambiente laboral. Tcnicas de estrategias e investigacin Anlisis del competidor. Revisin Analtica. Entrevista a las partes interesadas (Stakeholders) Comportamiento Datos Conversaciones Observaciones Factores emocionales internos Factores externos Relaciones interpersonales INDAGACIN CONTEXTUAL 11. CARD SORTING. Un grupo de expertos (usuarios) construyen un rbol de categoras. Son guiados en el proceso, por un experto UX. Pasos Bsicos. Se le proporciona a cada participante tarjetas o Post-it-notes con trminos escritos (familiares), que representan los conceptos a estudiar. El participante agrupa las tarjetas en un orden lgico, y categoriza los grupos. El resultado de cada participante es analizado para encontrar patrones. (Dendogramas) Se usa para evaluacin de patrones. Son diagramas de frecuencias utilizado para ilustrar la disposicin de los grupos producidos por la agrupacin jerrquica. Esta tcnica te permite tener un mejor entendimiento de la arquitectura de la informacin. ! A B C D E F BC DE DEF BCDEF ABCDEF 12. CONSTRUCCIN DE SNTESIS DISEO UX Colaborativa e interactiva, esta fase es la retroalimenta al proyecto, las ideas y opiniones de los usuarios. La mejor forma de presentar informacin, es mediante la simplicidad y la diferenciacin. ! Tcnicas de diseo UX Estudios diarios. Entrevistas a usuarios. Pruebas con usuarios. StoryBoards. Personas. Modelos Mentales. Diseo Colaborativo. Diagrama de Flujo de Trabajo. Sitemap. Wireframe. Prototipos de papel. Tabla de tendencias. Versin Beta. 13. CONSTRUCCIN DE SNTESIS PRODUCCIN La etapa de desarrollo en UX es donde se refleja el diseo con una calidad optima. Contenidos y activos digitales son creados. Inicia el proceso de validacin con las partes interesadas y usuarios finales. Dentro de UX la validacin es un proceso constante en cada etapa del desarrollo. El trabajo principal es conciliar las ideas y colaborar junto a desarrolladores para obtener una relacin emotiva entre producto y usuario. USABILIDAD La etapa Es mejor encontrar problemas que encontrar soluciones.! 14. LA TCNICA DEL MAGO DE OZ & RaP. Proyectar escenarios y aplicaciones de flujo. Que es lo que pasara en respuesta al comportamiento del usuario. Reunir las interfaces esqueleto. Desarrollar anzuelos como, pre-visualizaciones. Como y cuando esta tcnica te proveer pre-visualizaciones coherentes. Seleccionando la prxima pantalla, ingresando texto, ingresando a zonas, haciendo validaciones, etc. Recordando que mas tarde todo este comportamiento ser remplazado en la computadora a travs de una librera o lenguaje de programacin. Ensayar roles con un compaero. RaP (Rapid Prototyping) Con esta tcnica puedes simular el comportamiento deseado del producto.! 15. HERRAMIENTAS. Prueba A/B (Split Testing) Retroalimentacin de usuarios para tu wireframe, mockup o website. Optimizacin para Comercio Electrnico. Pruebas de usabilidad para diseadores web. Optimizacin para UX. Empoderamiento de UX a travs de BigData. Pruebas A/B para aprender del test. Optimizacin para UX. Pruebas remotas para analizar las necesidades del usuario. Pruebas de usabilidad. Herramienta para la priorizacin de la usabilidad. Auditor para la usabilidad. Split Testing es un control por experimentos aleatorios.! 16. HERRAMIENTAS. Estructurado de tarjetas (Card Sorting) Herramienta que permite a tus usuarios armar un rbol de categoras. Diseo de Prototipos. Editor de cdigo para web. Diseador UI. Construye prototipos interactivos. Construye prototipos. Construye prototipos interactivos. Cogtool Construye prototipos. Construye prototipos interactivos. Construye prototipos y diseo multipropsito. Prototipado gil. Construye prototipos interactivos. Prototipos interactivos de construccin rpida. Estructurado de tarjetas, permite armar un rbol de estructuras.! 17. HERRAMIENTAS. Diseo de Prototipos. Herramienta integrada. Herramienta de representacin y diseo multipropsito. Construye prototipos. Construye prototipos interactivos y colaborativos. Construye prototipos interactivos. Construye recursos Front/End. Construye prototipos. Construye prototipos interactivos y colaborativos. Construye prototipos interactivos, realistas. UX para diseadores. Un prototipo es una imagen del producto futuro.! 18. HERRAMIENTAS. Evaluacin de Diseo Herramienta para la priorizacin de la usabilidad. Herramienta de prediccin y anlisis para sitios web. Anlisis experto, recomendaciones y soluciones. Pre evaluacin. Optimizacin de paginas web (prueba de los 5 segundos). Notas mentales, para psicologa del diseo web. Anlisis y pruebas de diseo en equipo. Simulacin de retroalimentacin de usuarios. Evaluacin de Arquitectura de la informacin Herramienta para la mejora de la navegabilidad. Herramienta para la mejora de la organizacin. Herramienta para la mejora de la navegabilidad. Las evaluaciones se pueden hacer en distintas faces del desarrollo, incluso anlisis.! 19. HERRAMIENTAS. Evaluacin de Arquitectura de la informacin Herramienta para la mejora de la navegabilidad. Convierte tus mockups, sketches o wireframes a interfaces de validacin. Validacin para la arquitectura de la informacin. Herramienta para la mejora de la usabilidad (Test del participante). Usabilidad para la mejora de la Experiencia de Usuario. Herramienta para la mejora de la navegabilidad y el anlisis de resultados. Herramienta para la mejora de la navegabilidad. Mapa digital de empata (Process Aids). Investigacin remota de testeo Investigacin remota de usabilidad a travs de sobrecarga. Pruebas de usabilidad remotas y en vivo. Herramienta de pruebas remotas. Las pruebas remotas permiten probar las capacidades del software (con usuarios remotos o por simulacin). ! 20. HERRAMIENTAS. Seguimiento de Bugs Herramienta Bug tracking. Herramienta Bug tracking. Encuestas y pruebas de Usuarios Investigacin de mercado. Herramienta para la recoleccin de informacin. Herramienta para la recoleccin de informacin. Feedback Tool. Herramienta para la recoleccin de informacin. Comunidad para la comprensin del usuario. Herramienta para la comprensin del mercado. El seguimiento de bugs tiene que ver con el proceso de desarrollo en equipo. Las encuestas son herramientas bsicas para la recoleccin de datos. ! 21. HERRAMIENTAS. Web analtica Herramienta para el almacenamiento del comportamiento de visitantes. Web analtica en tiempo real. Anlisis de visitantes. Grabacin del comportamiento de visitantes. Inteligencia de cliente (CI). Conexin con los visitantes en tiempo real. Herramienta para el anlisis de visitantes