CÓDIGO: SGC.DI.

505
GUIA PARA LAS PRÁCTICAS DE VERSIÓN: 2.0
FECHA ULTIMA REVISIÓN:
LABORATORIO, TALLER O CAMPO. 12/04/2017

CIENCIAS DE LA INGENIERÍA EN TECNOLOGÍAS DE LA

DEPARTMENT: CAREER:
COMPUTACIÓN INFORMACIÓN
SCHOOL
SUBJECT: Interfaces y Multimedia 202351 LEVEL: 4to
PERIOD:
TEACHER: Ing. Pablo Puente, MSc NRC: 16350 PRACTICE N°: 2

LABORATORY WHERE THE PRACTICE WILL BE DEVELOPED Laboratory N°

PRACTICE TOPIC: Interaction Patterns

INTRODUCTION:

Design patterns speed up development, allowing effective solutions to be applied to common problems, avoiding the need to evaluate
and reevaluate each aspect of a project.

Los patrones de diseño agilizan el desarrollo, permiten aplicar soluciones efectivas a problemas comunes evitando la necesidad de
evaluar y revaluar cada aspecto de un proyecto.

Originally conceived in the field of architecture, they are becoming a very popular tool in web development. The idea of identifying
design patterns to solve problems was imported by software engineering and object-oriented programming.

Later, the same idea was applied by interaction design and interface design to desktop programs, websites, and mobile applications.

OBJECTIVES:

- Analyze and design interaction patterns using wireframes and UML

- Identify the most common interaction patterns and their application in the design of user interfaces.
- Use tools to design and visually represent selected interaction patterns.

MATERIALS:

This practice requires at least the following materials:

- Windows/Linux PC
- UML diagram tool (Visio/other)
- Tool to create prototypes, sketches or wireframes (mockups / other)
- Text editor

INSTRUCTIONS:

1. Use as the main support material, that indicated in class by the teacher
2. Don't forget to include screenshots of all the activities carried out during the practice.
3. Those named in the files will have their last name in order to verify the completion of this work.

ACTIVITIES TO BE DEVELOPED:
 CÓDIGO: SGC.DI.505
GUIA PARA LAS PRÁCTICAS DE VERSIÓN: 2.0
FECHA ULTIMA REVISIÓN:
LABORATORIO, TALLER O CAMPO. 12/04/2017

STEP 1: Select the interaction patterns to use

Depending on the topic assigned by the teacher, select the interaction patterns to use

STEP 2: Design corresponding wireframes for each pattern

Using the selected tool, generate the necessary wireframes for the patterns selected in the previous step, the
following images are as an example

Figure 1. Access to an account

Figure 2. Main Page

 CÓDIGO: SGC.DI.505
GUIA PARA LAS PRÁCTICAS DE VERSIÓN: 2.0
FECHA ULTIMA REVISIÓN:
LABORATORIO, TALLER O CAMPO. 12/04/2017

Figure 3. User Data

Figure 4. Administrator option, transfer log

NOTE: these figures are placed as an example, you must make your own captures, the complexity and quantity will depend on the
type of application or system that has been proposed.

STEP 3: Diagram using UML tools

 CÓDIGO: SGC.DI.505
GUIA PARA LAS PRÁCTICAS DE VERSIÓN: 2.0
FECHA ULTIMA REVISIÓN:
LABORATORIO, TALLER O CAMPO. 12/04/2017

Figure 5. UML Diagram

QUESTIONS SECTION

1. What are the advantages of interaction patterns?

2. What is the importance of making UML diagrams?

RESULTS OBTAINED:

a. Prepare the report in the general laboratory report format.

b. Upload the report and the compressed project with a known standard to the platform (doc or pdf)

CONCLUSIONS:
- Present at least three conclusions

RECOMMENDATIONS:
- Present at least three recommendations

SIGNATURES

Firmado electrónicamente por: Firmado electrónicamente por:

PABLO FRANCISCO LUIS ALBERTO
PUENTE PONCE CASTILLO SALINAS

F: ……………………………………………. F: ………………………………………………. F: ……………………………………………………

Nombre: Ing. Pablo Puente, Mgtr. Nombre: Ing. Luis Castillo, Mgtr. Nombre: Ing. Edwin Camino, Mgtr.
DOCENTE COORDINADOR DE ÁREA DE CONOCIMIENTO COORDINADOR/JEFE DE LABORATORIO