Patrones de diseño aplicado al desarrollo de productos y servicios digitales

1. ¡Ya comienza!
#comunidadux #talleruxlp
Patrones de diseño

2. CICLO 2019
#comunidadux #talleruxlp

3. ¡Pasá la voz!
Usá nuestros hashtags
#comunidadux #talleruxlp
@IxDALaPlata
#talleruxlp
#comunidadux

4. ¡Nos encanta el
FEEDBACK!
#comunidadux #talleruxlp

5. #comunidadux #talleruxlp
Aprendiendo a
diseñar
Interacciones

6. sponsor
acompañan
#comunidadux #talleruxlp
¡Gracias!
invita organiza
sponsor

7. EUGENIA CASABONA
UX Manager en Mulesoft
Coach ontológico, Docente de UX
eugecas
@eugeniacasabona
eugenia-casabona
ecasabona@gmail.com

8. Patrones de diseñoDiseñando interfaces "intuitivas"
Con el apoyo de
Este obra está bajo una licencia de
Creative Commons Reconocimiento 4.0 Internacional

9. Esta presentación está publicada bajo licencia
Creative Commons Atribución-CompartirIgual 4.0 Internacional (CCBY-SA4.0)
Usted es libre de
* Compartir - copiar y redistribuir el material en cualquier medio y formato
* Adaptar - remezclar, transformar y crear a partir del material
Bajo las condiciones siguientes
Atribución: Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y de las partes
atribuidas, un aviso de derecho de autor, una nota de licencia, un aviso legal, y un enlace al
material), proporcionando un enlace a la licencia, e indicando si se han realizado cambios. Puede
hacerlo en cualquier forma razonable, pero no de forma tal que siguiera que usted o su uso tiene el
apoyo del licenciante.
Compartir Igual: Si usted mezcla, transforma o crea un nuevo material a partir de esta obra, usted podrá
contribuir su distribución siempre que utilice la misma licencia que la obra original, o no aparezca como
compatible en https://creativecommons.org/compatiblelicenses
No hay restricciones legales-Usted no puede aplicar términos legales ni medidas tecnológicas que
restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.

10. A DESPERTARNOS!
Hacé un dibujo de tu súper poder y contale a los
integrantes de tu mesa:
- Mi súper poder es ...
- Lo uso para …
- Desarrollé este súper poder cuando / como...

11. ¿REPASAMOS?
Taller #prototipado

12. QUÉ ES UN PROTOTIPO
Una representación de una idea, que se
puede ver, tocar, y/o interactuar, pero
sobretodo nos permite aprender.

13. QUÉ ES UN PROTOTIPO

14. DISEÑO DE INTERACCIÓN
“El diseño de interacción es el arte de
facilitar las interacciones entre las
personas mediante productos y servicios.”
Dan Saffer - Designing for Interaction

15. ¿QUÉ NOS PIDEN A
LOS UX DESIGNERS?

16. Anypoint Platform
Que sea intuitiva

18. ¿INTUITIVO?

19. INTUICIÓN
Habilidad para conocer, comprender o
percibir algo de manera clara e inmediata,
sin la intervención de la razón.

20. ¿NACEMOS CON INTUICIÓN?
RESPIRAR
SUCCIONAR
LLORAR
REGULAR LA
TEMPERATURA

21. ENTONCES…
de dónde viene la
intuición

22. INTUICIÓN
=
APRENDIZAJE
INCONSCIENTE

23. ¿CÓMO LOGRAMOS
QUE NUESTROS USUARIOS
USEN NUESTRAS INTERFACES
SIN RAZONAR?

24. ¡PATRONES DE DISEÑO!

25. PATRONES DE DISEÑO
Son la base para la búsqueda de soluciones a
problemas comunes en el desarrollo de software y
otros ámbitos referentes al diseño de interacción o
interfaces.
Fuente: https://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o

26. Los patrones de diseño
permiten que ocurra la
magia.
Eugenia Casabona

27. ¿CÓMO IDENTIFICAMOS
UN PATRÓN?

