Presentación sobre el diseño de experiencia de usuario en interfaces gráficas de usuario. Presentación de casos de éxito Diseño de Interfaces

1. Luis Correa Alfaro
UX, Experiencia de Usuario Diseñador en Comunicación Visual

2. Se define como la sensación,
sen>miento, respuesta emocional,
valoración y sa>sfacción del usuario
UX, Experiencia de Usuario respecto a un producto, resultado del
fenómeno de interacción con el
producto y la interacción con su
proveedor.

4. CLI GUI NUI OUI
Command Line Graphical User Natural User Organic User
Interface Interface Interface Interface
(Texto) (Gráficos) (Objetos) (Orgánico)

5. Propiedad de ser evidente la parte del
Principio de “affordance” objeto sobre la que hemos de realizar la
acción y cómo hacerlo.

8. Proceso
Etapa Etapa Etapa Etapa
Etapa 1 Etapa 2
3 4 5 6
• Comprensión del
Problema
• Diagrama de Secuencia
• Requerimiento
Funcional
• Observación de campo
• Entrevistas
• Benchmark
• Necesidades de Usuario
• Evaluación de
Interacción
• Estructura Funcional
• Definición Tecnológica
• Sketch
• Modelos mentales
• Escenarios de acciones
‐ Frecuentes
‐ Necesarias
‐ Marginales • Especificaciones
• Perfil de usuarios funcionales
• Modelamiento • Poblamiento de datos
de contenido • Usabilidad
• Wireframe • Diseño de interfaz,
Look & Feel
• Implementación

9. Casos de éxito

10. CODELCO, Dashboard con
indicadores analógicos de flujo y
variabilidad de los procesos
produc>vos de la planta

11. Mockup

14. Venta de seguros on‐line,
PENTA Security
concepto tres pasos

16. Retail, aplicación para
ges>ón de promociones,
LIDER, JUMBO

17. Wireframe post‐análisis
Implementación inicial

19. Aplicación Touch para
pesaje de cátodos de
cobre, CODELCO

22. Portal único de
información estudian>l,
UTEM

24. RETAIL
Aplicación para Back Office

25. Implementación original con template por defecto

26. Rediseño de interfaz visualización wireframe

27. Propuesta de diseño de interfaz gráfica

28. Repositorio mul>media
para contenidos de cursos
online SERNAM

30. Portal Ediciones
Universidad Tecnológica
Metropolitana

32. Portal de acceso administración
tutores, proyecto CUECH,
Consorcio de Universidades
Estatales de Chile

35. Portal de Recursos Tecnológicos
Universidad Tecnológica
Metropolitana

37. Portal de Congreso
Universidad Tecnológica
Metropolitana

39. Portal de REKO
Universidad Tecnológica
Metropolitana

41. Si>o UMD
Wordpress de la Unidad de
Mejoramiento Docente
Universidad Tecnológica Metropolitana

43. Aplicación Web
TIBCO‐COASIN
Canadá‐Chile

47. Sitio web
REWORK

49. Luis Correa Alfaro
Candidato a Doctor en Inves>gación en Diseño por la Universidad de
Barcelona, Diploma de Estudios Avanzados DEA, Universidad de Barcelona y
Diseñador en Comunicación Visual de la Universidad Tecnológica
Metropolitana, UTEM.
Las áreas de inves>gación y desarrollo son:
• UX, User Experience
• Arquitectura de Información, Ai
• HCI, Interacción Humano Computador
• Ergonomía Cogni>va en Entornos Mul>mediales
• Usabilidad y Comunicabilidad en la Web
• Percepción Visual y Eficacia de los Mensajes
• Impacto en la Ar>culación Visual de las Marcas
• Orientación atencional en el procesamiento espacial
de eshmulos visuales
Desde hace 12 años trabajo como Coordinador del Área Gráfica y Mul>media
del programa de Educación a Distancia, Utemvirtual, de la Universidad
Tecnológica Metropolitana, Chile
Además tengo 17 años de experiencia en consultoría para empresas
tecnológicas de áreas del retail, minería y tecnologías de comunicación en el
diseño de arquitectura de información y diseño de interfaces gráficas de
usuario para aplicaciones tecnológicas, sistemas touch screen, dashboard
para la medición analógica del Flujos y Variabilidad de los procesos
produc>vos, Kioscos interac>vos de consulta de información y diseño de
interfaces para Pocket PC y telefonía móvil.

50. hmp://luiscorrea.wordpress.com
Twimer: @correavision