1. Introducción

La Visualización de Información es la representación gráfica de datos, reduciendo la carga cognitiva utilizada por una persona para comprender la información y reducir el tiempo de análisis de los datos. Una sola imagen puede comunicar gran cantidad de información con mayor rapidez que su equivalente en páginas de palabras, y su interpretación puede ser independiente del idioma local [1]. La visualización posibilita crear un puente entre los datos en bruto y la información que pueden comunicar para comprender mejor el tema representado. La visualización y el análisis visual son herramientas que apoyan el proceso de aprendizaje cognitivo de las personas [2].

En el año 2004 surge la facturación electrónica en México, implementándose de forma obligatoria a través del Comprobante Fiscal Digital por Internet (CFDI). Esta facturación se realiza a través del Servicio de Administración Tributaria (SAT) y debe coincidir con lo existente en las cuentas de banco y el software de contabilidad de cada empresa cada vez que se realiza una conciliación. El Código Fiscal de la Federación (CFF) establece multas y sanciones a quien incumpla lo establecido para el uso de los CFDI [3].

Como problemática, a las empresas se les dificulta conocer la información que tiene el SAT respecto a sus transacciones para conciliar con sus sistemas contables debido al gran volumen de facturas. Para el procesamiento de las facturas las empresas contratan este servicio de descarga y almacenamiento de estos datos acumulados de los CFDI a otras empresas que se dedican al manejo de datos, y que requieren de una visualización de información precisa, clara, y en corto tiempo. Se vuelve complicado y laborioso el filtrado de los datos debido al volumen de datos considerable que se necesita visualizar y el déficit de herramientas adecuadas para la visualización de datos resultantes de facturas electrónicas que faciliten la toma de decisiones.

Uno de los principales aportes de la Visualización de Información es la creación de una imagen mental o artefacto que favorece la toma de decisiones [1]. La presente investigación tuvo como objetivo el desarrollo de una herramienta de apoyo a la toma de decisiones dentro del ámbito de Inteligencia Empresarial. Se desarrolló un dashboard web interactivo para visualización y análisis de datos que se generan en las empresas de sus transacciones comerciales con proveedores y clientes. El diseño de la aplicación se realizó empleando el método de Diseño Centrado en el Usuario (DCU), filosofía de diseño que aporta usabilidad al sistema al involucrar al usuario final al que está dirigida la aplicación en todo el proceso de desarrollo.

Un dashboard web interactivo posibilita el acceso desde cualquier dispositivo, crea una visualización clara y automatizada de los datos, permite la personalización de la información y facilita la creación de informes desglosados de forma más rápida y eficaz. El dashboard es el principal recurso de la Inteligencia Empresarial, su idea principal es proporcionar información sobre el estado de cualquier organización de forma sencilla, una medición abstracta del rendimiento y una visualización intuitiva [4]. Con la herramienta desarrollada las empresas podrán visualizar todos los datos de sus CFDI y detectar inconsistencias en su facturación, por ejemplo: que no coincida su banco con el sistema de gestión contable y los CFDI existentes SAT. Permitiría conocer, además, a través de este análisis, cuáles son sus mayores proveedores y clientes, la tendencia de su facturación en el período analizado, entre otras cosas, lo cual es de gran utilidad en la toma de decisiones.

El presente trabajo se encuentra estructurado de la siguiente forma: en el apartado 1, se realiza una breve introducción al proyecto y el contexto en que se desarrolla; el apartado 2 se aborda el estado del arte de la visualización interactiva de datos y el DCU; en el apartado 3 se explica la metodología utilizada en este estudio; en el apartado 4 se describen los resultados obtenidos en cuanto a la aplicación desarrollada y las pruebas realizadas con expertos y usuarios; finalmente, en el apartado 5 se presentan las conclusiones y el trabajo futuro a realizar.

2. Estado del arte

El proceso de visualización interactiva de datos tiene su racionalidad en el proceso de exploración, mediante el cual los usuarios interactúan con la aplicación mediante las diferentes opciones que permitan agregar, eliminar, o cambiar atributos hasta conseguir los elementos deseados en la visualización explorada [5, 6].

En el proceso de revisión de la literatura no se encontraron estudios específicos sobre visualización interactiva de datos de CFDI, pero se pudo observar que se realizaron visualizaciones interactivas en forma de dashboard web con datos de múltiples campos como la medicina [7], transporte [8], educación [9], datos de incendios [10], electricidad [6], economía [11], industria [12], inteligencia empresarial [13], entre otros.

Oggier et al. [14] diseñan BiVA, una herramienta web interactiva para la visualización y análisis de una red basada en Bitcoin. La interfaz de usuario de BiVA inicia con una visualización básica que brinda información sobre los nodos de interés, permite la exploración de datos y la visualización de subgráficos alrededor de los nodos de interés e integra algoritmos estándar y nuevos. Para desarrollar el front-end de esta aplicación se utilizó Python, la base de datos de back-end se consulta con el lenguaje Cypher utilizando ipythoncypher, y el resultado devuelto se pasa como una variable de Python para su posterior procesamiento. La arquitectura modular empleada permite separar el almacenamiento de datos en Neo4j, el procesamiento de datos usando Python y NetworkX, y la interacción con el usuario y exposición de los resultados.

