Ejercicio interactivo: Candidatos y porcentajes en mapa; según votación y con HTML, CSS y JS

Resultado de elecciones Ecuador 2023 | Mapa y candidatos

Este breve proyecto interactivo expone qué provincias tuvieron picos de votación en rangos de porcentajes definidos, a partir de 8 candidatos presidenciables en las elecciones del 20 de agosto del 2023.

Como agregado dejo aquí un análisis en cuanto al desafío de componer elementos interactivos en pantallas que podrían cambiar (a decisión del usuario final) a un estado dual (verticalidad y horizontalidad).

Definir elementos interactivos

Además de los datos, la composiciòn de los elementos y la gama de colores (absolutamente informativos, dejando a un lado lo accesorio) es clave definir para el usuario qué elementos permiten interacción; es decir, cuáles son 'cliqueables' y cuáles no; esto, para evitar que el usuario "se sienta forzado a rebuscar (interacción) entre los elementos web". Un comportamiento que se podría definir como 'clic aleatorio'.

Como base de apoyo tomé el artículo Beyond Blue Links: Making Clickable Elements Recognizable, de Hoa Loranger, en el sitio NN/g Nielsen Norman G., cuyos artículos estudian a fondo la interacción humano-pantallas.

Pistas perceptivas físicas o significantes

Son indicadores visuales usados en diseño de interface para comunicar que 'al tocar aquí, algo sucederá'. Se recomienda en lo posible usar más de una convención para una sola gama de elementos cliqueables; pero siempre que se atienda a variables como el tipo de soporte cliqueable (puntero de mouse o dedo), el tipo de usuario, entre otros.

En resumen, usar estas convenciones y probar su eficacia nos permiten reducir la incertidumbre del usuario (sea ocasional o frecuente) para detectar qué elementos permiten interacción. Estas convenciones generales son:

• Formato de línea inferior para vínculos
• Texto de color diferente (común en azul) Los textos incluso en los íconos reducen la ambigüedad de los elementos interactivos.
• Formas rectangulares alrededor de la información cliqueable
• Formas rectangulares con colores planos. Sin embargo, abusar de eso podría confundir al usuario al adivinar cuáles de esas formas son cliqueables.
• Comportamientos visibles activados como un color resaltado al paso del cursor encima del botón.
• Indicadores visuales que den un estado de volumen preclic al elemento
• Indicadores textuales: 'Presiona aquí', 'Ir a', 'Contáctanos' (el lenguaje es un fuerte indicador de interacción debido a que tiene mejor recordación que un elemento visual que intente significar lo mismo).
• Indicadores de color: los elementos cliqueables tienen un color diferente de los que no son cliqueables.
• Ser consistente con todas las convenciones usadas. Es decir, mantener el estilo usado para los elementos interactivos a lo largo del sitio web o de la aplicación.
• En imágenes y gráficos: agregar comportamientos post click a las imágenes para aumentar la probabilidad que sea considerado como cliqueable. También ayuda combinarlos con otras convenciones, como formas rectangulares o texto subrayado.