REPORTE DE UNA APLICACIÓN WEB DE ENCUESTADAS ENFOCADA A LA

EXPERIENCIA DE USUARIO

LINO ALEJANDRO MUÑOZ BUESAQUILLO

VIVIANA ISABELLA PEÑA
TOMAS JESÚS ESCOBAR CUELTAN
EDWAR JAVIER CUASAPUD
JUAN FELIPE MUÑOZ ORDOÑEZ

Documentación de la aplicación web creada sobre encuestas

Ph.D. Hendrys Fabián Tobar

UNIVERSIDAD DEL CAUCA

FACULTAD DE INGENIERÍA ELECTRÓNICA Y TELECOMUNICACIONES,
PROGRAMA DE INGENIERÍA DE SISTEMAS
ASIGNATURA DE INGENIERÍA DE SOFTWARE III
POPAYÁN – CAUCA
2020
Introducción

se brinda al lector un reporte detallado y técnico de cómo se abordó y elaboro el

primer Sprint de la aplicación web de encuestadas enfocada a la experiencia de
usuario, teniendo en cuenta los puntos de esfuerzo y los requerimientos del
cliente. Se aplican las distintas técnicas de buenas prácticas y usabilidad para
brindar una mayor eficiencia y satisfacción a los usuarios.
 Tabla de contenido
1) Modelos de wireframes y snapshots
2) URL del código fuente gestionado en servidor de versiones (BB o Github)
3) reporte de los modelos de arquitectura creados.
 1) Modelos de wireframes y snapshots

Figura 1: landing page wireframes

Descripción: la figura 1 es un prototipo la landing page de nuestra aplicación aplicando

principios de usabilidad donde un ejemplo es mantener una comunicación directa con el
usuario en un lenguaje que comprenda, otro principio es la iconología que la mayoría de
personas reconoce

Figura 2: snapshots landing page

Descripcion figura 2 :como se lo planeo anteriormente y respetando algunos principios de
usabilidad se laimplemneto conforme al wirefrem dandole mascolory las animasiones
correspondientes

Figura 3: registrarse wireframe

Descripcion:es un prototipo de como seva a elaborar la interface de regitrarse muy

parecida a las que comun se utlizan en citos web que ya vendria siendo muy conocica e
intuitiva para registrarse.
 Figura 4:snapshots registrar

Descripcion figura 4: como se penso en el prototipo se implemento deforma sencilla pero

consisy clara poara que elusuaria siguiendo estantadares de registro que son muy intuitivos
pueda registrarsemuy facilmente
Figura 5: Wireframes crear encuesta:

Figura 5
En la imagen 3 se muestra el wireframes de la visualización de la funcionalidad de crear
una encuesta con sus componentes a groso modo implementando una interfaces amigable e
intuitiva para el momento de crear encuestas.
Figura 6:snapshot crear encuesta

Descripción figura 6:
En la imagen 1 se observa Vista donde se despliega la obtención de los componentes
principales para la creación de una encuesta. Se requiere que se complete los campos del
nombre de la encuesta, el tipo de encuesta que se realizará y de las preguntas para esa
encuesta.

Figura 7: Wireframes listar encuestas

Descripción figura 7:

En la imagen (7) se muestra el wireframes que contendrá la información necesaria para

mostrar los registros de todas las encuestas que se tienen almacenadas en la base de datos.
Es un registro histórico que es de gran utilidad

Figura 8:snapshot listar encuesta

Descripcion figura 8

En la imagen 8 se puede muestra la vista que contendrá la tabla donde está almacenado el
id, nombre de la encuesta y el tipo de la encuesta. La tabla contendrá todos los registrar de
las encuestas almacenados en la base de datos.

Figura 9: wireframes enviar encuesta

Descripción figura 9

1) Cumpliendo el principio de usabilidad propuesto por Nielsen, este formulario trae

consigo un mensaje de alerta, el cual se genera cuando se han enviado todos los
correos. De tal forma que encuestador será notificado por el sistema de que su
acción se ha realizado satisfactoriamente.
2) El principio de Evitar errores por parte del evaluador también se está manejando,
debido a que para seleccionar una encuesta en particular el evaluador solo podrá
seleccionar las opciones que ya estén inscritas en la base de datos, no tendrá
opción de ingresar una encuesta inválida. A demás, los campos serán de carácter
obligatorio y el sistema se encargará de enviar mensajes al evaluador dado el
caso que el mismo haya omitido alguno de ellos.

Figura 10: snapshot enviar encuesta

Descripción figura 10:

1) El principio Diseño estético y minimalista también se evidencia en la página en

cuestión, debido a que su interfaz gráfica solo contiene lo que necesita, 3 entradas
y un único botón para enviar.
2) El principio Reconocer antes que recordar es muy importante para todo sitio
web, por tal razón hemos tomado en cuenta que muchos sitios web utilizan un
panel izquierdo en el cual se pueden visualizar todas las acciones que puede
realizar un usuario. Para nuestro caso, en el lado izquierdo estarán reflejadas
todas las opciones que el Encuestador puede realizar.
3) Finalmente, el principio Relación entre el sistema y el mundo real se evidencia
en el lenguaje utilizado para la página en cuestión, se mantiene un lenguaje no
sofisticado.

2) URL del código fuente gestionado en servidor de versiones (BB o Github)

https://github.com/linomu/laravel_proyecto_ZCP.git
3) reporte de los modelos de arquitectura creados.

Diagrama de despliegue

En este diagrama podemos ver la relación de los distintos componentes que

forman mi sistema cuando ya están en funcionamiento, podemos observar que se
implementa el patrón de diseño MVC en la aplicación web.

Diagrama de actividad
Demuestra en como será el flujo de las distintas tareas en la aplicación web, empieza
cuando un evaluador quiere ingresar al sistema para así poder realizar sus encuestas, y
como este a través del tiempo va realizando otras tareas como crear evaluación ver
resultados entre otras. Este diagrama esta ajustado mejorando y haciendo caso a las
recomendaciones del profesor .

Diagrama entidad relación

Es muy importante para observar cómo es la comunicación entre las diferentes partes y
componentes que me confirman el sistema y su relación entres si.