Clement et al. [15] crean Covid-19 Dashboard, una aplicación web interactiva para el análisis de datos de enfermos de Covid-19 que permitía mostrar las tendencias del momento, así como realizar análisis y proyecciones para las próximas semanas. Esta dashboard web fue creado con el framework Dash de la biblioteca Plotly de Python. El análisis de los datos se realizó mediante la biblioteca Pandas de Python. En el estudio resaltan que el dashboard es liviano y posee un rendimiento óptimo, puede cargarse en cualquier servidor web y actualizar sus valores dinámicamente.

El DCU como enfoque multidisciplinario se encuentra presente en numerosos trabajos donde lograr una buena experiencia de usuario mediante la usabilidad del sistema es un aspecto imprescindible para el éxito de la aplicación. Tlapa García et al.[16] aplican este método en el diseño de una aplicación interactiva para el aprendizaje con evaluaciones en el área de las matemáticas. En dicho estudio se aplicaron las diferentes técnicas de esta metodología y se obtuvo una aplicación con resultados favorables de usabilidad en una evaluación mediante heurísticas.

3. Materiales y métodos

La metodología empleada fue el Diseño Centrado en el Usuario (DCU). El DCU o Diseño Centrado en el Humano como se le denomina por la ISO 9241-210: 2010 [17], es un enfoque para el desarrollo de sistemas interactivos, los cuales deben de cumplir como objetivo hacer los sistemas utilizables y útiles al centrarse en los usuarios, sus necesidades o requerimientos, con la ayuda de la aplicación de factores humanos o de ergonomía y conocimientos técnicos de usabilidad. Es una filosofía de diseño en la que se involucra al usuario final en el proceso de desarrollo del sistema, garantizando un resultado satisfactorio para el usuario. Este método consta de cuatro etapas fundamentales para su aplicación como se muestra en la Figura 1. El proceso se comienza por comprender y especificar el contexto de uso, luego la especificación de los requisitos del usuario y de la organización, posteriormente producir soluciones de diseño y por último la evaluación del diseño frente a los requisitos [18, 19].

Figura 1.
Método de Diseño Centrado en el Usuario [19].

3.1. Contexto de uso

En esta etapa se investigó el contexto en que se utilizará el sistema y se investigó la existencia de sistemas similares. Para comprender este contexto se realizaron entrevistas que permitieron conocer el contexto donde se utilizará la aplicación a desarrollar. Se trabajó como usuario final con una empresa mexicana que construye modelos inteligentes de desempeño, ejecución y operación de los negocios, utilizando tecnología de vanguardia y las mejores prácticas globales, por cuestiones de confidencialidad le llamaremos empresa TIC.

3.2. Definición de los requisitos

Identificar los requisitos del usuario es una parte fundamental de todo diseño. Para el diseño centrado en el usuario se hace más amplio este aspecto, buscando un desarrollo que favorezca en mayor medida el contexto de uso estudiado anteriormente. Se deben incluir además los requisitos que surgen del conocimiento de los estándares y normas establecidas de desarrollo (por ejemplo, la ISO 9241-20). Además, es necesario garantizar la calidad de las especificaciones de los requisitos del usuario, de forma tal que permitan hacer pruebas posteriores, verificar con las partes interesadas, y se puedan ir actualizando a medida que avance el proyecto. Los requisitos del usuario son fundamentales para el diseño y la evaluación de sistemas interactivos para satisfacer las necesidades del usuario. Para ello se utilizan varios artefactos que apoyan al diseñador a obtener una mejor comprensión del sistema a desarrollar y los requisitos necesarios que debe cumplir el sistema [20].

En esta etapa de análisis se utilizaron los artefactos de análisis PACT (Personas, Actividades, Contexto y Tecnología), User-Personas, Mapa de Empatía, StoryBoards, y Mapa de Recorrido. Estos apoyan en la definición de requisitos y permiten el conocimiento sobre el usuario final en cuanto a su pensamiento, sentimientos, objetivos, frustraciones, personalidad, motivación y visión del sistema desarrollar.

3.3. Diseño

En la fase de diseño se utiliza la lluvia de ideas, conceptos y metáforas de diseño para desarrollar el flujo de pantalla y el modelo de navegación. En el proceso de las soluciones de diseño a utilizar se tomaron en consideración todos los requisitos identificados anteriormente. En esta etapa se diseñaron las tareas del usuario, las interacciones que tendrá este usuario con el sistema, así como las interfaces que permitirán cumplir con todos los requisitos planteados. Según la norma ISO 9241-110 se deben tener en cuenta los principios de: idoneidad para la tarea, autodescripción, conformidad con las expectativas del usuario, idoneidad para el aprendizaje, controlabilidad, tolerancia a errores e idoneidad para la individualización [21]. Los artefactos que se realizaron en esta etapa fueron los Diagramas de Flujo, Bocetos, Wireframes y Mockups hasta llegar al Prototipo Navegable.

