Thread by @SeGo

1/24 Hilo: Seguridad Social - Página de la Administración cc @info_TGSS @empleogob #FrontEndReviews

2/ No quiero centrarme en errores garrafales como que, en pleno 2018, esta web no sea responsive ni disponga de una versión para móvil

3/ También obviaré cuestiones de seguridad y de arquitectura web como:
- La web no tiene certificado de seguridad ⚠️
- URLs extremadamente largas, con IDs y sufijos que las hacen totalmente imposibles de recordar
- Casi todas acabadas en /index.htm

4/ Tampoco quiero entrar en la polémica de los presupuestos millonarios que se manejan en este tipo de páginas.

5/ Así que me centraré exclusivamente en la UI, errores de maquetación e intentar, en la medida de lo posible, aportar "tips" para mejorarla

6/ Logos:
Visual: el del Ministerio es 1px más alto que el de la SS #drama
Accesibilidad: el del M. tiene title, el de la SS no
Usabilidad: la costumbre hace que pienses que la "home" es el logo del M., mientras que es el de la SS

7/ Enlaces cabecera
El bloque de enlaces de la cabecera, además de estar maquetados sin ningún criterio claro, dan para un análisis por separado:

8/ Mapa web
- Maquetación del contenido a dos columnas, dejando mucha área sin aprovechar.
- La categoría "Lo más visitado" se pierde en medio del gran contenido, sin otorgarle más importancia.
- Los enlaces no tienen ninguna interacción al pasar por encima de ellos.

9/ Ayuda
- La imagen de fondo del título tapa la imagen de fondo de la web :/
- ¿En serio es necesario explicar la estructura de la web? Año 2018
- Hay perlas como "páginas diseñadas para un monitor con la resolución de 800 por 600 pixels o mayor, y con 256 colores". Año 2018

10/ Accesibilidad
Según sus desarrolladores, la web cumple doble A y dicen estar trabajando para cumplir la triple A. Sin embargo, yo no he conseguido poder navegar por la web con los atajos de teclado que indican en esta sección

11/ Info lingüística + idiomas
Al revisar el funcionamiento del selector de idiomas he comprobado que el "Internet_1" de la URL hace referencia al idioma, siendo "Internet_2" para catalán, por ejemplo

12/ Info lingüística + idiomas
También he comprobado la especificidad y el uso de IDs en el CSS, aunque del CSS ya hablaré más tarde...
@carmenansio y @ladybenko , no miréis directamente esta captura:

13/ Buscador
En lugar de usar el atributo "placeholder" en la caja de búsqueda (supongo que lo hacen para dar soporte a IE8 y 9), hacen esta chapuza que hacía como 10 años que no veía:

14/ Menú
Obviando el (mal) diseño y centrándonos en la maquetación, el fondo de dos tonos azulados y gris del menú principal, está hecho con dos imágenes que miden 1500x42px y 979x29px, respectivamente, cuando se podría haber hecho con una línea de CSS

15/ Título Seguridad Social
Esta es buena... el título es una imagen:
- No es texto maquetado.
- No es indexable por buscadores.
- No es traducible...

16/ Imágenes baja calidad
Toda la home pesa 432Kb, es decir, es muy ligera y tiene imágenes muy pequeñas que, en su totalidad, se ven mal en un monitor retina. Se podrían sustituir los logos por SVGs para ganar en calidad y reducir aún más los pesos

17/ Bloque izquierda
Falta de coherencia, mezclan:
- 3 bloques de contenido interno (Trabajadores, Pensionistas y Empresarios)
- Imagen de la Admón. Electrónica, sin enlace a ningún sitio
- Revistas de la SS, con enlaces externos
- Portal de la Transparencia, con enlace externo

18/ Bloque central
- Usabilidad: tabs (pestañas) con cambio de URL
- Tamaño de texto demasiado pequeño y, al ser todo enlace subrayado, no es legible
- El enlace "Más novedades" no tiene ninguna interacción
- Los logos de abajo no se ven correctamente

19/ Bloque derecha
Falta de coherencia:
- 1 enlaza a "Tu SS", en pestaña nueva
- 4 enlazan a secciones de la Sede Electrónica, en pestaña nueva
- 1 enlaza a una sección interna de la SS

20/ Footer
Viaje en el tiempo, cosas que ya cuesta encontrarse:
- Espaciados mínimos
- Enlace a las RSS, la mayoría de sus fuente no se actualizan desde hace casi 5 años
- Logos de validación de la W3C, que no cumplen en su totalidad

21/ ¿Cosa del pasado?
Por su estética pensaréis que esta web lleva años sin tocarse, pero mi sorpresa ha sido mayúscula al ver este comentario en el CSS

22/ Conclusiones
He comprobado que durante 2016-17 se han ido desarrollando nuevas webs para los distintos servicios de la SS, lo que no entiendo es que se siga conservando la página matriz y, lo que es peor, en este estado

23/ Conc. / Requisitos
Requisitos que deberían cumplir páginas de la Administración:
- Segura
- Buen buscador
- Accesible
- Concisa
- Sin distracciones
- Velocidad de carga
Si hay una que reúna todo esto es gov.uk @GOVUK (@aarongarciah gracias por el apunte)

24/ Conc. / Queda trabajo por hacer...
En España creo que la única que cumple esos requisitos es la del Gobierno Vasco @Gob_eus Espero estar aportando mi pequeño granito de arena con estas #FrontEndReviews // FIN.