Giter Site home page Giter Site logo

yeniree17 / lim010-data-lovers Goto Github PK

View Code? Open in Web Editor NEW

This project forked from marcelimxo/lim010-data-lovers

0.0 1.0 1.0 6.64 MB

Proyecto: LATAM Statistics 360°

Home Page: https://yeniree17.github.io/LIM010-data-lovers/src

JavaScript 98.60% HTML 0.73% CSS 0.67%

lim010-data-lovers's Introduction

Proyecto N° 2 Data Lovers

logo

Índice


Resumen

Esta interfaz Web te permitirá visualizar y manipular indicadores socioeconómicos y demográficos de los siguientes países Latinoamericanos: Brasil, Chile, México y Perú; que son considerados por especialistas económicos como "Mercados Emergentes", debido a que cuentan con un rápido crecimiento de su actividad económica por diversos factores: riqueza de materias primas y recursos, industrialización, creciente número de trabajadores jóvenes, fuerte inversión extranjera directa, crecimiento de consumidores locales, influencia política y económica en los países de su espacio económico, entre otros. Por ende, influyen positivamente en su Producto Interno Bruto (PIB).

Te invitamos a que conozcas esta herramienta útil para tus investigaciones académicas sobre economías emergentes en América Latina. Sólo debes tener muchas ganas de aprender e ingresar como Usuario y Contraseña: LABORATORIA.

Ingresa haciendo click AQUI

Investigación UX

¿A quién va dirigido?

Los principales usuarios de LATAM Statistics 360° son estudiantes universitarios en el área de Economía, Geografía, Trabajo Social, empresarios de PYMES, y aquellos profesionales que requieren utilizar indicadores demográficos y socioeconómicos para realizar sus estudios de mercado, investigación y otros análisis económicos.

Objetivo del Producto

El objetivo de nuestra interfaz LATAM Statistics 360° es acceder a datos confiables de Indicadores Socioeconómicos de los países LATAM, presentados de forma sencilla y fácil de entender, que le permita organizar la data por años y porcentajes (%) para una mejor comprensión.

¿Cómo soluciona las necesidades del Usuario?

Facilita el acceso de la información a los usuarios que requieren datos estadísticos de forma frecuente y en el menor tiempo posible para usarlos de forma efectiva en sus investigaciones; disminuyendo así, los tiempos de búsqueda y las validaciones para corroborar la fuente de los datos consultados. Nuestra interfaz permite un acceso fácil de la información gratuita y estadísticas de los paises emergentes de America Latina (LATAM) para que los usuarios se encuentren actualizados sobre sus economías, solo tienen que ingresar el Usuario y Contraseña, para que puedan acceder al portal de datos donde seleccionarán los parámetros de su busqueda de acuerdo a la información que desea investigar.

Cabe destacar, que esta Base de Datos ha sido tomada del Banco Mundial, una organización internacional que ofrece asesoría técnica y financimiento para que los Gobiernos y empresas privadas lleven a cabo proyectos para el Desarrollo e Inclusión Social y favorezca un crecimiento sostenible de sus países. Sin embargo, nuestra base de datos tendrá un alcance sólo a los Países Latinoamericanos antes mencionados.

Historias de Usuario

Para el diseño y la implementación de nuestra interfaz, se consideraron las siguientes cinco (5) historias de usuario definidas en el proyecto. A partir de ellas, se establecieron los Criterios de Aceptación y Definición de Terminado, los cuales representan los requrimientos y necesidades de los usuarios 'target':

  • Historia de Usuario N° 1: "Como usuaria quiero poder loguearme con mi usuario y contraseña para acceder al sitio web"

  • Historia de Usuario N° 2: "Como usuaria quiero poder seleccionar un país y visualizar la data de sus respectivos indicadores para analizar el comportamiento demográfico/económico de cada región"

  • Historia de Usuario N° 3: "Como usuaria quiero poder ordenar los datos de los indicadores de manera ascendente (menor a mayor) o descendente (mayor a menor) para entender su evolución por años y porcentaje"

  • Historia de Usuario N° 4: "Como usuaria quiero poder filtrar los datos de los indicadores por año o rango de años para entender su evolución en un tiempo definido."

  • Historia de Usuario N° 5: "Como usuario quiero poder ver el promedio de los porcentajes del indicador seleccionado para tomar decisiones nuevas"

Definición de Terminado

