Plataforma Business Cloud de Yunbit. Nuevo diseño - Blog Yunbit Software

Este año 2018 en Yunbit hemos implementado multitud de mejoras en servicios y soluciones, con cambios notables para nuestros clientes en todos los aspectos que a día de hoy continuamos evolucionando. Una de estas mejoras sin duda ha sido el cambio de diseño en nuestra plataforma Yunbit Business Cloud. Además de realizar una modificación sustancial sobre la base de los elementos, también hemos realizado modificaciones en su estructura y aplicado nuevas funcionalidades que sin duda mejoran tanto el entorno visual como la usabilidad, permitiendo una navegación más fluida e intuitiva que nos lleva a una mejoría en la productividad.

Además nos hemos enfocado en ampliar el uso de la herramienta en dispositivos móviles, permitiendo el acceso y control desde tabletas digitales y smartphones y operando a diferentes resoluciones en cualquier equipo, adaptando la visualización de la plataforma según las necesidades.

En este artículo repasaremos los cambios más notables sobre el nuevo diseño de la plataforma y su navegación, y veremos cómo podemos activar/desactivar esta nueva versión desde nuestro menú de datos personales.

Cómo activar el nuevo diseño en la plataforma Business Cloud de Yunbit

La nueva versión de la plataforma Business Cloud de Yunbit ya está en producción, así que si ya eres usuario y aún estás trabajando con la versión anterior, tienes la posibilidad de activar o desactivar esta nueva versión en la sección “Datos personales”, marcando o desmarcando la casilla de verificación “Opciones de usuario” [Nuevo diseño] y pinchando sobre el botón “Realizar modificación”. Una vez hecho esto y para que todo se visualice correctamente, sal de la plataforma y cierra esa pestaña del navegador, borra la caché del mismo y vuelve a acceder a la plataforma. Al volver a iniciar la sesión, verás los cambios activos y si en algún momento quieres retroceder a la versión anterior puedes hacerlo siguiendo los mismos pasos. Eso sí, ten en cuenta que a partir del 1 de Julio de 2019 la versión anterior se eliminará definitivamente, por lo que es recomendable que vayas activando esta nueva versión.

Entorno de la plataforma Business Cloud de Yunbit.

Para realizar los cambios de la plataforma Business Cloud de Yunbit hemos tenido en cuenta 3 factores que nos parecían fundamentales:

• Mejorar el aspecto general de la plataforma: El aspecto de la plataforma no era acorde a la potencia y versatilidad de la herramienta, ya que se habían ido aumentando las características y soluciones de ésta, pero manteniendo un diseño antiguo y poco versátil. Por otro lado, se utilizaban unos estilos inadecuados con la imagen corporativa de Yunbit, y era muy complicada la personalización para clientes.
• Mejorar la usabilidad sin alterar el funcionamiento base: Teniendo en cuenta que la lógica en la secuencia de navegación debía permanecer sin cambios, había que centrarse en dar opciones al usuario para mejorar el acceso a los contenidos de forma más clara e intuitiva.
• Ampliar el uso de la herramienta a dispositivos móviles: A partir de resoluciones inferiores a 1024 píxeles de anchura, la plataforma presentaba un scroll horizontal molesto que, sumado a los scrolls de los propios contenidos incrustados por bloques, hacía que el uso fuera muy complicado en determinadas vistas.

Teniendo en cuenta estos tres factores para la realización de los cambios de diseño en la plataforma, realizaremos un análisis para ver las diferencias y mejoras que se han llevado a cabo.

Aspecto general de la plataforma.

Los cambios de diseño realizados en la plataforma Business Cloud de Yunbit que afectan al aspecto general han sido variados, pero se podrían resumir en “dimensionar, ordenar y aplicar un árbol de estilos acorde a la imagen corporativa de Yunbit”.

Cuando hablamos de “dimensionar”, nos referimos a aplicar tamaños y separaciones al conjunto de los elementos que nos permitan obtener un entorno visualmente limpio y armónico.

Las tipografías, botones, tablas, textos, y en definitiva todos los elementos tanto de la estructura como del contenido deben mantener un tamaño acorde en su conjunto, ya que la acumulación de elementos pequeños en un espacio reducido produce una sensación de estrés, por lo que hay que dejar “respirar” a los elementos y hacer que su visibilidad sea correcta.

