Una breve introducción a UI Design patterns, los diferentes autores y la propuesta de Yuliana Puerta.

3. Diseño de la Interacción
UNIDAD 04. Técnicas de Evaluación

4. Patrones de Diseño
01Técnicas de Evaluación | Patrones de diseño
Cruz, Y. P., Collazos, C. A., Guerrero-García, J., & Gonzalez-Calleros, J. M. (2016,
April). Patterns of Interaction Description Including Aspects of Constraints. In 2016
4th International Conference in Software Engineering Research and Innovation
(CONISOFT) (pp. 136-140). IEEE.

5. 02Técnicas de Evaluación | Patrones de Diseño
(Seffah, 2015)
Patrones de definición estándar: hace referencia a un formato para definir
patrones.
El lenguaje debe agrupar patrones.
Por ejemplo Tidwell los organiza de acuerdo con los diferentes aspectos del
diseño de la interfaz de usuario, incluyendo: organización del contenido,
navegación, diseño de página y acciones.
Coram y lectura atienden aspectos más específicos de la experiencia del usuario.
El grupo que aborda aspectos de la interfaz de usuario y el estilo de interacción,
interfaz explorable, símbolos.
Descripción de las interrelaciones entre patrones: debe describirse y asignarse.
Las relaciones se asignan mediante flechas, creando un flujo de lenguaje.
Elementos de un patrón de lenguaje

6. REVISIÓN CONCEPTUAL
(Cruz et al. 2016)
03Técnicas de Evaluación | Patrones de Diseño

7. 04Técnicas de Evaluación | Patrones de Diseño
“Un patrón es una descripción de un problema que se produce
una y otra vez en nuestro entorno, luego construir el núcleo de
la solución a ese problema, para que esta solución se pueda
utilizar más de un millón de veces sin hacer ni siquiera dos
veces de la misma manera.”
Patrones de diseño
Timeless Way of Building (Alexander, 1979)
(Cruz et al. 2016)

