Conclusiones

Basados en  nuestra experiencia académica, el estudio  y desarrollo de la aplicación web,  son muchas los sucesos que podemos destacar, los cuales nos ayudaron a comprender y mejorar en la realización del proyecto.

- Aprendimos a diseñar para el usuario, cumpliendo con los requerimientos necesarios y construyendo interfaces donde prima la importancia de la usabilidad, es decir, que sea fácil de aprender, fácil de entender, atractivo y muy usable por parte del usuario

- La técnica de evaluación de la usabilidad fue de gran ayuda para poder lograr lo usable de la aplicación y poder construir  las interfaces de la mejor manera.  Además nos ayudó para comprender su importancia en el desarrollo de una aplicación web

- La técnica escogida ( interacción constructiva) es muy  adecuada en cuanto a conseguir los usuarios que evalúan los prototipos  y la forma que interaccionan entre ellos es muy útil para obtener  ideas diferentes sobre la funcionalidad y usabilidad de la aplicación (o prototipos) y las posibles mejoras a realizar, obteniendo mejor información y más apropiada que las utilizadas por otras técnicas

- El framework jsf combinado con primefaces, el cual es una extensión para la capa de presentación, es una herramienta muy poderosa que nos brinda muchas funcionalidades como ventanas modales, tablas con filtros, validación de una contraseña segura, validador de número de caracteres, entre otras, que a su vez contribuyen a un aumento considerable de la usabilidad.

- La instalación y utilización de primefaces es muy sencillo, además se pudo comprobar que su alcance es muy amplio, permitiendo muchas funcionalidades que ayudan a tener mayor interactividad de la pagina con el usuario.

Conceptos Generales

Aplicación web

Una aplicación web es un  programa que utiliza un navegador de Internet para visualizar su interfaz. Los usuarios utilizan esta aplicación a través de un servidor. 

Cuando se va desarrollar una aplicación web se tiene que lograr realizar una interfaz web ya esta es la base en la cual un usuario puede interactuar con la página, esto es una gran reto para los desarrolladores ya que la interfaz depende de un diseñador, de una persona que entiende y maneja el tema que se va a implementar y lo mas importante que el usuario de alguna manera pueda navegar por la aplicación.

EXPERIENCIA DE USUARIO

Es el conjunto de factores y elementos relativos a la interacción del usuario en torno a cualquier a cualquier entorno cuyo propósito es la percepción positiva de dicho servicio o producto. 

Usabilidad

Se refiere a la experiencia del usuario al interactuar con un sitio web, un sitio que tenga usabilidad es el que muestra de una forma clara y sencilla el usuario pueda navegar sobre el, es por ello que se necesita de hacer una interfaz cómoda para el usuario aunque es muy complicado obtener una pagina clara y eficiente para cada usuario, en este caso, e l diseñador tienen que esforzarse para mostrar el contenido de una la mejor forma, de modo que se reduzca al mínimo cualquier aspecto que pueda ser confuso

Tener en cuenta ciertos factores cuando se realiza una aplicación web

• Tiempo de respuesta cuando se abre la aplicación.
• Los usuarios no les gusta las acciones repetidas, tener que aprender funciones, ir a varias ventanas y tener que devolverse al menú principal por confusión, etc.
• Que no tenga un diseño muy fuerte que maneje ciertos colores que el usuario pueda soportar, ademas de una letra apropiada no tan grande.
• Restricciones a otras plataformas.
• Que no haya seguridad al momento de realizar transacciones si eso lo requiere en la pagina donde esta.

RETOS DE USABILIDAD

• Simplicidad: Hacer las cosas tan simples como posibles.
• Expresividad:Se puede entender lo que se hace en el lenguaje a partir de lo escrito. En pocas lineas se puede implementar códigos complejos.
• Extensibilidad: El programador puede agregar elemento al lenguaje.
• Robustez: El sistema debe prevenir la aparición de errores antes que generar buenos mensajes de alerta.
• Recuperabilidad: Grado de facilidad que una aplicación permite al usuario para corregir una acción una vez está reconocido un error.
• Tiempo de respuesta el tiempo que necesita el sistema para expresar los cambios de estado del usuario.
• Adecuación de tareas: Grado en que los servicios del sistema soportan todas las tareas que el usuario quiere hacer.

Disminución de carga cognitiva

Los usuarios tienen que confiar más en los reconocimientos que en los recuerdos. Los usuarios no tienen que recordar abreviaciones y códigos muy complicados.

Diseño Centrado en Usuario
En este esquema vemos que el modelo de proceso se basa en tres pilares:

• La Ingeniería del Software clásica (columna en azul/izquierda –Análisis/Diseño/Implementación/Lanzamiento).
• El Prototipado (columna en verde/centro), cómo metodología que engloba técnicas que permitirán la posterior fase de evaluación.
• La Evaluación (columna en amarillo/derecha) que engloba y categoriza los métodos de evaluación existentes.

