1. Introducción
En la actualidad digital en México, la conectividad ha adquirido un papel crucial en distintos sectores de la sociedad y las empresas. Esta ha posibilitado llevar a cabo una amplia gama de actividades, todo de manera rápida y sencilla.
Según la Encuesta Nacional sobre Disponibilidad y Uso de Tecnologías de la Información en los Hogares (ENDUTIH) realizada por el Instituto Nacional de Estadística y Geografía (INEGI) [1], el 78.6% de la población mayor de 6 años en México utiliza internet. En Puebla, se estima que el 94.4% tiene acceso desde el hogar, sin embargo, también se accede desde lugares como el trabajo (38.1%), la escuela (19.3%), sitios públicos con costo (18.4%), y sitios públicos sin costo (16.6%). Aunque una gran parte de la población en Puebla tiene acceso a internet desde el hogar, una porción significativa utiliza servicios públicos suministrados por terceros en lugares como el trabajo, la escuela u otros sitios públicos.
Los administradores de servicios de internet suelen gestionar sus redes a través de procedimientos realizados a mano (en papel o software de uso general), desde equipos de control específicos, o mediante software y sistemas propios. Esta gestión implica frecuentemente el control de usuarios, la supervisión de usuarios recurrentes, la denegación de servicios a usuarios no autorizados y, en ocasiones, la gestión de pagos por acceso a redes con mayores beneficios.
Los proveedores de servicios de internet, especialmente aquellos que comercializan sus servicios, suelen asignar a los usuarios un nombre de usuario específico y una contraseña única, conocidos como credenciales de acceso a la red (fichas hotspot), que son habitualmente utilizadas en entornos inalámbricos.
La generación de estas credenciales no es sencilla, ya que deben ser únicas para cada usuario y proporcionar la información de manera adecuada para evitar conflictos por parte de los usuarios de la red. En entornos con alta concurrencia, la generación manual de credenciales para múltiples usuarios se convierte en una tarea tediosa, repetitiva y propensa a errores humanos. La complejidad se incrementa cuando se incorpora el control de costos y la gestión de clientes o usuarios de la red, resaltando la clara necesidad de contar con un control preciso y efectivo en este proceso.
Por tanto, el presente proyecto tiene como objetivo realizar el diseño de una aplicación web que no solo simplificará la generación de fichas, sino que también permitirá:
-
Administrar los clientes que solicitan el servicio, facilitando las estadísticas y la toma de decisiones respecto al crecimiento del uso del servicio.
-
Generar los cortes de fichas, mejorando la administración del servicio proporcionado.
-
Enviar las fichas generadas a los dispositivos MikroTik, reduciendo los tiempos y la necesidad de conocimientos técnicos en el proceso.
-
Administrar las máquinas expendedoras vending, integrando dispositivos de venta autónomos para aumentar el alcance al público del servicio.
El presente artículo se centra en la fase de diseño del sistema, utilizando una metodología centrada en el usuario. Se describen los perfiles de usuario, junto con los requerimientos funcionales y no funcionales, y el diseño de la interfaz de usuario. Se hace hincapié en comprender las necesidades y expectativas de los usuarios durante este proceso de diseño.
2. Estado del arte
2.1. Metodología de diseño centrado en el usuario
El diseño centrado en el usuario (DCU) es un enfoque que coloca al usuario como el principal foco de atención durante todo el proceso de desarrollo de un sistema o producto. Esto implica una comprensión profunda de las necesidades y requisitos de los usuarios finales, así como una colaboración continua con ellos para garantizar que el producto final satisfaga sus expectativas y sea fácil de usar.
Implementar DCU puede ayudar a crear aplicaciones que ofrecen una visualización clara y automatizada de los datos, permitiendo la personalización de la información según las necesidades de los usuarios, contribuyendo a una experiencia de usuario óptima y altamente satisfactoria [2], [3].
2.2. Figma
Figma es una plataforma de diseño flexible y accesible que ofrece dos herramientas principales: Figma design y FigJam. Figma design es una herramienta colaborativa para crear, compartir y probar diseños de sitios web, aplicaciones móviles y productos digitales. Está dirigida a una amplia gama de usuarios, incluidos diseñadores, gestores de productos, redactores y desarrolladores, y les permite contribuir, aportar comentarios y tomar decisiones de forma eficaz.
Por otro lado, FigJam ofrece pizarras online en las que varios usuarios pueden colaborar en tiempo real. Se utiliza habitualmente para reuniones, sesiones de brainstorming, diagramas, planificación e investigación, y permite a los usuarios representar visualmente ideas utilizando diversos elementos como texto, formas, dibujos, imágenes y notas adhesivas [4].
2.3. Aplicación Web
Una Aplicación Web es un programa informático que funciona a través de internet y no requiere instalación directa en el disco duro del dispositivo. Opera en servidores remotos, procesando y almacenando datos, lo que posibilita el acceso desde cualquier ubicación y dispositivo con conexión a internet mediante un navegador web. A menudo utiliza datos de autenticación para garantizar la seguridad y eficiencia en el almacenamiento de información, respaldado por servidores distribuidos globalmente.
A diferencia de las páginas web estáticas, las aplicaciones web generan contenido dinámico según las interacciones del usuario, ofreciendo una experiencia interactiva. Se desarrollan utilizando lenguajes de programación como PHP, Java, Python y Ruby, los cuales son multiplataforma y compatibles con diversos gestores de bases de datos, facilitando su implementación sin limitaciones [5], [6], [7], [8], [9].
2.4. Administración de Clientes
La Administración de Clientes se refiere a las estrategias y técnicas implementadas por una empresa u organización para gestionar las relaciones e interacciones con sus clientes, tanto actuales como potenciales. Este proceso implica el uso de herramientas y políticas empresariales, como el Customer Relationship Management (CRM), para proporcionar un mejor servicio y atención al cliente en todas las áreas.
La gestión de clientes permite recopilar información relevante, como la frecuencia de compras y los hábitos de consumo, que son fundamentales para la toma de decisiones empresariales. Utilizando un software especializado en la gestión de clientes, la empresa puede optimizar sus estrategias hacia los clientes, fomentando la fidelización y el crecimiento del negocio [10], [11], [12].
2.5. Hotspot
Un hotspot (o punto de acceso), es un lugar físico donde los usuarios pueden conectar sus dispositivos, como computadoras o teléfonos inteligentes, a internet mediante una red inalámbrica local (WLAN), típicamente a través de wifi proporcionado por un router conectado a un proveedor de servicios de internet [13]. Existen tres tipos principales de hotspots según CenturyLink [14]:
-
Hotspots públicos: Ubicados en lugares como cafeterías, restaurantes, aeropuertos, bibliotecas y centros comerciales, ofrecen acceso a internet de forma gratuita o mediante tarifa para proporcionar comodidad a los usuarios en movimiento.
-
Hotspots móviles: Permiten a los usuarios convertir sus dispositivos móviles en puntos de acceso Wi-Fi utilizando la conexión de datos móviles para brindar internet a otros dispositivos.
-
Hotspots prepago: Los usuarios pueden adquirir una cantidad d
Las fichas hotspot son tarjetas (digitales o impresas), que se utilizan para comunicar a los usuarios de la red información importante, como nombre de usuario y contraseña para conectarse a la red de un proveedor de servicios, así como detalles como precio, tiempo de acceso, imágenes atractivas e incluso códigos QR.
2.6. MikroTik
MikroTik es una empresa con sede en Riga, Letonia, fundada en 1996, reconocida por su sistema operativo de red RouterOS y su plataforma de hardware RouterBOARD. RouterOS, basado en Linux, es el software encargado de administrar redes y puede ser instalado en el hardware proporcionado por MikroTik o en dispositivos específicos mediante descarga e instalación. A través de RouterOS, los usuarios pueden ejecutar comandos para diversas tareas utilizando herramientas proporcionadas por la empresa, aunque no permite el uso de controladores externos ni la creación de paquetes de software personalizados [15], [16].
2.7. Antecedentes
Los dispositivos MikroTik ofrecen una solución versátil y eficiente para la implementación de hotspots y portales cautivos en redes WLAN. Como señalan Zarate y Villero [17], “los RouterBoard de MikroTik han ganado una gran popularidad, por lo que son capaces de ofrecer todas las herramientas necesarias para llevar a cabo ya sea la implementación de un hotspot o hacer uso de otras de sus amplias funcionalidades de red”. Esta versatilidad, combinada con su excelente relación costo-beneficio, hace que los dispositivos MikroTik sean una opción ideal para desarrollar sistemas de gestión de usuarios en hotspots.
Además, la facilidad de uso y las capacidades de personalización de los dispositivos MikroTik los convierten en una plataforma ideal para el desarrollo de aplicaciones de gestión de usuarios. El artículo destaca que “gracias a su sistema operativo RouterOS brinda la fiabilidad y eficacia al momento de querer llevar todo esto acabo por lo que simplifica los procesos de creación y administración de todas sus funciones” [17]. Esta característica, junto con las robustas funciones de seguridad y control de tráfico, proporciona una base sólida para el desarrollo de un sistema de gestión de usuarios que sea eficiente, seguro y fácil de administrar.
Existen aplicaciones proporcionadas por los mismos proveedores del hardware que es necesario para administrar este tipo de redes, como lo es “Winbox”, una aplicación diseñada para administrar dispositivos “MikroTik RouterOS” [18] desarrollada y mantenida por esta misma compañía.
Esta aplicación se encuentra únicamente disponible para la plataforma Windows y se centra en la funcionalidad y la eficiencia. Es adecuada tanto para usuarios principiantes como avanzados, aunque carece de funciones administrativas avanzadas, lo que obliga a realizar ciertas tareas manualmente o con la ayuda de otros sistemas de software. Ofrece extensa documentación y una comunidad en línea activa para compartir experiencias y resolver problemas comunes. Su interfaz de usuario tiene una curva de aprendizaje suave, presentando los elementos ordenados y agrupados, facilitando la navegación por la aplicación. Sin embargo, su diseño podría modernizarse para mejorar la estética y la usabilidad en aspectos como la visualización de datos y la retroalimentación del sistema.
Algunas empresas de hardware ofrecen herramientas separadas para las funciones administrativas faltantes, pero estas pueden no ser populares o resultar complicadas para usuarios sin conocimientos técnicos, como en el caso de “MikroTik User Manager”. Esta aplicación RADIUS, distribuida como complemento en dispositivos MikroTik con RouterOS como sistema operativo, tiene una interfaz orientada a la funcionalidad en la que la disposición de los elementos puede ser complicada y desafiante por la falta de una orientación clara, dificultando la navegación en la aplicación [19].
“The Userman” es otra aplicación que simplifica las funciones del complejo “MikroTik User Manager”, ofreciendo una alternativa multiplataforma accesible incluso desde dispositivos Android. Se centra en tareas comunes para proveedores de internet, como la generación y gestión de usuarios, límites de tiempo, exportación de vouchers (fichas hotspot) y más [20]. Esta aplicación tiene un diseño fácil de usar, intuitivo y navegable, sin embargo, para algunos usuarios podría estar limitado o reducido para opciones más avanzadas.
“Mikhmon” es una aplicación web diseñada para facilitar la gestión de hotspots MikroTik sin la necesidad de un servidor RADIUS. Ofrece una configuración y administración más sencilla, disponible de forma gratuita para descarga. Su versión en línea tiene un costo asociado y está limitada a Indonesia, permite el registro de usuarios y proporciona funciones avanzadas como la generación automática de usuarios y la fijación de precios [21].
Los estudios de Hamid y Al Farizi [22] y Syaputra y Stiadi [23] destacan las múltiples ventajas de Mikhmon como una solución eficaz y accesible para la gestión de hotspots MikroTik. Esta herramienta ofrece una interfaz intuitiva que simplifica la administración de redes, haciéndola accesible incluso para usuarios sin conocimientos técnicos avanzados. Mikhmon permite generar y gestionar vouchers con diversos perfiles de usuario, establecer límites de tiempo y datos, y facilita la impresión de vouchers. Además, posibilita la implementación de planes de internet flexibles y asequibles (diarios, semanales o mensuales). Los estudios demostraron que este sistema no solo simplifica la gestión para los administradores, sino que también mejora significativamente la experiencia del usuario final, ofreciendo mejor velocidad de conexión y menor latencia en comparación con las opciones de internet móvil tradicionales.
Arta y Nugraha [24] en su investigación presentan un software de gestión de usuarios para hotspot MikroTik desarrollada en PHP utilizando la API de MikroTik y el framework Bootstrap. Su diseño se basa en una interfaz responsiva que incluye módulos para login de administrador, panel de control, gestión de usuarios activos y perfiles de usuario. La aplicación permite administrar fácilmente los usuarios y perfiles de hotspot sin necesidad de acceder directamente al router MikroTik. Esta solución busca simplificar la gestión de hotspot Mikrotik para administradores que no tienen conocimientos profundos del sistema, proporcionando una interfaz más amigable e intuitiva que la administración directa del router.
Ofrece una interfaz de usuario moderna y atractiva, con un diseño limpio y minimalista. Su UI (User Interface) se centra en la simplicidad, facilidad de uso y la claridad. En la experiencia del usuario (UX, User Experience) cuenta con retroalimentación visual y navegación fluida. Sin embargo, la falta de opciones de personalización y la limitación en algunas funciones pueden ser un obstáculo para usuarios con necesidades más avanzadas
En la Tabla 1 a continuación, se presenta una comparación entre las principales características de las aplicaciones mencionadas anteriormente y la aplicación diseñada en la presente investigación el cual lleva por nombre “Hotspot Manager”.
Tabla 1.
Comparación de sistemas administradores y el sistema diseñado en el presente artículo (Hotspot Manager).
Elaboración propia.
De esta forma, se busca abordar el problema mediante la creación de una aplicación web personalizada que pueda automatizar el proceso de generación y administración de credenciales de acceso hotspot.
3. Materiales y métodos
3.1. Proceso general de generación de fichas hotspot
El proceso común que se realiza al generar y distribuir las fichas hotspot incluye una serie de etapas que son necesarias para que el proceso se efectúe de forma clara y ordenada, tal como se muestra en la Figura 1. Es necesario conocer este procedimiento para entender el contexto de uso de la aplicación, así como las funciones que debe cumplir y el tipo de usuarios al que va dirigido.
Figura 1.
Pasos en el proceso general de generación de fichas hotspot.
En la primera etapa, administrar clientes, se debe recopilar y almacenar información detallada de cada cliente o usuario de las fichas hotspot, incluyendo datos de contacto y preferencias de servicio. La administración también incluye mantener un registro de las fichas asignadas a cada cliente, indicando la duración y el estado actual, así como monitorear la expiración de las fichas y realizar cortes o renovaciones según el periodo establecido.
Para la segunda etapa, generar fichas, con los datos de los clientes, se deben crear los usuarios y contraseñas para las fichas hotspot con información única para cada uno, ya sea de forma manual o utilizando alguna herramienta. Los patrones empleados suelen variar y no hay un estándar que garantice la seguridad de estos. Las fichas generadas se deben transferir al dispositivo de red, como los routers MikroTik, y si se requiere, distribuirlas a los puntos de venta o lugares autorizados para su venta al usuario final.
Finalmente, en la tercera etapa, el usuario final, los clientes individuales compran físicamente las fichas hotspot en ciertos puntos de venta autorizados. De esta forma, el usuario puede introducir la información de la ficha adquirida para acceder a la red en el portal hotspot correspondiente para que este verifique la información y establezca la conexión a internet del cliente.
3.2. Diseño centrado en el usuario
La metodología de diseño centrado en el usuario (DCU), también conocida como User-Centered Design (UCD), es fundamental en el desarrollo de productos y servicios, especialmente en el contexto de aplicaciones y sitios web.
Se enfoca en realizar una investigación y hacer partícipes a los usuarios finales, permitiendo que sus necesidades guíen el proceso de desarrollo. A diferencia del design thinking, que se enfoca en diseñar pensando en la funcionalidad del producto adaptado al usuario, el DCU involucra al usuario en todas las etapas, desde el entendimiento del contexto hasta la evaluación de los resultados [25],[26].
El objetivo principal de diseñar utilizando esta metodología es que el producto final satisfaga las necesidades y expectativas de los usuarios. Para esto, debe comprender al usuario y su contexto para identificar quiénes serán los usuarios del producto, qué necesidad suplirá y bajo qué circunstancias se utilizará. Algunas técnicas que se suelen emplear durante las fases del DCU son [27]:
-
Encuestas o cuestionarios: Se puede obtener información estadística mediante preguntas abiertas o cerradas acerca de la opinión de los usuarios con respecto al diseño del producto.
-
Test de usuarios: Permite observar cómo los usuarios llevan a cabo tareas encomendadas y detectar así problemas de usabilidad.
-
Evaluación heurística: No requiere la participación de usuarios, ya que utiliza una inspección de diseño realizada por expertos en usabilidad, buscando problemas y verificando el cumplimiento de los principios de diseño establecidos.
-
Card sorting: Se usa para comprender la estructura semántica del conocimiento que los usuarios tienen sobre un dominio en concreto. Para esto, se solicita a un grupo de participantes agrupar fichas o tarjetas con conceptos del proceso similares, identificando las relaciones entre ellos, orden y sugerencias.
-
Eye-tracking: Consiste en analizar la exploración visual de los usuarios en una interfaz, registrado sus áreas de atención y el orden en que lo hacen.
-
Etnografía: Busca estudiar y describir la conducta, comportamiento y creencias de los usuarios en un contexto específico. Utiliza métodos cualitativos para comprender el comportamiento social de los usuarios y así obtener información para el diseño.
El diseño centrado en el usuario se desarrolla en cuatro fases fundamentales que son el análisis del contexto, la definición de los requisitos, el diseño y la evaluación, como puede observarse en la Figura 2. Estas fases tienen una naturaleza cíclica y adaptativa que permite la retroalimentación entre sí para mejorar continuamente el producto final y garantizar una experiencia óptima [25].
Figura 2.
Fases del proceso de la metodología de diseño centrado en el usuario (DCU) [25].
Durante el diseño para la aplicación web administradora de fichas hotspot, se ejecutó cada una de las fases de forma iterativa hasta lograr un diseño con todas las características requeridas por el sistema, pero a la vez, que sea fácil de usar y con una interfaz moderna y visualmente atractiva para los usuarios.
3.2.1. Análisis del contexto
En esta etapa, se llevó a cabo una investigación para determinar la existencia de aplicaciones con una funcionalidad similar. Se buscó comprender el entorno y las necesidades de los usuarios utilizando entrevistas con posibles usuarios finales de los que se buscó obtener los perfiles de usuario para determinar sus necesidades. A partir del análisis de estos datos y de la retroalimentación, se obtuvieron los perfiles de usuario que se pueden observar en la Tabla 2, Tabla 3 y Tabla 4.
Tabla 2.
Características del perfil de usuario para un Administrador del Sistema.
Elaboración propia.
Tabla 3.
Características del perfil de usuario para un Empleado del negocio.
Elaboración propia.
Tabla 4.
Características del perfil de usuario para un Usuario Intermedio.
Elaboración propia.
Estos perfiles fueron fundamentales para determinar en qué contexto será utilizada la aplicación y la experiencia técnica de los usuarios que la pueden llegar a utilizar. Así como sus expectativas y sugerencias para integrarlas de la mejor manera posible y ofrecer un diseño con una mayor calidad.
3.2.2. Definición de los Requisitos
Con base en los perfiles de usuario obtenidos en la fase anterior, se realizó un análisis para establecer los objetivos de la aplicación basados en las necesidades identificadas. En la Tabla 5 se presentan los requerimientos funcionales y no funcionales, producto del análisis de los datos de los posibles usuarios finales.
Tabla 5.
Requerimientos funcionales y no funcionales de la aplicación web.
Elaboración propia.
3.2.3. Diseño
Para la fase de construcción del diseño, se empleó el software Figma en su versión gratuita, ya que la plataforma facilita la creación wireframes (diseños alámbricos que simulan el flujo y distribución de los elementos en la interfaz), mockups (diseños avanzados con colores, tipografías e imágenes) y prototipos interactivos que permitieron visualizar y validar el diseño antes de la implementación.
Con base en las fases anteriores, se construyeron bocetos sencillos de las principales vistas de la aplicación conocidos como wireframes, mismos que también fueron puestos a evaluación por posibles usuarios para obtener así sus opiniones y sugerencias de modo que en una fase de diseño más avanzada se tuviera una noción más clara de lo que se busca en la aplicación.
Estos diseños se presentan a continuación en la Figura 3. La pantalla de inicio de sesión Figura 3 (a) permite a los usuarios ingresar su usuario y contraseña registrados. Una vez autenticados, acceden a la pantalla de lista de clientes Figura 3 (b), donde pueden ver los clientes registrados. La pantalla de registro de nuevos clientes Figura 3 (c) facilita la adición de nuevos clientes mediante un formulario. Por último, la pantalla de generación de fichas Figura 3 (d) permite a los usuarios elegir la cantidad de fichas de cada perfil para utilizar las herramientas del sistema.
Figura 3.
Wireframes de las vistas principales de la aplicación web.
En la fase de diseño más avanzada, se procedió a crear los mockups de la aplicación, agregando también interactividad para que el usuario tenga una noción más clara del sistema real. Estas vistas fueron también evaluadas y verificadas hasta obtener los resultados deseados por los usuarios del sistema.
Se decidió crear también un logotipo con los elementos principales de la aplicación para generar una identidad a la aplicación web y mejorar la aceptación por parte del usuario. En el centro de un círculo que abarca un degradado de tonos azules, con un borde distintivo de color negro, se encuentra el icónico símbolo del wifi. Este símbolo, en un tono azul claro, se encuentra combinado con un icono en color blanco que representa la parte superior de un engranaje, indicando la capacidad administrativa del sistema. Justo debajo, en el mismo tono de azul, se encuentra la palabra “HOTSPOT”, y finalmente, en letras blancas, la palabra “MANAGER” completa el diseño, indicando claramente la capacidad del sistema para gestionar puntos de acceso hotspot de wifi. Este diseño captura de manera efectiva la esencia y la funcionalidad del software, ofreciendo una identidad visual distintiva y memorable. Este logotipo se presenta en la Figura 4.
Figura 4.
Representación gráfica del logotipo diseñado para la aplicación web.
3.2.4. Evaluación
Con la participación de los posibles usuarios de forma iterativa durante el proceso de construcción del diseño de la aplicación, se realizaron constantes evaluaciones para determinar que la interfaz diseñada cuenta con las características deseadas de usabilidad y a la vez, con las funcionalidades requeridas. A continuación, se presenta una lista de las preguntas empleadas para validar los diseños con los usuarios, las cuales fueron presentadas con una escala de respuesta del 1 al 5 (donde 1 es en desacuerdo y 5 de acuerdo) y divididas en tres secciones para evaluar diferentes aspectos de la aplicación:
Distribución y apariencia
- 1.
¿Qué opinas del diseño visual de la aplicación en general?
- 2.
¿Te resulta agradable la disposición de los elementos en las vistas de la aplicación?
- 3.
¿Estás de acuerdo con la paleta de colores utilizada en la aplicación?
- 4.
¿Estás de acuerdo en que los elementos visuales (iconos, botones, etc.) son coherentes y consistentes en toda la aplicación?
- 5.
¿La tipografía utilizada en la aplicación es fácil de leer?
- 6.
¿Estás de acuerdo en que los textos y etiquetas están bien organizados y son claros en todas las vistas de la aplicación?
- 7.
¿Qué opinas del diseño del logotipo?
Funciones de la aplicación
- 1.
¿Consideras que la generación de credenciales hotspot es fácil de entender?
- 2.
¿Estás de acuerdo en que los pasos para generar credenciales hotspot son lógicos y claros?
- 3.
¿Cómo evaluarías la disposición de los elementos en la pantalla de generación de credenciales hotspot?
- 4.
¿La navegación del diseño te da una idea clara de cómo sería la integración con routers Mikrotik?
- 5.
¿Encuentras que la información proporcionada en las pantallas relacionadas con la integración es suficiente para entender el proceso?
- 6.
¿Es fácil comprender cómo se gestionan los clientes?
- 7.
¿Encuentras que las opciones para gestionar los cortes de fichas son claras?
Experiencia de usuario
- 1.
¿Crees que la aplicación cumple con tus expectativas en términos de usabilidad?
- 2.
¿Te resulta fácil encontrar la información que necesitas en la aplicación?
- 3.
¿Cómo calificarías tu nivel de satisfacción al utilizar la aplicación?
- 4.
¿Encuentras que la navegación entre las diferentes secciones de la aplicación es intuitiva?
- 5.
¿Te resulta fácil volver atrás o encontrar el camino de regreso en la aplicación?
- 6.
¿Consideras que la estructura de menús y enlaces facilita la exploración de la aplicación?
- 7.
¿Hay algún aspecto de la navegación que te resulte confuso o difícil de entender?, ¿cuál?
4. Resultados
Como resultado del uso de la metodología de diseño centrada en el usuario, se obtiene una serie de interfaces de alta fidelidad maquetadas con el software de diseño Figma. Estas interfaces representan el diseño y características que debe tener el software cuando sea construido mediante algún lenguaje de programación. En la Figura 5 (a) se muestra la primera interfaz mostrada al usuario, y que consiste en un inicio de sesión para la aplicación. Es esta pantalla, el usuario debe ingresar su correo y contraseña registrados previamente en el sistema. Después de que el usuario inicie sesión, se le muestra la siguiente pantalla de inicio mostrada en la Figura 5 (b), con información relevante que le interesa al usuario y que puede ser usada para conocer el estatus actual del sistema.
Figura 5.
(a) Diseño de la pantalla de inicio de sesión; (b) Diseño de la pantalla principal después de iniciar sesión.
La interfaz de usuario incluye un menú lateral izquierdo para mostrar al usuario las opciones y herramientas disponibles, y dentro de estas opciones, se incluye una específicamente para gestionar los clientes registrados en el sistema. En la Figura 6 (a) puede observarse la pantalla que permite listar los clientes registrados según los filtros aplicados y así efectuar operaciones de edición y de generación de fichas. En la Figura 6 (b) puede observarse la pantalla que tiene la capacidad de registrar los datos de un nuevo cliente que son necesarios para el sistema, así como sus datos de contacto y una imagen representativa del usuario.
Figura 6.
Pantallas para la gestión de clientes: (a) Listado y filtrado de clientes registrados; (b) Registro de nuevos clientes.
Cuando el usuario elige generar fichas para cualquiera de los clientes, se muestra una interfaz como en la Figura 7 (a) que le permite ingresar la cantidad de fichas por cada perfil de fichas definido previamente en el sistema. Además, permite ingresar una promoción que aparecerá en las fichas y comentarios adicionales. Una vez que estas fichas se hayan generado, se agrupan y muestran en la pantalla de la Figura 7 (b) en lotes con las características definidas por el usuario, permitiéndole generar un archivo en formato PDF con estas fichas o enviarlas al dispositivo MikroTik asignado al cliente para que puedan ser usadas al comprarlas.
Figura 7.
Pantallas para la generación de fichas: (a) Generación de nuevas fichas hotspot a partir de las cantidades ingresadas en los perfiles; (b) Visualización de los datos del lote y las fichas generadas.
Después de que el usuario crea el lote de fichas hotspot que desea para un cliente, puede enviarlas al dispositivo MikroTik registrado y asignado previamente al cliente para de esta manera, cuando la ficha sea comprada y utilizada pueda ser funcional y permita la conexión a la red. Esto se realiza desde la pantalla de la Figura 8 (a), que le da posibilidad de enviarlas directamente o generar los comandos de RouterOS que son necesarios. En la pantalla de la Figura 8 (b), el usuario puede crear nuevos cortes de ficha para tener un registro sobre el número de fichas por perfil que han sido vendidas, sobrantes y aquellas que han tenido problemas técnicos al momento de intentar utilizarse.
Figura 8.
Pantallas adicionales: (a) Creación de comandos MikroTik para RouterOS o envío directo desde la aplicación; (b) Generación de un nuevo corte de fichas para un cliente.
Adicionalmente a las herramientas de la aplicación, el usuario puede modificar sus datos a través de la pantalla de la Figura 9 (a), teniendo la capacidad de modificar incluso su contraseña y su imagen de perfil. También puede obtener una experiencia más personalizada al modificar los ajustes de la aplicación a través de la pantalla de la Figura 9 (b).
Figura 9.
Pantallas de configuración: (a) Modificación de datos del usuario y foto de perfil; (b) Edición de configuraciones generales de la aplicación.
Al realizar la evaluación final de las interfaces diseñadas, se obtienen los resultados mostrados en la Tabla 6 en un grupo de cinco usuarios que representan su opinión con respecto a la aplicación.
Tabla 6.
Respuestas de los usuarios a las evaluaciones del diseño de la aplicación web.
Elaboración propia.
En la Gráfica 1, se muestran los resultados obtenidos en la sección de la encuesta referente a la distribución y apariencia de la aplicación cuyo objetivo es evaluar la percepción del usuario sobre el diseño visual general de la aplicación, incluyendo la disposición de los elementos, la paleta de colores, la coherencia y consistencia de los elementos visuales, la legibilidad de la tipografía y la organización y claridad de los textos y etiquetas en todas las vistas. Además, busca obtener una opinión sobre el diseño del logotipo.
Gráfica 1.
Resultados de la encuesta sobre la distribución y apariencia visual de la aplicación, evaluando la disposición de elementos, paleta de colores, y coherencia visual.
En general, los resultados de esta sección son muy positivos, con excelentes calificaciones en la mayoría de los aspectos evaluados. Los usuarios consideran que la disposición de elementos, la consistencia visual, la tipografía y la organización de textos son aspectos destacados del diseño de la aplicación. Las áreas con un ligero margen de mejora serían el diseño visual y la paleta de colores, aunque aun así la mayoría de los usuarios están satisfechos.
Para evaluar la percepción del usuario sobre la facilidad de uso y comprensión de las funciones principales de la aplicación, como la generación de credenciales hotspot, la integración con routers Mikrotik y la gestión de clientes y cortes de fichas. Se busca determinar si los pasos y la disposición de los elementos son lógicos y claros, si la información proporcionada es suficiente para comprender los procesos y si las opciones de gestión son fáciles de entender. En la Gráfica 2 se muestran los resultados obtenidos de esta sección.
Gráfica 2.
Resultados de la encuesta sobre la facilidad de uso y comprensión de las funciones principales de la aplicación, como la generación de fichas hotspot y la gestión de clientes.
Las áreas más sólidas en esta sección son los pasos para generar credenciales hotspot, la disposición de elementos en esa pantalla, y la gestión de clientes y cortes de fichas. Sin embargo, se identifica un área de mejora potencial en la claridad de la navegación y la información proporcionada sobre la integración con routers Mikrotik. Si bien la mayoría de los usuarios encuentran fácil entender la generación de credenciales, hay una opinión más dividida en cuanto a la comprensión de la integración con Mikrotik.
Finalmente, en la Gráfica 3 correspondiente a la última sección de la encuesta dedicada a la experiencia de usuario, busca evaluar la satisfacción general del usuario con la aplicación en términos de usabilidad, facilidad para encontrar información, navegación intuitiva entre secciones, facilidad para regresar o retroceder, estructura de menús y enlaces, y cualquier aspecto confuso o difícil de entender en la navegación. Se busca obtener una calificación del nivel de satisfacción y determinar si la aplicación cumple con las expectativas del usuario.
Gráfica 3.
Resultados de la encuesta sobre la experiencia de usuario, incluyendo usabilidad, navegación intuitiva, y satisfacción general con la aplicación.
Los resultados de esta sección son muy positivos, sugiriendo una excelente experiencia de usuario en términos de usabilidad, facilidad para encontrar información, niveles de satisfacción, navegación intuitiva, estructura de menús y claridad en la navegación. Las calificaciones más bajas tienden a ser de 4, lo que aún es un buen resultado. En general, parece que la aplicación cumple con las expectativas de los usuarios en cuanto a la experiencia de usuario, sin aspectos particularmente confusos o difíciles de entender.
El análisis de los resultados de la encuesta revela una recepción generalmente positiva del diseño y la experiencia del usuario entre los encuestados. Se observa una cantidad mínima de sugerencias y comentarios negativos, lo que, junto con las altas calificaciones, indica un nivel general de satisfacción elevado. Se han identificado áreas potenciales de mejora, como el diseño visual general, la paleta de colores y la claridad en el acceso a algunas funciones. Es importante mencionar que estos aspectos serán abordados durante la próxima fase de desarrollo del software y la fase de documentación. Tomar en cuenta estas áreas de mejora garantiza una experiencia de usuario aún más sólida y con una mayor calidad para el producto final.
5. Conclusiones
El diseño realizado para la aplicación de generación de credenciales hotspot ha resultado exitoso, demostrando ser tanto fácil de usar como atractivo para los usuarios. A través del proceso de diseño centrado en el usuario (DCU) y la utilización del software Figma, se ha logrado crear una interfaz intuitiva que se adapta a las necesidades y expectativas de los usuarios. La aplicación ofrece una experiencia de usuario que facilita la navegación y la realización de tareas de manera efectiva.
El diseño se ha enfocado en la usabilidad y la estética, priorizando la creación de una interfaz amigable que permita a los usuarios interactuar de forma intuitiva con el sistema. Además, se ha tenido en cuenta la retroalimentación de los usuarios a lo largo del proceso de diseño, lo que ha contribuido a mejorar y refinar la experiencia de usuario final.
Si bien el diseño ha sido completado con éxito, es importante reconocer que el proceso de creación del software es un trabajo futuro que requerirá una implementación cuidadosa y meticulosa. Sin embargo, se tiene confianza en que el diseño establecido proporcionará una sólida base para el desarrollo del software, asegurando que el producto final cumpla con las expectativas de los usuarios y satisfaga sus necesidades.
Arturo Cuevas Aldana m23315016@huauchinango.tecnm.mx