3.4. Evaluación

El método DCU establece que la evaluación a pesar de existir en cada etapa se pone como una etapa independiente para su mejor explicación. Se realizó un análisis en cada etapa directamente con el usuario final evaluando el cumplimiento de las necesidades de este. Esto permitió recopilar nueva información y proporcionar retroalimentación sobre la propuesta de diseño, permitiendo realizar mejoras, así como evaluar el cumplimiento de los requisitos del usuario. La usabilidad es una de las características más importantes en el diseño y desarrollo de un software, ya que determinará la capacidad y efectividad del software para sus usuarios. La evaluación final se realizó posterior a la implementación. El objetivo de esta etapa fue evaluar la usabilidad de la aplicación web interactiva desarrollada.

Según Jackob Nielsen en la recomendación del número de usuarios ideal para realizar pruebas de usabilidad es de 3 a 5 usuarios mientras los usuarios realicen tareas similares con la aplicación analizada. Esta es la cantidad de usuarios que ofrece la mejor relación costo-beneficio y que puede encontrar hasta el 80 % de los errores en el diseño de la aplicación. En próximos estudios se pueden utilizar usuarios en grupos del mismo tamaño luego de un rediseño para solucionar los problemas restantes [22].

3.4.1. Evaluación con expertos

Las evaluaciones con expertos implican una revisión de un producto o sistema, generalmente por un especialista en usabilidad o un especialista en factores humanos. Así mismo, Jakob Nielsen menciona que la evaluación heurística, es un método de ingeniería de usabilidad para encontrar los problemas de usabilidad en el diseño de una interfaz de usuario para que puedan ser atendidos. En esta evaluación se utilizaron las 10 heurísticas establecidas por Nielsen [23]. Las pruebas se realizaron con tres expertos egresados como maestros en Sistemas Interactivos Centrados en el Usuario de la Universidad Veracruzana en México. Estos expertos cuentan con experiencia en temas de Interacción Humano Computadora (HCI), Experiencia de Usuario (UX) y han participado anteriormente en la aplicación de evaluaciones mediante el análisis de las heurísticas de Nielsen.

3.4.2. Evaluación con usuarios

En el caso de las pruebas con usuarios se aplicó la Escala de Usabilidad del Sistema (SUS), el cuestionario más conocido utilizado en la investigación de usabilidad, existente desde la década de los ochenta [24]. Su utilidad fue demostrada por Lewis [25], quien lo caracterizó como rápido y nada sucio para obtener la percepción de usabilidad de un sistema. En nuestra prueba participaron cinco usuarios del grupo de usuarios finales identificados en el DCU y que no participaron directamente en el proceso de desarrollo de la aplicación. Estos usuarios son expertos en el trabajo con CFDI con más de 5 años de experiencia en su uso, casualmente también expertos en experiencia de usuario, lo que favorece la calidad de la evaluación.

3.5. Implementación

El desarrollo del dashboard web interactivo se realizó en Python debido a que ofrece múltiples paquetes dedicados a ciencia de datos y su curva de aprendizaje es menor que otros lenguajes como JavaScript, garantizando la implementación en menor tiempo. Python proporciona numerosos métodos y bibliotecas para la manipulación y visualización de datos como Pandas, Seaborn, Bokeh y Ploty. Pandas proporciona herramientas de alto rendimiento de manipulación y análisis de datos. Seaborn se utiliza para crear gráficos de estadísticas visualmente atractivas que incluyen color. Bokeh y Plotly se emplean para visualizaciones interactivas basadas en la web [26].

Para realizar la implementación del dashboard se utilizó el modelo propuesto por [15] mostrado en la Figura 2 en la que se trabaja con el framework Dash de Plotly como eje principal para la implementación.

Figura 2.
Implementación propuesta en Dash [15].

Importación, preparación y manipulación de datos

Pandas es una biblioteca para el análisis de datos en Python, la cual se usa de forma común para procesar datos tabulares. Los datos que se tienen para el uso de esta aplicación se encuentran en formato (.csv) por tanto es muy factible procesarlos con esta librería [27].

Mapeo de datos

Plotly es una biblioteca de gráficos de Python que permite la creación de gráficos muy interactivos y dinámicos que pueden ser representados mediante Dash. Actualmente Plotly es la biblioteca más sencilla y útil de Python para crear aplicaciones web altamente interactivas [26]. En este caso se trabajó además con las bibliotecas Pyvis y Vis.js, estudiadas por [28] como opciones favorables para la visualización de gráficos.

Representación de datos

Dash es un framework de Python que permite a través de funciones y variables de Plotly, la creación de aplicaciones web analíticas. Fue construido sobre la base de Flask, Plotly.js y React.js, y se encarga de abstraer los protocolos y tecnologías necesarias para construir aplicaciones web, en estructuras de Python mucho más fáciles de implementar [29]. Algunas de las ventajas de Dash son:

• Ligero: Requieren de muy poco esfuerzo para iniciarlas y se desarrollan en código Python puro, la complejidad la lleva hasta donde desee el propio desarrollador.