El Diseño Web Centrado en el Usuario se caracteriza por asumir que todo el proceso de diseño y desarrollo del sitio web debe estar conducido por el usuario, sus necesidades, características y objetivos. Centrar el diseño en sus usuarios (en oposición a centrarlo en las posibilidades tecnológicas o en nosotros mismos como diseñadores) implica involucrar desde el comienzo a los usuarios en el proceso de desarrollo del sitio; conocer cómo son, qué necesitan, para qué usan el sitio; testar el sitio con los propios usuarios; investigar cómo reaccionan ante el diseño, cómo es su experiencia de uso; e innovar siempre con el objetivo claro de mejorar la experiencia del usuario.

FRAMEWOR JSF
JavaServer Faces (JSF) es una tecnología y framework para aplicaciones Java basadas en web que simplifica el desarrollo de interfaces de usuario en aplicaciones Java EE. JSF usa JavaServer Pages (JSP) como la tecnología que permite hacer el despliegue de las páginas, pero también se puede acomodar a otras tecnologías como XUL (acrónimo de XML-based User-interface Language, lenguaje basado en XML para la interfaz de usuario).

PRIMEFACES

Es un componente para JavaServer Faces (JSF) de código abierto que cuenta con un conjunto de componentes ricos que facilitan la creación de las aplicaciones web. Primefaces está bajo la licencia de Apache License V2. Una de las ventajas de utilizar Primefaces, es que permite la integración con otros componentes como por ejemplo RichFaces.

Experiencia del proyecto

El proyecto a realizar es Encuestas Online, con fines educativos. Los estudiantes que realizan este proyecto son de la Universidad del Cauca del programa de Ingeniería de Sistemas (VII) semestre.

Para realizar esta aplicación nos basamos en un prototipo creado con wimeframe plug-in de Eclipse para represar lo que queremos implementar destacando la interfaz y el diseño centrado en usuario(ver aqui). Seguido de esto, utilizamos una técnica de evaluación de usabilidad llamada interacción constructiva para que los usuarios dieran sus opiniones y pensamientos de como se comportaba nuestra aplicación a través de un prototipo.

Para nuestra aplicación web, el ingeniero Libardo Pantoja, profesor de la asignatura Software III estableció una serie de requisitos que se pueden observar en este pdf y que en base a ello nos damos una idea de como vamos a realizar nuestro prototipo. 

A continuación se mostrara el resultado de nuestro prototipo ya implementado usando el framework JSF con Netbeans 7.2.1

Autenticacion de Usuarios

Se realizo una pagina principal en donde el usuario puede ingresar a través de su cuenta (si ya esta creada) para realizar una encuesta o puede crear una gratis ingresando sus datos que  se le pedirán  los que están con (*) significa que son importantes para el sistema, con su debida seguridad de datos y encriptacion de contraseña. El sistema ademas tiene un Administrador que es el encargado de gestionar el sistemas de la encuestas.

se observa los campos que usuario tiene que llenar para inscribirse al sistema

Creación y edición de la encuesta
Cuando se registra un usuario se puede ir a crear una encuesta con todas las funcionalidades.

Se crea la encuesta con el titulo que el usuario desea

Cuando se crea una pregunta se especifica las opciones de pregunta(una respuesta, varias respuestas, una respuesta desplegable y respuesta abierta)

Publicación de la encuesta
En este caso si realizamos el estado en que pueden estar la encuesta (abierta o cerrada) aunque genero  duda cuando los usuarios evaluaron la parte de diseño y usabilidad. Nos falto el acceso a que las personas realizaran la encuesta. Pero si se realizo una bloque en donde se pueden mostrar las gráficas obtenidas por las encuestas realizadas.

Mejoras en nuestra aplicación
Consideramos que en cuanto a usabilidad de nuestra aplicación hay cosas por corregir pero estamos en buen camino, estamos tratando de adaptar todas las características de Usabilidad que puede tener una aplicación ya que en este caso nos enfatizamos mas por el diseño centrado en usuario.

Metodologia

Técnica de Evaluación de Usabilidad

Dentro de las diferentes técnicas para la evaluación de la usabilidad, para el proyecto Encuestas Online, usamos la siguiente

Interacción constructiva

Se realiza entre grupos de dos personas hablando entre ellos y comunicando libremente todo lo que piensan sobre el diseño y la funcionalidad del sistema. Se les pide a los usuarios que expresen en voz alta sus pensamientos, sentimientos y opiniones mientras que interaccionan con el sistema o un prototipo del mismo, es nuestro caso se realizó con un prototipo.

Para cumplir de buena manera con esta técnica, se deben realizar una serie de actividades que se clasifican en 3 momentos: antes, durante y después de realizar la técnica.
Actividades a desarrollar en la técnica

Antes del desarrollo:

1. Los integrantes del grupo se deben familiarizar con la técnica escogida.

