Extensión K2B proyectos para Smart Devices

Transcripción

1 Extensión K2B proyectos para Smart Devices Pautas Para la Interface de Usuario Versión /10/2012 Historia de revisiones Fecha Versión Descripción Autor 22/08/ Creación del documento Marcelo Restuccia 25/08/ Revisión SQA Rodrigo Machín 01/09/ Actualización del Documento Marcelo Restuccia 01/09/ Revisión SQA Rodrigo Machín 08/09/ Actualización del aspecto visual Smart Devices y Creación del aspecto visual web Marcelo Restuccia 09/09/ Revisión SQA Rodrigo Machín Actualización del aspecto visual para Smart Devices, IOS y Marcelo 24/09/ Android Restuccia 14/10/ Correcciones realizadas para mantener consistencia en la Línea Base Santiago Colman

2 Contenidos Contenidos... 2 Introducción... 4 Usuarios... 4 Requerimientos... 4 Funcionales... 4 Estéticos... 4 Facilidad de uso... 4 Tipos de Interfaces... 5 Interfaces de usuario... 5 Interfaz WEB... 5 Interfaz Smart Devices... 5 Aspecto Visual Smart Devices... 6 Login... 6 Registro de Horas IOS... 7 Registro de Horas Android... 7 Consulta Horas Registradas IOS - Android... 9 (Ver-Editar-Eliminar)... 9 Consulta de Plantillas IOS - Android (Ver-Editar-Eliminar) Consultar Tareas IOS - Android... Error! Marcador no definido. (Ver-Editar-Eliminar-Finalizar)... Error! Marcador no definido. Crear-Editar Tareas IOS - Android... Error! Marcador no definido. Configuración para el CheckIn IOS - Android (Ver-Editar-Eliminar) Crear CheckIn IOS - Android Config. De Tipo de Registro de Horas IOS Android Crear Notificación IOS Android Consultar Notificaciones IOS - Android (Ver-Editar-Eliminar-Activar-Desactivar) CheckIn-CheckOut IOS - Android Aspecto Visual WEB Registro de horas Observaciones

3 Registro de Horas desde Archivo Consular Horas: (Ver/Editar/Eliminar) Observaciones Editar Plantillas (Crear/Editar) Observaciones CheckIn/Out: Manual de Usuario

4 Introducción Este documento proporciona a nivel general las pautas y requerimientos relevantes a la hora de diseñar la interfaces de usuario del proyecto Extensión K2B proyectos para Smart Devices. Usuarios Los usuarios a los cuales está destinada la aplicación tienen un conocimiento promedio de computación y tecnologías. Más aun, en cuanto a la parte web, los usuarios están actualmente manejando la versión web del sistema al cual se pretende desarrollar funcionalidades para Smart Devices además de querer cambiar su interface web. Existe diversidad entre los usuarios, (ejemplo: Consultores y Administradores), por lo que los diferentes permisos son asignados a cada uno. Requerimientos Funcionales Se requiere de un Login (Persistente). Se desea tener un listado con los diferentes proyectos (Chek-in/Chek-out). Mostrar la mayor información posible sobre las horas registradas. Consultar horas registradas. Calendario de visualización y agenda. Mensaje de Aviso para el registro de horas. Estéticos Mostrar la menor cantidad de información posible, no saturar las pantallas con información. No hay requerimientos en cuanto al diseño estético de la aplicación. El cliente espera un diseño propuesto por el equipo de desarrollo. Facilidad de uso Como característica principal se desea una aplicación intuitiva. Usar pocas pantallas para facilitar el uso. Facilidad de entendimiento y aprendizaje. 4

5 5 Tipos de Interfaces Pautas Para la Interface de Usuario Según lo propuesto por el cliente, dentro de lo pedido hay dos interfaces de usuario diferentes. Una para la parte web y otra para la parte de Smart Devices. En cuanto a los diferentes Smart Devices que se utilizarán para el desarrollo de la aplicación, se intentará de mantener la misma interfaz usuario ya que entre los distintos dispositivos no hay un estándar en cuanto a la presentación en pantalla. Interfaces de usuario La Interfaz de usuario es de vital importancia para la aceptación del proyecto ya que es lo presentado a los usuarios por lo que a continuación se profundiza sobre los dos tipos pedidos. Interfaz WEB La parte web que abarca el proyecto tiene como objetivo sustituir el sistema actual de registro y consulta de horas vía web ya que la interfaz del sistema actual es complicada, difícil de acceder y poco intuitiva. Para lograr la aceptación de interfaz web, se debe lograr una fácil utilización del sistema teniendo en cuenta los requerimientos de facilidad de uso relevados. En cuanto al aspecto visual, no va a estar apoyado en el diseño actual del sistema. En caso de ser necesario se podrán utilizar componentes básicos de la página actual (como gifs o botones) obteniéndolos de la pagina. Respecto a los distintos tipos de usuarios, estos tendrán distintos permisos. A modo de ejemplo, los administradores podrán consultar las horas registradas de todos los consultores de un proyecto, y los consultores solo tendrán acceso a la consulta de sus horas registradas. Acerca de las consultas de horas registradas, en el sistema actual las consultas son engorrosas y carentes de información. La interfaz web debe brindar la mayor cantidad de información posible y de distintos modos respecto a las horas registradas. La aplicación web debe correr en las últimas versiones de los navegadores: Firefox, Chrome e Internet Explorer. Interfaz Smart Devices La parte de Smart Devices abarcada por el proyecto tiene como objetivo facilitar el registro de horas mediante este tipo de dispositivos. Como característica principal la aplicación debe de ser intuitiva. Aparte de esto, no existe hasta el momento ningún requerimiento en cuanto al aspecto visual de la aplicación. Iphone ipad BlackBerry Android. Los dispositivos que deben soportar la aplicación son:

6 Hay ciertas consideraciones respecto a tamaños que se deben tener en cuenta cuando se trabaje sobre la aplicación: estas varían según el dispositivo que se utilice. Como la interface de usuario para la parte de Smart Devices buscamos que sea una sola, es probable que diferentes dispositivos tengan ciertas variaciones en cuanto a la interfaz (el diseño permanece intacto). Aspecto Visual Smart Devices Respecto a Smart Devices, se diseñará la interfaz mediante Tabs, ya que consideramos que es una manera sencilla e intuitiva para el usuario. Se mantendrá la misma interfaz para los distintos usuarios. El aspecto visual se mantiene constante en todas las pantallas de la aplicación. Login El login será básico y simple, se muestra el logo abajo a la derecha. 6

7 Registro de Horas IOS Registro de Horas Android 7

8 Tabs: Registro De hora. Check-In Check-Out. Consultar Graficas. Profile : Agregar/Editar Templates, Agregar/Editar Alarmas, Agregar/Editar CheckIn Consultar horas registradas. Se muestran las plantillas, proyectos, elementos y roles en un grid vertical en otra pantalla para mas rápido y fácil acceso. Al presionar una plantilla, se cargan los datos en el formulario que se ve arriba. Las listas son de la siguiente forma. Se intentará mantener la misma interfaz para los distintos dispositivos. 8

9 Consulta Horas Registradas IOS - Android (Ver-Editar-Eliminar) Se listan los Registros en un Grid Vertical. Cada Registro tiene la opción de consultar, editar o eliminar el registro. Aplicar filtros avanza a una pantalla en la cual se eligen los filtros para el listado. La otra opción es que los filtros se apliquen desde un tab que aparece abajo de la pantalla. 9

10 Consulta de Plantillas IOS - Android (Ver-Editar-Eliminar) Se listan las Plantillas en un Grid Vertical. Cada Plantilla tiene la opción de consultar, editar o eliminar. Aplicar filtros avanza a una pantalla en la cual se eligen los filtros para el listado. La otra opción es que los filtros se apliquen desde un tab que aparece abajo de la pantalla. 10

11 Configuración para el CheckIn IOS - Android (Ver-Editar-Eliminar) Se listan los Checks en un Grid Vertical. Cada Check tiene la opción de consultar, editar o eliminar. Crear Check-In avanza a una pantalla en la cual se Crea Un Check-In. La otra opción es que Crear Check se aplique desde un tab que aparece abajo de la pantalla. 11

12 Crear CheckIn IOS - Android Config. De Tipo de Registro de Horas IOS Android 12

13 Crear Notificación IOS Android Crear Notificaciones empieza con estas pantallas donde se elige el tipo de notificación a crear. 13

14 Luego de seleccionar el tipo de notificación a crear, esta pantalla aparece, todas las distintas modificaciones tienen el mismo aspecto a la hora de crear la notificación, cambian los atributos nada más Consultar Notificaciones IOS - Android (Ver-Editar-Eliminar-Activar-Desactivar) 14

15 CheckIn-CheckOut IOS - Android 15

16 Aspecto Visual WEB Registro de horas Observaciones Las Plantillas se muestran en un grid vertical. 16

17 Registro de Horas desde Archivo Consular Horas: (Ver/Editar/Eliminar) 17

18 Observaciones En este caso se plantean 3 casos de uso, ver, editar y eliminar registros.se muestran los registros en un grid vertical. Editar Plantillas (Crear/Editar) Observaciones En este caso implementan 2 casos de uso, Crear y Editar plantillas las plantillas se muestras mediante un grid vertical. 18

19 CheckIn/Out: 19

20 Manual de Usuario Pautas Para la Interface de Usuario Se tendrá un manual de usuario en la parte web del proyecto, el mismo describe entre otros la instalación de la aplicación para los distintos Smart Devices. Para la parte de Smart Devices se contará con una pantalla de ayuda, resumen muy abreviado y concreto del manual. Unas pocas capturas de pantallas con breves expresiones. 20