Para todas las historias de Usuario se definieron las siguientes definiciones de Terminado, que representa el parámetro para medir si se cumple con los requerimientos del proyecto:

  • Que se visualice en pantalla la implementación de las funciones y la estructura en HTML
  • Que pase el Test de pruebas unitarias.
  • Que el diseño sea Responsive Web Designer
  • Que este publicado en GH-Pages

Prototipo de Baja Fidelidad

Luego de evaluar las historias de usuario, como parte de la investigación UX para sastifacer las necesidades del usuario, se diseñó un prototipo de baja fidelidad (lápiz y papel) de la interfaz de nuestro producto digital donde se definieron los elementos y el número de pantallas que formarán parte de nuestra interfaz, donde el usuario podrá interactuar, en corcondancia con las historias de usuario. A continuación se visualiza la versión desktop y mobile:

Versión Desktop

Desktop-Papel

Versión Mobile

Mobile-Papel

Prototipo Final en Figma y Zeplin

Luego de culminar el prototipo de baja fidelidad y recibir el feedback por parte de los usuarios, se procede a elaborar el diseño de la interfaz usando Figma, para luego exportarlo a Zeplin. A continuación se presenta la Imagen y link del prototipo de alta fidelidad final (mobile y desktop) en Figma.

Versión Desktop

Logueo-Desktop

Bienvenida-Desktop

Portal-Datos-Desktop

Versión Mobile

image-mobile

Diseño en FIGMA

Diseño exportado a Zeplin

Feedback

Se realizaron un (1) feedback por cada Sprint, donde se llevaron a cabo las iteraciones y testeos con 10 usuarios que nos permitieron mejorar el diseño de nuestro aplicativo web. En el primero, se presentó un demo y el prototipo en lápiz y papel de cada una de las ventanas diseñadas para la aplicación Web.

Demo Producto a Testear Observaciones Mejoras Realizadas
Sprint 1 Prototipo de baja fidelidad y Pantalla Logueo - Aumentar tamaño de fuente y el color - El Logueo debe tener una imagen que identifique al Banco Mundial - Aumentar espacio a los inputs del Logueo - Se cambio el tamaño y el color de la fuente - Se agregó en la pantalla de Logueo como pie de página el logo del Banco Mundial
Sprint 2 Prototipo de alta fidelidad y Pantallas Logueo y Portal de Datos - Colocar transparencia al fondo -Mejorar el tamaño del Select de los indicadores - Cambiar el color del texto en la alerta de contraseña incorrecta -Unificar estilos en los botones -Se edito el fondo - Cambiar el tamaño del input de select - cambio de color del texto de mensaje error en Logueo -Se mejoró los estilos de los botones
Sprint 3 Prototipo de alta fidelidad y Pantallas Bienvenida y Portal de Datos mejorada - Alinear texto y tamaño de fuente del menú de navegación -Colocar margen en los textos - Cambiar los estilos de la tabla - Colocar un borde entre el logo y el menú de navegación para darle un mejor estilo -Se cambió la alineación de texto, margen y tamaño - Se mejoró los estilos de la tabla -Se añadio un borde al menú de navegación

Iteración UX


Se evaluó la interfaz de nuestro proyecto a fin de generar oportunidades de mejoras, tratando que la impresión de los usuarios sea la más útil y placentera posible. Para ello, nuestras metas son observar si los usuarios entienden de forma clara la navegación (Usabilidad) y el contenido de nuestra interfaz, así como también determinar si el diseño visual es agradable y cumple con los principios de heurísticas de Usabilidad.

Pruebas de Usabilidad

Se llevó a cabo una (1) sesión de pruebas de usabilidad (Testeo) a la interfaz del proyecto de Data Lover “Latam Statistics 360°” a cuatro (4) usuarios; aplicando tres (3) técnicas durante el testeo que abordará la evaluación del prototipo de alta fidelidad, la navegación, el contenido; así como su nivel de experiencia de usuario al interactuar con nuestro producto. Luego de iterar, se analizaron las métricas obtenidas, presentándose observaciones y sugerencias, que permitieron incluir mejoras para el diseño de nuestro proyecto.

  • Programación y Ubicación:

Las pruebas se realizaron en dos (2) días, y serán realizadas en la casa de los usuarios, que representa un ambiente tranquilo. Se pretende realizar de 2 a 3 sesiones diarias y el horario será definido por el usuario de acuerdo a su disponibilidad.

  • Sesiones:

Cada testeo tendrá una duración de 30 minutos por cada usuario. En estas sesiones se aplicarán tres (3) técnicas para aplicar las pruebas de Usabilidad:

“Concurrent Think Aloud (CTA)”, es decir, pensar en voz alta de forma simultánea con la interacción.

