DISEÑO:DISEÑO:
Juan Daniel [email protected]
valioso ►►CONVERGENTE
accesible
útil
deseable
creíble
hallable
usable
►CONSIDERACIONES►Diseño en UX, NO es diseño 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 tecnología !!!
►UX es complejo y multidisciplinario!!!
►UX, NO es solo un tema de usuario!!!◄UX se trata del diseño y del negocio, sobre las necesidades que tienen que
satisfacerse «Para todos».
Experiencia para todos: consumidores, clientes, empleados, competidores… gente. Cuantas personas interactúen con tu producto, servicio o compañía.
!
►DEFINICIÓN
UX (User Experience) que se traduce como: Experiencia de usuario, es un proceso de diseño 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, también 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.
►ENFOQUE UX
Tu programa. Como lo ve el usuario.
Como tu lo ves. Como deberías verlo.
►Multidisciplinario.
◄UX Es principalmente una tarea multidisciplinaria:
Arquitectura de la informaciónDiseño de interacción.Etnografía.(Branding) Marcas comerciales.Ciencia de librerías.Usabilidad.
►Experto en UX
Un profesional en UX posee cualidades tanto de programación, análisis de datos y sistemas como de diseño, sociología y psicología.
!
►Actividades básicas para la mayoría de tipos de diseño, estas actividades (diseñar, analizar, implementar y evaluar) se refieren genéricamente a: Diseño, análisis, implementación evaluación.
►(The wheel)Plantilla del ciclo de vida.
►Ciclo de vida
►Ciclo de vida
Diseñar
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)
► INDAGACIÓN CONTEXTUALESTRATEGIA
► Definir la Misión y la Visión ayudara a articular la características, principios y guías dentro la organización.
◄ El entendimiento de nuestro campo de acción 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 organización espera alcanzar con el proyecto? ◄ El éxito del proyecto se lograra ¿ cuando? ◄ ¿Que alcance tendrá el proyecto para sus usuarios?
► Conceptualización o declaración del Sistema.◄Es un resumen descriptivo del sistema o producto, una visión inicial.
◄ Es la declaración de la misión del proyecto.
Técnicas de estrategias
►CARD SORTING.
INVESTIGACIÓN
► Actividades de recolección de datos.Contextual Design (CD) es una técnica de recolección de datos de campo utilizada para capturar información
detallada acerca de cómo los usuarios de un producto interactúan con el producto en su entorno de trabajo habitual. Esta información 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 identificación y entendimiento de factores emocionales durante el trabajo, el, como afecta el
impacto del ambiente, los colores, y la diversión en el ambiente laboral.
Técnicas de estrategias e investigación
►Análisis del competidor.►Revisión Analítica.►Entrevista a las partes interesadas (Stakeholders)
Comportamiento DatosConversaciones
Observaciones
Factores emocionales internos
Factores externos
Relaciones interpersonales
► INDAGACIÓN CONTEXTUAL
►CARD SORTING.
►Un grupo de expertos (usuarios) construyen un árbol de categorías.◄Son guiados en el proceso, por un experto UX.
►Pasos Básicos. ►Se le proporciona a cada participante tarjetas o Post-it-notes con términos escritos (familiares), que representan los conceptos a estudiar. ►El participante agrupa las tarjetas en un orden lógico, y categoriza los grupos. ►El resultado de cada participante es analizado para encontrar patrones.
→ (Dendogramas) ► Se usa para evaluación de patrones.
◄Son diagramas de frecuencias utilizado para ilustrar la disposición de los grupos producidos por la agrupación jerárquica.
Esta técnica te permite tener un mejor entendimiento de la arquitectura de la información.
!
A B C D E F
BC DE
DEFBCDEF
ABCDEF
► CONSTRUCCIÓN DE SÍNTESIS DISEÑO UX►Colaborativa e interactiva, esta fase es la retroalimenta al proyecto, las ideas y opiniones de los usuarios.
La mejor forma de presentar información, es mediante la simplicidad y la diferenciación.
!
►CONSTRUCCIÓN DE SÍNTESIS PRODUCCIÓN
►La etapa de desarrollo en UX es donde se refleja el diseño con una calidad optima.►Contenidos y activos digitales son creados.►Inicia el proceso de validación con las partes interesadas y usuarios finales.
◄ Dentro de UX la validación es un proceso constante en cada etapa del desarrollo.
►El trabajo principal es conciliar las ideas y colaborar junto a desarrolladores para obtener una relación emotiva entre producto y usuario.
USABILIDAD
►La etapa
Es mejor encontrar problemas que encontrar soluciones.!
►LA TÉCNICA 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 técnica te proveerá pre-visualizaciones coherentes.◄Seleccionando la próxima pantalla, ingresando texto, ingresando a zonas, haciendo validaciones, etc.◄Recordando que mas tarde todo este comportamiento será remplazado en la computadora a través de una librería o lenguaje de programación.
►Ensayar roles con un compañero.
→RaP (Rapid Prototyping)
Con esta técnica puedes simular el «comportamiento» deseado del producto.!
►HERRAMIENTAS.Prueba A/B (Split Testing)
Retroalimentación de usuarios para tu wireframe, mockup o website. Optimización para Comercio Electrónico. Pruebas de usabilidad para diseñadores web. Optimización para UX. Empoderamiento de UX a través de BigData. Pruebas A/B para aprender del test.
Optimización para UX. Pruebas remotas para analizar las necesidades del usuario.
Pruebas de usabilidad.
Herramienta para la priorización de la usabilidad. Auditor para la usabilidad.
Split Testing es un control por experimentos aleatorios.!
►HERRAMIENTAS.Estructurado de tarjetas (Card Sorting)
Herramienta que permite a tus usuarios armar un árbol de categorías.
Diseño de Prototipos.
Editor de código para web. Diseñador UI. Construye prototipos interactivos. Construye prototipos. Construye prototipos interactivos. Cogtool Construye prototipos. Construye prototipos interactivos. Construye prototipos y diseño multipropósito. Prototipado ágil. Construye prototipos interactivos. Prototipos interactivos de construcción rápida.
Estructurado de tarjetas, permite armar un árbol de estructuras.!
►HERRAMIENTAS.Diseño de Prototipos.
Herramienta integrada.
Herramienta de representación y diseño multipropósito.
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 diseñadores.
Un prototipo es una imagen del producto futuro.!
►HERRAMIENTAS.Evaluación de Diseño
Herramienta para la priorización de la usabilidad. Herramienta de predicción y análisis para sitios web. Análisis experto, recomendaciones y soluciones. Pre evaluación. Optimización de paginas web (prueba de los 5 segundos). Notas mentales, para psicología del diseño web.
Análisis y pruebas de diseño en equipo. Simulación de retroalimentación de usuarios.
Evaluación de Arquitectura de la información Herramienta para la mejora de la navegabilidad. Herramienta para la mejora de la organización. Herramienta para la mejora de la navegabilidad.
Las evaluaciones se pueden hacer en distintas faces del desarrollo, incluso análisis.!
►HERRAMIENTAS.Evaluación de Arquitectura de la información
Herramienta para la mejora de la navegabilidad. Convierte tus mockups, sketches o wireframes a interfaces de validación. Validación para la arquitectura de la información. 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 análisis de resultados. Herramienta para la mejora de la navegabilidad.
Mapa digital de empatía (Process Aids).
Investigación remota de testeo Investigación remota de usabilidad a través 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 simulación).
!
►HERRAMIENTAS.Seguimiento de Bugs
Herramienta Bug tracking. Herramienta Bug tracking.
Encuestas y pruebas de Usuarios Investigación de mercado. Herramienta para la recolección de información.
Herramienta para la recolección de información. Feedback Tool. Herramienta para la recolección de información. Comunidad para la comprensión del usuario. Herramienta para la comprensión del mercado.
El seguimiento de bugs tiene que ver con el proceso de desarrollo en equipo.Las encuestas son herramientas básicas para la recolección de datos.
!
►HERRAMIENTAS.Web analítica
Herramienta para el almacenamiento del comportamiento de visitantes. Web analítica en tiempo real. Análisis de visitantes. Grabación del comportamiento de visitantes. Inteligencia de cliente (CI). Conexión con los visitantes en tiempo real.
Herramienta para el análisis de visitantes. Análisis de visitantes. Web analítica . Herramienta para el almacenamiento del comportamiento de visitantes. Web Analytics liberada. Herramienta para el análisis de audiencia. Analisi de usuarios en tiempo real.
Web Analítica permite cuantificar comportamientos, contar cuantas veces (por ejemplo) hace click un usuario en un link
!
►DEFINICIÓN DE INTERFAZ DE USUARIO (INTERFAZ USER).
• Diseño de Interfaz de Usuario o Ingeniería de Interfaz de Usuario (UI) es el arte de diseño de Sitios Web, computadoras, aplicaciones para PC o móviles y Software en general. Con énfasis en la interacción y experiencia de usuario.
• El objetivo es hacer la interacción software/usuario lo mas simple y eficiente posible.• A menudo se usa el prototipado como comienzo del diseño de interfaces.• Algunos de los métodos/herramientas dentro del estudio complejo del diseño de interfaces,
son: Análisis del comportamiento, Antropometría (movimiento de brazos y cabeza). Tipografía, Ciencia de los comentarios y fuentes de texto. Diseño de la información. Circulación Horizontal. Circulación Vertical. Diseño vs. Interacción. Diseño Grafico.
Modelos Mentales. Metáforas de Interfaces. Flujo de comportamiento. Prototipado. Pruebas de Usabilidad. Grupos de enfoque. Psicología y sociología.
►DISEÑO DE INTERFACES.DISEÑO GRAFICO.
Interface → Gráficos + esquemaBotones + iconos → ilustraciones
EL CEREBRO HUMANO.Gusta de las líneas restas.Reconoce patrones y repeticiones.Le encanta tanto la distribución como los espacios en blanco.
COLORES.Armonía del color, se recomienda conservar una coherencia.
Psicología del color, algunos colores invitan al consumo otrosal romance.
EL color dentro del diseño es, subjetivo.!
►REGLAS DEL DISEÑO DE INTERFACES.LINEAS RECTAS.
Hermoso Feo
EL desorden y la falta de simetría se alejan de lo que consideramos bello.!
►REGLAS DEL DISEÑO DE INTERFACES.PATRONES Y REPETICIONES.
Nada nuevo Inquietante
EL orden tranquiliza.!
►REGLAS DEL DISEÑO DE INTERFACES.PATRONES Y REPETICIONES.
Nada nuevo Inquietante
EL orden tranquiliza.!
►REGLAS DEL DISEÑO DE INTERFACES.ESPACIOS EN BLANCO.
Hermoso Feo
Fácil de contar Difícil de contar
EL desorden y la falta de simetría se alejan de lo que consideramos bello.!
►REGLAS DEL DISEÑO DE INTERFACES.CONTRASTE.
Fácil de reconocer Difícil de reconocerLorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex eacommodo consequat. Duis aute iruredolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpaqui officia deserunt mollit anim id estlaborum.
Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex eacommodo consequat. Duis aute iruredolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpaqui officia deserunt mollit anim id estlaborum.
►TIPOGRAFÍA.El mostrar la información no debe analizarse a través del «¿Cómo?» sino del «¿por que?».
Fácil de leer Difícil de leerLorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex eacommodo consequat. Duis aute iruredolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpaqui officia deserunt mollit anim id estlaborum.
Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex eacommodo consequat. Duis aute iruredolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpaqui officia deserunt mollit anim id estlaborum.
Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex eacommodo consequat. Duis aute iruredolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpaqui officia deserunt mollit anim id estlaborum.
►EJEMPLOS.PATRONES Y REPETICIONES. Líneas rectas y espacios en blanco Diferenciación de colores fácil
La practica, disciplina la búsqueda de la perfección.!
►EJEMPLOS.PATRONES Y REPETICIONES.Los iconos ayudan alusuario a tener unamejor referencia.
No muy importante.
Importante.
Diferenciación por medio dede los colores y las agrupaciones.
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.DISEÑO DE PANTALLAS
Maestro detalle Paleta/Lienzo Buscador por columnas Tablero (Dashboard) Pregunta/Respuesta
Tablas Paneles paralelos Wizard Modelo Interactivo Tabbed
Formulario Busqueda/Resultados Datos Refinados(Filtros) Portal Buscador
La simplicidad es la mejor forma de llegar al cliente.!
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
iWork.com (beta)Site
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
sliderocket.comSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
Discover Spend AnalyzerSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
WesabeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
SugarSync , ActionM ethod, Product-Planner & boxeeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Paleta/Lienzo
Sproud BuilderSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Paleta/Lienzo
Balsamiq MockupsSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Paleta/Lienzo
FlairBuilderSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Paleta/Lienzo
Palm AresSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Maestro detalle
280Slides FloorPlanner Paper CrittersSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Explorador en columnas
OtherInboxSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Explorador en columnas
feed a feverSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Explorador en columnas
Google WaveSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Explorador en columnas
kuler Site
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)
Quicken OnlineSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)
zendoughSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)
optimist onlineSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)
Indianapolis Museum of ArtSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)
PNC Virtual Wallet Have a Mint NASDAQ WesabeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Preguntas y respuestas
Mint – Ways to saveSite
►COMPONENTES UI.BOTONES Estados de botones Tamaños
Variantes
Combos
►COMPONENTES UI.ENTRADAS Estados
Variantes
►COMPONENTES UI.VARIOS Etiquetas Checkboxs
Navegabilidad
►COMPONENTES UI.VARIOS Social Buttons Tablas
Iconos Tooltips Sliders y barra de progreso
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
GRACIAS….
Juan Daniel [email protected]