Universidad Abierta y a Distancia de México

Nombre de la Actividad:

Unidad 3. Diseño, codificación, pruebas y mantenimiento

Actividad 2. Diseño de la interfaz

Curso:

Introducción a la Ingeniería de Software

Asesor Académico: Mtra. Magdalena Galindo Vilchis

Docente en línea: Adriana Álvarez Gutiérrez

Estudiante (a):

Martha Patricia Arenas López - ES172004460

31 de mayo de 2019
 Contenido

Introducción: ........................................................................................................... 3

Diagrama de interacción ......................................................................................... 6

Conclusión .............................................................................................................. 8

Bibliografía .............................................................................................................. 9

2
 Introducción:

Hoy en día, la mayoría de los dispositivos y sistemas de computación utilizan una

Interfaz Gráfica de Usuario para viabilizar la interacción entre el usuario y un artefacto,

sistema o máquina… a pesar de que un sistema cumpla con todas las funcionalidades

requeridas, un mal diseño y defectos en la Interfaz Gráfica generan una mala experiencia

de todo el sistema. (Sánchez, J. 2016)

3
Nombre del sitio
Objetivo
Público al que está dirigido
Descripción del sitio
Relación con el módulo propuesto
URL del sitio web
# Criterio
cumple
1 Ley de Proximidad
2 Ley de Similaridad
3 Ley de Buena
Continuidad
4 Ley de la Simplicidad
5 Papel del Color
6 Dar
retroalimentación
inmediata
7 Menús simples e
intuitivos
8 Orientar al
observador
9 Minimizar el número
de clicks
10 Ofrecer siempre una
opción para salir
Los lineamientos que utilizaría para el módulo serían: La ley de simplicidad, de similaridad,
proximidad, así como el uso de menús simples e intuitivos.
Pitic
Contribuir al éxito de nuestros clientes proporcionando
soluciones de transporte y distribución.
Enfocado a PyMEs mexicanas.
Es un sitio web bastante limpio en el cual destaca una
cabecera con varias secciones que dirigen a otros
módulos del sitio.
En la parte izquierda destacan tres secciones, una para
rastreo de guía, para recolecciones y para cotización.
Contiene también enlaces a los diferentes servicios que
ofrece la empresa y un boletín de noticias.
En la parte se encuentra el pie de página, que contiene
datos empresariales, de contacto, redes sociales y una
mapa del sitio.
Está enfocada en transportes y permite al usuario
registrar una cuenta para utilizar sus servicios.
http://transportespitic.com/
Sí No
Comentarios
cumple
“Los elementos que están muy cercanos a los
X demás espacialmente son percibidos como si
perteneciesen al mismo grupo”
“Los elementos que se ven similares son
X percibidos por la cognición humana como si
perteneciesen al mismo grupo”
“En la experiencia perceptual hay una
tendencia de que los miembros constituyan
X
grupos, a que las figuras incompletas se
completen”
“Los estímulos ambiguos tienden a analizarse
X
de la forma más simple”
“Los colores juegan un papel muy importante
X
no sólo en la estética sino en la funcionalidad”
“Los medios digitales deben brindar al
X espectador una retroalimentación sobre las
acciones realizadas”
“Los menús deben ser simples con mensajes
X
cortos e intuitivos”
“Un buen sistema de navegación debe proveer
al espectador pistas y claves que le indiquen
X
dónde está, cómo llegó y qué puede hacer en
cualquier momento”
“La actividad de dar click excesivamente es
X
algo que es relativamente molesto”
“La pantalla siempre debe ofrecer al
espectador una forma de poder salir, aunque
X
los espectadores hayan optado por comenzar
a interactuar con otro componente”
4
Nombre del sitio Position Logic
Objetivo Una plataforma centrada en el cliente, al
servicio de la industria del transporte.
Público al que está dirigido Industria del transporte.
Descripción del sitio Es una página con una interfaz más cargada
de textos, una cabecera y un pie de página,
recursos de lectura con información
relacionada con los negocios y una sección de
consultas que sirve a su vez como medio de
activación para una newsletter.
Contiene además la opción de hacer login en
la página si se cuenta ya con un registro
previo.
Relación con el módulo propuesto Aborda también la problemática de la gestión
de transportes de carga.
URL del sitio web https://www.positionlogic.com/