• Control directo: Dash proporciona una interfaz sencilla para vincular controles de interfaz de usuario, como controles deslizantes, desplegables y gráficos, con el código de análisis de datos de Python.

• Completamente personalizable: Cada elemento estético es personalizable a través de CSS.

• Despliegue sencillo: Las aplicaciones se despliegan en el servidor y se comparten a través de URL, y se renderizan en el navegador.

• Multiplataforma: Es multiplataforma por lo que está preparada para el uso en móviles sin afectar la visualización de los gráficos.

Este framework posee dos partes principales (layout y callbacks). El layout es un árbol jerárquico de componentes y define la estructura de la aplicación web, es decir, los elementos que observa el usuario al utilizar el sistema, por ejemplo, los títulos, imágenes, textos, botones, gráficas, links, entre otros. Su estructura consta de dos componentes principales para formar la estructura de la aplicación: los Dash HTML Components (html) y Dash Core Components (dcc). Los Dash HTML Components permiten definir estructuras de HTML mediante estructuras de Python, por ejemplo, divisiones dentro de la aplicación, botones y cuadros de texto. Mientras que los Dash Core Components, permiten a través de sus estructuras, generar aplicaciones web interactivas, por ejemplo, a través de contenedores gráficos para renderizar figuras de Plotly, listas de verificación o pestañas para la selección de datos. Por su parte los callbacks son llamados que se realizan a funciones cuando un elemento definido cambia de valor, se activan cuando exista un cambio definido en uno de estos elementos y como resultado se obtiene una salida que cambia algún elemento de la aplicación [30].

4. Resultados

4.1. Contexto de uso

El sistema desarrollado será utilizado tanto por los clientes en el control de sus CFDI como por esta empresa proveedora en un análisis de Inteligencia Empresarial a través de los datos de sus clientes de forma tal que permita aumentar su cartera de clientes. Además, necesitan una visualización descriptiva de los datos de sus clientes para conciliar las facturas que posee cada empresa con respecto al SAT, incluso su propia empresa.

4.2. Definición de los requisitos

Uno de los artefactos utilizados en DCU es el PACT, este analiza las personas que van a utilizar el sistema, las actividades a realizar, el contexto en que realizan estas actividades, y por último la tecnología posible a emplear en el diseño. A continuación, se muestra el resultado de este análisis.

Personas

El sistema propuesto está dirigido a personas que trabajan con datos de CFDI, en áreas como economía, contabilidad, comercial, entre otras. Son personas que varían en edad de acuerdo con sus años de experiencia laboral y puede ir desde 18 años (en el caso de un técnico en contabilidad o economía) hasta personas de la tercera edad aún activos laboralmente. Son trabajadores de empresas mexicanas, donde se utiliza actualmente el CFDI versión 4.0, y ya tienen anteriormente sus datos de CFDI procesados y almacenados por la empresa proveedora de servicios. Para el desarrollo de la herramienta se identificaron 2 grupos de personas:

Actividades

Las actividades que permita realizar el sistema serán las mismas tanto para los trabajadores de la empresa TIC como para sus clientes. Son necesarias las siguientes actividades:

1. 1. Ingresar a la web del sistema.
2. 2. Iniciar sesión.

   • Correo

   • Contraseña

3. 3. Cargar archivo con datos almacenados con las columnas requeridas.

   • Fecha de factura

   • Proveedores

   • Clientes

   • Método de pago

   • Moneda

   • Tipo de cambio

   • Total

   • Estatus

   • Saldo insoluto

   • Estatus pago

   • Deducible

4. 4. Visualizar el dashboard.
5. 5. Interactuar con filtros deseados.
6. 6. Visualizar dashboard interactivo posterior al filtrado.
7. 7. Cerrar sesión.

La aplicación deberá permitir la visualización de la siguiente información de cada empresa analizada:

• Ingresos

  • ¿Cuánto factura en un período analizado?

  • ¿Cuántos clientes tiene?

  • ¿Cuáles son sus mayores clientes?

  • ¿Cómo es la distribución de sus ventas por cliente?

  • ¿Cuánto paga el mejor cliente en el período analizado?

  • ¿Cuántos clientes recurrentes tengo?

  • ¿Cuál es la tendencia de mi cartera de clientes?

  • ¿Cómo pagan mis clientes?

  • ¿Cuál es la tendencia de mis cuentas por cobrar?

  • ¿En qué período facturo más algún producto o servicio?

  • ¿Cuáles son los clientes de sus clientes?

• Egresos

  • ¿Cuánto gasta en un período analizado?

  • ¿Cuántos proveedores tiene?

  • ¿Cuáles son sus mayores proveedores?

  • ¿Cómo es la distribución de sus gastos por proveedor?

  • ¿Cuánto cobra el mayor proveedor en el período analizado?

  • ¿Cuántos proveedores recurrentes tengo?

  • ¿Cuál es la tendencia de los productos o servicios que contrato?

  • ¿Cómo pago a mis proveedores?

  • ¿Cuál es la tendencia de mis cuentas por pagar?

  • ¿En qué período pago más algún producto o servicio?

  • ¿Cuáles son los proveedores de sus proveedores?