2. Se debe escoger entre los integrantes las personas encargadas de exponer los prototipos realizados ante los dos usuarios, así como de las herramientas para la evidencia durante el proceso de prueba (cámara, videos, etc).

3. Se escogerán dos usuarios para evaluar los prototipos de la aplicación. En este caso será un estudiante de último semestre y profesor de la Universidad del Cauca.   

4.  Se debe fijar la fecha, hora y lugar para realizar el proceso.

Hora	10 am oficina 442 Ingeniería de Sistemas Universidad del Cauca
Persona encargada de exponer prototipo	María Isabel Bastidas       Dolly Jazmin Anacona
Usuario a evaluar prototipo	Ing. Ricardo Zambrano        Estudiante Jhon Freddy Paz

Durante del desarrollo:

1. La persona encargada de exponer ante los dos usuarios, explicará la idea principal de la técnica de evaluación, como se desarrollará el proceso y su importante labor en ésta.

2. Se tomarán fotos y se grabará el proceso, para actividades posteriores.

3. Los integrantes del grupo estarán atentos a cada uno de las opiniones y reacciones de los usuarios.

Después del desarrollo

1. Se revisaran los videos y con lo escuchado durante el desarrollo, se debatirán los cambios que se deben realizar a los prototipos presentados. 

2.  Se realizarán cada uno de los cambios recomendados por los dos usuarios.

Con base en el vídeo realizado por los integrantes escribimos sobre los prototipos las correcciones para hacer y como quedara nuestra aplicación.

Ver prototipos versión 1 y versión 2, aqui

Prototipo

Para la realización de nuestro proyecto Encuestas Online, creamos un modelo de cada una de las interfaces en donde se muestra una  representación de escenarios de como seria la aplicación real.

Para crear los escenarios se hizo uso de la herramienta WireframeSketcher, un plug-in de Eclipse que nos permite la representación de nuestras ideas de diseño en forma de papel y realizar una cierta simulación de todo el sistemas que deseamos plasmar.

Perfil de Usuarios

Característica de Usuario	Descripción
Nivel de estudio	El usuario mínimo debe ser estudiante universitario (últimos semestres) o profesional.
Grado de conocimiento	El usuario debe tener dominio en herramientas de escritorio o web.
Dominio de herramientas informáticas y de comunicación	Debe tener conocimientos básicos en: ·         Correo Electrónico ·         Procesadores de Texto ·         Navegadores ·         Hojas de cálculo y estadísticas.
Edad	Considerando que los usuarios utilizaran este sistema para sus proyectos finales: universitarios, empresariales, el rango aproximado será de: (23-40 años).

PROTOTIPO WIFRAME V.1 ENCUESTAS ONLINE LATINOAMERICANA

Iniciar sesión

El usuario si ya esta registrado entra con su respectivo usuario y contraseña. En la parte inferior derecha hay un enlace para los que no son usuario y poder realizar sus encuestas.

Registrar usuario

El usuario puede dejar sus datos personales. Las etiquetas que están en (*) quieren decir que es obligatorio llenar ese campo ya que hay datos son muy importantes para poder registrarse

Menú Usuario

Cuando el usuario se ha registrado ya puede acceder a su cuenta y por tanto hacer uso ya de la aplicación  En este caso se muestra la lista de encuestas (en caso de que ya hayan realizado encuestas) . Una ventana en la que puede colocar crear una nueva encuesta colocando su titulo.

Editar encuesta

En esta pagina puede cambiar si desea el titulo y procede a añadir la pregunta que desee. En este caso dejamos como un ejemplo de como seria una pregunta  y las posibles respuesta que pondría el usuario.

Añadir pregunta

Creamos una ventana en donde el usuario puede añadir la pregunta. Para el tipo de respuesta   esta el de única respuesta, varias respuesta, respuesta abierta. Para la opciones de respuesta el usuario puede digitar las respuesta. Por ejemplo: "a. Es un numero, b. Es un decimal".

Visualizar Pregunta

Cuando ya realizamos la pregunta podemos darle finalizar y guardar o volverla a modificar.

Este fue el prototipo que realizamos para darnos una idea de como hacer nuestra aplicación. Cuando realizamos este modelo tuvimos ciertas dudas en donde hicimos uso de un técnica de evaluación por Test con el uso de Interacción constructiva (ver pagina metodología).
CAMBIOS EN EL PROTOTIPO USANDO TÉCNICAS DE EVALUACIÓN V.2
Cuando los dos usuarios miraron este bosquejo del proyecto cambiaron  menú de usuarios el resto no tuvieron objeción alguna. A continuación se colocara las imagen con las respectivas modificaciones que se cambiaran ya en el proyecto a realizar

Versión 2

Versión 1

En la interfaz de editar encuesta hay ciertas confusión el tipo de respuesta a cada pregunta y falta ver como un desplegable de visualizar.

Versión 1

Versión 2