Pautas para la interfaz de usuario Página 1 de 12
Customer Satisfaction Manager
Pautas para la Interfaz de Usuario
Versión 1.0
Historia de revisiones
Fecha Versión Descripción Autor
Pautas para la interfaz de usuario Página 2 de 12
Contenido
1. Objetivo ... 3
2. Tipo de aplicación ... 3
2.1 Visión General ... 3
2.2 Secciones del sitio ... 3
3. Tipo de usuarios ... 5
4. Interfaz de Usuario según requerimientos ... 5
5. Interfaz de Usuario: aspecto visual ... 5
5.1 Colores ... 6
5.2 Tipografía ... 6
1. Objetivo
Este documento pretende establecer a nivel general las interfaces de usuarios en función de los requerimientos relevados hasta ahora y dar un pantallazo general del aspecto visual de la interfaz gráfica.
El cliente solicita explícitamente que el sistema requiere de una interfase que
permita la usabilidad del producto.
Se busca conducir y coordinar el prototipado de la interfase de usuario capturando los requerimientos relacionados a la misma y requerimientos de usabilidad.
En este documento se explica en detalle las páginas que conformarán la interfase de usuario cubriendo los casos de uso.
Pondremos especial énfasis en construir una interfaz amigable e intuitiva para el usuario.
Se dispondrá de un login para restringir funcionalidades a los usuarios que no tengan los permisos necesarios.
2. Tipo de aplicación
2.1 Visión General
El tipo de aplicación es Web y dentro de las principales cualidades tenemos que se le dará mucha importancia a la simplicidad y facilidad de uso. Según el tipo de usuario que se encuentre visualizando el sitio será las páginas que tendrá acceso.
El sistema se utiliza para conocer la satisfacción de los clientes con respecto a los proyectos que se estén desarrollando en Moove-IT a lo largo del tiempo y actualmente.
2.2 Secciones del sitio
Página Inicial:
Es la página de bienvenida, incluye el login de usuario en la esquina superior derecha y dependiendo del usuario se redirige a la página correspondiente con las funcionalidades habilitadas. Contendrá un slider con imágenes indicando algunas funcionalidades que se pueden realizar.
Cuando el usuario se loguea la página muestra el perfil del usuario con sus datos y un menú a la izquierda con las distintas funcionalidades habilitadas según el tipo de usuario que se encuentre logueado.
Todas las páginas cuando un usuario está logueado contienen un cabezal con una imagen sobre la izquiera y a la derecha el nombre del usuario seguido de un botón para desloguarse.
En la parte inferior de la página hay un footer con información de la empresa.
Administración:
El menú de administración contiene las siguientes funcionalidades:
Resumen – Contiene la actividad reciente, estadísticas del estado general de los clientes y la evolución del estado de ánimo general.
Proyectos – Contiene un listado de los proyectos con la posibilidad de realizar una búsqueda en la esquina superior derecha del listado y abajo se encuentra un botón para agregar un proyecto nuevo. Haciendo clic en uno de los proyectos se abre el detalle del proyecto: descripción, estado de ánimo del cliente, evolución de los estados de ánimo, feedbacks realizados y un botón para agregar un nuevo feedback. Éstos se pueden configurar si son públicos a los clientes u otros usuarios o privados para el administración. Por defecto serán privados para la administración.
Usuarios – A definir Clientes – A definir Formularios – A definir Reconocimiento – A definir Usuario de Moove-IT
Contiene un panel con datos personales a la izquierda y a la derecha una lista de actividades que puede ver/realizar.
Todavía está pendiente analizar la existencia de este tipo de usuario. Cliente
Panel a la izquierda:
Se muestra un panel con el título del proyecto vigente y el nombre de la empresa asociada.
Se muestra un gráfico donde indica el estado de ánimo del cliente y un botón que permite modificar dicho estado actual.
Luego se indica una descripción del proyecto.
Debajo de esto se encuentran los milestones o fin de proyecto. Panel a la derecha:
Muestra una lista de actividades que se encuentran públicas para el cliente (activado por un administrador desde la administración)
En la parte superior izquierda del panel se puede realizar una búsqueda de alguna actividad realizada por el título de la actividad. En la parte superior derecha del panel se puede modificar el orden de los ítems del listado (ascendente, descendente)
Cada ítem contiene una imagen a la derecha que indica el tipo de información que contiene el ítem (charla de skype, e-mail, chat, etc)
Al hacer clic en un ítem, se despliega el ítem con más detalles y mostrando el listado de comentarios realizados tanto por el cliente como por los administradores (que estén públicos para el cliente) pudiendo agregar un comentario al final de esta lista.
En la parte superior de este listado se encuentra la siguiente información: asunto, tipo de información (charla de skype, e-mail, chat, etc) y la fecha del primer comentario del listado.
Cada ítem del listado de comentarios contiene la información del usuario que lo agregó y la fecha en que se agregó el mismo.
Usuario Público no logueado
Arriba de todo se muestra una imagen con una descripción de lo que se muestra en la página.
Este usuario ve un listado con los proyectos que se encuentran en desarrollo actualmente en Moove-IT.
Cada ítem del listado contiene un color de fondo (a definir) el cual indica el estado de ánimo del cliente respecto a ese proyecto.
En la parte de la izquiera se muestra una imagen del cliente.
En la parte de la derecha como título del ítem: el nombre del proyecto y la empresa asociada.
Debajo hay una descripción del proyecto y se indica con una imagen explícitamente el estado de ánimo del cliente.
Sobre el final del ítem se muestan los botones para ver las estadísticas y evolución de estado de ánimo del cliente.
Al hacer click en estos botones se despliega sobre la derecha cada uno de los detalles respectivamente.
3. Tipo de usuarios
El sistema contará con cuatro tipos de usuarios, los cuales de acuerdo al tipo de permisos asignado podrán ver las funcionalidades asociadas.
Los tipos de usuarios son:
Administrador – Es el tipo de usuario logueado que utiliza el back-end de Moove-IT.
Usuario – Es el tipo de usuario que representa al usuario de Moove-IT que se encuentra logueado pero no es administrador.
Cliente - Es el tipo de usuario que representa al cliente.
Usuario Público no logueado – Es el tipo de usuario que puede ver el sitio públicamente sin realizar login.
4. Interfaz de Usuario según requerimientos
No se han relevado requerimientos específicos respecto a la interfaz de usuario como para definir políticas a llevar a cabo.
5.1 Colores
El cliente no ha relevado requerimientos especiales sobre la utilización de colores. Los colores que se han considerado hasta ahora sólo son una idea de cómo podría quedar.
Para representar los estados de ánimo consideramos los colores que vimos que se utiliza en Moove-IT para representar el grado de satisfacción de sus clientes:
Verde – El cliente está satisfecho.
Amarillo – El cliente está medianamente satisfecho. Rojo – El cliente no se encuentra satisfecho.
5.2 Tipografía
El cliente no ha relevado requerimientos especiales sobre la tipografía. 5.3 Screenshots
Definiendo algunas pautas generales del aspecto visual de la interfaz de usuario a continuación se encuentran algunas imágenes de las funcionalidades más importantes, son simplemente un bosquejo a modo de ejemplo de cómo será la interfaz de usuario.
Las pantallas que se muestran a continuación representan las vistas de la aplicación web dependiendo el tipo de usuario.
Página Inicial
Administración
Administración de Proyectos de Clientes
Detalle de Proyecto
Vista Usuario
Fig. 5 - Vista Usuario
Vista Privada del Cliente
FeedBack del Cliente
Vista Pública de Clientes