user experience, ux & ui

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




(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.

!

http://uxmastery.com/resources/techniques/?table_filter=design

►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.!

https://www.bagelhint.com/

http://www.hiconversion.com/solutions/

http://www.intuitionhq.com/

http://www.maxymiser.com/

http://monetate.com/

https://mynaweb.com/

https://www.optimizely.com/

http://usabilitytools.com/

http://usability.com.au/2013/01/accessibility-priority-tool/

►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.!

http://cogtool.hcii.cs.cmu.edu/

http://brackets.io/

http://www.antetype.com/

http://www.filesq.com/

http://www.adobe.com/products/fireworks.html

http://www.fluidia.org/

http://www.infragistics.com/products/indigo-studio

http://iplotz.com/

►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.!

http://www.irise.com/

http://www.apple.com/iwork/keynote/

http://lumzy.com/

http://mockflow.com/

http://www.naviewapp.com/

http://patternry.com/

http://pencil.evolus.vn/

https://pidoco.com/

http://proto.io/

http://uxpin.com/

►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.!

http://usability.com.au/2013/01/accessibility-priority-tool/

http://www.conceptfeedback.com/

http://www.feng-gui.com/

http://fivesecondtest.com/

http://getmentalnotes.com/

http://www.infragistics.com/products/quince/

https://usabilla.com/

http://www.naviewapp.com/

http://www.optimalworkshop.com/optimalsort.htm

http://uxpunk.com/plainframe/

http://uxpunk.com/

►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).

!

http://www.simplecardsort.com/

http://www.solidifyapp.com/

http://www.optimalworkshop.com/treejack.htm

http://www.usabilitest.com/

http://www.userzoom.com/

http://uxpunk.com/websort/

http://uxempathy.com/2012/10/digital-empathy-map/

http://beeux.com/

http://ethn.io/

http://www.pickfu.com/

►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.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.



►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


sliderocket.comSite


Discover Spend AnalyzerSite


WesabeSite


SugarSync , ActionM ethod, Product-Planner & boxeeSite

►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Paleta/Lienzo

Sproud BuilderSite


Balsamiq MockupsSite


FlairBuilderSite


Palm AresSite


280Slides FloorPlanner Paper CrittersSite

►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Explorador en columnas

OtherInboxSite


feed a feverSite


Google WaveSite


kuler Site

►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.Tablero de control (Dashboard)

Quicken OnlineSite


zendoughSite


optimist onlineSite


Indianapolis Museum of ArtSite


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]