Copyright 2015 Endalia, S.L. Todos los derechos reservados.

Transcripción

1

2 Copyright 2015 Endalia, S.L. Todos los derechos reservados. Este documento contiene información propietaria de Endalia, S.L. Se emite con el único propósito de informar proyectos Endalia, por lo que no se ofrece ninguna garantía explícita o implícita. Ninguna parte de esta publicación puede ser utilizada para cualquier otro propósito, y no debe ser reproducida, copiada, adaptada, divulgada, distribuida, transmitida, almacenada en un sistema de recuperación o traducida a cualquier lenguaje del ser humano o de programación, en cualquier forma, por cualesquiera medios, por entero o en parte, sin el consentimiento previo por escrito de Endalia, S.L. Algunos productos o compañías que se mencionan son marcas de sus respectivos propietarios. 2 de 24

3 Endalia Web 5. Una revolución de principio a fin. Endalia Web 5 supone una completa renovación técnica y visual de la plataforma Web de Endalia HR, y una actualización a los últimos estándares de sistemas móviles de acceso a la información y distribución de contenido. UX. La interfaz de usuario ha sido totalmente revisada. Partiendo del objetivo de mantener la sencillez del sistema, y tomando como base la organización visual de la información, se han reevaluado todas las interacciones y casos de uso. Como resultado se han implementado nuevas soluciones de navegación y de interacción, como el nuevo menú lateral, la unificación de la interfaz de acciones en tablas y páginas, así como los filtros de datos. Secciones principales como la página de inicio, el directorio de empleados y el organigrama, han sido diseñadas completamente. Un diseño limpio, actual y con contraste entre elementos, así como, la homogeneización de alertas y estilos de información en pantalla, facilita a los usuarios la identificación de las acciones a realizar y el acceso a la información. Diseño responsive. La nueva versión de la plataforma puede visualizarse y ejecutarse en cualquier resolución, desde un smartphone a una pantalla de escritorio. Todas las páginas del sistema han sido definidas siguiendo un diseño responsive basado en HTML5, que adapta los contenidos de manera automática y dinámica a la resolución del dispositivo, ajustando componentes e información para una visualización siempre correcta. Estandarización. Endalia Web 5 puede ejecutarse en Internet Explorer, Chrome, Firefox, Opera, Safari y cualquier navegador basado en WebKit. Endalia Web 5 utiliza HTML y runtimes estándar, y puede ejecutarse en Windows, Mac OS y Linux. 3 de 24

4 Mejor rendimiento. Además de la capa visual, se ha realizado una revisión y reimplementación del framework tecnológico de ejecución de la plataforma. Las partes críticas y de mayor interacción por parte del usuario han sido reescritas, sustituyendo ejecución remota y transferencia de página completa en el servidor, por ejecución en navegador cliente e interacción asíncrona mediante JavaScript y Ajax, consiguiendo una experiencia de usuario más ágil y fluida. Las estructuras en árbol de empleados, los controles de búsqueda o todos los grids de datos han sido sustituidos por nuevos controles que permiten eventos de onload, filtrados y ordenados sin recargas de página. Estos cambios, junto con el nuevo diseño basado en el framework Bootstrap, han permitido reducir el tamaño de página en una media de un 60%. El resultado es menor tiempo de respuesta y mayor rapidez de carga. Accesibilidad. Endalia Web 5 es WCAG 2.0 A compliant, la última versión de las pautas de accesibilidad del contenido en la Web del World Wide Web Consortium (W3C). 5 4 de 24

5 Homepage La página de inicio ha sido rediseñada con el objetivo de facilitar al usuario su información más relevante en cada módulo, el estado de sus procesos y sus acciones pendientes. Pulsando en cada detalle se accede de manera directa a la sección específica relacionada. El sistema proporciona una configuración por defecto que el usuario puede personalizar, añadiendo y eliminando aquello sobre lo que quiere ser notificado al acceder al sistema. El diseño más compacto disminuye el tiempo de carga inicial y mejora la experiencia de uso. 5 de 24

6 Navegación El menú de navegación principal ha sido reubicado a la izquierda de la pantalla, lo que permite disponer del espacio anteriormente utilizado en la cabecera para mostrar lo verdaderamente relevante para el usuario, el contenido de las secciones. Dependiendo de la configuración personal, este nuevo diseño incrementa hasta un 20% el espacio en pantalla disponible para contenido. El menú de secciones se despliega de manera dinámica sobre el contenido de forma horizontal, permitiendo más niveles de profundidad de acceso, donde antes solo eran posibles dos. 6 de 24

7 Usabilidad Las secciones mantienen el título y la navegación superior por breadcrumbs a la que ya que están acostumbrados los usuarios. Cada página ha sido revisada de manera individual para conseguir un diseño más visual y sencillo. Nuevas tipografías, diferencia de tamaños, mayor contraste entre información y acciones disponibles (botones, desplegables, etc.) permiten identificar de manera más ágil como interactuar con formularios y contenidos. El nuevo diseño incrementa el espacio en blanco entre contenidos, facilitando una lectura más fluida y agradable. Las acciones que antes se representaban únicamente por iconografía ( lápiz para edición, X para eliminar, etc.) ahora incluyen siempre un texto identificativo, reduciendo la necesidad de adivinar qué acción voy a realizar, tener que cargar la ayuda contextual o tener que recordar el funcionamiento de nuevo en cada sesión. Como ejemplo, el currículum personal mantiene la organización de contenido con la que están familiarizados los usuarios, pero con las nuevas mejoras de diseño e interfaz. 7 de 24

