Taller UX: Diseño visual - IxDA Mendoza

  • View
    175

  • Download
    2

Embed Size (px)

DESCRIPTION

We provide a talk about general aspects of UX and Visual Design as IxDA Mendoza local group. It presents a user experience throughout a gov application a well know for the audience we talked for. Then we used the metaphor of super heroes of UX with an old TV character called "chapulín colorado" Then some fundamental Viusal Design concept were presented by Analía Basualdo, Marite Impellizzeri and Sebastian Veggiani. In parallel we did a re design of our example alive while we were showing "the 10 super powers of an effective visual design" We concluded saying that everyone involved in the project is responsible for a good or a bad UX since every decision taken cause an impact in some way.

Text of Taller UX: Diseño visual - IxDA Mendoza

  • 1. SALVEMOS AL USUARIOUser Experience para diseadores y desarrolladores

2. AnixadventuresEn esta edicin:Me compr unTutuuuuu!!cualquier semejanza con la realidad es puracoincidencia 3. Adogslifephoto | Dreamstime.com - Yorkshire Terrier Dog Wearing Pink Tutu Photo 4. FIRST 5. 1 HORA despus...(de veras de veritas) 6. RIIIING! 7. Domingo, 20hs...... El horario deatencin esLunes a Viernesde 9 a 18hs ... 8. *&%#%$#!!*&%#%$#!!Calma Anix!*&%#%$#!! 9. De cmoEL MINISTERIO DESEGURIDADconsumiUNA HORAde vida de Anix 10. ?Anix 11. Anix08/09/2014CUPO COMPLETO 12. Anix09/09/2014CUPO COMPLETO 13. Anix10/09/2014CUPO COMPLETO 14. AnixTurno disponible:MALARGUE#%*&*Vivo en capital! 15. Anix:: Refresc el navegador:: ReInici la bsqueda:: Prob todos los botonesy encontr turno enALVEAR? 16. ?BasuAnix2811110101 01 1234Alvear AlvearPuedo cambiar mi nombre? 17. ?Alvear AlvearY el tercer paso?No saben todo esto ya? 18. ?Alvear AlvearDonar? 19. RIIIING! 20. Domingo, 20hs...... El horario deatencin esLunes a Viernesde 9 a 18hs ... 21. *&%#%$#!!*&%#%$#!!Calma Anix!*&%#%$#!! 22. OH!Y ahoraQUIEN podrayudarme?Y ahora ?! 23. UX 24. uxmeme.tumblr.com/UX que??CALMA, CALMA,QUE NO PANDA EL CUNICO 25. Diseo de experiencia de usuariosEs el proceso de aumentar la satisfaccin y lealtad delcliente mediante la mejora de la usabilidad, facilidad deuso y el placer proporcionado en la interaccin entre elcliente y el producto. 26. Modelo Causa Efectode la Experiencia del UsuarioUSUARIOCondiciones fsicas,psicolgicas, aprendizajey experiencias, etcMICRO ENTORNOCondiciones delentorno inmediato ala situacin de usoMACRO ENTORNOCultura- tecnologa disponibledemografa - poltica - economaPRODUCTOMarcaPROPUESTA DE VALORDEL NEGOCIOObjetivos del negocioEJECUCIN DEL PRODUCTOEquipo, ProcesosUXpercepcin positiva onegativa 27. Facetas de UXux honeycomb de Peter Morville 28. UX es un proceso que previene,detecta y resuelve problemas 29. Claves1. Foco temprano y continuo enel usuario y sus tareasFuente: La Fbula del Diseador Centrado en el Usuario 30. Claves2. Medicin emprica delcomportamiento del usuarioFuente: La Fbula del Diseador Centrado en el Usuario 31. Claves3. Diseo IterativoFuente: La Fbula del Diseador Centrado en el Usuario 32. The UX Umbrella by Dan Willis 33. Fuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne 34. No se vayanEste bloque fue presentado porFlavia Ibaezflavia@noviggo.com | @flaviaza 35. No se pierdan el prximo bloqueen 15Taller UX: Diseo Visuala cargo deAnala BasualdoMarit Impellizzeriy la colaboracin deSebastin Veggiani 36. IxDA es una asociacin creada para difundir la disciplina delDiseo de Interaccin, que conforma (junto a usabilidad,arquitectura de la informacin y accesibilidad, entre otras) elecosistema del Diseo de Experiencias del Usuario. 37. Queremos mejorar la educacin y divulgacin de UX en espaol.Queremos llegar a un nuevo estndar profesional.Y queremos construirlo colaborativamente. 38. 0. Introduccin1. Prototipado rpido2. Heursticas3. Evaluaciones deUsabilidad4. Diseo Visual5. Accesibilidad6. Diseo de Interaccin7. Arquitectura de laInformacin 39. 10 Superpoderespara undiseo visual eficaz 40. 1No pensar en la solucin sino en elUSUARIOProblema - Mensaje 41. Mis antenitas de vinil, estndetectando la presencia del enemigo! 42. Planteo del ProblemaEl sitio de turnos del Ministerio de Seguridad fuecreado para facilitar el trmite a la comunidad.El servicio no est resolviendo esa necesidad,lo que causa frustracin y una opinin negativasobre el Ministerio.Cmo podemos mejorar el servicio para que laspersonas puedan reservar su turno con xito? 43. 2No sos vos Soy yo!Comunicar Visualmente 44. Mensaje visual1. Usuario (novia)2. Mensaje - premisas (l quiere dejarla)3. Estrategia (cmo decirlo) 45. Premisas Que el usuario comprenda el objetivo principal del sitio. Orden y jerarqua en la informacin. Legibilidad. Dar importancia al Ministerio de Seguridad para reforzaridentidad y pertinencia. Que connote: seriedad, formalidad, simpleza, seguridad. 46. 3Ojos que no ven que cien volandoBsqueda de Antecedentes 47. 4La arquitectura invisibleGrilla y Composicin 48. Grilla constructiva1. Retcula, modulacin invisible2. Disposicin natural y segura3. Jerarqua visual4. Consistencia visual 49. BGarlialnlacse 50. 5Que empiece la fiesta!llegaron los...Elementos compositivos 51. Composicin1. Balance2. Jerarqua3. Patrn4. Ritmo5. Espacio6. Proporcin7. nfasis8. Movimiento9. Contraste10. Unidad 52. Balance 53. Herencia 54. Patrn 55. Patrn 56. Ritmo 57. PRaittmron 58. Espacio 59. ERsiptamcoio 60. Proporcin 61. PrRopitomrcoin 62. Enfasis 63. Movimiento 64. Movimiento 65. Contraste 66. Contraste 67. Unidad 68. Unidad 69. 6Cosa e mandingaPsicologa y Color 70. La importancia del Color1. Es una de las razones principales por la que se adquiereun producto.2. Crean estados de nimo.3. Determinan las primeras impresiones de un usuario.4. Tienen significado. 71. AguaPazmasculinidadserenidadcalmafroseriedadrefrescanteamigableseguridadconfianzaempresa productivaAzulestabilidad 72. 7No es solo lo que dicesino cmo lo diceTipografa 73. La palabra escrita1. Medio para transmitir un mensaje2. Configuracin visual3. Ojo! todo comunica 74. DisplaySerifSans Serif ComicRETROHandwritingScriptFantasyEgipciaStencil 75. LightNormalBoldItlicaCondensada 76. 8Cuando dicen que vale msque mil palabras...Imgenes e Iconos 77. Imagen icnicaEs representacin de la aparienciavisual de un objeto real1. Representativo2. Simblico3. Abstracto 78. 9Coherencia y ConsistenciaPatrones y guas de estilos 79. Guas de estilo 80. Guas de estilo1. Diseo colaborativo.2. Coleccin viviente de los productos que enfrentael usuario.3. Crean eficiencia.4. Desarrollo ms gil. 81. 10No se trata slo de una cara bonitaUsabilidad y Diseo Visual 82. Usabilidad y diseo visual1. Los proyectos con buen diseo tienen clientes mssatisfechos e incrementan la lealtad.2. La esttica comunica credibilidad. Tiene trescomponentes: integridad, armona y resplandor.3. El buen diseo crea grandes experiencias.4. Recordamos las malas y buenas experiencias, no lascomunes. Los detalles importan. 83. As es como quedcuando aplicamoslos superpoderes! 84. Seguir aprendiendolinks y libros de inters1. http://hellohappy.org/beautiful-web-type/2. http://www.lukew.com/ff/entry.asp?19153. https://hackdesign.org/lessons4. http://tympanus.net/codrops/category/articles/5. Participar de Ixda Mendoza! 85. Y an hay ms!Este bloque fue presentado porANALIA BASUALDO - MARITE IMPELLIZZERI@anagraphics - analiabasualdo@gmail.com / mariteimpellizzeri83@gmail.comSEBASTIAN VEGGIANI@efedoce - sveggiani@gmail.com 86. Moraleja 87. UX tambin es brandingSin un diseo visual bien APLICADO lamarca no ser elegida, recordada oreconocida 88. El diseo visual facilitauna buena experienciaSin un diseo visual bien planteado elproducto no resolver una necesidad 89. Una buena experienciadepende de TODOS losque intervienen 90. + Mrketing+ Gerencia+ Dueos+ etcFuente: What's the difference between a UX Designer and a UI Developer by Ben Melbourne 91. Y de que TODOSconozcan un poco delmundo del otro 92. GRACIAS!IxDA Mendoza: Diego, Matas, Anala, Franco, Marit,Flavia, Eugenio, Silvana, Sebastinwww.ixdamza.com.ar - www.facebook.com/ixdamza