Contexto

En el análisis del contexto, se necesita analizar el contexto físico, el contexto social y el organizacional.

• Contexto físico: El sistema será web para que esté disponible para los usuarios en cualquier momento por medio de la web. De esta manera se pretenda que no exista un límite de distancia y que sea útil por medio de internet.

• Contexto social: Los trabajadores de las empresas en las distintas áreas en que laboran necesitan constantemente visualizar y analizar los datos que generan sus CFDI. El desarrollo de esta aplicación web podría agilizar su trabajo y aportar así a la calidad de vida de estos trabajadores.

• Contexto organizacional: El sistema posibilitará una visualización clara y automatizada de los datos, la personalización de la información y facilitará la creación de informes desglosados de forma más rápida y eficaz.

Tecnología

El proyecto será un dashboard web interactivo que permita visualizar la información requerida anteriormente para su posterior análisis. Se deberá contar previamente con los datos almacenados en archivos csv, los cuales serán cargados a través de la aplicación. Para ello serán identificados los siguientes puntos:

• Entrada: El usuario hará uso de un ratón o una entrada táctil para la interacción con el sistema, o en el caso de usar una laptop utilizaría un mousepad, este dispositivo permitirá al usuario desplazarse y seleccionar las opciones de interacción y filtrado que el sistema pueda tener.

• Salida: El proyecto será un dashboard web interactivo, el cual es un factor importante para considerar, ya que el usuario puede utilizar laptop o computadora de escritorio de diferentes resoluciones, por tanto, el sistema se desarrollará con tecnología responsiva para que logre hacer uso del sistema sin importar donde este sea utilizado. La salida será en una pantalla que permita visualizar todo el dashboard de forma exploratoria e interactuar con este.

• Comunicación: El objetivo de que sea un sistema web es que se espera que toda información pueda ser consultada por medio de esta plataforma haciendo uso de la web.

• Contenido: El dashboard web se desarrollará de tomando en cuenta las técnicas de visualización interactiva de datos existentes. La navegación se realizará de la forma más sencilla posible, con pocas pantallas. Tomando en cuenta la complejidad de los datos y la aplicación especifica del producto se mostrará la información de manera sencilla con el objetivo de que el usuario logre identificar bien cada opción.

4.3. Diseño

Una vez teniendo más claro el concepto del sistema a desarrollar, se crearon los bocetos de la interfaz gráfica con la finalidad de aterrizar las ideas y tener una guía visual que pueda contribuir al entendimiento durante la codificación. Estos bocetos se realizaron a lápiz en hojas de papel, de forma que se plasmen las ideas de la forma más simple. En la Figura 3 se muestran los bocetos realizados con los requisitos del usuario y el sistema a desarrollar. El sistema será una aplicación web interactiva con gráficos de barras, líneas, burbujas, redes, y tablas dinámicas.

Figura 3.
Bocetos de la aplicación.

El sistema será un dashboard web interactivo con múltiples páginas lo que evitará la aglomeración de gráficos en una misma pantalla, favoreciendo la accesibilidad visual a la información de cada gráfico empleado. En la Figura 3 (a) se muestran elementos comunes para toda la aplicación como son: nombre de la aplicación, barra de navegación, opción de carga de datos, selector por rango de fechas, selector de empresa a analizar y la vista de página requerida por el usuario. Estos elementos se mantendrán en todo momento de forma que se pueda acceder a ellos desde cualquier página. Además, se muestra la página Inicio que será la predeterminada al iniciar sesión en el sistema. En la Figura 3 (b) se mostrará el análisis gráfico de los clientes. En la Figura 3 (c) se mostrará el análisis gráfico de los proveedores. En la Figura 3 (d) se mostrará la red de clientes con posible información de un nodo a seleccionar de la red. En la Figura 3 (e) se mostrará la red de proveedores con posible información de un nodo a seleccionar de la red.

4.4. Implementación

En la Figura 4 se muestra la estructura de nuestra aplicación al implementar en el framework Dash de la biblioteca Plotly de Python. El repositorio se encuentra disponible en Github.

La visualización del dashboard web interactivo se muestra en la Figura 5 con datos de una empresa que posee alrededor de 15 mil registros de transacciones económicas en un período de 43 días. La aplicación procesa los datos y establece la fecha inicial y final de los datos, así como los clientes y proveedores involucrados pasando a la creación de la visualización interactiva. Se pude observar el panel general compuesto por la carga de datos, filtros y tabla dinámica con registros de todas las facturas. Además, podemos observar el layout de Inicio con el resumen de los datos de facturas emitidas y recibidas junto a la tabla dinámica con todos los filtros de interacción establecidos para facilitar el proceso de análisis de los datos. Cabe destacar que todos los filtros son interactivos, se puede elegir rango de fechas a procesar dentro del rango detectado, filtrar por cliente o proveedor y a su vez por el nombre específico del mismo para visualizar sus datos. En total se detectan en los datos 3539 clientes y 638 proveedores.

