Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

7 Principios de Diseño para un software amigable

7.588 visualizaciones

Publicado el

Principios de diseño, ideación, usabilidad, interacción, etc. para crear software con una mejor experiencia de usuario.

Presentación creada y presentada junto con Alex de Fuenmayor para el BCN Dev Con 2012 de Barcelona.

Publicado en: Diseño
  • Sé el primero en comentar

7 Principios de Diseño para un software amigable

  1. 1. 7 PRINCIPIOS DE DISEÑO para un software amigable 1
  2. 2. 2 http://www.straight.com/article-488581/vancouver/lift-restaurant-launches-ipad-menus-vancouver
  3. 3. 3 http://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/
  4. 4. 4
  5. 5. 5
  6. 6. El software es difícil de usar 6
  7. 7. POR CIERTO... Yo soy Javier Gala (@JaviGala)y él es Alex de Fuenmayor (@alexdef) 7
  8. 8. NUESTRA PROPUESTA• Principios de diseño• Fáciles de aprender e implementar• Mejorar la experiencia de usuario de las personas 8
  9. 9. IDEACIÓNDiseño es cómo funciona 9
  10. 10. La mayor parte de la gente comete el error de pensarque el diseño es cómo se ve. La gente piensa que es unbarniz, que a los diseñadores les dan una caja y les dicen “¡Haz que quede bonito!”. Esto no es lo que creemos que es el diseño. No es sólocómo se ve o cómo se siente.El diseño es cómo funciona. - Steve Jobs 10
  11. 11. 11
  12. 12. 12
  13. 13. Actores, contexto y problema 13
  14. 14. 14
  15. 15. PERSONAS 15
  16. 16. 16 http://shownd.com/niti/45399/Storyboarding-and-other-small-UX-projects-aftifacts
  17. 17. 17 http://emilyl1n.squarespace.com/uiux-design/sea-what-you-know-wip/13938645
  18. 18. EL DISEÑO ES CÓMO FUNCIONA• Describir el servicio desde la experiencia• Actores, contexto, problema• Contar una historia• No lo cuentes, dibújalo 18
  19. 19. ARQUITECTURA DE INFORMACIÓN Agrupaciones 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. AGRUPACIONES• Acercar lo relacionado, alejar lo diferente• Si está relacionado debe ser similar 32
  33. 33. 33
  34. 34. DISEÑO DE INTERACCIÓN Transiciones 34
  35. 35. Economía conductual 35
  36. 36. 36
  37. 37. 37
  38. 38. http://www.youtube.com/watch?v=vBPG_OBgTWg 38
  39. 39. 39 http://www.webexhibits.org/colorart/ag.html
  40. 40. 40 http://www.simplifyinginterfaces.com/2010/12/why-evaluate-screens-in-shades-of-grey/
  41. 41. 41 http://www.simplifyinginterfaces.com/2010/12/why-evaluate-screens-in-shades-of-grey/
  42. 42. EN RESUMEN...• Cuando estamos concentrados prestamos poca atención al entorno• Nuestra visión periférica es “borrosa” 42
  43. 43. 43
  44. 44. 44 http://www.flickr.com/photos/joriel/2360038974/
  45. 45. 45
  46. 46. http://vimeo.com/32704624 46
  47. 47. TRANSICIONES• Hacen perceptibles los cambios• Capturan la atención• Ofrecen un refuerzo físico a la relación 47
  48. 48. 48
  49. 49. COHERENCIA VISUAL 49
  50. 50. 50
  51. 51. • Concepto• Color• Tipografía• Grid 51
  52. 52. 52
  53. 53. COLORPercepción visual 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. COMBINACIONES • Acroma • Analoga 57
  58. 58. • Contrastada• Complementaria 58
  59. 59. 59
  60. 60. 60
  61. 61. 61
  62. 62. UNA PISTAhttp://kuler.adobe.com 62
  63. 63. OTRA PISTA 63
  64. 64. CONTENIDOLa Tipografía como elemento básico del lenguaje 64
  65. 65. ¿QUÉ ES LA TIPOGRAFÍA? 65
  66. 66. ¿QUÉ ES LA TIPOGRAFÍA? “La Tipografía debe definir el blanco como la arquitectura define el espacio” - Albert Hollenstein 66
  67. 67. 67
  68. 68. 68
  69. 69. 69
  70. 70. Una misma TIPOGRAFÍA tiene varios usos 70
  71. 71. “Si todo está en negrita, nada lo está” Art Webb71
  72. 72. “Se puede decir ‘Te quiero’ enHelvetica Extra light si quieresir de fino o con Extra Bold siquieres ser intenso y pasional. Y puede que funcione.” - Massimo Vigneli 72
  73. 73. Te quiero / Te quiero 73
  74. 74. GRIDOrdenando el mensaje 74
  75. 75. 75
  76. 76. 76
  77. 77. 77
  78. 78. 78
  79. 79. 79
  80. 80. “El diseño es como unamadre, nadie se da cuentacuando está, pero todo elmundo la echa de menos cuando no” - Santiago Borray 80
  81. 81. - Philippe Starck81
  82. 82. MÓVIL Y MAS ALLÁ Diseñando para múltiples dispositivos 82
  83. 83. 83
  84. 84. 84
  85. 85. EL PROBLEMA ¿Donde se usa? ¿Cuantas veces? ¿Cuanto tiempo? 85
  86. 86. 86
  87. 87. 87
  88. 88. USUARIOSPruebas de usabilidad 88
  89. 89. Ver a través de los ojos de laspersonas que usan el servicio 89
  90. 90. 90
  91. 91. 91
  92. 92. ¿CÓMO SE HACE?• Establecer las tareas principales• Pedir a una persona que las lleve a cabo delante nuestro• Nos callamos y hacemos que hable él• ¡Podemos investigar nuestro servicio o los de la competencia! 92
  93. 93. TESTS AVANZADOS• Preparar un guión y probarlo antes• Usar personas similares a nuestros usuarios reales• Grabar la sesión• Un ayudante tomando apuntes• Evitar las preguntas dirigidas• Revisar la grabación cuanto antes con el equipo 93
  94. 94. PRIORIZAR• Frecuencia• Gravedad• Esfuerzo 94
  95. 95. PRUEBAS DE USABILIDAD• Ver a través de los ojos de los usuarios• Una persona usando nuestro servicio (o el de la competencia) delante nuestro• Sencillo, rápido y barato• Priorizar los resultados 95
  96. 96. 96
  97. 97. LOS 7 PRINCIPIOS• El diseño es cómo funciona• Agrupaciones• Transiciones• Color y grid• La tipografía como elemento básico del lenguaje• Diseñando para múltiples dispositivos• Pruebas de usuario 97
  98. 98. 98
  99. 99. GRACIAS@JaviGala@alexdef 99

×