Concurrent Probing (CP)”, Sondeo Concurrente, es decir, hacer preguntas de seguimiento durante el testeo.

“Retrospective Probing (RP), Sondeo Retrospectivo, es decir, hacer preguntas al usuario al finalizar la sesión. Antes de iniciar la sesión, se le informará a cada participante las pautas de las pruebas, y al final se le harán preguntas de seguimiento para anotar observaciones y evaluar las métricas previamente definidas.

  • Equipos:

Se utilizará un equipo portátil (Laptop) y un equipo móvil (celular smartphone), utilizando el sistema operativo Windows 10 y Android 8.0, respectivamente, y el navegador Google Chrome. Adicionalmente, durante la sesión de prueba se utilizó la herramienta de diseño FIGMA para la visualización del prototipo de alta fidelidad de la interfaz. Se tomaron registros fotográficos durante ejecución de las sesiones.

  • Participantes:

Para la ejecución de las pruebas de Usabilidad, se seleccionaron cuatro (4) participantes, considerando el usuario target de nuestro Proyecto. Estos participantes son profesionales de diversas áreas (administración, ingeniería, tecnología, gestión de calidad, educación) que pueden tener interés en conocer datos estadísticos socioeconómicos en Latinoamérica.

  • Escenarios:

Los escenarios representan lo que los usuarios harían o quisieran hacer al momento de interactuar con la interfaz. Se diseñaron cuatros (4) escenarios para que el participante interactúe con la interfaz, ejecutando una serie de tareas que deberá cumplir durante el testeo:

Escenario 1: El usuario debe loguearse para acceder al Portal de Datos

Escenario 2: El usuario debe explorar la página de Bienvenida y acceder al Portal de Datos

Escenario 3: El Usuario debe ingresar los parámetros de búsqueda en el Portal de Datos

Escenario 4: El Usuario debe evaluar el resultado de su búsqueda en el Portal de Datos

Cada escenario contiene una Lista de Tareas, que ejecutará el usuario y le permitirá interactuar con la interfaz en un tiempo determinado y sin ayuda por parte del evaluador. Cada escenario tendrá 3 a 4 tareas y serán en forma de instrucción, estas serán realizadas desde la pantalla Desktop.

Tareas del Escenario 1

  1. Ingresar como Usuario y Contraseña: LABORATORIA en mayúsculas para acceder correctamente al portal de datos.
  2. Ingresar el Usuario: LABORATORIA y una contraseña incorrecta 3 veces. Si se bloquea el acceso, refrescar la página.
  3. No ingresar el Usuario y colocar la contraseña correcta, indicada por el facilitador, y hacer lo que le indica el Sistema

Tareas del Escenario 2

  1. Leer el texto que aparece en las tres (3) imagenes del slider
  2. Leer el contenido de las pestañas que se despliegan al hacer click a los botones del navegador en la parte superior de la página.
  3. Ingresar a la página del Banco Mundial, al hacer clic en su nombre en el pié de página
  4. Acceder al Portal de Datos haciendo click en el botón Explorar datos

Tareas del Escenario 3

  1. Seleccionar el país de su preferencia, el indicador que más le llame la atención y un rango de años cualquiera. Luego, dar click en el botón Consultar.
  2. Borrar la selección. Volver a la sección de los parámetros de búsqueda. Seleccionar el país Perú, escoger uno de los primeros 5 indicadores. Escoger el intervalo de años de 2000 hasta el 2010. Dar click en Consultar.
  3. Borrar la selección. Hacer una nueva búsqueda seleccionando México, un indicador sobre Educación, escoger el intervalo de su preferencia. Dar click en buscar
  4. Borrar la selección. Hacer otra búsqueda, escoger el país Chile, un indicador sobre la mujer, escoger un rango de años que sólo abarque 5 años, dar click en consultar. Luego, leer el indicador en voz alta en el resultado obtenido.
  5. Si en esta última búsqueda, no le aparece ningún valor en la columna de datos, es decir, le aparece Sin Información, cambiar los años hasta que le aparezca un valor en la tabla.

Tareas del Escenario 4

  1. Luego de obtener la tabla, ordena los valores de forma descendente, es decir, de mayor a menor
  2. Ahora, ordena los valores de la tabla de forma ascendente, es decir, de menor a mayor
  3. Por último, obtén el promedio de los valores obtenido en la tabla, dando click en el botón Calcular Promedio.
  • Instrucciones para el Participante antes de comenzar la prueba de usabilidad

