Desarrollando prototipos de interfaz web: una experiencia de aula
Developing web interface prototypes: a classroom experience
Carlos Efraín Chasiluisa Taco
Marcela Ximena Parra Pérez
Alexander Darío Lascano Cevallos
Sergio Eduardo Chango Pastuña
Universidad Técnica de Cotopaxi (Ecuador)
Resumen:
El presente artículo detalla una propuesta sobre la estructuración del diseño web para gestionar la información, surgiendo de esta manera un análisis de aplicación de conocimientos y gestión de contenidos, como experiencia para la formación profesional en estudiantes de la carrera de Diseño Gráfico de la Universidad Técnica de Cotopaxi. El proceso de investigación se basa en el concepto de “diseño inclusivo” en un barrio rural del cantón Saquisilí – Ecuador, aplicando un enfoque socio cultural con diferentes métodos y técnicas, dentro de un marco metodológico de diseño y experiencia de usuario. Se partió de la recopilación de análisis de información en escenarios locales, utilizando cuestionarios y entrevistas, mismos que generaron conocimiento sobre aspectos sociales, culturales, económicos y políticos y la importancia de la gestión de la información, para satisfacer las necesidades en la creación de proyectos multimediales.
Keywords: Diseño web, comunidad, experiencia de usuario.
Abstract:
The present article details a proposal on the structuring of web design to manage the information, establishing in this way an analysis of knowledge application and content management, as experience for professional training into students of Graphic Design major at Technical University of Cotopaxi. The research process is hinged on the concept of «inclusive design» in a rural neighborhood of the Saquisilí canton – Ecuador, where is applying a sociocultural approach with different methods and techniques, within a methodological framework of design and user experience. It was based on the collection of information analysis in local scenarios by using questionnaires and interviews, which generated knowledge about social, cultural, economic and political aspects, and the importance of information management to meet the needs in the creation of projects multimedia.
Keywords: Web design, community, user experience.
* * * * *
1. Introducción
La participación en el entorno tecnológico cada vez incrementa, esto se debe a la implementación de la World Wide Web, red informática que hizo posible la distribución de documentos vía internet, contribuyendo de esta manera a la construcción de contenidos multimedia, que facilitan a las personas un proceso de experiencia de usuario generando dinámicas culturales, movimientos sociales, entre otros.
En este sentido, la experiencia de usuario en la asignatura Gestión de Contenidos fue aplicada de acuerdo a la teoría de Garrett, (2003, p.33), quien propone que cada disciplina debe establecer un tipo de interrelación entre ellas, el autor además afirma, que el diseño de navegación depende de la arquitectura de la información y la implementación del diseño de la interfaz antes que el diseño gráfico. En la aplicación del presente estudio participaron 48 estudiantes del séptimo ciclo y 4 profesores de la carrera de Diseño Gráfico de la Universidad Técnica de Cotopaxi quienes aplicaron prototipos web vinculados a sectores rurales.
El barrio Central Narvaez, es un sector rural que pertenece a la parroquia Chantilín del cantón Saquisilí, en la región de los andes en Cotopaxi – Ecuador, su territorio es una planicie árida y de acuerdo a los datos del Instituto Nacional de Estadísticas y Censo (INEC, 2010), cuenta con una población aproximada de 500 habitantes, y un clima que varía entre 14 a 18ºC.
Esta investigación tiene el propósito de mostrar un proyecto realizado en el aula de clase en la asignatura Gestión de Contenidos y la colaboración de otras áreas que generaron aporte científico en el marco de la gamificación y experiencia de usuario, aplicando las cinco fases de James Garrett: Estrategia (Identificación de necesidades del usuario), Alcance (Especificaciones y funcionalidades de contenido), Estructura (Arquitectura de la información), Esqueleto (Diseño de la interfaz) e Interfaz (Diseño Visual), dentro de un contexto social, cultural, simbólico y político, en el barrio Central Narváez, facilitando entornos de aprendizaje colaborativo en los sectores rurales y de difícil acceso tecnológico.
Para el desarrollo de este proyecto se aplicaron técnicas e instrumentos de investigación como entrevistas a profundidad y grupos focales, mismos que determinaron argumentos representativos sobre el entorno y la identificación de sus necesidades. Adicional a esto, se recolectó información bibliográfica para la percepción del estudiante, quien desarrolló un proceso de alcance digital basado en el concepto de diseño inclusivo, concibiendo procesos cognitivos y de interacción social dentro del ámbito digital.
2. Desarrollo
La finalidad del presente estudio “es acercar a los estudiantes a mecanismos novedosos de aprendizaje” (Fonseca et al. 2014, p. 2), por lo tanto, los autores traen a colación la experiencia en el desarrollo de prototipos de interfaz web en el aula, aplicados a las 5 fases de los elementos de experiencia de usuario propuesto por Garret.
2.1 Estrategia
Los estudiantes generaron identificación del problema contemplando acciones necesarias para buscar las características del usuario, utilizando técnicas de investigación como grupos focales y entrevistas a profundidad a directivos y lugareños, además de la descripción de datos socio-demográficos que contribuyeron a la construcción adaptativa en el diseño de una interfaz web, por otro lado, el direccionamiento de aprendizaje de los estudiantes generó una forma directa y necesaria para asegurar una conducta habitual y comportamiento holístico, como una nueva alternativa de accesibilidad a experiencia de usuario, permitiendo de esta manera desarrollar “una teoría basada en las necesidades y los intereses del usuario, con especial hincapié en hacer que los productos sean utilizables y comprensibles” (Norman 2006, p.232).
Los investigadores se distribuyeron para generar contenido desde la primera mitad del año 2018, hasta la primera mitad del año 2019 en el que se eligió el barrio Central Narváez como lugar para la práctica de estudio, manejando inquietudes y necesidades homogéneas que se concentraron dentro de un contexto social, cultural, simbólico y político aplicando de esta forma un entorno de aprendizaje colaborativo y metodológico en sectores rurales.
2.2 Alcance
Las múltiples respuestas para sistematizar la información y extraer valoraciones del proceso enseñanza-aprendizaje fue definida a través del análisis de datos, consiguiendo agrupar una propuesta de requerimientos funcionales que se relacionaron con otros proyectos similares, no sólo permitió argumentar el eje de la interfaz web, sino también conocer las necesidades del sector, que se convirtió en el punto de partida para desarrollar herramientas de interacción con el usuario cumpliendo de esta manera el propósito de gestionar la información a partir de nuevos mecanismos de inclusión que se relacionan a las nuevas tecnologías de comunicación digital, “Aplicaciones que se basan en internet y se desarrollan a partir de la web 2.0 permitiendo la creación e intercambio de contenidos generados por el usuario” (Kaplan y Haenlein, 2010).
Es así que el contenido que emergen los autores del presente artículo se relaciona a un contexto histórico, festivo, gastronómico, artístico cultural, saberes ancestrales y lo que resalta en el análisis de los resultados es la valoración de la agricultura y ganadería, de tal forma que la propuesta genera vínculos con la realidad social y colectivo alcanzando un nivel de interpretación de conocimientos en entornos multimediales con caso reales.
2.3 Estructura
El diseño estructural permite organizar contenidos que facilitan la realización de tareas y la clasificación de documentos en diversos formatos, es así, que los estudiantes trabajaron en prácticas disciplinadas de selección de datos de acuerdo al esquema de Garret (Figura 1), para obtener la arquitectura de información, que no es más, que el “arte y la ciencia de organizar espacios de información con el fin de ayudar a los usuarios a satisfacer sus necesidades de información” (Toub, 2000 p. 3), así como afirma Garrett (2003, p. 94) “se ocupa de la creación de los esquemas de organización y navegación que permiten a los usuarios moverse a través de un sitio Web con eficiencia y eficacia”.
Por lo tanto, los investigadores estructuraron el contenido mediante la aplicación de la técnica card sorting (primera fase que permite categorizar información), a su vez, posibilitó la organización y clasificación de contenido, mediante tarjetas etiquetadas y requeridas por el sitio web. En la práctica, el mapa del sitio facilitó la estructura de secciones principales y subcategorías que se encuentran desplegadas bajo la categoría principal o padre. En el esquema de navegación se añadió la interactividad de enlace, estructurado de forma lógica, lo cual creó un sistema completo de acceso dentro del sitio web, permitiendo a los usuarios desplazarse de un lugar a otro por el contenido, mediante la utilización de hipervínculos.
2.4 Esqueleto
La propuesta digital que proporcionó una expresión competitiva en la estructura de elementos permitió la utilización de botones, banners, bloques de texto, registro de usuario, imágenes y videos, logrando una estructura layout (Cuadrícula imaginaria que divide en espacios o campos la página que se diseña para facilitar la distribución de elementos como texto o gráficos en la misma) prototipada de baja y alta fidelidad, concordando de esta manera la definición del esqueleto de la aplicación.
Dentro del diseño de la interfaz los estudiantes utilizaron el prototipo de baja fidelidad, llamado también prototipo de papel (Figura 2), lo cual permitió estructurar espacios de información que fueron distribuidos en áreas específicas, permitiendo detectar errores en el proceso de diseño, esta percepción ayudó a corregir el prototipo e ingresar en gastos innecesarios. En la siguiente fase se desarrolló el prototipo de alta fidelidad (Figura 3) en la que se valoró el procedimiento de pruebas y usabilidad interactiva con el usuario.
2.5 Interfaz
Tras conocer los resultados, en el desarrollo de la fase final se valoró las etapas anteriores, lo que permitió a estudiantes y profesores aplicar una guía de estilos conforme a la estructura de maquetación web, tomando en cuenta los patrones de visualización del usuario. Como resultado final se obtuvo el diseño visual (Figura 4), en base a la estructura de la maquetación del sitio web, diseñado de la siguiente manera: en la sección cabecera se ubicó la marca, menú principal, barra de búsqueda, íconos a diferentes redes sociales y banner con imágenes representativas de la zona; En la sección navegación, se incorporó enlaces que facilitan el acceso a instituciones públicas que brindan servicios a los pobladores; En la sección contenido, se situó información del sitio web vinculado a contenido infográfico y multimedia de las actividades propias de la zona. En la sección pie, se ubicó información de contactos, créditos y mapa de ubicación del barrio Central Narváez.
Dentro del diseño visual se incorporó tipografía en titulares, encabezados y párrafos, además colores corporativos de acuerdo al diseño de la marca, uso proporcional de imágenes e íconos de interfaz gráfica.
Conclusiones
Construir la experiencia para el estudiante se convirtió en una verdadera transformación interactiva entre profesores y estudiantes donde cada etapa del diseño se convirtió en un proceso que va de lo abstracto a lo concreto, desde la necesidad del usuario hasta estructurar el prototipo, la finalidad fue generar un test de usabilidad que permita el correcto funcionamiento y navegación de los usuarios dentro del sitio web.
En el presente proyecto se alcanza procesos de viabilidad técnica, operativa, legal y económica, que permite la construcción referencial sobre el desarrollo de prototipos de interfaz Web, dentro de un contexto social, cultural, simbólico y político, en el barrio Central Narváez.
Bibliografía
Fonseca Chiu, L., Medellín Serna, L., & Vásquez Padilla, J. (2014). El uso de herramientas de la web 2.0 como estrategias didácticas en el proceso de enseñanza-aprendizaje de jóvenes universitarios. PAAKAT: Revista de Tecnología y Sociedad, 0(7). Recuperado de http://www.udgvirtual.udg.mx/paakat/index.php/paakat/article/view/227/341
Garrett J. J. (2003) The Elements of User Experience. Estados Unidos. New Riders.
Kaplan A.M. y Haenlein M. (2010), Users of the world, unite! The challenges and opportunities of social media. Business Horizons. 53(1): 59-68.
Norman, D. A. (2006). La Psicología de los Objetos Cotidianos. España: Nerea, S.A.
Pérez, E. (2008). Diseño de Modelos y prototipos experimentales orientados al Aprendizaje de la Óptica. Tesis de Maestría en Educación en Física, FACE, Universidad de Carabobo.
Toub, S. (2000). Evaluating Information Architecture: A Practical Guide to Assessing Web SiteOrganization. ARGUS Associates. Disponible en: http://argus-acia.com/white_papers/evaluating_ia.html