Figura 4.
Layout de VisCFDI.

Figura 5.
Página de Inicio de VisCFDI.

En la Figura 6 (a) se muestra el análisis gráfico de clientes de la empresa seleccionada, en este caso Empresa Base. En el gráfico de barras se observan los mayores 10 clientes a los que se les facturo en el período analizado. En el gráfico de burbujas se observan la tendencia de facturación en el período, agrupando las facturas por fecha, el tamaño de la burbuja corresponde al total facturado en el día. La tabla dinámica muestra el listado de clientes con el total facturado, saldo insoluto y la cantidad de futuras en el periodo, las columnas se pueden organizar por orden alfabético, orden ascendente o a través de filtros mediante operadores lógicos. Los tipos de gráfico empleados responden a la información específica de trabajo solicitada por el cliente. Cada gráfico muestra la información que esté por debajo del ratón de forma interactiva en una ventana emergente. Debido a que fueron realizados con la librería Plotly Express, pueden realizarse sobre estos, interacciones predeterminadas como descargar imagen de la gráfica, hacer zoom, entre otras.

Figura 6.
Análisis gráfico y red de en VisCFDI.

En la Figura 6 (b) se muestra la Red de Clientes de la empresa analizada. En el extremo izquierdo se muestra la información perteneciente al nodo que se seleccione con un clic dentro de la red. Para la prueba realizada se tomaron datos pertenecientes a varias empresas y se seleccionaron todas en el selector de panel principal. El tamaño de cada nodo corresponde al total facturado hacia ese cliente en el período. Como interacción con la red se puede hacer zoom sobre la misma o seleccionar un nodo en específico para obtener su información correspondiente.

En la Figura 7 (a) se muestra el análisis gráfico de proveedores en el período de la misma forma en que se realiza para los clientes. Las gráficas responden a la información específica de trabajo solicitada por el usuario final obtenida en los requerimientos.

Figura 7.
Análisis gráfico de proveedores y red de proveedores en VisCFDI.

En la Figura 7 (b) se muestra la red de proveedores que se obtiene en VisCFDI. La red se observa de forma circular con la empresa analizada en el centro debido a que todos los datos pertenecen a la misma empresa. Se pueden observar las relaciones entre empresas proveedores y clientes de los datos analizados. Como se señaliza en la parte izquierda de la pantalla, los proveedores se muestran en azul y los clientes en naranja. El resto de la interacción ocurre de la misma forma en que explica en la red de clientes.

4.5. Pruebas de Usabilidad

4.5.1. Resultados con expertos

El análisis heurístico fue realizado por dos hombres y una mujer como expertos, obteniéndose una representación femenina del 33,33 %. El resultado de la evaluación realizada resultó favorable como se muestra en la Figura 8.

Figura 8.
Cumplimiento de las heurísticas de Nielsen para VisCFDI.

El porcentaje de cumplimiento se calculó en función de los tres expertos evaluadores. En general se obtuvo un alto valor de cumplimiento de las 10 heurísticas de Nielsen, 8 de las cuales fueron cumplidas en general para los tres expertos. Se obtuvo un menor porcentaje de cumplimiento en las heurísticas 5 y 7 al 66,66 %. Se encontraron detalles negativos en el análisis de la heurística 5 en cuanto a prevención de errores debido a que el componente de carga de datos (dcc.Upload) perteneciente al framework Dash en el momento de seleccionar el archivo a cargar de los archivos locales muestra todos los archivos y no solamente los que están en formato (.csv) que son los utilizados por la aplicación. Un experto consideró que esta situación lleva a incumplir esta heurística y el resto no lo considera así, ya que al cargar un archivo incorrecto muestra un mensaje de error, explicando los motivos y las características de los datos permitidos incluso si es un (.csv) incorrecto. En la heurística 7 uno de los expertos consideró su incumplimiento al no existir atajos para expertos, sin embargo, otro comenta que al estar las opciones dentro del menú se pueden llegar a estas. También se señaló por parte de un experto que el ícono de ayuda debería ser más llamativo y visible.

Como comentarios positivos se obtuvo que no hay funcionalidades expuestas que puedan causar errores inesperados en la interfaz de usuario, algunos términos están asociados a personas que trabajan en contabilidad por lo cual el sistema está diseñado para usuarios específicos, la interfaz de usuario es consistente en todas las pantallas visibles, se reconoce cada una de las actividades a realizar, y por último se reconoce que existe una documentación clara y fácilmente accesible.

4.5.2 Resultados con usuarios

Las respuestas a las preguntas del SUS para cada usuario se muestran en la Tabla 1, recordando que es una escala de estilo Likert que va desde 1 para el desacuerdo con la afirmación a 5 que representa totalmente de acuerdo, existiendo connotación negativa en las preguntas pares. La puntuación SUS se calculó sumando la contribución de cada punto. Para las preguntas impares la contribución fue la posición de la escala menos 1, en el caso de las pares, la contribución resulta de 5 menos la posición en la escala. Se multiplicó la suma de los resultados por 2.5 para obtener el valor global del SUS, este puede oscilar entre 0 y 100 [31].

