Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SALVEMOS AL USUARIO 
User Experience para diseñadores y desarrolladores
Anix 
adventures 
En esta edición: 
¡Me compré un 
Tutúuuuuu!! 
cualquier semejanza con la realidad es pura 
coincidencia
© Adogslifephoto | Dreamstime.com - Yorkshire Terrier Dog Wearing Pink Tutu Photo
FIRST
1 HORA después... 
(de veras de veritas)
RIIIING!
Domingo, 20hs... 
... El horario de 
atención es 
Lunes a Viernes 
de 9 a 18hs ...
*&%# 
%$#!!*&%# 
%$#!! 
¡Calma Anix! 
*&%# 
%$#!!
De cómo 
EL MINISTERIO DE 
SEGURIDAD 
consumió 
UNA HORA 
de vida de Anix
? 
Anix
Anix 
08/09/2014 
CUPO COMPLETO
Anix 
09/09/2014 
CUPO COMPLETO
Anix 
10/09/2014 
CUPO COMPLETO
Anix 
Turno disponible: 
MALARGU¨E 
#%*&* 
Vivo en capital!
Anix 
:: Refrescó el navegador 
:: ReInició la búsqueda 
:: Probó todos los botones 
y encontró turno en 
ALVEAR?
? 
Basu 
Anix 
2811110 
1 
01 01 123 
4 
Alvear Alvear 
¿Puedo cambiar mi nombre?
? 
Alvear Alvear 
¿Y el tercer paso? 
¿No saben todo esto ya?
? 
Alvear Alvear 
¿Donar?
RIIIING!
Domingo, 20hs... 
... El horario de 
atención es 
Lunes a Viernes 
de 9 a 18hs ...
*&%# 
%$#!!*&%# 
%$#!! 
¡Calma Anix! 
*&%# 
%$#!!
OH! 
¿Y ahora 
QUIEN podrá 
ayudarme? 
Y ahora ?!
UX
uxmeme.tumblr.com/ 
¿¿UX que?? 
CALMA, CALMA, 
QUE NO PANDA EL CUNICO
Diseño de experiencia de usuarios 
Es el proceso de aumentar la satisfacción y lealtad del 
cliente mediante la mejora de ...
Modelo Causa Efecto 
de la Experiencia del Usuario 
USUARIO 
Condiciones físicas, 
psicológicas, aprendizaje 
y experienci...
Facetas de UX 
ux honeycomb de Peter Morville
UX es un proceso que previene, 
detecta y resuelve problemas
Claves 
1. Foco temprano y continuo en 
el usuario y sus tareas 
Fuente: La Fábula del Diseñador Centrado en el Usuario
Claves 
2. Medición empírica del 
comportamiento del usuario 
Fuente: La Fábula del Diseñador Centrado en el Usuario
Claves 
3. Diseño Iterativo 
Fuente: La Fábula del Diseñador Centrado en el Usuario
The UX Umbrella by Dan Willis
Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne
No se vayan 
Este bloque fue presentado por 
Flavia Ibañez 
flavia@noviggo.com | @flaviaza
No se pierdan el próximo bloque 
en 15’ 
Taller UX: Diseño Visual 
a cargo de 
Analía Basualdo 
Marité Impellizzeri 
y la ...
IxDA es una asociación creada para difundir la disciplina del 
Diseño de Interacción, que conforma (junto a usabilidad, 
a...
Queremos mejorar la educación y divulgación de UX en español. 
Queremos llegar a un nuevo estándar profesional. 
Y queremo...
0. Introducción 
1. Prototipado rápido 
2. Heurísticas 
3. Evaluaciones de 
Usabilidad 
4. Diseño Visual 
5. Accesibilidad...
10 Superpoderes 
para un 
diseño visual eficaz
1 
No pensar en la solución sino en el 
USUARIO 
Problema - Mensaje
¡Mis antenitas de vinil, están 
detectando la presencia del enemigo!
Planteo del Problema 
El sitio de turnos del Ministerio de Seguridad fue 
creado para facilitar el trámite a la comunidad....
2 
No sos vos ¡Soy yo! 
Comunicar Visualmente
Mensaje visual 
1. Usuario (novia) 
2. Mensaje - premisas (él quiere dejarla) 
3. Estrategia (cómo decirlo)
Premisas 
● Que el usuario comprenda el objetivo principal del sitio. 
● Orden y jerarquía en la información. 
● Legibilid...
3 
Ojos que no ven… que cien volando 
Búsqueda de Antecedentes
4 
La arquitectura invisible 
Grilla y Composición
Grilla constructiva 
1. Retícula, modulación invisible 
2. Disposición natural y segura 
3. Jerarquía visual 
4. Consisten...
BGarlialnlacse
5 
¡Que empiece la fiesta! 
llegaron los... 
Elementos compositivos
Composición 
1. Balance 
2. Jerarquía 
3. Patrón 
4. Ritmo 
5. Espacio 
6. Proporción 
7. Énfasis 
8. Movimiento 
9. Contr...
Balance
Herencia
Patrón
Patrón
Ritmo
PRaittmróon
Espacio
ERsiptamcoio
Proporción
PrRopitomrcoión
Enfasis
Movimiento
Movimiento
Contraste
Contraste
Unidad
Unidad
6 
Cosa ‘e mandinga 
Psicología y Color
La importancia del Color 
1. Es una de las razones principales por la que se adquiere 
un producto. 
2. Crean estados de á...
Agua 
Paz 
masculinidad 
serenidad 
calma 
frío 
seriedad 
refrescante 
amigable 
seguridad 
confianza 
empresa productiva...
7 
No es solo lo que dice 
sino cómo lo dice 
Tipografía
La palabra escrita 
1. Medio para transmitir un mensaje 
2. Configuración visual 
3. Ojo! todo comunica
Display 
Serif 
Sans Serif Comic 
RETRO 
Handwriting 
Script 
Fantasy 
Egipcia 
Stencil
Light 
Normal 
Bold 
Itálica 
Condensada
8 
Cuando dicen que vale más 
que mil palabras... 
Imágenes e Iconos
Imagen icónica 
”Es representación de la apariencia 
visual de un objeto real” 
1. Representativo 
2. Simbólico 
3. Abstra...
9 
Coherencia y Consistencia 
Patrones y guías de estilos
Guías de estilo
Guías de estilo 
1. Diseño colaborativo. 
2. Colección viviente de los productos que enfrenta 
el usuario. 
3. Crean efici...
10 
No se trata sólo de una cara bonita 
Usabilidad y Diseño Visual
Usabilidad y diseño visual 
1. Los proyectos con buen diseño tienen clientes más 
satisfechos e incrementan la lealtad. 
2...
¡Así es como quedó 
cuando aplicamos 
los superpoderes!
Seguir aprendiendo 
links y libros de interés 
1. http://hellohappy.org/beautiful-web-type/ 
2. http://www.lukew.com/ff/en...
Y aún hay más! 
Este bloque fue presentado por 
ANALIA BASUALDO - MARITE IMPELLIZZERI 
@anagraphics - analiabasualdo@gmail...
Moraleja
UX también es branding 
Sin un diseño visual bien APLICADO la 
marca no será elegida, recordada o 
reconocida
El diseño visual facilita 
una buena experiencia 
Sin un diseño visual bien planteado el 
producto no resolverá una necesi...
Una buena experiencia 
depende de TODOS los 
que intervienen
+ Márketing 
+ Gerencia 
+ Dueños 
+ etc 
Fuente: What's the difference between a UX Designer and a UI Developer by Ben Me...
Y de que TODOS 
conozcan un poco del 
mundo del otro
GRACIAS! 
IxDA Mendoza: Diego, Matías, Analía, Franco, Marité, 
Flavia, Eugenio, Silvana, Sebastián 
www.ixdamza.com.ar - ...
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Taller UX: Salvando al usuario - Diseño visual
Upcoming SlideShare
Loading in …5
×

Taller UX: Salvando al usuario - Diseño visual

Con diseño visual optimizado aumentamos la satisfacción y lealtad del cliente mediante la mejora de la usabilidad, facilidad de uso y el placer proporcionado en la interacción entre el cliente y el producto.

Taller UX: Salvando al usuario - Diseño visual

  1. 1. SALVEMOS AL USUARIO User Experience para diseñadores y desarrolladores
  2. 2. Anix adventures En esta edición: ¡Me compré un Tutúuuuuu!! cualquier semejanza con la realidad es pura coincidencia
  3. 3. © Adogslifephoto | Dreamstime.com - Yorkshire Terrier Dog Wearing Pink Tutu Photo
  4. 4. FIRST
  5. 5. 1 HORA después... (de veras de veritas)
  6. 6. RIIIING!
  7. 7. Domingo, 20hs... ... El horario de atención es Lunes a Viernes de 9 a 18hs ...
  8. 8. *&%# %$#!!*&%# %$#!! ¡Calma Anix! *&%# %$#!!
  9. 9. De cómo EL MINISTERIO DE SEGURIDAD consumió UNA HORA de vida de Anix
  10. 10. ? Anix
  11. 11. Anix 08/09/2014 CUPO COMPLETO
  12. 12. Anix 09/09/2014 CUPO COMPLETO
  13. 13. Anix 10/09/2014 CUPO COMPLETO
  14. 14. Anix Turno disponible: MALARGU¨E #%*&* Vivo en capital!
  15. 15. Anix :: Refrescó el navegador :: ReInició la búsqueda :: Probó todos los botones y encontró turno en ALVEAR?
  16. 16. ? Basu Anix 2811110 1 01 01 123 4 Alvear Alvear ¿Puedo cambiar mi nombre?
  17. 17. ? Alvear Alvear ¿Y el tercer paso? ¿No saben todo esto ya?
  18. 18. ? Alvear Alvear ¿Donar?
  19. 19. RIIIING!
  20. 20. Domingo, 20hs... ... El horario de atención es Lunes a Viernes de 9 a 18hs ...
  21. 21. *&%# %$#!!*&%# %$#!! ¡Calma Anix! *&%# %$#!!
  22. 22. OH! ¿Y ahora QUIEN podrá ayudarme? Y ahora ?!
  23. 23. UX
  24. 24. uxmeme.tumblr.com/ ¿¿UX que?? CALMA, CALMA, QUE NO PANDA EL CUNICO
  25. 25. Diseño de experiencia de usuarios Es el proceso de aumentar la satisfacción y lealtad del cliente mediante la mejora de la usabilidad, facilidad de uso y el placer proporcionado en la interacción entre el cliente y el producto.
  26. 26. Modelo Causa Efecto de la Experiencia del Usuario USUARIO Condiciones físicas, psicológicas, aprendizaje y experiencias, etc MICRO ENTORNO Condiciones del entorno inmediato a la situación de uso MACRO ENTORNO Cultura- tecnología disponible demografía - política - economía PRODUCTO Marca PROPUESTA DE VALOR DEL NEGOCIO Objetivos del negocio EJECUCIÓN DEL PRODUCTO Equipo, Procesos UX percepción positiva o negativa
  27. 27. Facetas de UX ux honeycomb de Peter Morville
  28. 28. UX es un proceso que previene, detecta y resuelve problemas
  29. 29. Claves 1. Foco temprano y continuo en el usuario y sus tareas Fuente: La Fábula del Diseñador Centrado en el Usuario
  30. 30. Claves 2. Medición empírica del comportamiento del usuario Fuente: La Fábula del Diseñador Centrado en el Usuario
  31. 31. Claves 3. Diseño Iterativo Fuente: La Fábula del Diseñador Centrado en el Usuario
  32. 32. The UX Umbrella by Dan Willis
  33. 33. Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne
  34. 34. No se vayan Este bloque fue presentado por Flavia Ibañez flavia@noviggo.com | @flaviaza
  35. 35. No se pierdan el próximo bloque en 15’ Taller UX: Diseño Visual a cargo de Analía Basualdo Marité Impellizzeri y la colaboración de Sebastián Veggiani
  36. 36. IxDA es una asociación creada para difundir la disciplina del Diseño de Interacción, que conforma (junto a usabilidad, arquitectura de la información y accesibilidad, entre otras) el ecosistema del Diseño de Experiencias del Usuario.
  37. 37. Queremos mejorar la educación y divulgación de UX en español. Queremos llegar a un nuevo estándar profesional. Y queremos construirlo colaborativamente.
  38. 38. 0. Introducción 1. Prototipado rápido 2. Heurísticas 3. Evaluaciones de Usabilidad 4. Diseño Visual 5. Accesibilidad 6. Diseño de Interacción 7. Arquitectura de la Información
  39. 39. 10 Superpoderes para un diseño visual eficaz
  40. 40. 1 No pensar en la solución sino en el USUARIO Problema - Mensaje
  41. 41. ¡Mis antenitas de vinil, están detectando la presencia del enemigo!
  42. 42. Planteo del Problema El sitio de turnos del Ministerio de Seguridad fue creado para facilitar el trámite a la comunidad. El servicio no está resolviendo esa necesidad, lo que causa frustración y una opinión negativa sobre el Ministerio. Cómo podemos mejorar el servicio para que las personas puedan reservar su turno con éxito?
  43. 43. 2 No sos vos ¡Soy yo! Comunicar Visualmente
  44. 44. Mensaje visual 1. Usuario (novia) 2. Mensaje - premisas (él quiere dejarla) 3. Estrategia (cómo decirlo)
  45. 45. Premisas ● Que el usuario comprenda el objetivo principal del sitio. ● Orden y jerarquía en la información. ● Legibilidad. ● Dar importancia al Ministerio de Seguridad para reforzar identidad y pertinencia. ● Que connote: seriedad, formalidad, simpleza, seguridad.
  46. 46. 3 Ojos que no ven… que cien volando Búsqueda de Antecedentes
  47. 47. 4 La arquitectura invisible Grilla y Composición
  48. 48. Grilla constructiva 1. Retícula, modulación invisible 2. Disposición natural y segura 3. Jerarquía visual 4. Consistencia visual
  49. 49. BGarlialnlacse
  50. 50. 5 ¡Que empiece la fiesta! llegaron los... Elementos compositivos
  51. 51. Composición 1. Balance 2. Jerarquía 3. Patrón 4. Ritmo 5. Espacio 6. Proporción 7. Énfasis 8. Movimiento 9. Contraste 10. Unidad
  52. 52. Balance
  53. 53. Herencia
  54. 54. Patrón
  55. 55. Patrón
  56. 56. Ritmo
  57. 57. PRaittmróon
  58. 58. Espacio
  59. 59. ERsiptamcoio
  60. 60. Proporción
  61. 61. PrRopitomrcoión
  62. 62. Enfasis
  63. 63. Movimiento
  64. 64. Movimiento
  65. 65. Contraste
  66. 66. Contraste
  67. 67. Unidad
  68. 68. Unidad
  69. 69. 6 Cosa ‘e mandinga Psicología y Color
  70. 70. La importancia del Color 1. Es una de las razones principales por la que se adquiere un producto. 2. Crean estados de ánimo. 3. Determinan las primeras impresiones de un usuario. 4. Tienen significado.
  71. 71. Agua Paz masculinidad serenidad calma frío seriedad refrescante amigable seguridad confianza empresa productiva Azul estabilidad
  72. 72. 7 No es solo lo que dice sino cómo lo dice Tipografía
  73. 73. La palabra escrita 1. Medio para transmitir un mensaje 2. Configuración visual 3. Ojo! todo comunica
  74. 74. Display Serif Sans Serif Comic RETRO Handwriting Script Fantasy Egipcia Stencil
  75. 75. Light Normal Bold Itálica Condensada
  76. 76. 8 Cuando dicen que vale más que mil palabras... Imágenes e Iconos
  77. 77. Imagen icónica ”Es representación de la apariencia visual de un objeto real” 1. Representativo 2. Simbólico 3. Abstracto
  78. 78. 9 Coherencia y Consistencia Patrones y guías de estilos
  79. 79. Guías de estilo
  80. 80. Guías de estilo 1. Diseño colaborativo. 2. Colección viviente de los productos que enfrenta el usuario. 3. Crean eficiencia. 4. Desarrollo más ágil.
  81. 81. 10 No se trata sólo de una cara bonita Usabilidad y Diseño Visual
  82. 82. Usabilidad y diseño visual 1. Los proyectos con buen diseño tienen clientes más satisfechos e incrementan la lealtad. 2. La estética comunica credibilidad. Tiene tres componentes: integridad, armonía y resplandor. 3. El buen diseño crea grandes experiencias. 4. Recordamos las malas y buenas experiencias, no las comunes. Los detalles importan.
  83. 83. ¡Así es como quedó cuando aplicamos los superpoderes!
  84. 84. Seguir aprendiendo links y libros de interés 1. http://hellohappy.org/beautiful-web-type/ 2. http://www.lukew.com/ff/entry.asp?1915 3. https://hackdesign.org/lessons 4. http://tympanus.net/codrops/category/articles/ 5. Participar de Ixda Mendoza!
  85. 85. Y aún hay más! Este bloque fue presentado por ANALIA BASUALDO - MARITE IMPELLIZZERI @anagraphics - analiabasualdo@gmail.com / mariteimpellizzeri83@gmail.com SEBASTIAN VEGGIANI @efedoce - sveggiani@gmail.com
  86. 86. Moraleja
  87. 87. UX también es branding Sin un diseño visual bien APLICADO la marca no será elegida, recordada o reconocida
  88. 88. El diseño visual facilita una buena experiencia Sin un diseño visual bien planteado el producto no resolverá una necesidad
  89. 89. Una buena experiencia depende de TODOS los que intervienen
  90. 90. + Márketing + Gerencia + Dueños + etc Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne
  91. 91. Y de que TODOS conozcan un poco del mundo del otro
  92. 92. GRACIAS! IxDA Mendoza: Diego, Matías, Analía, Franco, Marité, Flavia, Eugenio, Silvana, Sebastián www.ixdamza.com.ar - www.facebook.com/ixdamza

×