5. What is Veil Piercing?
5.10 Problems with the categorisation approach
El diseño de las interfaces se ha realizado pensando en la usabilidad y la agilidad para realizar las diferentes funcionalidades del sistema. Es por ello, que se han planteado unas interfaces principales de tipo SPA (Single Page Application) que permitan realizar más de una funcionalidad sin tener que recargar la página constantemente. Las interfaces principales son:
- Listar encuestas:
● Listar encuestas
● Ir a una encuesta
● Eliminar una encuesta
● Crear una encuesta
- Ver encuesta:
● Ver encuesta
● Modificar encuesta
● Ver versiones
● Crear y modificar versiones
● Activar una versión
● Ver, crear, modificar una pregunta
● Listar, añadir, modificar y eliminar opciones de pregunta.
● Ir a organizar preguntas ● Ir a ver estadísticas ● Ir a listar encuestas - Organizar encuestas: ● Cargar diagrama ● Nuevo diagrama ● Guardar diagrama
● Añadir pregunta a diagrama
● Añadir condición a diagrama
● Añadir ELSE a diagrama
● Relacionar elementos del diagrama
● Eliminar elementos del diagrama
● Ayuda - Ver estadísticas ● Ver estadísticas ● Exportar informe - Responder encuesta ● Responder encuesta
El diseño de la interfaz principal de listar encuestas, como se puede apreciar en la imagen DI01, es muy sencillo. Consta de una tabla donde cada fila corresponde a una encuesta. Cada una de estas filas consta de dos botones, uno para dirigirse a ver la encuesta y otro para eliminar la encuesta. A la hora de eliminar encuestas es muy importante solicitar confirmación al usuario, como se puede apreciar en la imagen DI02, puesto que si el usuario le diera por error al botón eliminar y no existiera esta confirmación podría perder muchos datos y horas de trabajo. Además de lo anteriormente comentado, en esta interfaz podemos encontrar un botón que nos permite crear nuevas encuestas mediante un modal, dicho modal puede apreciarse en la imagen DI03.
Imagen DI01: Interfaz listar encuestas.
Imagen DI03: Modal para la creación de encuestas
El diseño de la interfaz principal ver encuestas, que podemos ver en la imagen DI04, está pensado para que de forma muy dinámica se pueda modificar el contenido principal de una encuesta, es decir, la versión y las preguntas.
Si se hace clic sobre el icono del ojo situado junto a la versión actual se abrirá un modal como el que aparece en la imagen DI05 donde de forma muy rápida se podrán ver las versiones de la encuesta, la versión activa (que podrá ser cambiada haciendo clic en el icono de la columna activa de la versión que se quiera activar), se podrá añadir una nueva versión rellenando el campo de texto y haciendo clic en el botón con un signo más y finalmente se podrá editar el nombre de una versión haciendo clic en el icono del lápiz, que cambiará la interfaz mostrando en el modal una interfaz como la que aparece en la imagen DI06.
Si el usuario hace clic sobre el botón añadir pregunta se abrirá un modal como el de la imagen DI07, donde se aprecia un botón con el texto “Añadir”, si el usuario selecciona un tipo que incluya opciones el texto de dicho botón cambiará a “Siguiente” como se puede apreciar en la imagen DI08 para que el usuario pueda introducir las opciones de la pregunta antes de finalizar como se puede apreciar en las imágenes DI09 y DI10.
Además al añadir opciones antes de finalizar la pregunta, si se ha puesto una opción incorrecta se puede eliminar mediante el botón con el texto “x” que se observa en la imagen DI10.
En el caso de querer ver los detalles de las preguntas se deberá hacer clic sobre el botón “Ver” que hay en la fila de la pregunta, que nos abrirá un modal con todos los detalles de la pregunta como se puede observar en la imagen DI11 si la pregunta no tiene opciones o como en la imagen DI13 en el caso de que la pregunta tenga opciones. En el caso de querer editar una pregunta simplemente se deberá hacer clic en el botón “Editar” que mostrará un modal como el de la imagen DI12. En el caso de querer eliminar opciones de una pregunta simplemente se deberá hacer clic en el icono “x”, que puede verse en la imagen DI13, y para añadir y modificar opciones el funcionamiento es igual que en las versiones, puede apreciarse en las imágenes DI13 y DI14.
Imagen DI08: Modal de añadir pregunta al seleccionar un tipo con opciones
Imagen DI10: Modal de añadir pregunta con opciones
Imagen DI14: Modal de ver pregunta editando una opción
La siguiente interfaz importante es la de organizar preguntas ya que se basa en la creación de un diagrama mediante un editor que permite añadir preguntas, añadir condiciones, añadir condición else, empezar el diagrama de nuevo, solicitar ayuda y guardar el diagrama. Por defecto, como solo se permite un diagrama por encuesta, se carga el diagrama correspondiente a la encuesta seleccionada.
En la imagen DI16 podemos ver el modal para añadir una pregunta al diagrama. Simplemente se le pregunta al usuario que pregunta desea añadir entra las preguntas disponibles en la encuesta.
En la imagen DI17 podemos observar el modal que aparece al solicitar añadir una condición al diagrama. Se pueden apreciar tres selectores, uno con las preguntas que su tipo admite opciones, otro con el comparador que se desea y un último selector, que se carga dinámicamente en función del primer selector, donde aparecen las opciones disponibles. Además si se desea aplicar condiciones más complejas se puede hacer clic en el botón “+” que dará como resultado una interfaz como la de la imagen DI18. Se pueden incrementar las condiciones lo que se desee sin número máximo de veces que se puede hacer clic sobre el botón “+”. Con el botón “-” se eliminará la última condición añadida. Como se puede observar una solución que permite crear condiciones complejas de forma muy intuitiva.
En el caso de seleccionar el signo de interrogación que se aprecia en la imágen DI15, aparecerá un modal como el de la imágen DI19 con información de cómo usar el editor de diagramas.
Finalmente para eliminar un elemento del diagrama se ha optado por añadir un menú al hacer clic derecho sobre el elemento en cuestión que muestra las opciones disponibles, en este caso, simplemente la opción de eliminar, como puede apreciarse en la imagen DI20.
Imagen DI16: Modal para añadir pregunta al diagrama
Imagen DI18: Modal para añadir condición con varias condiciones
Imagen DI20: Menú que aparece con botón derecho sobre elemento
A continuación se muestran un conjunto de imágenes correspondientes a la interfaz principal de responder encuestas donde se puede ver la primera interfaz donde el usuario pulsa el botón “iniciar encuesta” (Imagen DI21), otra imagen, la DI22, donde se puede ver como se muestra un error en caso de no haber respondido correctamente la pregunta, otra imagen, la DI23, que muestra una pregunta de tipo selección múltiple donde se puede apreciar como la barra de progreso va avanzando a medida que se van superando preguntas y finalmente se puede observar la imagen DI24 donde se muestra la interfaz de encuesta finalizada.
Imagen DI25: Interfaz de Login
El último diseño que falta por mostrar es el correspondiente a la interfaz de ver estadísticas (Imagen DI26), que consta de una cabecera donde se puede ver de un vistazo los usuarios que han contestado la encuesta y los que no han finalizado la encuesta. En el caso de haber algún usuario que no haya finalizado la encuesta se puede ver un gráfico que muestra la última pregunta que ha respondido el usuario y el número de usuarios que ha abandonado en esa pregunta, también se muestra la media de respuestas que responde un encuestado que abandona la encuesta (puede observarse en la imagen DI27). Por cada pregunta que tiene al menos una respuesta el sistema muestra el número de respuestas y en el caso de ser una pregunta con opciones se muestra un gráfico de las opciones seleccionadas por los usuarios (Imagen DI28).
Imagen DI27: Gráfico que muestra las últimas preguntas contestadas por los usuarios que no han acabado la encuesta