8 Nuevo panel de información multifunción El diseño y operativa de las secciones de proceso han sido unificados de forma homogénea, incluyendo un nuevo panel en la parte izquierda de la pantalla con la información más relevante (estado, fases, participantes, etc.) y las opciones de búsqueda. La homogeneización del diseño facilita a los usuarios interpretar la información e interactuar con los diferentes módulos. Estos son algunos ejemplos de uso: Vacaciones Workflows Retribución flexible Árbol de colaboradores 8 de 24

9 Directorio de empleados Además de la vista actual en tabla del directorio de empleados, se ha añadido la posibilidad de visualización en tarjetas o cards, mostrando de manera más compacta la información de contacto y permitiendo un mayor tamaño en las fotografías, facilitando así la identificación de la persona que buscamos. El directorio es un ejemplo de las nuevas soluciones de diseño y presentación de contenidos añadidas a las ya existentes. 9 de 24

10 Organigrama El organigrama ha sido completamente reimplementando utilizando únicamente JavaScript y Ajax para mejorar el tiempo de carga y, la agilidad y fluidez de interacción con el usuario. Se han incorporado nuevos modos de visualización, como la vista horizontal, la vista compacta de nodos o la vista en matriz, que permiten visualizar y acceder a más puestos en el mismo espacio. El nuevo diseño incrementa el tamaño de las fotos y permite nuevos tipos de asignación de nodos cómo asistente y partner además de la ya existente relación responsable-colaborador. El organigrama es otro ejemplo de funcionalidad totalmente rediseñada para mejorar la experiencia de usuario y las opciones del sistema. 10 de 24

11 Workflows El motor de renderizado y transferencia de datos de workflows ha sido revisado para reducir el tiempo de carga y envío de los formularios. El nuevo diseño del formulario facilita la identificación de que información recibo de pasos previos del proceso y cual debo completar y enviar. A continuación, unos ejemplos: Notificación cambio de cuenta corriente 11 de 24

12 Alta de empleado 12 de 24

13 Diagrama de seguimiento 13 de 24

14 Diseño Cada módulo y pantalla ha sido rediseñado. La información más relevante se presenta de forma clara y destacada y siguiendo la misma estructura en todas las secciones. Nuestros consultores han analizado las particularidades de cada módulo de forma individual para asegurar un diseño y definición en consonancia con las necesidades de las organizaciones. A continuación, unos ejemplos: Vacaciones y ausencias Unificación de calendario con el estado de mis solicitudes y mis días disponibles. 14 de 24

15 Evaluación de objetivos Integración de la visualización de fases del proceso, participantes y estado actual. Simplificación de la interacción en la definición y evaluación de los objetivos. 15 de 24

16 Evaluación de competencias Nueva visualización de respuestas seleccionadas más fácil de interpretar para el usuario, sustituyendo la selección por radio buttons. Interacción por JavaScript y Ajax con guardado automático de cada selección si recarga de página. Ajuste de la visualización del cuestionario de horizontal a vertical dependiendo del tamaño de pantalla disponible. 16 de 24

17 Calendario laboral Una visualización más clara y dinámica de mis ausencias y las de mis colaboradores. 17 de 24

18 Funcionalidad Nuevos controles extienden las posibilidades de visualización y carga de datos de los actualmente existentes. A continuación, unos ejemplos: Grid Todas las tablas de datos del sistema han sido sustituidas por un nuevo grid que permite el filtrado, ordenado y agrupación de datos sin recarga de página. 18 de 24

19 Cuando la acción que se puede realizar en una tabla del grid es única, aparece como un botón con texto e icono. El usuario identifica de forma directa qué puede hacer. Cuando existen múltiples acciones posibles, el grid comprime las acciones de forma automática en un desplegable. El usuario dispone de todas las acciones ocupando el mínimo espacio posible y permitiendo más anchura y contenido en las columnas de datos. 19 de 24

20 Vista de colaboradores Todas las secciones de vista de colaboradores incluyen un nuevo navegador con opción de vista tradicional en árbol o carga de colaboradores directos. La búsqueda integrada sin recarga de página permite acceder de manera ágil a los datos de personas concretas en todos los procesos. Una vez utilizado, el árbol puede ocultarse y mostrarse de forma dinámica pulsando el botón en el menú lateral, con lo que de nuevo aprovechamos todo el ancho de pantalla disponible. 20 de 24

21 Búsqueda rápida Los campos de búsqueda y filtro hacen más fácil encontrar de manera automática la información, mostrando los posibles resultados. La búsqueda predictiva facilita y genera una experiencia de uso satisfactoria. 21 de 24

22 Diseño responsive Diseño y contenido se adaptan de forma automática a cualquier resolución, desde un Smartphone a un ordenador de sobremesa. El sistema es completamente operativo utilizando tablets o smartphones. 22 de 24

23 Comparativa de versiones Endalia Web 4 Endalia Web 5 Diseño adaptado a dispositivos móviles Versión IG ASP.NET Framework jquery interacciones JavaScript Navegadores100% compatibles Internet Explorer, Firefox Internet Explorer, Firefox, Chrome, Safari, Opera, WebKit Grids con filtrado y ordenado Carga de datos AJAX sin necesidad de recarga completa de página Tamaño de página Media de 60% menos Carga de página (seg) Media de 30% menos Espacio en pantalla para contenido Hasta 25% mas Iconografía vectorial Posibilidad customización página inicio 23 de 24

24