UX/UI para Desarrolladores
•Descargar como PPTX, PDF•
0 recomendaciones•371 vistas
El documento presenta una charla sobre UX/UI para desarrolladores. Explica conceptos clave como affordances, gestalt, grids, colores, tipografía y heurísticas de diseño. También advierte sobre posibles errores como ignorar el modelo mental del usuario, usar vocabulario técnico o hacer interfaces poco amigables.
Recomendados
Recomendados
Más contenido relacionado
Similar a UX/UI para Desarrolladores
Similar a UX/UI para Desarrolladores (20)
Más de Javier Abadía
Más de Javier Abadía (12)
UX/UI para Desarrolladores
- 1. UX/UI para desarrolladores ¿Zapatero a tus zapatos? @javierabadia Lead Developer en StyleSage
- 2. PREVIOUSLY ?
- 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. DISCLAIMER NO HE USADO TEXTO NEGRO #000 EN TODA LA PRESENTACIÓN
- 11. 1000 decisiones
- 12. ¡Es que me has puesto las letras negras #000! ¿Y que mas dará?
- 14. los usuarios solo ven píxeles
- 18. Tu proyecto da pena Quita que tu no sabes Tu no opines de colores, que no es lo tuyo
- 19. ¡Pero es que ...
- 20. ¡Pero es que yo no se dibujar!
- 27. ¡Pero es que …
- 28. ¡Pero es que la belleza es subjetiva!
- 31. ¡Pero es que ...
- 32. ¡Pero es que yo no entiendo de diseño!
- 39. UXPM UI Dv
- 54. inventarnos nuestras abstracciones en lugar de usar las de los usuarios
- 55. usar nuestra propia escala de valores
- 56. usar nuestra propia escala de valores fuente: https://www.joelonsoftware.com/2000/04/12/choices/
- 59. hacer nuestro código demasiado simple
- 60. hacer nuestro código demasiado simple
- 61. hacer nuestro código demasiado simple fuente: https://www.pinterest.es/pin/64035625928729742/
- 63. impolite software Image credit: usabilla
- 64. 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.
- 65. 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.
- 66. 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.
- 68. 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?
- 71. WTF?
- 72. errores
- 73. errores
- 74. errores
- 75. errores
- 76. borre ficheros para poder borrar ficheros
- 77. menos mal
- 78. siempre positivo
- 79. no me chilles que no te veo
- 80. ¿cómo es la buena UX?
- 82. entender el modelo mental http://web.stanford.edu/~rldavis/educ236/readings/doet/text/ch01.html
- 83. la interfaz refleja nuestro modelo mental fuente: https://www.pinterest.es/pin/386254105518891015/
- 86. 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
- 87. affordance affordance engañosa frustración ok! ok! funcionalidad oculta se ve no se ve se puedeno se puede
- 95. el espacio en blanco https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b
- 96. gestalt
- 99. gestalt
- 100. colores
- 106. un momento…
- 108. 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!
- 110. 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/
- 113. 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
- 117. Material Design Reglas Heurísticas de Nielsen Principios de Gestalt Teoría del Color …
- 118. feedback, por favor
Notas del editor
- 16:30 a 17:15 - 40 min 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.
- La otra noche, en la cena de speakers, Nacho Coloma me preguntó: ¿Pero tu de que palo vas? En anteriores CODEMOTIONS he hablado de cosas muy distintas. A mi me gusta hablar de temas en los que tenga algo que decir y sobre los que tengo opiniones muy fuertes. Actualmente soy el Lead Developer en StyleSage, que como sabéis es una plataforma de analíticas de Big Data para el mundo de la moda. Hay mucho backend y mucho machine learning, pero una parte muy importante de nuestro trabajo es crear una plataforma que sea usable y bonita para nuestros usuarios. Son particularmente difíciles, ya que son gente del mundo de la moda.
- Esta charla está basada en mis opiniones y mi experiencia personal. He tratado de reflejar situaciones que he vivido en primera persona, y que luego he identificado en otros muchos sitios, convenciéndome de que son problemas generales.
- Para los diseñadores que nos estén viendo… ¿hay algún diseñador en la sala? ¿hay algún desarrollador? Trataré de acercar los mundos porque no deben estar separados. Se tiene que acabar el “ELLOS” y “NOSOTROS”. Todos estamos en el mismo equipo para obtener el mejor producto.
- Para empezar, los desarrolladores vemos UX/UI como “una sola cosa”, pero en realidad son disciplinas totalmente diferentes. Solo se parecen en que “es lo que viene antes del desarrollo”
- Y por eso a veces lo confundimos también con Product Managment. Que es otra disciplina totalmente distinta y también muy necesaria para desarrollar productos con éxito. Pero eso ya es otra charla.
- el diseño de interfaces de usuario… ¿es un ARTE? subjetividad, imaginación, provocación, evocar sensaciones, despertar la experiencia humana https://gifer.com/en/TbQf la experiencia humana analogía, metáfora, evaluación subjetividad, imaginación, compromiso, “la justicia” buscar diferencias entre cosas que son iguales
- ¿el diseño de interfaces es una ciencia? experimento, clasificación, análisis, objetividad, racionalidad, neutralidad, reglas, describir la naturaleza https://giphy.com/gifs/film-cinemagraph-3o7absMfvwKhHkFFv2/media el mundo natural experimento, clasificación, análisis objetividad, racionalidad, neutralidad, “la verdad” bucar similaridades entre cosas que son distintas
- el DISEÑO no es ni una cosa ni la otra trata del mundo artificial, de resolver problemas, modelar, patrones, practicidad, ingenio, empatía https://uxdesign.cc/design-is-not-science-art-or-engineering-5e8d2f499494 https://gifer.com/en/DIQm el mundo artifical modelado, patrones, síntesis practicidad, ingenio, empatía, “lo apropiado” crear “todos” válidos a partir de partes “inválidas” como funciona, resuelve problemas no es decoración, no es adorno, no es apariencia
- como desarrolladores, necesitamos tener competencia en esta habilidad NO HAY DISCUSIÓN el diseño de interfaces es imprescindible igual que el inglés o git o hablar en público
- cuando estamos implementando una aplicación siguiendo el diseño de un diseñador UX/UI tenemos que tomar 1000 decisiones es como seguir una receta de cocina… está todo muy claro, pero por el camino tenemos que tomar decisiones: “un chorro de aceite”, “corregir el punto de sal”, “pochar una cebolla”… en la receta no están explicados todos los detalles, ni todas las posibilidades: nosotros - los que estamos cocinando - tenemos que tomar decisiones y somos responsables de tomarlas bien. Los diseñadores están pensando “no por dios, que no piensen”. Si, hay que pensar, hay que hacerse co-responsable del diseño que se está implementando. Lo puedes estropear, lo puedes corregor o incluso lo puedes mejorar.
- también tenemos que saber de diseño para comunicarnos mejor con el diseñador para hablar su idioma para entender cómo y porqué toma las decisiones que toma para valorar la importancia de esas decisiones NO DA IGUAL
- otra razón es que no siempre tenemos un diseñador a mano para tus proyectos personales para demos, pruebas de concepto…
- SECRETO: corolarios If you show a nonprogrammer a screen which has a user interface that is 90% worse, they will think that the program is 90% worse. If you show a nonprogrammer a screen which has a user interface which is 100% beautiful, they will think the program is almost done. The dotcom that has the cool, polished looking web site and about four web pages will get a higher valuation than the highly functional dotcom with 3700 years of archives and a default grey background. When you’re showing off, the only thing that matters is the screen shot. Make it 100% beautiful.
- balsamiq no hace falta explicar que “todavía no está terminado” “igual que no tienes que decir este tomate es rojo” “SE VE”
- paper css
- pero yo no se dibujar
- pero yo no se dibujar
- este libro, dice que nuestro cerebro simbólico es el que nos impide dibujar
- nuestro cerebro nos dice que una silla tiene 4 patas, y que las 4 son iguales y cuando la dibujamos, intentamos dibujar las cuatro patas y tratamos de dibujarlas iguales
- los dibujantes no ven sillas ven formas geométricas planas esto es un trapecio, aunque mi cerebro sabe que en la realidad sería un cuadrado
- mas fundamento? ejemplos? creo que no hace falta
- ¿cómo os habéis quedado?
- a mi déjame que yo no entiendo de diseño
- si entendemos de diseño si sabemos reconocer el buen diseño y estamos rodeados de buena UX
- somos buenos decidiendo si algo está bien o mal es decir, igual no sabes dibujar, pero si sabes decir si un dibujo es bueno o malo igual no sabes hacer paellas, pero si sabes decir si una paella está buena o mala
- no es arte, no es ciencia, es diseño
- sabemos distinguir el buen y mal diseño y sabemos seguir reglas
- como en la cocina sabemos si un plato está bueno o malo sabemos seguir recetas https://gifer.com/en/G79g
- vale, a lo mejor no vamos a ser los mejores chefs del mundo pero podemos intentarlo TENEMOS que intentarlo
- definición - producto ux - nielsen ui - gestalt, teoría del color, fuentes desarrollo todas estas actividades tienen sus reglas, sus herramientas y sus criterios, en esta charla me voy a centrar en UX y UI
- algoritmo general el proceso de diseño: encontrar una solución a un problema buscar alternativas evaluar alternativas quedarnos con la mejor alternativa
- y muchas veces no está tan claro cual es la mejor alternativa, hay heurísticas contradictorias, o nos equivocamos al evaluar la importancia de las restricciones que tenemos al problema cual es el mejor diseño? el que usan los usuarios 1970 a 1972 MoMA
- vamos a ver esas reglas de UX y cómo se aplican o se dejan de aplicar
- un ejemplo falta de jerarquía por donde empiezo? dónde está la función más importante? por que cambiar el logo de la empresa está al mismo nivel?
- por qué existe esta pantalla?
- valores por defecto incorrectos vamos a buscar un cliente
- conozco el nombre y el NIF mmm… ¿qué es eso de código interlocutor?... eso no son NIFs voy a probar la búsqueda RAPIDA (mejor que la lenta)
- ups! era esto!
- bueno, le vuelvo a dar a ver qué tipos de búsqueda tengo? os recuerdo, tengo el nombre y el nif pues voy a probar por nombre
- supongo que “Aplicar”
- ups! no está!
- vuelvo al punto de partida ESTAMOS EN 2018
- ordenar por Nombre, llegar a la página 3 (tengo suerte de que empieza por C) y lo encuentro la búsqueda solo funciona si pones el nombre COMPLETO Y EXACTAMENTE IGUAL y supongo que tendré que “Cargar Interlocutor” a estas alguras ya me quiero cargar a alguien
- metáforas
- me ha costado mucho hacerlo -> debe ser importante la ayuda de Windows 95
- https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms
- Ha introducido un email incorrecto Ha seleccionado demasiadas filas Error de Usuario: … La imagen está fuera de los límites, inténtelo de nuevo https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms
- Ha introducido un email incorrecto Ha seleccionado demasiadas filas Error de Usuario: … La imagen está fuera de los límites, inténtelo de nuevo https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms
- Ha introducido un email incorrecto Ha seleccionado demasiadas filas Error de Usuario: … La imagen está fuera de los límites, inténtelo de nuevo https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms
- https://es.slideshare.net/jonshariat/tragic-design-how-to-avoid-bad-design-that-harms
- hawaii missile alert http://www.tragicdesign.com/
- porque normalmente no se “diseñan”
- porque normalmente no se “diseñan”
- la fina línea entre el listo y el listillo
- cuadrante mágico se ve - se puede = ok se ve - no se puede = false affordance -> frustración no se ve - se puede = hidden functionality no se ve - no se puede = ok
- https://www.nngroup.com/articles/ten-usability-heuristics/ y voy a explicarlas de una en una no, en serio, lo que quiero es que sepáis que existen, que son reglas que nos describen perfectamente todos los fallos que hemos visto anteriormente podemos usarlas a priori, y a posteriori 2 - vocabulario de las facturas 3 - control y libertad, no puedo volver atrás 6 - el avión
- además, esto que es “menos importante” aparece en negrita, pero atenuado los botones están más cerca de lo de abajo que de los controles… ¿cómo están agrupadas las cosas?
- https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
- https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
- el todo tiene una existencia independiente de las partes
- proximidad
- similaridad para organizar errores = cosas iguales deberían comportarse igual
- figure / ground https://andyrutledge.com/gestalt-principles-1-figure-ground-relationship.html https://andyrutledge.com/gestalt-principles-2-similarity.html cosas iguales deberían comportarse igual
- https://material.io/design/color/the-color-system.html#tools-for-picking-colors
- https://material.io/design/communication/writing.html#principles
- https://material.io/design/communication/writing.html#principles
- fast food
- el proceso de diseño: encontrar una solución a un problema buscar alternativas evaluar alternativas quedarnos con la mejor