La aplicación VisCFDI obtuvo una puntuación SUS como promedio de 81.5 puntos, lo que le otorga un nivel de aceptación bueno como se muestra en la Figura 9.

Figura 9.
Interpretación del SUS para VisCFDI [32].

Según la curva de Sauro [33] para la interpretación del SUS (Figura 10), VisCFDI presenta una usabilidad percibida más alta que el 90 % de todos los productos evaluados con SUS y una puntuación de A, que hace probable que se recomiende el producto a un amigo.

Figura 10.
Interpretación del SUS para VisCFDI [33].

5. Conclusiones y trabajo futuro

En el presente estudio se dio solución a la problemática de visualización de información de datos de facturas electrónicas planteada. El DCU se enfocó en el usuario como objetivo principal, dando una mayor atención a las necesidades y requisitos de estos usuarios. En todo momento se trabajó en constante colaboración con los usuarios finales del proyecto, aspecto fundamental para mantener todo el proceso centrado en el usuario. La aplicación desarrollada permitió la visualización de los indicadores claves de rendimiento obtenidos en los requerimientos del usuario. Se logró una visualización clara y automatizada de los datos, la personalización de la información y facilidad para la creación de informes de forma más rápida y eficaz. Las pruebas de usabilidad realizadas demostraron la buena aceptación que obtuvo la aplicación en su primera prueba. La solución desarrollada favorece el proceso de toma de decisiones en el ámbito de Inteligencia Empresarial de los usuarios finales a los está destinada la herramienta. Las empresas podrán visualizar de forma más eficiente, eficaz y satisfactoria, los datos de sus comprobantes fiscales, y así detectar errores en la facturación, además de analizar y conciliar las facturas digitales que tiene el SAT de sus operaciones.

Se plantea como trabajo futuro el rediseño de la aplicación para resolver problemas detectados y posteriormente la realización de nuevas pruebas de usabilidad. Se plantea, además, un estudio que evalúe la eficacia y eficiencia en el proceso de toma de decisiones a través de la herramienta desarrollada.

6. Referencias

[1] Ware, C. (2013). Foundations for an Applied Science of Data Visualization. Information Visualization (Third Edition), 1-30. https://doi.org/10.1016/b978-0-12-381464-7.00001-6

[2] Piovano, L., Garrido, D., Silva, R., Galloso, I. (2014). What (Smart) Data Visualizations Can Offer to Smart City Science. Communications & Strategies, (96), 89–112. https://ssrn.com/abstract=2636382

[3] Tosca Magaña, S., Mapén Franco, F. J., Martínez Prats, G. (2021). Facturación electrónica como herramienta para aumentar la productividad de la empresa. Investigación y Negocios, 14 (23), 6-16 https://doi.org/10.38147/invneg.v14i23.124

[4] Zheng, J. G. (2017). Data visualization in business intelligence. In Global business intelligence (pp. 67-81). Routledge. https://doi.org/10.4324/9781315471136

[5] Qin, X., Luo, Y., Tang, N., Li, G. (2020). Making data visualization more efficient and effective: a survey. VLDB Journal, 29 (1), 93–117. https://doi.org/10.1007/s00778-019-00588-3

[6] Soliman, E., Fetais, N. (2017). Visualization as a mean of big data management: Using Qatar’s electricity consumption data. 9th IEEE-GCC Conference and Exhibition (GCCCE), Manama, Bahrain. https://doi.org/10.1109/IEEEGCC.2017.8447904

[7] Huber, T. C., Krishnaraj, A., Monaghan, D., Gaskin, C. M. (2018). Developing an Interactive Data Visualization Tool to Assess the Impact of Decision Support on Clinical Operations. Journal of Digital Imaging, 31 (5), 640–645. https://doi.org/10.1007/s10278-018-0065-z

[8] Ayad, H. A., Al-Kilani, L. A., Arshad, R., Al-Obadi, M. A., Hussein, H. T., Kucukvar, M. (2020). Developing an Interactive Data Visualization Platform to Present the Adaption of Electrical Vehicles in Washington, California and New York. IEEE 7th International Conference on Industrial Engineering and Applications (ICIEA), Bangkok, Thailand. https://doi.org/10.1109/ICIEA49774.2020.9101928

[9] Eken, S. (2020). An exploratory teaching program in big data analysis for undergraduate students. Journal of Ambient Intelligence and Humanized Computing, 11 (10), 4285–4304. https://doi.org/10.1007/s12652-020-02447-4

[10] Samonte, M. J., Bacer, H. J., Ramirez, R. P., Tuballa, J. J. (2019). An Interactive Data Visualization Tool for Observing History of Fire Incidents. 10th IEEE International Conference on Information and Communication Technology Convergence (ICTC), Jeju, Korea (South). https://doi.org/10.1109/ICTC46691.2019.8939895