28. CARACTERÍSTICAS DE UN PATRÓN
Se debe haber comprobado su efectividad resolviendo
problemas similares en ocasiones anteriores.
Debe ser reutilizable, lo que significa que es aplicable a
diferentes problemas de diseño en distintas
circunstancias.

29. GUIARNOS POR LA
LEY DE JAKOB

30. Los usuarios pasan la mayor
parte del tiempo en otros sitios.
Esto significa que ellos prefieren
que tu sitio se comporte como los
sitios que ya conocen.
Jakob Nielsen

31. EN SÍNTESIS...

32. Se trata de NO
reinventar la
rueda

33. ALGUNOS EJEMPLOS

34. PATRONES EN E-COMMERCE
BUSCAR
PRODUCTO
FILTRAR

35. PATRONES EN E-COMMERCE
BUSCAR
PRODUCTO
FILTRAR

42. IOS

43. MATERIAL DESIGN

44. PATRONES, MUCHOS PATRONES
https://designsystemsrepo.com/design-systems/
http://ui-patterns.com/patterns
http://patternry.com/patterns/
http://zurb.com/patterntap
http://www.welie.com/patterns/index.php
https://developer.yahoo.com/ypatterns/
http://www.web-patterns.net/
http://www.smileycat.com/category/elements-of-design/
https://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
http://unitid.nl/androidpatterns/
https://developer.android.com/design/patterns/new.html

45. PATRÓN...
¿se nace o se hace?

46. PATRÓN...
¿Qué creen? ��

47. DEJAMOS QUE
LOS REFERENTES
PAGUEN LA FIESTA

48. LOS PATRONES DE DISEÑO
NOS AYUDAN A...

49. REDUCIR LA CURVA DE
APRENDIZAJE

50. CUMPLIR LAS HEURÍSTICAS
DE NIELSEN
¿CUÁLES?

51. #4 - CONSISTENCIA Y
ESTÁNDARES
#6 - MINIMIZAR LAS CARGA
DE LA MEMORIA DE LOS
USUARIOS

52. DESIGN SYSTEM

53. ¡Recreo!
Ya volvemos con...
Patrones
#comunidadux #talleruxlp

54. ¿DÓNDE APLICAMOS LOS
PATRONES?

55. CREANDO
PROTOTIPOS!!!

56. ¡A TRABAJAR!

57. EJERCICIO 1 - INVESTIGACIÓN - 20 mins
1- En grupos analizar las aplicaciones que tengan instaladas
en sus teléfonos con el objetivo de detectar los patrones de
diseño utilizados.
2- Desde el celular navegar las páginas web de las
aplicaciones y analizar si utilizan los mismo patrones de
diseño.

58. EJERCICIO 2 - PROTOTIPADO - 35 mins
En grupos crear un prototipo de baja fidelidad visual. Con un
flow (flujo) que permita realizar un pedido a una empresa de
comida.
Cada grupo trabajará con los patrones de diseño que
correspondan.

59. EJERCICIO 3 - PUESTA EN COMÚN - 30 mins
Los grupos que lo deseen, se pararán al frente a contar cómo
crearon su prototipo y fundamentar sus decisiones.

60. Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps
PARA SEGUIR APRENDIENDO
Practical UI Patterns for Design Systems: Fast-Track Interaction
Design for a Seamless User Experience

61. Introduction to UX Design Patterns: A pragmatic primer on building
user experiences that are highly engaging for desktop and mobile
devices
PARA SEGUIR APRENDIENDO
Designing Interfaces: Patterns for Effective Interaction Design

62. LA SEGUIMOS EN:
GRACIAS
eugecas
@eugeniacasabona
eugenia-casabona
ecasabona@gmail.com

63. 07/09
mayo junio julio agosto septiembre
Vacaciones! 😎
PRÓXIMO TALLER
SÁB 7 de SEPTIEMBRE de 09:45 a 13:00 hs.
Facultad de Arquitectura y Diseño (UCALP)
Calle 50 N° 818 e/11 y 12, La Plata
AGENDATE!
21/09

64. Seguinos en nuestra comunidad local
Se entregarán certificados de asistencia a
aquellos que realicen todos los talleres.
¡GRACIAS! /ixdalaplata
@ixdalaplata
@ixdalaplata