a) El facilitador le dará la bienvenida al participante y le explicará el propósito y la duración de la prueba.

b) El facilitador le indicará al participante que ejecutará una serie de tareas y que sólo puede solicitar ayuda si no puede completar la tarea asignada

c) El facilitador le pedirá al participante que piense en voz alta, mientras interactúa con el prototipo y/o página web desde el equipo portátil.

d) El participante lee la tarea en voz alta y comienza a trabajar en el escenario mientras piensa en voz alta.

e) El facilitador tomará notas de los comportamientos, comentarios, errores y finalización (éxito o fracaso) del participante en cada tarea.

f) La sesión continua hasta que se complete todos los escenarios de tareas o haya transcurrido el tiempo asignado.

g) Una vez culminada cada tarea, el facilitador podrá hacer preguntas de seguimiento de acuerdo a la interacción que tuvo el participante y le pregunta si tiene algún comentario u observación adicional.

h) Luego de completar los escenarios desde la pantalla Desktop, el facilitador le indica al participante que navegue por la página desde un dispositivo móvil sin instrucciones, a fin de evaluar su interacción con el mismo.

i) El facilitador hace preguntas subjetivas al final de la sesión, le agradece al participante por su participación.

j) Luego, el facilitador restablece los materiales y el equipo, identifica las métricas que se evaluaron y espera al próximo participante.

  • Roles:

Existirán dos (2) roles en las pruebas: el observador, quien indicará las tareas a los participantes, documentará la prueba mediante registro fotográfico, tomará el tiempo de cada tarea ejecutada por el participante; mientras que el tomador de notas, deben anotar cómo llevan a cabo las tareas, así como los comentarios de los usuarios y hará preguntas de seguimiento durante y al final de cada escenario. Ambos roles, evaluarán las métricas ya definidas.

  • Métricas (Cualitativas y Cuantitativas):

Se definieron ocho (8) métricas, que van a permitir medir el rendimiento, la efectividad, el grado de satisfacción y comodidad que tuvieron los usuarios al iterar nuestro producto

Evaluación Heurística

Usuario iterando el producto Usuario iterando el producto Usuario ejecutando las tareas Usuario realizando el testeo de forma remota Realizando el testeo de forma remota Realizando el testeo de forma remota

Luego de la iteración se procede a mejorar el diseño de la interfaz de nuestro producto, y se presenta el prototipo de alta fidelidad. Para Ingresar, click AQUI

Aprendizaje y Oportunidades de Mejora

Luego de llevar a cabo las pruebas de usabilidad a nuestros usuarios, donde se evaluaron 3 métricas cuantitativas y 5 métricas cualitativas al ejecutar 4 escenarios y 15 tareas. Se obtuvo los siguientes resultados:

Medidas de Rendimiento (Cuantitativas) Métrica 1: Éxito

¿Cuántas tareas culminó exitosamente?

El 100% de los usuarios culminó exitosamente todas las tareas.

Métrica 2: Tiempo

¿Cuánto tiempo se tardó en culminar cada tarea?

El 100% de los usuarios tardo entre 1 a 2 minutos en culminar las tareas

Métrica 3: Errores

¿Cuántos errores cometió mientras ejecutaba una tarea?

75% cometió 2 errores
25% cometió 3 errores

Medidas Subjetivas (Cualitativas)

Métrica 4: Facilidad de navegación

¿Se le hizo fácil ejecutar las tareas?

100% se le hizo bastante fácil la navegación

Métrica 5: Calidad del Contenido

¿Cómo evalúas el contenido de información?

100% estuvo bien, pero puede mejorar

Métrica 6: Diseño Visual de la interfaz

¿En términos de diseño visual, le gusto, los colores, la organización de los elementos, contraste, etc?

75% Le pareció agradable a la vista, puede mejorar algunos detalles 
25% Diseño muy simple, le falta mas colores o mejor organización

Métrica 7: Nivel de satisfacción

¿Se sintió satisfecho/a al ejecutar las tareas?

50% Sí, cumplió con mis expectativas 
25% Me gustó hacerlas pero me costó entender la lógica
25% Pensé que iba a disfrutarlo más 

Métrica 8: Interpretación de los datos

¿Entendió los datos generados en el portal?

100% Si, se entendió sin problemas

lim010-data-lovers's People

Contributors

yeniree17 avatar sisleymore avatar developervilchez avatar ruthsalvador avatar betsyvies avatar

Watchers

James Cloos avatar

Forkers

sisleymore

lim010-data-lovers's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.