Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UX/UI para Desarrolladores

139 Aufrufe

Veröffentlicht am

Charla de la Commit Conf 2018 en Noviembre de 2018.

VIDEO: https://www.youtube.com/watch?v=3E-fi2ia7UQ

Aunque no sepas cocinar, ¿a que si sabes distinguir una buena comida de una mala? Lo mismo pasa con el diseño de interfaces de usuario: no hace falta ser un especialista para reconocer errores de bulto en el diseño de UI/UX, y no hace falta ser un experto diseñador para entender las reglas básicas de un buen diseño. Conocer dichas reglas nos ayudará a ser mejores desarrolladores, a aportar nuestro granito de arena en nuestro equipo y a quitarnos ese complejo de "yo es que soy programador y de diseño no entiendo", que al final se convierte en una excusa y una limitación autoimpuesta que - en mi opinión - no tiene ningún sentido. Si tienes los fundamentos necesarios para hacer una tortilla y unas lentejas, podrás ayudar a los cocineros profesionales y apreciar mejor su trabajo.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

UX/UI para Desarrolladores

  1. 1. UX/UI para desarrolladores ¿Zapatero a tus zapatos? @javierabadia Lead Developer en StyleSage
  2. 2. PREVIOUSLY ?
  3. 3. DISCLAIMERPARA PREPARAR ESTA CHARLA HE CONSULTADO Y ME HE INSPIRADO EN MUCHAS FUENTES, PERO LAS OPINIONES Y COSAS QUE ESTÉN MAL SON MÍAS Y SOLO MÍAS. LOS PERSONAJES Y EJEMPLOS QUE APARECEN ESTÁN BASADOS EN SITUACIONES REALES PERO NO SE CORRESPONDEN A NADA NI NADIE EN PARTICULAR. PARA PREPARAR ESTA CHARLA NO SE HA DAÑADO NI MALTRATADO A NINGÚN DISEÑADOR NI DESARROLLADOR. SI HAS PODIDO LLEGAR LEYENDO HASTA AQUÍ, ¡ENHORABUENA!
  4. 4. DISCLAIMER NO HE USADO TEXTO NEGRO #000 EN TODA LA PRESENTACIÓN
  5. 5. OTRO DISCLAIMER UX UI/
  6. 6. OTRO DISCLAIMER UXPM UI
  7. 7. ARTE https://gifer.com/en/TbQf
  8. 8. CIENCIA https://giphy.com/gifs/film-cinemagraph-3o7absMfvwKhHkFFv2/media
  9. 9. DISEÑO https://gifer.com/en/DIQm
  10. 10. GIT Inglés Hablar en Público
  11. 11. 1000 decisiones
  12. 12. ¡Es que me has puesto las letras negras #000! ¿Y que mas dará?
  13. 13. los usuarios solo ven píxeles
  14. 14. Tu proyecto da pena Quita que tu no sabes Tu no opines de colores, que no es lo tuyo
  15. 15. ¡Pero es que ...
  16. 16. ¡Pero es que yo no se dibujar!
  17. 17. ¡Pero es que …
  18. 18. ¡Pero es que la belleza es subjetiva!
  19. 19. universal socio-cultural subjetiva
  20. 20. ¡Pero es que ...
  21. 21. ¡Pero es que yo no entiendo de diseño!
  22. 22. UXPM UI Dv
  23. 23. generar alternativas •creatividad •inspiración evaluar alternativas •criterios objetivos •heurísticas
  24. 24. inventarnos nuestras abstracciones en lugar de usar las de los usuarios
  25. 25. usar nuestra propia escala de valores
  26. 26. usar nuestra propia escala de valores fuente: https://www.joelonsoftware.com/2000/04/12/choices/
  27. 27. usar nuestro vocabulario interlocutor registro item empresa proveedor cliente
  28. 28. usar nuestro vocabulario
  29. 29. hacer nuestro código demasiado simple
  30. 30. hacer nuestro código demasiado simple
  31. 31. hacer nuestro código demasiado simple fuente: https://www.pinterest.es/pin/64035625928729742/
  32. 32. fuente: https://www.reddit.com/r/CrappyDesign/comments/64129d/i_think_this_belongs_here/
  33. 33. impolite software Image credit: usabilla
  34. 34. impolite software Error OK Ha introducido un email incorrecto Error OK Ha seleccionado demasiadas filas. Error OK La imagen está fuera de los límites. Inténtelo de nuevo.
  35. 35. impolite software Error OK Ha introducido un email incorrecto Error OK Ha seleccionado demasiadas filas. Error OK La imagen está fuera de los límites. Inténtelo de nuevo.
  36. 36. impolite software Error de Usuario OK Ha introducido un email incorrecto Error de Usuario OK Ha seleccionado demasiadas filas. Error de Usuario OK La imagen está fuera de los límites. Inténtelo de nuevo.
  37. 37. impolite software • te interrumpe constantemente • pide más de lo que aporta • consume muchos recursos • te interrumpe constantemente • no respeta las preferencias del usuario • utiliza tono condescendiente • “engaña” al usuario para que haga cosas que no quiere https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms ¡Ey! ¡Parece que estás dando una charla! ¿Quieres que te ayude?
  38. 38. safety http://www.tragicdesign.com/
  39. 39. WTF?
  40. 40. errores
  41. 41. errores
  42. 42. errores
  43. 43. errores
  44. 44. borre ficheros para poder borrar ficheros
  45. 45. menos mal
  46. 46. siempre positivo
  47. 47. no me chilles que no te veo
  48. 48. ¿cómo es la buena UX?
  49. 49. nos gusta estar al mando
  50. 50. entender el modelo mental http://web.stanford.edu/~rldavis/educ236/readings/doet/text/ch01.html
  51. 51. la interfaz refleja nuestro modelo mental fuente: https://www.pinterest.es/pin/386254105518891015/
  52. 52. considerate software se pone de mi lado se pone a mi servicio es proactivo usa el sentido común es discreto anticipa mis necesidades no me carga con sus problemas me mantiene informado no pregunta muchas cosas evita que cometa errores se acuerda de las cosas ofrece soluciones incluso antes de pedirlas completa la información incompleta acierta casi siempre smart software
  53. 53. affordance affordance engañosa frustración ok! ok! funcionalidad oculta se ve no se ve se puedeno se puede
  54. 54. https://www.nngroup.com/articles/ten-usability-heuristics/ nielsen’s heuristics
  55. 55. espacio y alineación
  56. 56. espacio y alineación
  57. 57. grids https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
  58. 58. grids https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
  59. 59. el espacio en blanco https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b
  60. 60. gestalt
  61. 61. gestalt https://andyrutledge.com/gestalt-principles-3.html
  62. 62. gestalt https://andyrutledge.com/gestalt-principles-3.html
  63. 63. gestalt
  64. 64. colores
  65. 65. https://color.adobe.com/create/color-wheel/
  66. 66. https://material.io/tools/color
  67. 67. https://fontjoy.com/pairing/
  68. 68. un momento…
  69. 69. textos http://shinytoylabs.com/jargon/ If we inject the port, we can get to the PHP monitor through the redundant GUI panel!My GUI form factor is down, our only choice is to bypass and inject the bluetooth transistor! We need to copy the cross-platform USB network! Try to input the DHCP pixel, maybe it will attach the cross- platform port! The COM feed is down, inject the analog bandwidth so we can input the GUI protocol!
  70. 70. textos http://shinytoylabs.com/jargon/
  71. 71. textos: KISS, conciso y preciso ¿Te gustaría guardar los cambios? ¿Está vd. seguro de que quiere borrar esta foto? Aceptar Cancelar El mensaje ha sido enviado ¿Guardar cambios? ¿Borrar foto? Borrar Conservar Mensaje enviado https://icons8.com/articles/words-to-avoid-writing/
  72. 72. generar alternativas •creatividad •inspiración evaluar alternativas •criterios objetivos •heurísticas
  73. 73. ponerle nombre a las cosas está soso está salado el arroz está duro el arroz está blando tiene pocos tropezones tiene demasiados tropezones tiene chorizo está demasiado seco está demasiado caldoso no está bien alineado hay demasiados elementos hay demasiadas fuentes hay demasiados colores los colores no contrastan no se ve el estado del sistema el mensaje no usa el vocabulario del usuariohay cosas iguales que se comportan distintas hay cosas distintas que se comportan igual hay cosas no relacionadas que están juntas hay cosas relacionadas que están lejos no hay jerarquía ¡que rico! ¡puaj! ¡que bonito! ¡que feo! hay affordances ocultas hay affordances engañosas
  74. 74. Material Design Reglas Heurísticas de Nielsen Principios de Gestalt Teoría del Color …
  75. 75. feedback, por favor

×