8. (Cruz et al. 2016)
05Técnicas de Evaluación | Patrones de Diseño
Patrones de diseño
• “Los puntos de referencia estándar para el diseñador de interfaces
de usuario”.
• “Una solución probada para el diseño de interacción profesional,
usabilidad y experiencia de usuario que proporciona las mejores
prácticas para diseñar el ordenador de interacción humana a
cualquiera de las fases del diseño, ingeniería, evaluación o uso de
sistemas interactivos, generalmente caracterizado por la interfaz de
usuario.”
(Seffah, 2015)
UI –Patterns (http://ui-patterns.com/)

9. Descripción de los patrones
(Cruz et al. 2016)
06Técnicas de Evaluación | Patrones de Diseño
Estructura de un patrón de Diseño según (Tidwell et al,2011)
Cacacterística Descripción
Nombre: Nombre por el que se identifica el patrón.
Problema: Este elemento se describe la situación que resolverá el patrón.
Contexto: Características del usuario y características de las tareas a realizar.
Fuerzas: Cómo influyen en diferentes aspectos del problema.
Solución: Descripción clara de la solución propuesta.
Consecuencias Describe los resultados de la aplicación del patrón.
Principios de usabilidad: Describe los principios o criterios ergonómicos en los que se basa el empleador.
Ejemplos: Un ejemplo ilustrativo de una solución exitosa.

10. Características según los autores
de los patrones
(Cruz et al. 2016)
07Técnicas de Evaluación | Patrones de Diseño
Cacacterística Tydwell Van Welie Vanderdonckt Van Duyne Master Detail Seffah
Nombre X
X
X X X
Alias X X
Autor X
Clasificación X X
Problema X X X X
Keywords X
Solución X
X
X X X X
Restricciones X
Fortalezas X
X
X X X X
Debilidades X

11. Características según los autores de los patrones
(Cruz et al. 2016)
08Técnicas de Evaluación | Patrones de Diseño
Cacacterística Tydwell Van Welie Vanderdonckt Van Duyne Master Detail Seffah
Justificación X
Aplicabilidad X
Contexto X
X
X X X X
Consecuencias X X X X X X
Estructura X X
Participantes X
Colaboradores
Implementación X X
Ejemplo X X
Principios de usabilidad X
Patrones relacionados X X X X

12. Alcance de Conocimiento y
Aplicación de los Patrones
(Cruz et al. 2016)
09Técnicas de Evaluación | Patrones de Diseño

13. Academia
Negocios
(Cruz et al. 2016)
10Técnicas de Evaluación | Patrones de Diseño

14. Ficha Técnica de la Encuesta
(Cruz et al. 2016)
10Técnicas de Evaluación | Patrones de Diseño
Variables Valores
Error Muestral 5%
Confianza 95%
Muestra Definida 35
Muestra Obtenida 35
Total Académicos 25
Total Empresarial 10
Error Muestral 5%

15. Nivel de importancia
(Cruz et al. 2016)
11Técnicas de Evaluación | Patrones de Diseño
Cacacterística
Nombre
Alias
Autor
Clasificación
Problema
Keywords
Solución
Restricciones
Fortalezas
Debilidades
Alto Medio Bajo No es necesario

16. Nivel de importancia
(Cruz et al. 2016)
12Técnicas de Evaluación | Patrones de Diseño
Cacacterística
Justificación
Aplicabilidad
Contexto
Consecuencias
Estructura
Participantes
Colaboradores
Implementación
Ejemplo
Principios de usabilidad
Patrones relacionados
Alto Medio Bajo No es necesario

17. (Cruz et al. 2016)
13Técnicas de Evaluación | Patrones de Diseño

18. 71,43%
28,57%
0.00 10.00 20.00 30.00 40.00 50.00 60.00 70.00 80.00
Academy
Bussines
(%) RESPONDENTS-WORK AREA
(Cruz et al. 2016)
14Técnicas de Evaluación | Patrones de Diseño
Zona de trabajo de los encuestados(%)

19. 0%
57%29%
14%
(%) RESPONDENTS-TIME WORK IN THE AREA
Inferior a un año Entre 1 y 5 años Entre 5 y 10 años Mas de 10 años
(Cruz et al. 2016)
15Técnicas de Evaluación | Patrones de Diseño
Tiempo de trabajo en el área-(%) Encuestados

20. 57,14%
42,86%
0.00 10.00 20.00 30.00 40.00 50.00 60.00
YES
NO
(%) RESPONDENTS-OTHER FEATURES
(Cruz et al. 2016)
16Técnicas de Evaluación | Patrones de Diseño
Otras características - (%) Encuestados

21. 0.00
10.00
20.00
30.00
40.00
50.00
60.00
70.00
80.00
90.00
Level of Importance (%) High Level of Importance (%) Medium
Level of Importance (%) Low Level of Importance (%) Not Necessary
(Cruz et al. 2016)
17Técnicas de Evaluación | Patrones de Diseño
Nivel de Importancia- (%) Encuestados

22. 0.00 10.00 20.00 30.00 40.00 50.00 60.00 70.00 80.00 90.00
Name
Alias
Author
Problem
Solution
Constraints
Forces
Weakness
Justification
Applicability
Context
Consequences
Structure
Participants
Contributors
Implementation
Example
Related Patterns
(Cruz et al. 2016)
18Técnicas de Evaluación | Patrones de Diseño
Nivel de Importancia Alta- (%) Encuestados

23. (Cruz et al. 2016)
19Técnicas de Evaluación | Patrones de Diseño
Análisis de Resultados
• Los encuestados son académicos y el sector empresarial con experiencia en
patrones de interacción mayoritariamente entre 5 y 10 años. En algunos casos fue
posible encuestar a personas con más de 10 años de experiencia.
• Aspectos como la clasificación, el problema, la solución y los ejemplos han sido
elegidos como muy importantes por el 100% de los encuestados.
• En el caso de otros aspectos, como el nombre del patrón, las restricciones, la
aplicabilidad y las consecuencias, fueron seleccionados de gran importancia por el
80 % de los encuestados.
• Otros aspectos como la fuerza, el contexto, la estructura, la implementación y los
patrones relacionados han sido elegidos como muy importantes para el 60% de los
encuestados.

24. Templete de Patrones
(Cruz et al. 2016)
20Técnicas de Evaluación | Patrones de Diseño

25. (Cruz et al. 2016)
21Técnicas de Evaluación | Patrones de Diseño
Identificación de Patrón
Nombre
Alias
Autor
Categoría
Keywords
Patrones relacionados
Contexto de Uso
Usuario
Tarea
Plataforma
Problema
Fortalezas
Solución
Restricciones
Implementación
Estructura
Estrategia
Consecuencias
Templete de Patrones

26. (Cruz et al. 2016)
22Técnicas de Evaluación | Patrones de Diseño
Identificación de Patrón
Nombre
Resultados de Búsqueda en
una App
Alias Resultados de Búsqueda
Autor
Yuliana Puerta, Cesar Collazos,
Josefina Guerrero García
Categoría Patrones de Interacción
Keywords Búsqueda de Contenido
Patrones relacionados Área de Búsqueda, Caja de
Búsqueda, Visualizador
Contexto de Uso
Usuario
Usuario de Tecnología de
Teléfonos inteligentes
Tarea
Es necesario hacer una
búsqueda de información,
revisar los resultados de la
búsqueda, omitir o seleccionar
una en particular.
Plataforma
Teléfono inteligente y su
sistema operativo
Problema
El usuario requiere de información y que a una solicitud
reciba una respuesta
Fortalezas
El usuario necesita una breve descripción de los las
palabras clave resaltadas. El usuario debe tener acceso
prioritario a las opciones más cercanas a su búsqueda, y
luego en orden de importancia.
Solución
Un control que permita al usuario obtener los resultados
de una búsqueda, categorizar la búsqueda, resaltar
resultados espaciales.
Restricciones
Debe garantizar conectividad con el origen de datos.
Debe garantizar integridad de los datos.
Implementación
Estructura
Recibir una cadena con la búsqueda, la clase es un
observador del evento que obtiene el objeto lista con los
elementos a mostrar.
Estrategia
Usar de referencia el modelo mostrado en la siguiente
diapositiva
Consecuencias
Los procesos de búsqueda deben ser optimizados. Los
resultados son organizados y categorizados.
Ejemplo de Patrón de Resultados Búsqueda en un APP

27. (Cruz et al. 2016)
23Técnicas de Evaluación | Patrones de Diseño
Ejemplo de Patrón de Resultados Búsqueda en un APP
Herramienta de búsqueda en la tienda App Store

28. 24Técnicas de Evaluación | Patrones de Diseño
Actividad
Analiza la lista de patrones de diseño disponible en https://www.interaction-
design.org/literature/topics/ui-design-patterns. Realiza un análisis detallado de tu proyecto y
determina ¿Qué patrones aplican a tu proyecto y cuáles no?
• Migajas de pan (Breadcrumbs)
• Registro diferido
• Formato de perdón
• Borrar acciones principales
• Divulgación progresiva
• Controles de desplazamiento
• Pasos a la izquierda
• Planes de suscripción
• Tabla de clasificación
• Patrones oscuros

29. (Cruz et al. 2016)
25Técnicas de Evaluación | Patrones de Diseño
Conclusiones
Aunque no hay consenso entre los autores de patrones y lenguajes de
patrones de interacción sobre qué elementos considerar, y que cada autor
elige libremente acerca de estas características, vale la pena señalar que
cada uno de ellos de mayor o menor importancia representa un elemento
de juicio para definir o caracterizar el patrón.

30. (Cruz et al. 2016)
26Técnicas de Evaluación | Patrones de Diseño
Conclusiones
Cuando se trata de implementar patrones de interacción, es importante
considerar la implementación de elementos a partir de la definición de los
mismos. Por otro lado, cuando se trata de crear lenguajes de patrones de
interacción es importante considerar sus interrelaciones como una
característica en la definición o descripción de los patrones.

31. (Cruz et al. 2016)
27Técnicas de Evaluación | Patrones de Diseño
Conclusiones
Después de definir la plantilla para describir patrones de interacción, a
partir de esta propuesta da paso a diseñar patrones de interacción
propuestos para los patrones de lenguaje de interacción centrados en la
experiencia del usuario, el objetivo principal de esta investigación, y luego
automatizar la generación de interfaces de proceso a partir de estos
patrones.

32. Pie de foto.
Bibliografía
• Seffah, A. (2015). Patterns of HCI Design and HCI Design of Patterns. Human-Computer Interaction Series, Bridding
HCI Design and Model-Driven Software Engineering, A. Seffah, DOI 10.1007/978-3-319-15687-3_2, © Springer
International Publishing Switzerland 15 ISBN 978-3-319-15686-6.
• Alexander, C. (1979). A Pattern Language .Center for Enviromental Structure, Berkrley California.
• Tidwell, J. (2011). Designing Interfaces (Vol. 2). O'Reilly Media.
• Pribeanu, C., & Vanderdonckt, J. (2008, March). A transformational approach for pattern-based design of user
interfaces. In Autonomic and Autonomous Systems, 2008. ICAS 2008. Fourth International Conference on (pp. 47-
54). IEEE.
• Van Duyne, Douglas, Landay, James and Hong Jason. Design of Sites: Pattern Language for Web, 2002. Pearson
Education.
• Thanh-Diane Nguyen, Jean Vanderdonckt, Ahmed Seffah, Generative Patterns for Cross-Platform User Interfaces
Engineering: The Case of the Master Detail Pattern. 2015 Louvain School of Management.
• van Welie, M., van der Veer, G., & Eliens, A. (2000). Patterns as Tools for User Interface Design . Amstemdarnd
28Técnicas de Evaluación | Patrones de Diseño

33. gracias.
©2020
Es responsabilidad exclusiva de los autores el respeto de los derechos de autor sobre los contenidos e imágenes en el presente documento,
en consecuencia, la BUAP no se hace responsable por el uso no autorizado, errores, omisiones o manipulaciones de los derechos de autor y
estos serán atribuidos directamente al Responsable de Contenidos, así como los efectos legales y éticos correspondientes.