División de Gobierno Digital (SEGPRES).

Postulación al cargo de Diseñador UI.

El siguiente análisis fue aplicado a la url https://digital.gob.cl para la postulación al cargo de Diseñador UI. Se aplican los criterios de análisis correspondientes a Lighthouse, SEO y validación W3C, que son parámetros básicos al momento de realizar un análisis web. Posteriormente puede encontrar las respuestas a las preguntas realizadas en el instructivo y al final la captura y el link a la maqueta de la propuesta de protipo para la sección de Coordinadores de Transformacion Digital.

Análisis

Lighthouse

Según Lighthouse, el servicio de análisis integrado en la consola de chrome, a nivel general puedo destacar los siguiente:

Rendimiento

  • La carga de la página es de alrededor de 3 segundos.
  • Se recomienda la compresión de los recursos CSS y JS.
  • Cambiar el formato de imágenes a webp, para agilizar la carga.

Accesibilidad

  • Las imágenes no tienen el atributo ALT.
  • La sección "Líneas de Acción" y "Cifras Destacadas" no es considerada en la navegación la tecla TAB.
  • Algunos textos no tienen el contraste adecuado.
Análisis de Lighthouse completo

Validación W3C

La validación W3C, nos entrega información correspondiente a la construcción de una web, según los estándares actuales https://validator.w3.org/. Tambien es importante para la implementación de las normas de accesibilidad de SENADIS.

De acuerdo a este parámetro, los resultados entregados corresponden a:

  • Errores: 21
  • Advertencias: 4

SEO

La manera de organizar los contenidos principales, facilita que los navegadores encuentren el contenido.

La estructura de ese contenido se puede determinar facilmente ocupando el plugin de chrome HTML5 Outliner. Comparto en la siguiente captura el resultado.

Preguntas

1. ¿Qué técnica o etapa de UX utilizarías para la mejora del homepage?

A nivel general, comenzaría definiendo la metodología de Design Thinking, la cual permite posicionarse en cualquiera de sus etapas (Empatía, Definición, Ideación, Prototipado y Testeo) y aplicar test que permitan definir la hipótesis a desarrollar para la mejora del home. Para empezar a definir el problema, en primer orden consideraría las etapas de empatía y definición.

En la etapa de empatía, consideraría recopilar la información existente, por ejemplo las métricas que entrega google analytics respecto al comportamiento del usuario en el sitio y conversar con los diseñadores, programadores y stakeholders vinculados al proyecto para obtener feedback. También analizaría la arquitectura de información para comprobar si la distribución de los ítems y contenidos principales es lo suficientemente comprensible para el usuario, en lo que a navegación general se refiere.

En la etapa de definición, considero relevante aplicar la técnica de User Persona y los respectivos User Flow para establecer un usuario y la manera en que este se relaciona con la distribución de la información contenida en el sitio.

Considero que con esta información, se podría definir cuales son los elementos principales para incluir en el home, para posteriormente desarrollar un prototipo y someterlo a testeo.

2. ¿Con qué herramientas tecnológicas te apoyarías?

  • Recopilación de Información: Google Analytics y Drive.
  • Arquitectura de Información: Card Sorting y Tree Testing en la plataforma Maze.
  • User Persona y User Flow: Figjam.
  • Wireframe y Prototipo: Figma y Visual Studio.

Prototipo

Para el desarrollo del prototipo considere el plugin de jquery circliful, el cual permite una visualización interactiva de los datos proporcionados en la página y en conjunto con la data tabulada, permite una visualización concreta de la data expuesta, aunque en algunos casos hubiese sido de gran ayuda la comparación de la data contra el total para lograr una expresión porcentual mucho más acertada.

También al final se agregó el botón de descarga del archivo excel de esa información para cuando el usuario requiera ese formato.

Se comprimió el ancho de los textos, para cumplir con la premisa de UX, la cual recomienda que los párrafos tengan entre 40 y 70 caracteres.

Link al Prototipo