UX Design Basics

¿Qué es el diseño UX? El diseño UX (User Experience o experiencia de usuario) es el proceso de crear productos digitales que sean útiles, fáciles de usar y agradables. No se trata solo de que una pantalla "se vea bonita", sino de que la persona logre su objetivo sin fricción ni frustración. Un diseñador UX se pregunta constantemente: ¿quién va a usar esto?, ¿qué necesita lograr?, ¿qué obstáculos encuentra en el camino? Toda decisión de diseño nace de una respuesta a esas preguntas, no de una opi

Principios fundamentales de UX Los principios de UX son reglas probadas que guían tus decisiones cuando no tienes datos suficientes. No son leyes rígidas, pero ignorarlos casi siempre genera productos confusos. Veamos los más importantes. 1. Centrado en el usuario El usuario, no tu gusto personal ni la opinión del jefe, es el centro del proceso. Investiga antes de diseñar, valida con personas reales e itera según el feedback que recibes. 2. Consistencia Mantén patrones predecibles. Si un botón a

Design Thinking: Metodologia creativa Design Thinking es un enfoque centrado en el humano para la innovacion. Combina empatia, creatividad y racionalidad. Las 5 fases 1. Empatizar Entender profundamente a los usuarios. Observar usuarios en su contexto Realizar entrevistas Crear mapas de empatia 2. Definir Sintetizar hallazgos en un problema claro. Analizar datos de investigacion Crear personas Definir el "Point of View" (POV) Formato POV: [Usuario] necesita [necesidad] porque [insight] Ejemplo:

Tipo de lección: QuizQuiz de UX Design BasicsPon a prueba tus conocimientos con este quiz. Necesitas 70% para aprobar.

Investigacion de usuarios La investigacion es la base de todo buen diseno. Sin entender a los usuarios, estamos adivinando. Tipos de investigacion Cualitativa (el "por que") Entrevistas Observacion Pruebas de usabilidad Focus groups Cuantitativa (el "cuanto") Encuestas Analytics A/B testing Metricas de uso Entrevistas de usuario Preguntas abiertas (buenas): - "Cuentame sobre la ultima vez que..." - "Como resuelves actualmente...?" - "Que es lo mas frustrante de...?" - "Que harias si pudieras cam

Herramientas de sintesis User Personas Una persona es un arquetipo ficticio que representa un grupo de usuarios. PERSONA: Maria Garcia Datos demograficos: - 32 anos, Madrid - Gerente de marketing - Ingresos: 45k/ano Biografia: Maria trabaja largas horas y tiene poco tiempo para tareas personales. Busca eficiencia en todo. Objetivos: - Organizar su vida personal - Ahorrar tiempo en tareas repetitivas - Mantener equilibrio trabajo-vida Frustraciones: - Apps complicadas de usar - Demasiadas notific

Analisis competitivo Estudiar la competencia revela oportunidades y mejores practicas. Tipos de competidores Directos: Mismo producto, mismo mercado Indirectos: Diferente producto, misma necesidad Potenciales: Podrian entrar al mercado Que analizar Para cada competidor, evalua: 1. Propuesta de valor - Que problema resuelven? - Como se posicionan? 2. Funcionalidades - Que features tienen? - Que falta? 3. Experiencia de usuario - Como es el onboarding? - Que tan facil es usar? 4. Modelo de negocio

Arquitectura de Informacion (AI) La AI organiza y estructura el contenido de forma que los usuarios puedan encontrar lo que buscan. Componentes de AI Organizacion: Como se agrupan los contenidos Etiquetado: Como se nombran las cosas Navegacion: Como se mueven los usuarios Busqueda: Como encuentran contenido Sitemap Diagrama jerarquico de todas las paginas. Home ├── Productos │ ├── Categoria A │ │ ├── Producto 1 │ │ └── Producto 2 │ └── Categoria B ├── Nosotros │ ├── Historia │ └── Equipo ├── Blo

Wireframes Los wireframes son representaciones de baja fidelidad de una interfaz. Muestran estructura y funcionalidad, no diseno visual. Niveles de fidelidad Baja: Sketches rapidos, cajas y lineas Media: Mas detalle, texto real, proporciones Alta: Cercano al diseno final (ya es mockup) Elementos de wireframe Simbolos comunes: [========] Header/Navigation [ X ] Imagen placeholder [--------] Linea de texto [========] Boton [ □ ] Checkbox [ ○ ] Radio button [_______ ] Campo de texto [▼] Dropdown Ej

Prototipado interactivo Un prototipo es una simulacion interactiva del producto. Permite probar flujos antes de desarrollar. Beneficios Validar ideas rapidamente Comunicar vision a stakeholders Probar con usuarios reales Identificar problemas temprano Ahorrar costos de desarrollo Figma: Conceptos basicos FRAMES (Contenedores) - Desktop: 1440 x 900 - Mobile: 375 x 812 (iPhone) - Tablet: 768 x 1024 COMPONENTES - Elementos reutilizables - Cambias uno, cambian todos - Ideal para botones, cards, head

Usability Testing Las pruebas de usabilidad observan usuarios reales intentando completar tareas con tu producto. Por que hacer pruebas? Descubrir problemas que no viste Validar decisiones de diseno Entender comportamiento real Priorizar mejoras Tipos de pruebas Moderadas: Facilitador presente guiando No moderadas: Usuario solo, grabado Presenciales: En persona Remotas: Por video llamada Planificando la prueba 1. OBJETIVO Que queremos aprender? "Validar si usuarios pueden completar checkout" 2.

Analisis de pruebas Organizando hallazgos Para cada problema encontrado: OBSERVACION Que paso exactamente? "3 de 5 usuarios no encontraron el boton de checkout" SEVERIDAD (1-4) 1 = Cosmetico 2 = Menor - frustra pero completa tarea 3 = Mayor - algunos no pueden completar 4 = Critico - nadie puede completar FRECUENCIA Cuantos usuarios afectados? 60% (3/5 usuarios) EVIDENCIA Cita o video timestamp "No se donde ir ahora" (Usuario 2, 3:45) RECOMENDACION Solucion propuesta "Hacer boton de checkout mas

El ciclo de mejora El diseno UX es iterativo. Nunca terminas de mejorar. Ciclo de iteracion +--------+ | Disenar | +----+----+ | v +--------+ | Construir| +----+----+ | v +--------+ | Medir | +----+----+ | v +--------+ | Aprender| +----+----+ | +---> (volver a Disenar) Implementando cambios Quick wins: Cambios pequenos, alto impacto Mejoras incrementales: Evoluciones graduales Redisenos: Cambios estructurales mayores Medicion continua Metricas a trackear: ENGAGEMENT - Tiempo en pagina - Paginas