Artículos
Recepción: 25 Junio 2022
Aprobación: 13 Noviembre 2022
Como citar:: Santamaría-Philco, A., Legarda Albiño, A., Guadamud Cevallos, W., & Macías-Mendoza, D. (2022). Análisis de la usabilidad y restructuración de un sitio web. Caso de aplicación: Sitio Web Institucional de la Universidad Laica Eloy Alfaro de Manabí. Investigación, Tecnología E Innovación, 14(17), 16–29. https://doi.org/10.53591/iti.v14i16.1216
Resumen: Contexto: El presente artículo tiene como objetivo realizar el rediseño del sitio web de la Universidad Laica Eloy Alfaro De Manabí bajo el nuevo estatuto de la institución aprobada el presente año y las tendencias web actuales, este proyecto aprovechará al máximo la nueva imagen corporativa de la institución. Asi mismo se utiliza el gestor de contenido que ya opera en la institución (llamado WordPress) como cimiento para la creación de una nueva plantilla inédita con diseño web a la medida y desde cero. Método: Se hace uso de metódología mixta para el análisis de la información además, técnicas como observación directa, entrevistas a expertos y encuestas para levantamiento de información y evaluación de resultados. Para la construcción del sitio se emplea el marco metodológico SCRUM. Resultados: Al desarrollar la nueva plantilla el sitio web presenta un diseño único e irrepetible, facilidad de detectar y corregir los errores, agregar funcionalidades sin límites, soporte técnico propio, entre otros, además, es optimizada para ofrecer un mejor rendimiento en los navegadores mejorando así la experiencia de usuario. Finalmente, se realiza una comparativa de la usabilidad del nuevo sitio versus el anterior. Conclusiones: La reestructuración del sitio web permite una mejor experiencia para los usuarios, evitando perdidas al navegar dentro de la web, usando la información en base a la nueva estructura orgánica de la institución, con diseño adaptado a la nueva marca institucional y con tecnología web responsiva que permite ser adaptable a todo tipo de dispositivo (Ordenador, Smartphone, Tablets), además de contener funcionalidades importantes como la accesibilidad y usabilidad web.
Palabras clave: Web Responsiva, plantilla(tema), WordPress.
Abstract: Context: This article aims to carry out the redesign of the website of the Universidad Laica Eloy Alfaro De Manabí under the new statute of the institution approved this year and current web trends, this project will make the most of the new corporate image of the institution. Likewise, the content manager that already operates in the institution (called WordPress) is used as a foundation for the creation of a new template with custom web design from scratch. Method: A mixed methodology is used to analyze the information, as well as techniques such as direct observation, interviews with experts, and surveys to gather information and evaluate the results. For the construction of the site, the SCRUM methodological framework is used. Results: When developing the new template, the website presents a unique and unrepeatable design, ease of detecting and correcting errors, adding unlimited functionalities, own technical support, among others, in addition, it is optimized to offer better performance in browsers, improving thus the user experience. Finally, a comparison of the usability of the new site versus the previous one is made. Conclusions: The restructuring of the website allows a better experience for users, avoiding losses when browsing the web, using the information based on the new organic structure of the institution, with a design adapted to the new institutional brand and with web technology. responsive that allows it to be adaptable to all types of devices (Computer, Smartphone, Tablets), in addition to containing important functionalities such as web accessibility and usability.
Keywords: Responsive Web, template (theme), WordPress.
INTRODUCCIÓN
Debido a la cambiante tecnología tanto en desarrollo como en diseño las empresas o instituciones requieren de actualizaciones de sus sitios webs para mejorar su presentación online, para ello debe tener un diseño atractivo y legible que invite a los usuarios a permanecer en el sitio, debido a que es la principal fuente por la que se muestra información acerca de una empresa o institución, es por ello que las instituciones educativas también han optado por darle un giro nuevo a sus diseños web para tener más atención y atracción de sus presentes y futuros estudiantes. Además, al convertirse en una fuente de comunicación importante para la comunidad, no contar con un buen diseño y una jerarquía de información legible provoca confusión e inconformidad en los usuarios.
Una reestructuración web es fundamental debido a la tendencia y tecnologías cambiantes; esto ocurre siempre y cuando una empresa o institución quiere hacer un cambio radical ya sea en organización de información, cambio de imagen o añadir nuevas funcionalidades para mejorar la presencia online, ya que es la carta principal de presentación de una entidad (García de León, 2019).
Actualmente la Universidad Laica Eloy Alfaro de Manabí cuenta con un sitio web creado hace 10 años, fue realizado sobre una plantilla gratuita de la plataforma WordPress que la adquirieron en aquel tiempo. Actualmente, está presentando fallos de seguridad, no tienen mayor control sobre ella, dependen de un soporte técnico externo, no tienen una identidad única debido a que estos modelos de plantillas son repetidos en otros sitios, presentan un diseño obsoleto que no es adaptable a todos los dispositivos, no cuenta con buena accesibilidad y usabilidad web. Además, tienen limitaciones al añadirle nuevas funcionalidades, presenta bajo rendimiento, errores de base, código poco optimizado y la experiencia de usuario no es buena debido al exceso de información y a la falta de jerarquía al momento de presentarla, ocasionando confusión en su navegación causando que los usuarios no quieran volver al sitio.
El presente trabajo trata sobre la reestructuración del sitio web institucional de la Universidad Laica Eloy Alfaro de Manabí basado en el nuevo estatuto Estatuto Uleam (2919) aprobado el presente año, además se hace una adaptación a las nuevas tendencias web actuales con el fin de mejorar la experiencia de usuario en la navegabilidad, organización de la información, usabilidad y rendimiento web.
La imagen y estructura de un sitio web es de gran importancia para cualquier institución u organización por lo que es su principal carta de presentación por eso este proyecto está destinado a reestructurar el sitio web de la institución adaptándolo a nuevas tendencias y tecnología actuales para presentar al usuario una experiencia amigable, se puede constatar que las webs con años de creación presentan un diseño obsoleto, agujeros de seguridad, bajo rendimiento e incompatible con todos los dispositivos y el propio gestor de contenido WordPress. Se espera tener los siguientes resultados:
Nueva apariencia y estructura del sitio con aspectos moderno y renovado adaptado a las actuales tendencias web.
Mejor jerarquía de información basado en el nuevo estatuto para brindar mejor experiencia de usuario.
Diseño web a la medida y desde cero solo con lo que realmente necesita.
Tendrá un diseño único e irrepetible tanto en colores como en su estructura.
El sitio web será altamente configurable permitiéndoles tener un mayor control sobre ella como agregar funcionalidades nuevas sin límites.
Estará optimizada para ofrecer un mejor rendimiento (evitando código excesivo css, JavaScript y librerías que son frecuentemente poco utilizadas o mal implementadas que ocasionan el bajo rendimiento de la web).
Contará como mayor seguridad y facilidad de detectar y corregir errores. (debido a que tendrá soporte técnico propio).
Diseño y funcionalidad escalable.
La sección 2 está encaminada al diagnóstico o estudio de campo donde se definen los métodos de investigación y herramientas utilizadas para la recopilación de datos, el plan de recolección de datos instrumental y el plan de muestreo. La sección 3 muestra los requisitos funcionales, la arquitectura del sistema aplicada, el desarrollo de la propuesta mediante la metodología SCRUM. La sección 4 indica la evaluación de resultados donde se hace un seguimiento y evaluación de la accesibilidad del sitio web. Finalmente, se muestran las conclusiones y bibliografía.
METODOLOGÍA
En esta sección se describen los métodos y las herramientas de recopilación de datos utilizada para la recopilación de información en las unidades de análisis de la ULEAM, con el fin de extraer datos de interés a través de herramientas como entrevistas focalizadas y observación directa para dar respuestas al problema. Además, se describe el instrumental operacional para la recopilación de datos, la estrategia operacional para la recolección de datos, así mismo se muestra el plan de muestreo; su segmentación y quienes son parte de la muestra de la población y por último se realiza un análisis global de los datos obtenidos en la entrevista y por observación directa.
Plan de recolección de datos
Para realizar la recolección de datos hay que plantearse unas series de preguntas básicas como: ¿Dónde se va a realizar?, ¿Cómo lo va a realizar? y ¿Cómo lo va a analizar?, para ello en la Tabla 1 se muestran las respuestas a dichas interrogantes
La población como objeto de estudio corresponde a los siguientes actores: el técnico encargado de control y mantenimiento del sitio web y el personal encargado de la gestión de contenido e imagen institucional que manejan el sitio web; entre ellos se desprenden el gestor de contenido de facultades, direcciones y del sitio web principal. Para esto se ha utilizado una entrevista a través de una estructura de preguntas que permitan obtener la información exacta para el entendimiento del problema y con ello la construcción de la propuesta. Este tipo de muestreo permite entrevistar siguiendo criterios de conveniencia del investigador o de los objetos de la investigación, con esto tendremos riqueza de información y la posición que ocupa cada involucrado en la interacción con el sistema. Con esta técnica podremos ir proporcionando información a medida que se vayan realizando las preguntas esto nos permitirá acercar más a lo que queremos resolver focalizando la conversación entorno al problema y alentando al entrevistado para que dé más hechos de la situación que conlleva. La muestra está determinada por las 4 personas entrevistadas que desempeñan cargos fundamentales dentro de la Universidad Laica Eloy Alfaro de Manabí que brindarán buen aporte a la restructuración del nuevo sistema
RESULTADOS Y DISCUSIÓN
Sitio Web Institucional de la ULEAM
Requerimientos
En esta sección se muestra los requisitos funcionales de la aplicación:
Gestionar los enlaces importantes de la página principal
Gestionar una sección de banners tipo slider
Gestionar una sección de noticias
Gestionar una sección de eventos
Gestionar una sección de concurso de méritos y opciones
Gestionar una sección de videos
Gestionar el video de portada
Gestionar las páginas de información institucional
Gestionar la página de oferta académica
Gestionar la página de Gestión y administración
Gestionar la página de servicios en líneas
Gestionar las páginas de normativa legal
En sitio de facultades el sistema debe permitir:
Gestionar enlaces de acceso rápido
Gestionar imágenes tipo slider
Gestionar páginas de datos de facultad entre ellas: página de autoridades, filosofía institucional, orgánico funcional, eventos, nominas, entre otros, es decir, en caso de se requiera más páginas debe permitir agregar al submenú de esta sección.
Gestionar páginas de carrera de ingeniería en sistemas
Gestionar páginas de carrera de ingeniería en tecnologías de la información.
Gestionar páginas de comisión académica, investigación, aseguramiento de la calidad y vinculación y emprendimiento.
Gestionar página de eventos
Gestionar el menú de información creada
Gestionar páginas de lo que las facultades requieran agregar
En sitio de direcciones el sistema debe permitir:
Gestionar una sección importante en la página principal
Gestionar páginas en sección de datos generales como: páginas de bienvenida, misión y visión, equipo de trabajo, entre otros, el sistema debe de permitir agregar las páginas que se requieran.
Gestionar páginas de la sección de objetivos de la dirección.
Gestionar páginas de la sección de normativa legal
Gestionar páginas de la sección de convenios
Gestionar páginas de la que las direccione requieran
Gestionar menú
Arquitectura del sistema
La arquitectura del sitio web que se ha utilizado es cliente-servidor (ver Alcantara, 2017) y está representada por los siguientes elementos:
Usuarios
Servidor web
Procesamiento dinámico
Los usuarios acceden al sitio web ULEAM por medio del navegador, éste carga los archivos correspondientes (HTML, CSS y JavaScript) del sitio web principal (ver Alonso, 2008) desde el servidor donde se aloja el sistema. Una vez que estos recursos se desplieguen en el navegador los usuarios empiezan a interactuar con la página principal y empieza el procesamiento dinámico, cuando el usuario intente acceder a otra página ya sea facultades o direcciones, se realiza una vez más petición al servidor web, se cargan los archivos correspondiente y el navegador pinta en la pantalla del usuario la nueva página solicitada con sus respectivos estilos e información traída desde la base de datos (ver Figura 1).
Utilización de SCRUM
Para realizar el presente trabajo hemos utilizado la metodología SCRUM (Peralta, 2003) que permite el desarrollo ágil de un proyecto, unas de sus características principales es que está basado en la construcción de productos durante un proceso iterativo e incremental que en cada fase el cliente tendrá una parte del sistema funcional y operativo a estos incrementos se le llaman sprints que están compuestos por un tiempo máximo de dos a cuatro semanas. Además, contiene más características principales como los roles de las personas involucradas en el desarrollo de este proceso que forman parte del sistema, una pila de producto que con lleva todas las ideas a desarrollar.
Pila de producto
En la Tabla 2 se presentan las funcionalidades, características (Santos, 2015) y todo lo que aporte para la elaboración del sistema: una identificación única, descripción, campo de priorización (1-10), estimación (horas) y responsables de dicho trabajo, esta lista estará priorizadas de arriba hacia abajo, en la parte superior estarán los elementos más pronto que se requiera para el sistema y en la parte inferior los elementos que pueden esperar más tiempo o aún no están bien definidos (ver Tabla 2).
Diseño de interfaz
A manera de ejemplo la Figura 2 muestra el diseño general de la interfaz del sitio web (Zotenilo, 2019). Se establece los botones que dirigen a las redes sociales de la institución, además de los botones de accesibilidad que permiten aumentar y disminuir el tamaño del texto, la reproducción por voz cuando se ubique sobre una palabra y el comando por voz cuando desee ir algún sitio del menú. También se encuentran los enlaces importantes, que son de rápido acceso a los sitios más utilizado por la comunidad universitaria.
En las Figura 3 se observa un diseño similar, tipo tarjetas que permiten acceder de manera rápido a la página que desee ir.
Presentación de resultados
En la Tabla 3 se presentas los resultados de las pruebas de funcionalidad de la aplicación. Contiene un número de prueba a realizar, la condición, resultado esperado, resultado actual y comentarios de alguna observación (ver Tabla 3).
Problemas presentados en la implementación
Durante la implementación del proyecto se presentaron unos inconvenientes que fueron solucionados conforme se iba analizando cada caso, entre ellos:
Inconveniente 1:
El diseño de algunas páginas estaba fuera del contexto, es decir, no estaban posicionas en el elemento correspondiente y al momento de observar des un dispositivo móvil este desaparecía.
Solución: Se procedió a revisar todos los archivos que subieron y nos percatamos de que el archivo que contenía las librerías del framework MDBootstrap para estilizar las paginas no estaba, por lo que se procedió a subir ese archivo, actualizamos la página y el sitio web se mostraba como se requería.
Inconveniente 2:
Al momento de migrar el sitio de aseguramiento de la calidad el contenido que presentaba este sitio en algunas páginas se mostraba de forma recorrida hacia abajo sin ningún formato, mientras que en el anterior sitio mostraba con listas, estilos pastillas, acordeones y por separación de páginas dicha información.
Solución: Al indagar el sitio anterior nos dimos cuenta de que este sitio hacia uso del plugin Elementor (https://elementor.com/), entonces procedimos a instalar dicho plugin, actualizamos la web y la información procedió a formatearse como estaba anteriormente presentada.
Inconveniente 3:
Al momento de migrar la plantilla de la dirección de Gestión de Planificación, Proyectos y Desarrollo Institucional y al obtener sus datos se observó que en el menú de PEDI, POA e Inversiones Públicas se mostraban como submenú una larga lista de cada año de información lo cual saturaba al menú.
Solución: Para evitar el excesivo de información de un menú, procedimos a realizar una página por cada botón del menú mencionado anteriormente y en cada una de esas páginas subimos la lista de los años que han subido información, con sus respectivos enlaces.
Comparativa del nuevo sitio web institucional de la ULEAM
En este apartado se utilizan dos herramientas web para evaluar la optimización, accesibilidad y usabilidad del sitio web actual y comparar con el sitio web anterior. Estas herramientas evalúan si la web cumple con unos de los estándares de la WCAG para la accesibilidad web, además de evaluar puntos importantes como:
Funcionamiento: Evalúan el peso del sitio, rendimiento y velocidad de carga.
Diseño Web: Evalúan si el sitio web cuenta con diseño adaptado para visualizarse correctamente en cualquier tipo de dispositivo (computadora de escritorio, tableta y móvil).
Usabilidad: Evalúan si el sitio web permite lograr una experiencia de usuario simple, para que los visitantes naveguen fluidamente y realicen las acciones (clics) correctas en los objetivos establecidos.
Seguridad: Evalúan si el sitio web cuenta con certificados de seguridad que permitan al usuario confirmar que la información que proporcione esté segura.
Herramienta Wave
En la Figura 4 se observan los resultados obtenidos una vez analizado el nuevo sitio web por la herramienta Wave donde indica 2 errores, esto hace referencia a dos elementos, que falta agregar el texto alternativo, lo cual es muy importantes para los usuarios que usan lectores de pantalla, los 6 errores que enseña es por motivo de contraste en algunos elementos, por ejemplo, los botones debido a que están de color rojo que atribuye a la marca institucional y las 49 alertas hace referencia al texto justificado en la parte de noticias, nos señala que se retire la propiedad justify pero esto no es de alta prioridad, queda a criterio del diseñador.
Analizando el sitio web antiguo da el siguiente resultado: 52 errores en lo que es referente a: imágenes vinculadas que falta texto alternativo, etiquetas y botones vacíos, tiene 49 errores en contraste en este caso indica que el contraste es muy bajo como por ejemplo en el menú y algunas imágenes que tienen fondo negro y 29 alertas que hace referencia a texto alternativo muy redundante, elementos de formulario sin etiqueta con título, nivel de encabezado omitido, enlaces y texto de título redundante.
Herramienta Pingdom Website Speed Test
Esta herramienta permite medir la velocidad del sitio web en esta ocasión se realiza un análisis al sitio web antiguo y se obtiene que tiene un grado de rendimiento del 75% con un tamaño global de la web de 1.4MB con un tiempo de carga de 4.89s dentro de 46 peticiones.
Analizado el nuevo sitio web (ver Figura 5) indica que tiene un grado de rendimiento del 68% con un tamaño global de la web de 14.4MB con un tiempo de carga de 4.34s dentro de 132 peticiones, lo que le hace más optimo que el sitio web anterior, cabe recalcar que el sitio baja de rendimiento y sube de tamaño debido a que contiene nueva estructura para mejorar la información, además de obtener un video de presentación en su página de inicio, imágenes en sus encabezados y menú, peticiones a nuevas fuentes, íconos, mapa, videos y framework para mejorar el diseño lo que le hace pesado pero a la vez óptimo.
En la Figura 6 vemos más a detalle el tamaño del contenido y solicitudes por tipo de contenido, además, del tamaño del contenido y solicitudes por dominio del nuevo sitio web, todo esto es medible en porcentajes y nos indican su valor total.
CONCLUSIONES
Se establecieron los requisitos del sistema a través de un análisis a los datos recopilados por las herramientas de recolección de datos, para luego ilustrar el comportamiento del sistema y su interacción con los usuarios involucrados a través de los casos de uso, además de identificar la infraestructura a emplear.
A través de la metodología SCRUM utilizada se pudo realizar con eficiencia el desarrollo de las plantillas a medida deseada, las cuales concluyeron durante los cinco Sprints ejecutados, que en cada ciclo devolvían un incremento probado y revisado para que los involucrados del sistema vayan testeando la veracidad del producto con sus requisitos planteados, agregando eficiencia al producto entregado.
Se logró conseguir un mayor rendimiento, mejores funcionalidades, una mejor organización de la información y una buena accesibilidad y usabilidad en la nueva web de la institución.
AGRADECIMIENTOS
A la Facultad de Ciencias Informáticas de la Universidad Laica Eloy Alfaro de Manabí.
REFERENCIAS BIBLIOGRÁFICAS
Alcantara Rennan. (2017). Aplicaciones Web (WebApp) vs Websites – Entienda la diferencia | Scriptcase Blog - Development, Web Design, Sales and Digital Marketing. Retrieved from 5 de abril del 2017 website: https://www.scriptcaseblog.net/es/development-es/aplicaciones-web-webapp-vs-websites-entienda-la-diferencia/
Alonso, J., & Alonso Ruiz, J. (2008). El sitio web como unidad básica de información y comunicación. Aproximación teórica: definición y elementos constitutivos. IC Revista Científica de Información y Comunicación, (5), 226–247.
Estatuto ULEAM. (2019). Estatuto. Estatuto. Retrieved from https://www.uleam.edu.ec/wp-content/uploads/2019/03/ULEAM001-ESTATUTO-ULEAM-OFICIAL-1.pdf
García de León, A., & Garrido Díaz, A. (2002). Los sitios web como estructuras de información: un primer abordaje en los criterios de calidad. Biblios: Revista Electrónica de Bibliotecología, Archivología y Museología, (12), 2.
Peralta, A. (2003). Metodologia Scrum. Universidad ORT Uruguay, 12. Retrieved from https://fi.ort.edu.uy/innovaportal/file/2021/1/scrum.pdf
Santos, María. (2015) Qué es SCRUM – Proyectos Ágiles. Retrieved from Proyectosagiles.org website: https://proyectosagiles.org/que-es-scrum/
Zotelino, Pedro. (2019). Los gestores de bases de datos (SGBD) más usados. Retrieved from 16 de Abriil website: https://revistadigital.inesem.es/informatica-y-tics/los-gestores-de-bases-de-datos-mas-usados/
Información adicional
Como citar:: Santamaría-Philco, A., Legarda Albiño, A., Guadamud Cevallos, W., & Macías-Mendoza, D. (2022). Análisis de la usabilidad y restructuración de un sitio web. Caso de aplicación: Sitio Web Institucional de la Universidad Laica Eloy Alfaro de Manabí. Investigación, Tecnología E Innovación, 14(17), 16–29. https://doi.org/10.53591/iti.v14i16.1216
