Please enable JavaScript.
Coggle requires JavaScript to display documents.
INTRODUCCIÓN AL DISEÑO UX/UI - Coggle Diagram
INTRODUCCIÓN AL DISEÑO UX/UI
ux/user experience
Experiencia al interactuar
Productos o servicios
Utiles
Valiosos
Faciles de usar
Diseñadores UX
Crean productos
Intuitivos
Accesibles
Faciles
Valiosos
Se influencia por
Expectativas
Experiencias previas
Sensación
Sentimiento
Respuesta emocional
Valoración
Satidfacción del usuario
Abarca
Diseño Visual
Arquitectura de la información
Diseño de la interacción
Investigación de usuario
Gestión de contenido
Marketing
Antropología
Sociología
Analisis de negocio
Accesibilidad
Psicología
Diseño Industrial
Gestión de proyectos
UX/UI
Mejoran la experiencia de usuario
Uno no puede vivir sin el otro
UI/Interfaz de usuario
Interacción directa del usuario
Todo lo que vemos y tocamos
Apps
Dispositivos
Páginas web
Presente en segunda etapa
Incorpora al UX elementos estéticos
A la interfaz
Diseño visual
Diseño de interfaz
Sistema de diseño
Colores
Tipografía
Ilustraciones
Iconos
Animaciones
Patrones de diseño
UX
Presente en todo el desarrollo
Desde el inicio hasta el final
Investigación/Estadisticas
Entrevistas/Definicion de personas
Redacción de textos
Arquitectura de la información
Pruebas de usablilidad
Wireframes
Perfil de diseñador UX
Conocimiento
Usuarios
Necesidades
Investigación y análisis de datos
Conocer
Teoria del diseño
Psicología
Habilidad de crear
Estructuras de la navegación
Colaborar
Con equipos de desarrollo
Otros diseñadores
Realizar pruebas
Usabilidad
Entrevistas
Perfil diseñador UI
Diseños atractivos
Sistemas de diseño coherentes
Habilidad para herramientas
Sketch
Illustrator
Photoshop
Trabajar con
Equipo de diseño
Desarrolladores front end
Roles
UX
UX researches
Realizan investigación inicial
UX writers
Redactan y optimizan texto
UX Tester
Prototipos determinar usabilidad
UI
UI Designer
Relaciona elementos del diseño
UI Frontend developer
Desarrolla interfaces de usuario
UI Motion
Construye animación y acción en interfaz
Usabilidad en UX
Facilidad con que las personas pueden utilizar objetos diseñados
Se mide en
Grado de eficacia
Lograr un objetivo con la menor cantidad de
Pasos
Recursos
Grado de eficiencia
Lograr un objetivo planteado
Satisfacción con que el usuario
Logra objetivos especificos
Ventajas aporta un sitio usable
Mejora experiencia de los usuarios
Mejora la satisfacción de los usuarios
Logra mayor comunicación con el usuario
Mayor feedback con el usuario
Consigue más trafico
Aumenta duración de las visitas
Reduce esfuerzo cognitivo
Cómo se hace una página web usable
Conociendo a los usuarios
Tener objetivos claros
Diseño simple
Navegación intuitiva
Accesibilidad
Jerarquía visual
Diseño responsivo
Metodologías de trabajo en el diseño UX/UI
Metodologías tradicionales
Metodologia Waterfall
Cada etapa comienza cuando termina la anterior
Analisis
Diseño
Codificación
Validación
Implementación
Mantenimiento
Metodologías Ágiles
Iterando y aprendiendo a lo largo del proyecto
Se basa en
Flexibilidad
Adaptabilidad
Colaboración
Etapas
Analisis
Diseño
Validación
Design Thinking
Generar ideas innovadoras
Dar solución a necesidades reales
Etapas
Empatizar
Entrevistas con usuarios
Research
Personas
Mapas de empatia
Definir
Punto de vista
Agrupar información de primera etapa
Idear
Lluvia de ideas/Brainstorming
Prototipar
Wireframes
Maquetas
Prototipos interactivos
Testear
Testeos de usabilidad
Entrevistas de validación
Encuesta de feedback
Design Sprint
La clave es el iempo
Mapear
Bocetar
Decidir
Prototipar
Testear
Investigación de usuario
Progreso centrado en comprender
Necesidades
Expectativas
Comportamientos
Motivaciones
Importante para
Efectividad
Atractivo
Usable
Diseñar
Mejorar
Sistemas
Aplicaciones
Técnicas
Estudio etnografías
Mapa de empatia
Persona
Focus groups
Card sorting
Eye tracking
Observación participativa
Diseño de principios
Hopes and fears
Se obtiene info de
Datos Cuantitativos
Análisis cuantitativo
Qué esta pasando
Cuando
Cómo
A quien
Datos Cualitativos
Analisis cualitativo
Por qué
Que piensan las personas
Que sienten las personas
Wireframes
Ilustración bidimensional
Interfaz de una pagina
Enfoca
Asignaciónde espacio
Priorización del contenido
Funcionalidades disponibles
Comportamientos previstos
Caracteristicas
Es estatico
Prioriza el funcionamiento
No hay interacciones
Poco detalle
Escala de grises
Pros
Rapido de realizar
Algo visual desde temprano
Facilmente convertible a un prototipo
Contras
Difícil imaginar como se vera
Aumento de detalles
Altera el diseño
Principios de diseño
Composición (Layout)
Como se presentan los elementos en una interfaz
Ayuda a entender que ven
Encontrar lo que necesitan
Proximidad
Elementos ordenados y unidos
Jerarquia
Diferencia de importancia
Repeticion
Compartir estilos
Equilibrio o balance
Distribución elementos uniforme
Contraste
Elementos destacan más que otros
Espacio en blanco
Espacio entre el contenido
Elementos esenciales de interfaz exitosa
Botones primarios
Toggles
Checkboxes
Radio buttons
Lists/Dropdowns
Text fields
Search bar
Tabs
Sliders
Breadcrumps
Carruseles
Cards
Menús
Tooltips
Menú hamburguesa
Accordions