Esto que a priori puede parecer sencillo siempre entraña dificultad, debido a que hay que considerar la importancia del volumen de información a mostrar en un espacio reducido (como tablas con multitud de columnas). Siempre encontraremos puntos de vista enfrentados en este tipo de situaciones, pero hay ciertas bases que siempre hay que respetar en diseño que a la larga nuestra vista y uso de la aplicación agradecerá, aunque como tampoco podemos olvidarnos de la importancia de los datos, se han creado utilidades para potenciar ambos aspectos que veremos más adelante.

La ordenación de los elementos también ha sido un punto importante que ha mejorado respecto a la versión anterior, cosa muy notable por ejemplo en los módulos de filtros. Debido a diversidad de campos y a las múltiples posibilidades de visualización de los mismos en las diferentes secciones y vistas, se hacía complicado poder ordenar de una forma lógica la aparición de estos.

La solución ha sido incluir dichos campos en una rejilla independiente y adaptable según la resolución del dispositivo, manteniendo la posibilidad de alterar el tamaño de cada celda de dicha rejilla para campos múltiples. Esta solución es muy versátil y nos permite aplicarla a diferentes módulos, haciendo que mejore la facilidad de uso al obtener una ubicación de los elementos similar en todas las secciones.

La aplicación de una hoja de estilos común en todas las secciones de la herramienta ha sido un matiz que mejora la apariencia en conjunto y le da una presencia atribuible a la imagen de marca de Yunbit. Tras el desarrollo e implementación de estos cambios, se ha trabajado también en una posible personalización para clientes, dejando la estructura preparada para que una aplicación de nuevos estilos pueda llevarse a cabo de una forma relativamente rápida.

Navegación y usabilidad.

Un aspecto fundamental en los cambios de diseño llevados a cabo en la plataforma Business Cloud de Yunbit debía ser mejorar la navegación sin alterar el proceso lógico de funcionamiento. A grandes rasgos las pestañas de sección por categoría funcionaban bien y era una buena forma de presentar los contenidos, pero no tanto el cómo llegar hasta ellas dependiendo de la empresa/departamento, perfil de usuario y categoría de los contenidos.

Existían ítems semiocultos en la parte izquierda de la pantalla que se descubrían al pasar el ratón por encima de ellos, pero no era nada usable tener que ir descubriendo uno a uno (y variaban con cada perfil), sin contar con que en dispositivos móviles no tenemos la opción de hacer “rollover” a un elemento. Por otra parte, también teníamos elementos en la cabecera distribuidos en diferentes ítems e iconos para el acceso a secciones de usuario o ayuda que no quedaban claros hasta ver el “tooltip” al pasar el ratón sobre ellos. En definitiva, se hacía evidente que debíamos mejorar la usabilidad de estos accesos sin “robarle” espacio al contenido. Para ello la plataforma se ha reestructurado en 4 bloques. Menú principal, secciones, filtros y contenido.

El menú principal es una nueva columna izquierda que ocupa el 100% de la altura de la pantalla y contiene todos los accesos de la plataforma. Se distribuye a su vez en diferentes bloques, entre los que se encuentran el bloque de usuario (soporte, datos personales y desconexión), el bloque de opciones, bloque de empresa/departamento (no visible en todas las plataformas), bloque de perfil de usuario y bloque de categorías/secciones. Este último bloque es independiente del resto, y en caso de desbordamiento por altura de contenido tiene su propio scroll vertical. Todos estos bloques (excepto el de usuario) son selectores desplegables que incluyen accesos a secciones, vistas o configuraciones de la plataforma.

Esta columna, además de adaptarse al contenido según la resolución del dispositivo (fija o superpuesta), también permite ocultarse/mostrarse mediante el botón de menú en la parte superior de dicha columna (rodeado con un borde amarillo en la imagen superior), para permitir mayor espacio horizontal para el contenido.

El bloque superior muestra los accesos a las secciones dependientes de las selecciones realizadas en empresa/departamento, el perfil de usuario y categoría. Son pestañas que permiten “arrastrarse y colocar” en otra posición (drag & drop), y en caso de que por el espacio de anchura disponible no entren todas, éstas se almacenan en un menú seleccionable que se genera en la parte derecha superior (como podemos observar en la imagen inferior).

