Ejercicio interactivo: Candidatos y porcentajes en mapa; según votación y con HTML, CSS y JS
Por Eduardo Romero
| Guayaquil
#interacciónWeb, #infografía, #Guayaquil
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.
En cuanto a código, los siguientes conceptos fueron útiles:
<text x="10" y="40" class="nombre"> texto </text>
.padre .hijo{ color: red; }
let color = getComputedStyle (document . documentElement) . getPropertyValue('--propiedad-color');
elementoSVG.style.filter = "red";
.clase1:hover,
.clase2:hover,
.clase3:hover{
color: white;
}
AUTO CRÍTICA
El color de los porcentajes podría indicar confusamente que son interactivos.
En una pantalla pequeña el tamaño de las fotos ocupa más espacio que el mapa. Eso obligaría a deslizarla para ver el el resto de datos.
Para elementos que deberán comportarse como módulos dinámicos (cambiarán de ubicación según el ancho y alto del navegador) o que estarán insertos en medio de otros elementos en una página web, es un error diagramarlos desde solamente las propiedades CSS de posición, ajuste de ancho o incluso con @media querys
. Las reglas CSS de display:grid; y especialmente de grid-template-areas funcionan mucho mejor para recolocar elementos sin afectar la ubicación de otros. De esto último hice una extensa reseña hace poco.
ELECCIONES ECUADOR 2023
Candidatos presidenciales | Primera vuelta
Yaku
Pérez
LISTA 2-17-20
Daniel
Noboa
LISTA 4-35
Luisa
González
LISTA 5
Jan
Topic
LISTA 6-3-1
Otto
Sonnenholzner
LISTA 8-23
Bolívar
Armijos
LISTA 16
Fernando
Villavicencio
LISTA 25
Xavier
Hervas
LISTA 33
El candidato Fernando Villavicencio Valencia (1963-2023) fue asesinado por sicarios en Quito, el 9 de agosto; catorce días antes de estas elecciones. Su reemplazo en la lista fue el periodista quiteño Christian Zurita.
Porcentajes (%) de votación nacional obtenidos por provincia y por cada presidencial.
0 a 10
10 a 20
20 a 30
30 a 40
40 a 50