Especialización en Ingeniería de Software
Dirección y Gestión de Proyectos de Software
Actividad 1: Laboratorio: Evaluación Heurística
ESTUDIANTE: Juan Carlos Muñoz Castañeda
ABRIL 2024
pg. 1
TABLA DE CONTENIDO
1 INTRODUCCION.................................................................................................................................... 3
2 VISIBILIDAD Y ORIENTACION INMEDIATA.............................................................................................. 5
3 CONTROL Y LIBERTAD DEL USUARIO..................................................................................................... 8
4 CONSISTENCIA Y ESTANDARES............................................................................................................ 12
5 CONCLUSIONES.................................................................................................................................. 17
6 BIBLIOGRAFIA..................................................................................................................................... 17
pg. 2
1 INTRODUCCION
Dentro del desarrollo diseño de interfaces digitales referidas a la construcción de páginas
WEB, en donde en páginas modernas cuya dinamicidad (Frontend o Lado del Cliente) y
Consistencia (Backend o lado del Servidor), la evaluación heurística emerge como una
herramienta para medir y garantizar la calidad y eficacia de la usabilidad y la experiencia del
usuario, Esta técnica, desarrollada por Jakob Nielsen en la década de 1990. (Guimaraes,
2022)
Esta metodología de evaluación permite identificar posibles inconsistencias y áreas de
mejora en un sistema antes de que estos impactan de forma negativa a la experiencia del
usuario final.
Entre los principios clave que guían la evaluación heurística se encuentran:
1. La visibilidad y orientación inmediatas: buscan garantizar que la interfaz sea
clara y fácil de entender desde el primer contacto.
2. Control y libertad del usuario: fundamental para empoderar al usuario y
permitirle navegar por el sistema de manera fluida y sin restricciones
innecesarias.
3. Consistencia y estándares: los cuales juegan un papel crucial en la creación de
una experiencia predecible, donde los usuarios puedan anticipar el
comportamiento de la interfaz en diferentes contextos.
Según Nieksen y su metodología existen mas principios que no se trabajaran en esta
actividad pero se enumeran a continuación:
4. Prevención de errores: evitando que los usuarios se encuentren con
obstáculos que puedan frustrar su experiencia.
5. Eficacia de los mensajes de error: permite brindar retroalimentación clara y
útil en caso de que los usuarios se desvíen del camino previsto.
6. Coincidencia entre el sistema y el mundo real: El diseño debe hablar el
lenguaje de los usuarios y seguir convenciones del mundo real.
7. Reconocimiento antes que recuerdo: Los usuarios no deberían tener que
recordar información de una parte del sistema a otra; la información relevante
debe ser visible.
8. Flexibilidad y eficiencia de uso: El diseño debe permitir a los usuarios realizar
acciones de manera rápida y eficiente, especialmente para usuarios expertos.
9. Estética y diseño minimalista: Los elementos visuales deben ser estéticamente
agradables y no sobrecargar al usuario con información innecesaria.
pg. 3
10. Ayuda y documentación: Cuando sea necesario, el sistema debe proporcionar
ayuda y documentación que sea fácil de encontrar, entender y utilizar.
En conjunto, estos principios conforman un marco sólido para evaluar la usabilidad de una
interfaz y garantizar que esta cumpla con las expectativas y necesidades de sus usuarios.
(Nieksen, 1994)
Para esta actividad se analizaran los principios que demanda la rubrica para la página de
DATOS ABIERTOS del Ministerio de Tecnologias de la Informacion y Comunicaciones de la
Republica de Colombia:
[Link] cuya fecha de consulta es el 27 de Abril de 2024.
Como se menciono anteriormente , en esta actividad se nos centraremos solo en los tres
primeros principios usando como guía el material adjunto con la actividad, la cual desarrolla
cada principio enfocándose en preguntas especificas que debe ser respondidas mientras se
navega por el sitio.
Los principios en su orden son:
pg. 4
2 VISIBILIDAD Y ORIENTACION INMEDIATA
2.1 La página incluye de manera visible el título del sitio, de la sección, el título de la
página o del paso (en un proceso)
La página en evaluación no tiene
un titulo especifico, si bien
podemos ver el mensaje de
bienvenida en donde nos indica de
lo que se trata la plataforma.
Este mensaje de bienvenida no es
fijo sino esta en una sección dentro
de un carrusel de imágenes.
Ilustración 1 Front Page
Como propuesta de mejora, el titulo de la página. Debería estar en el lado Superior de la
página (Zona Azul) el cual tiene bastante espacio, ya que la bienvenida cambia por un nuevo
mensaje al estar dentro del carrusel de imágenes.
2.2 Existe un track o indicación de la ruta de la página (migas de pan, breadcrumb, hilo de
Ariadna) en la estructura de la información del sitio
Al navegar entre páginas no existe alguna forma
de saber en que sección se esta o la jerarquía
desde la página de inicio, para el ejemplo nos
encontramos en la página de novedades y el link
cambia totalmente de ruta:
[Link]
Ilustración 2 Vista Novedades
Como propuesta de mejora incluir la respectiva jerarquía entre vistas con el fin de hacer mas
amigable la navegación adicionalmente este tipo de practicas mejora el SEO. (SemrushTeam,
2023)
Ejm: Home / Novedades. ------ Inicio / datos geográficos / buscador
pg. 5
2.3 En caso de que sea un proceso, se indica el número de paso del proceso y los pasos
restantes.
La página no posee procesos a simple vista, existe una vista llamada “Publica” cuya url es
[Link] , pero la página se encuentra caída, lo que no
permite realizar esta medición.
2.4 Los vínculos están claramente identificados
Ilustración 3 Vinculos
La página posee los vínculos clsicos de una barra de navegación , y algunas secciones en la
cuales se puede hacer click y ser regirigido la sección correspondiente, esta ultima parte no
es intuitiva, se reconoce una vez se realiza el mouse Over sobre el vinculo
Como propuesta de mejora se debería algún elemento tipo botón que me indique que esta
sección es posible navegarla con solo ver los menus.
2.5 Existe un buscador y funciona de manera efectiva
Existe un buscador clásico con inclusión de
coincidencia mediante es tipeado el criterio
de búsqueda.
Como mejora debería tener un buscador
mas desarrollado que permita filtrar el tipo
información que deseo buscar.
pg. 6
Ilustración 4 Buscador
2.6 No existe información u acciones ocultas que requieran de una acción para su
visualización
Entendiendo la pregunta indica que todos los elementos importantes deben ser visibles de
manera clara y directa, sin requerir que el usuario realice ninguna acción específica para
revelarlos.
En la página a evaluar, se debe navegar en diferentes partes o usar buscadores externos para
acceder o llegar a la información que como usuario requiero.
Si bien la página tienen una sección tipo tutorial , como propuesta de mejora la página
debería ser mas intencional desde su página de inicio en la forma de acceder a los datos ya
que es el objetivo principal de la misma.
2.7 El fedback informa cuando una acción está en proceso o cuando una acción ha sido
realizada con éxito.
Ilustración 5 Página no Encontrada
Mas allá del error tipo de no acceso a una vista o página , no existe ningún tipo de feedback
que me permita saber el estado o la finalización del mismo. Si la consulta es exitosa arroja los
resultados y sino el mensaje 404 o de no vinculo.
3 CONTROL Y LIBERTAD DEL USUARIO
3.1 El registro de usuario, si existe, solo es necesario al finalizar un proceso y se puede
obtener la mayor parte de la funcionalidad del sitio sin necesidad de registrarse
Ilustración 6 Perfil usuario registrado
pg. 7
La página posee una sección de registro , pero no he encontrado la diferencia entre estar
registrado o no.
El proceso de búsqueda y descarga de datos funciona de la misma manera de manera
anónima o con usuario registrado, se podría entender que como usuario registrado se podría
publicar análisis a partir de la información existente , pero la publicación no esta permitida.
3.2 Es posible deshacer una acción siempre que sea una opción funcional y operativa. En
caso de ser un proceso de varios pasos, es posible volver a un paso anterior del proceso
para modificarlo.
Ilustración 7 Navegacion
Al página no permite procesos de edición por lo que los únicos controles de retroceso son los
que posee el navegador, ya que la página implementados los propios.
Como propuesta de mejora ya que se trata de datos abiertos , se permita la creación de
Dashboard manipulando la información existe de consulta y permita la inclusión de estos
controles.
3.3 Existe una salida de la página, del proceso o de la estructura de información:
desconectar, cancelar, inicio, etc.
Ilustración 8 Cerrar Sesión
Existe la típica opción de cerrar sesión pero como se indico anteriormente, no se encontro la
diferencia entre estar registrado y no.
Como propuesta de mejora, indicar en la página de inicio los beneficios y funcionalidades
adicionalmente que se tendrán los usuarios registrados.
3.4 No se inician de manera automática acciones que el usuario no ha ordenado
explícitamente
La página no muestra Side-Effects o efectos colaterales como resultado de la navegación, al
menos no se ven a simple vista.
pg. 8
3.5 No se utilizan animaciones no controladas por el usuario
Ilustración 9 Carrusel página de inicio
La página posee pocas animaciones, la única vista es la página de inicio con un carrusel el
cual debe ser manipulado por el usuario.
Como propuesta de mejora, la página debería tener mejor dinamicidad, ya que es bastante
estática la navegación lo que la hace poco intuitiva.
3.6 Es posible imprimir o guardar la información de la página web sin perder información.
Ilustración 10 Controles de Guardado
La página si posee controles de visualización y guardado adicionales a los del navegador.
Como propuesta de mejora, incluir esta herramienta en todas las vistas, ya que solo están en
algunas que están vinculadas con una presentación.
3.7 Es posible aumentar y disminuir el tamaño de la letra
Ilustración 11 Controles de Visualizacion
La página tambien posee controles de manejo de tamaño de fuente, asi como iluminación y
contraste.
pg. 9
Como propuesta de mejora, esta funcionalidad debería estar en todas las vistas, ya que solo
se encuentra en algunas vistas.
3.8 El sitio se visualiza perfectamente con diferentes resoluciones
La página fue desarrollada con animación responsive, por
lo cual se adapta a la resolución del dispositivo o al
tamaño de la ventana del navegador.
Ilustración 12 Responsive
3.9 La página Web no introduce tecnologías que
requieren versiones actualizadas de navegadores o
plugins externos
Ilustración 13 tecnologias de desarrollo
Usando una herramienta externa para identificar las tecnología de desarrollo usadas en la
implementación de la página web, se observa que esta desarrollada en PHP como backend y
pg. 10
en el frontend desarrollo en Javascript sin ningún framework (Vanilla Js) con plugins de
dinamicidad como Jquery y como manjeador de estilos se uso Bootstrap.
Todos los navegadores actuales soportan esas tecnologías.
4 CONSISTENCIA Y ESTANDARES
4.1 Las etiquetas de los vínculos tienen los mismos nombres que los títulos de las páginas
a las que se dirigen
Ilustración 14 Vistas de Ejemplo
pg. 11
Al revisar algunas vista y vínculos, encontramos que no todas son coincidentes con su
etiqueta, por ejemplo el vinculo ”novedades” coincide con el titulo de la página pero en
cambio la página de herramientas no tiene el mismo titulo de la etiqueta.
Como propuesta de mejora se debe estandarizar que las etiquetas y títulos de la vistas sean
coincidentes para hacer la navegación mas amigable e informativa.
4.2 Las mismas acciones llevan a los mismos resultados
Ilustración 15 Resultados de Busqueda
Revisando los resultados de una consulta especifica, la misma arroja los mismos resultados y
se verifico que están relacionados con el criterio de búsqueda.
4.3 Los mismos elementos son iguales en todo el sitio.
Ilustración 16 Elementos
Los botones, cuadros de texto, selectores tienen los mismos estilos.
pg. 12
4.4 La misma información (texto) se expresa de la misma forma en toda la página
Ilustración 17 Textos y fuentes
La página presenta homogeneidad en la fuente y tamaños de textos, pero pierde la
misma cuando las imágenes relacionadas poseen textos.
Como propuesta de mejora, la insitutcion debe tener un protocolo de marca en donde
se estandariszan los formatos análogos y digitales , bien sea para presentación,
informes e información digital, para que cuando se usen salidas externas como
imágenes, las mismas poseean el estándar en cuanto a textos y fuentes.
4.5 La información esta organizada y es mostrada de manera similar en cada página
pg. 13
Ilustración 18 Consultas
La información consultada en diferentes vistas, se muestran de forma diferente, por lo que
aquí se pierde la homogenidad de los resultados.
Como propuesta de mejora se debe estandarizar la muestra de resultados en todas las vistas
que requieran criterios.
4.6 La página utiliza los estándares (HTML, XHTML, CSS, etc.) de forma correcta
Para verificar este punto debemos recurrir a los estándares propuestos y compilados por
Consorcio World Wide Web (W3C), se usaron herramientas abiertas como (Resumen de los
estándares de accesibilidad de W3C, 2021):
[Link] para validación HTML
[Link] para validación CSS.
Una vez realizada la consulta para validación HTML , la misma muestra 209 registros que
mezclan entre errores, advertencias y reportes de no funcionalidad (info).
Para ampliar estas validadores se pueden consultar en :
[Link]
En cuanto a la validación CSS tenemos que la herramienta arrojo 85 errores y 648 warnings
que pueden ser consultados en :
[Link]
&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en
pg. 14
Como vemos la página por más de ser funcional , aun no paso algunos validadores y
estándares, por lo que como propuesta de mejora se deberían revisar las validaciones más
generar un despliegue mejor para la siguiente versión.
4.7 Se utilizan los colores estándares para los vínculos visitado y no visitados
Ilustración 19Vistas
En general la página mantiene la paleta de colores en sus elementos, igualmente al tratarse
de un portal institucional, también mantiene los colores institucionales vistos.
4.8 No utiliza de manera diferente a la norma convenciones o etiquetas universales
pg. 15
Ilustración 20 Convenciones
La página posee muy pocos iconos, etiquetas o convenciones , pero las existentes son
entendibles y vistas en otras páginas.
4.9 Las áreas de navegación superior, laterales, herramientas de búsqueda y controles
(botones, botones de radio, etc.) siguen los estándares comunes de mercado.
Como se puede observar en las ilustraciones o imágenes anteriores, las secciones o
elementos de navegación, controles, botones etc.… son bastante pocos, la página es bastante
estática y no posee el dinamismo que podemos ver en otras páginas.
Como Propuesta de mejora, se sugiere mejorar el desarrollo enfocado en una mayor
experiencia UX y crear mejores elementos con mayor dinamismo.
5 CONCLUSIONES
Realizando la actividad, se puede concluir que en el momento de desarrollo al seguir
principios reconocidos de usabilidad, se crea una experiencia más fluida y satisfactoria para
los usuarios. Esto se traduce en una mayor retención de usuarios, mayor tiempo de
interacción y una percepción positiva de la marca o producto. Igualmente se reduce curva de
pg. 16
aprendizaje y permite a los usuarios completar tareas de manera más eficiente desde el
primer momento.
Dentro del desarrollo de aplicaciones sin importar el entorno de desarrollo, debemos tener
en cuenta estos principios los cuales no solemos tener en cuenta en el proceso.
En conclusión, la adopción de estándares o principios de usabilidad, como los propuestos
por Nieksen, es fundamental para crear productos y servicios que sean intuitivos, eficientes y
satisfactorios para los usuarios. Al seguir estos principios, se pueden mejorar
significativamente la experiencia del usuario y obtener ventajas competitivas en un mercado
cada vez más centrado en el usuario (Cliente).
6 BIBLIOGRAFIA
Guimaraes, F. (2022, jun 29). Nielsen’s Heuristics: 10 Usability Principles To Improve UI
Design. From aela school: [Link]
usability-heuristics-ui-design/#:~:text=Nielsen's%20heuristics%20are%20general
%20principles,friendly%2C%20and%20intuitive%20digital%20products.
SemrushTeam. (2023, aug 22). Breadcrumbs: Tipos, Ventajas y Buenas Prácticas. From
Semrush Blog: [Link]
Resumen de los estándares de accesibilidad de W3C. (2021, Apr 30). From w3 org:
[Link]
Nieksen, J. (1994, Apr 24). 10 Usability Heuristics for User Interface Design. From Nieksen
Norman Group: [Link]
pg. 17