El bloque destinado a los filtros ya lo hemos visto anteriormente, pero cabe destacar que se ha mejorado la funcionalidad que oculta/muestra dichos filtros. Ahora todos los conjuntos de filtros permiten ocultarse para permitir mayor espacio visible para el contenido.

El bloque de contenido tiene varias mejoras. Algunas a simple vista no son evidentes, debido a que forman más parte de la funcionalidad que del propio diseño. Entre estas, cabe destacar que ahora los bloques independientes no tienen scroll vertical propio, si no que forman parte de un bloque continuo con scroll vertical en el propio navegador.

En cuanto al aspecto visual, las tablas tienen una lectura más ágil con mayor espacio entre celdas. Esto provoca que tengamos menor espacio para el contenido, por lo que algunas columnas en determinados momentos quedan fuera de la visualización, teniendo que hacer uso del scroll horizontal situado en la parte inferior de las tablas. Por ello, hemos implementado ciertas mejoras que nos ayudarán a no tener que hacer uso de dicho scroll.

La primera es la pestaña CONFIG que aparecerá en la parte superior izquierda de las tablas, mediante la cual podemos realizar una selección de las columnas que queremos que se muestren y las que queremos que permanezcan ocultas. De esta forma reducimos el espacio horizontal de la tabla, y nos permite configurar la vista de la misma para un uso concreto y personal. Esta configuración no permite que se guarde nuestra selección entre paginaciones de resultados (estamos trabajando para permitir esta funcionalidad), por lo que actualmente la forma más útil de utilizarlo es combinando este configurador con un gran número de resultados listados, cosa que podemos elegir a nuestro antojo en la caja/input superior.

La segunda mejora son los botones de desplazamiento de tabla. Estos botones solo aparecen si la tabla no cabe completamente en horizontal, y tienen iconos de flecha izquierda/derecha. Nos sirven para mover la tabla de un lado a otro y poder visualizar su contenido completo sin necesidad de utilizar el scroll horizontal inferior.

En cuanto a los detalles de cada registro, también hemos realizado variaciones en el formato de visualización de los campos, cambiando la estructura de tabla de dos columnas por un formato de módulos adaptables a la resolución del dispositivo, de forma que pueden cambiar en tamaño y en número por fila, adaptando a su vez el contenido en su interior. De esta forma permitimos el uso de esta vista de detalle en cualquier plataforma y dispositivo, cosa que anteriormente resultaba imposible dependiendo de ciertas secciones y configuraciones.

Plataforma Business Cloud de Yunbit adaptada a dispositivos móviles.

Sin duda para muchos usuarios de nuestra plataforma, lo más útil será poder utilizarla en su teléfono o tableta digital, accediendo desde cualquier lugar y dispositivo con vistas adaptadas a su resolución. Esto abre un gran abanico de posibilidades de uso que hasta ahora estaban limitadas a ordenadores de escritorio o portátiles. Una plataforma adaptable que, sumado a las mejoras en servicios y nuevas soluciones presentes y futuras que se están implementando, asegura una herramienta muy potente y versátil para cualquier tipo de negocio.

Más allá de la adaptación de los elementos en proporción al tamaño y resolución del dispositivo, a resoluciones inferiores a 1260 píxeles de anchura el menú vertical se superpone al contenedor principal. De esta forma, permitimos mayor tamaño de anchura para el contenido. En cualquier caso, si no podemos visualizar una tabla completa en un dispositivo como un móvil en posición vertical, podemos movernos en horizontal por su contenido desplazándola con el dedo de un lado a otro, o como vimos anteriormente, mediante los botones de desplazamiento de tabla.

Evolución continua

La plataforma Business Cloud de Yunbit sigue creciendo, por lo que continuaremos realizando cambios y mejoras que permitan optimizar su rendimiento y aumentar su utilidad. Si tienes cualquier problema o sugerencia sobre su funcionamiento, recuerda que puedes consultar nuestra wiki o ponerte en contacto con nosotros a través del formulario de contacto que encontrarás en la parte derecha de la página de acceso a la plataforma.