Sí No
# Criterio Comentarios
cumple cumple
1 Ley de Proximidad “Los elementos que están muy cercanos a los
X demás espacialmente son percibidos como si
perteneciesen al mismo grupo”
2 Ley de Similaridad “Los elementos que se ven similares son
X percibidos por la cognición humana como si
perteneciesen al mismo grupo”
3 Ley de Buena “En la experiencia perceptual hay una
Continuidad tendencia de que los miembros constituyan
X
grupos, a que las figuras incompletas se
completen”
4 Ley de la Simplicidad “Los estímulos ambiguos tienden a analizarse
X
de la forma más simple”
5 Papel del Color “Los colores juegan un papel muy importante
X
no sólo en la estética sino en la funcionalidad”
6 Dar “Los medios digitales deben brindar al
retroalimentación X espectador una retroalimentación sobre las
inmediata acciones realizadas”
7 Menús simples e “Los menús deben ser simples con mensajes
X
intuitivos cortos e intuitivos”
8 Orientar al “Un buen sistema de navegación debe proveer
observador al espectador pistas y claves que le indiquen
X
dónde está, cómo llegó y qué puede hacer en
cualquier momento”
9 Minimizar el número “La actividad de dar click excesivamente es
X
de clicks algo que es relativamente molesto”
10 Ofrecer siempre una “La pantalla siempre debe ofrecer al espectador
opción para salir una forma de poder salir, aunque los
X
espectadores hayan optado por comenzar a
interactuar con otro componente”
De esta página considero retomar los siguientes criterios: El papel del color, la ley de la
proximidad y la similaridad, así como la retroalimentación inmediata y el uso de menús intuitivos.

5
 Diagrama de interacción

Nombre o tipo de Diagrama de interacción

diagrama
Interpretación “Los diagramas de interacción describen el comportamiento de un
sistema, para demostrar cómo los objetos interactúan dinámicamente en
diferentes momentos durante la ejecución del sistema” (Otero, 2012)
Elementos
Actor

Indica al usuario que utiliza el sistema e interactúa con los objetos,

activando eventos o recibiendo respuestas.

Objeto

Es una instancia que contiene un estado, comportamiento o identidad.

Pertenece a una determinada clase o actor.

Mensaje Es la comunicación que existe entre dos objetos. Mediante este

intercambio de información es posible activar un evento.
Línea de vida

Representa el tiempo de cada objeto. Es decir, lo que demora efectuar

dicha operación.

Respuesta

Activa una respuesta perteneciente al mismo objeto.

Retorno Una vez que se efectúa una operación, este elemento indica la
posibilidad de regresar al objeto anterior.
Descripción del módulo

Este módulo presenta cómo se establece la operación de agregar a un usuario nuevo al

sistema, desde que el usuario ingresa en la landing page, pasando por la fase de login, con lo
cual accede al menú de inicio.

Posteriormente, desde las opciones del menú, selecciona Usuarios y Agregar. Esto permite
añadir los nuevos datos del usuario, creando el nuevo registro una vez que se confirma la
operación.

Se muestra al usuario el mensaje de que el registro se ha realizado, devolviéndolo al objeto de

Usuarios. Desde este punto el usuario puede volver al menú de inicio, desde donde puede
realizar alguna otra operación o salir.

6
Diagrama de interacción

7
 Conclusión

El diseño de una interfaz no es una tarea que deba tomarse a la ligera, ya que,

mediante un desarrollo adecuado, el usuario puede tener control y libertad sobre el

sistema, en especial si este tiene semejanzas con el mundo real. Asimismo, permite

manejar el software con mayor eficiencia, facilitando el reconocimiento de errores,

diagnóstico y recuperación.

Respondiendo a las preguntas de la actividad: ¿Qué criterios o elementos del sitio

Web, te gustaría aplicar en el diseño de interfaz y diseño de interacción de tu propuesta?

¿Por qué?

Los elementos que considero agregar son los correspondientes a la ley de

simplicidad, de similaridad, proximidad, así como el uso de menús simples e intuitivos,

esto con la intención de hacer un entorno mucho más amigable y comprensible para el

usuario desde el primer momento en el que interactúa con el sitio.

Se considera también la retroalimentación inmediata, presentando mensajes que

confirmen cuando se ha efectuado una operación, como en el caso de los nuevos

registros o las autorizaciones previas cuando se requiere hacer un cambio que debe

comunicarse al administrador o gerente.

8
 Bibliografía

UnADM. (2019). Introducción a la ingeniería de software. Unidad 3. Diseño,

codificación, pruebas y mantenimiento. Desarrollo de software. Recuperado de:

https://unadmexico.blackboard.com/bbcswebdav/institution/DCEIT/Bloque2/DS/03/DIIS/

U3/U3_Disenio_codificacion_pruebas_y_mantenimiento.pdf

Sommerville I. (2005). Ingeniería del software. Pearson Addison Wesley. Madrid,

España. Recuperado de: https://ulagos.files.wordpress.com/2010/07/ian-sommerville-

ingenieria-de-software-7-ed.pdf

Otero (2012). Diagramas de interacción. Ingeniería del Software. Universidad del

País Vasco-Euskal Herriko Unibertsitatea. Escuela Universitaria de Ingeniería de Vitoria-

Gasteiz. Dpto. Lenguajes y Sistemas Informáticos. Recuperado de:

http://www.vc.ehu.es/jiwotvim/IngenieriaSoftware/Teoria/BloqueII/UML-4.pdf

Sánchez, J. (2016) Editor. Nuevas Ideas en Informática Educativa, Volumen 12,

p. 314 - 324. Santiago de Chile.