User Experience, UX & UI

DISEÑO:
Juan Daniel Pacheco
dennieru@facebook.com

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ón
 Diseñ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
previa
Regresar a una
previa
Regresar a una
previa
(The wheel)

► INDAGACIÓN CONTEXTUAL
ESTRATEGIA
► 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 Datos
Conversaciones
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
DEF
BCDEF
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.
!
Técnicas de diseño UX
►Estudios diarios.
►Entrevistas a usuarios.
►Pruebas con usuarios.
►StoryBoards.
►Personas.
►Modelos Mentales.
►Diseño Colaborativo.
►Diagrama de Flujo de
Trabajo.
►Sitemap.
►Wireframe.
►Prototipos de papel.
►Tabla de tendencias.
►Versión Beta.

►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.
Cogtool Construye prototipos.
Construye prototipos y diseño multipropósito.
Prototipado ágil.
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 interactivos y colaborativos.
Construye recursos Front/End.
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.
Las evaluaciones se pueden hacer en distintas faces del desarrollo, incluso análisis.!

►HERRAMIENTAS.
Evaluación de Arquitectura de la información
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.
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.
Feedback Tool.
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 + esquema
Botones + 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 otros
al 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.!

PATRONES Y REPETICIONES.
Nada nuevo Inquietante
EL orden tranquiliza.!

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

CONTRASTE.
Fácil de reconocer Difícil de reconocer
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.
laborum.

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

►EJEMPLOS.
Líneas rectas y espacios en blanco Diferenciación de colores fácil
La practica, disciplina la búsqueda de la perfección.!

►EJEMPLOS.
Los iconos ayudan al
usuario a tener una
mejor referencia.
No muy importante.
Importante.
Diferenciación por medio de
de 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.!

Maestro detalle
iWork.com (beta)Site

Maestro detalle
sliderocket.comSite

Maestro detalle
Discover Spend AnalyzerSite

Maestro detalle
WesabeSite

Maestro detalle
SugarSync , ActionM ethod, Product-Planner & boxeeSite

Paleta/Lienzo
Sproud BuilderSite

Paleta/Lienzo
Balsamiq MockupsSite

Paleta/Lienzo
FlairBuilderSite

Paleta/Lienzo
Palm AresSite

Maestro detalle
280Slides FloorPlanner Paper CrittersSite

Explorador en columnas
OtherInboxSite

feed a feverSite

Google WaveSite

kulerSite

Tablero de control (Dashboard)
Quicken OnlineSite

zendoughSite

optimist onlineSite

Indianapolis Museum of ArtSite

PNC Virtual Wallet Have a Mint NASDAQ WesabeSite

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

GRACIAS….
Juan Daniel Pacheco
dennieru@facebook.com

User Experience, UX & UI

Más contenido relacionado

Destacado

Similar a User Experience, UX & UI

Último

User Experience, UX & UI