[11] Samonte, M. J., Gabriel Bal, T., Recio, Z. N., Mark San Jose, R. (2018). Conditional Cash Transfer Data Analysis of the Philippines: An e-Government Data Visualization Tool. 9th IEEE International Conference on Information and Communication Technology Convergence (ICTC), Jeju, Korea (South). https://doi.org/10.1109/ICTC.2018.8539441

[12] Young, A., Rogers, P. (2019). A Review of Digital Transformation in Mining. Mining, Metallurgy and Exploration, 36 (4), 683–699. https://doi.org/10.1007/s42461-019-00103-w

[13] Halim, K. K., Halim, S., Felecia. (2019). Business intelligence for designing restaurant marketing strategy: A case study. Procedia Computer Science, 161, 615–622. https://doi.org/10.1016/j.procs.2019.11.164

[14] Oggier, F., Phetsouvanh, S., Datta, A. (2018). BiVA: Bitcoin network visualization and analysis. IEEE International Conference on Data Mining Workshops (ICDMW), Singapore. https://doi.org/10.1109/ICDMW.2018.00210

[15] Clement, F., Kaur, A., Sedghi, M., Krishnaswamy, D., Punithakumar, K. (2020). Interactive Data Driven Visualization for COVID-19 with Trends, Analytics and Forecasting. 24th International Conference Information Visualisation (IV), Melbourne, Australia.https://doi.org/10.1109/IV51561.2020.00101

[16] Tlapa García, L. A., Escalante Vega, J. E., Alonso Ramírez, L. (2021). Aplicación interactiva para el aprendizaje con evaluaciones en el área de las matemáticas. Revista de Investigación en Tecnologías de la Información (RITI), 9 (19), 16–31. https://doi.org/10.36825/riti.09.19.002

[17] Vidal Sánchez, D., Ibarra Esquer, J. E., Flores Rios, B. L., Lopez Morteo, G. (2012). Adopción del Estándar ISO 9241-210 : 2010 en la Construcción de Sistemas Interactivos Basados en Computadora. Congreso Internacional de Investigación e Innovación en Ingeniería de Software, Guadalajara, Jalisco.

[18] Benyon, D. (2019). Designing user experience. Pearson UK.

[19] Jokela, T., Iivari, N., Matero, J., Karukka, M. (2003). The standard of user-centered design and the standard definition of usability: Analyzing ISO 13407 against ISO 9241-11. Latin American conference on Human-computer interaction, Rio de Janeiro Brazil. https://doi.org/10.1145/944519.944525

[20] Internacional Organization for Standardization. (2022). Ergonomics of human-system interaction — Part 20: An ergonomic approach to accessibility within the ISO 9241 series.https://www.iso.org/standard/80709.html/

[21] Internacional Organization for Standardization. (2022). Ergonomics of human-system interaction — Part 110: Interaction principles.https://www.iso.org/obp/ui/#iso:std:iso:9241:-110

[22] Nielsen Norman Group. (2022). Why you only need to test with 5 users. https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

[23] Nielsen, J. (1994). Heuristic evaluation. En J. Nielsen, R. L. Mack (Eds.) Usability inspection methods (pp. 25-62). John Wiley & Sons, Inc.

[24] Laubheimer, P. (2018). Beyond the nps: Measuring perceived usability with the sus, nasa-tlx, and the single ease question after tasks and usability tests. Nielsen Norman Group.

[25] Lewis, J. R. (2018). The system usability scale: past, present, and future. International Journal of Human–Computer Interaction, 34 (7), 577–590. https://doi.org/10.1080/10447318.2018.1455307

[26] Embarak, D. O. (2018). Data Analysis and Visualization Using Python. Apress Berkeley. https://doi.org/10.1007/978-1-4842-4109-7

[27] Jolly, K. (2018). Hands-on data visualization with bokeh : interactive web plotting for python using bokeh. Packt Publishing Ltd.

[28] Perrone, G., Unpingco, J., Lu, H. (2020). Network visualizations with Pyvis and VisJS. 19th Python in Science Conference, Austin, Texas. https://doi.org/10.25080/majora-342d178e-008

[29] Sutchenkov, A. A., Tikhonov, A. I. (2020). Embedding Interactive Python Web Applications into Electronic Textbooks. 5th International Conference on Information Technologies in Engineering Education (Inforino), Moscow, Russia. https://doi.org/10.1109/Inforino48376.2020.9111663

[30] Plotly. (2022). Dash Python User Guide. https://dash.plotly.com/

[31] Fuentes Cortes, W., Reyes Jiménez, S., Sánchez González, R. (2022). Aplicación móvil para el fomento, fortalecimiento y preservación del idioma indígena Zapoteca (Diidxazá). Revista de Investigación en Tecnologías de la Información (RITI), 10 (22), 92–102. https://doi.org/10.36825/riti.10.22.007

[32] Bangor, A., Kortum, P. T., Miller, J. T. (2008). An empirical evaluation of the system usability scale. International Journal of Human-Computer Interaction, 24 (6), 574–594. https://doi.org/10.1080/10447310802205776

[33] Sauro, J. (2011). Measuring Measuring Usability with the System Usability Scale (SUS).https://measuringu.com/sus/