Los Antonios ya no van en tren.

En la web de renfe, que es la peor web que cualquiera se puede echar a la cara, si entras desde Os X y Chrome (como mínimo, no sé si desde alguno más), en el campo de “titular de la tarjeta” a la hora de pagar, no puedes escribir la letra “t minúscula”. Probadlo, no miento.

No tengo mucha idea de programación, pero ¿esto ha tenido que hacerlo alguien, no? Quiero decir que las “t minúscula” por defecto, ¿funcionan, no?

Como no todo va a ser criticar, les propongo un rediseño:

¿Y tú? ¿Cual es el bug más divertido que has encontrado en la web de renfe?

Actualización [16:50]: Félix ha solucionado el misterio en los comentarios.

Actualización 2 [17:13]: Ale me pasa este rediseño alternativo, mucho mejor que el anterior, más info aquí.

Actualización 3 [19:35]: Denegro también pone su grano de arena, es una revisión “por si no saben cómo hacer las anteriores”

Relacionados:

  • Una de estadísticas

    Fuentes: Wikipedia y Pitchfork. No se tienen en cuenta los recopilatorios ni los recientemente editados "Archivos" pero sí los discos con...

  • Gráficas y prensa online

    Las gráficas de la prensa online son una de esas cosas que, sobre todo si eres diseñador, molan tela. Por lo general solían ser ejercicios de...

  • Packaging y la Leica X1

    No me compraría una Leica X1 ni harto de vino. Por lo que Leica pide por esa compacta, te puedes hacer con cámaras francamente buenas. Aunque en...

Apostando!

Uno de los ejemplos más claros de mal diseño de interacción.

Si eres capaz de identificar todos los enlaces del cuadro de login de hotmail de un simple vistazo, premio para ti. Apenas 400×300 píxeles dan para mucho.

Algunas pistas para ayudarte en el camino son:

1. Que sea azul no quiere decir que sea un enlace.
2. Aunque puede que sí.
3. Si parece texto plano seguramente será un enlace.
4. No, no hay nada subrayado.

Y ya que va de apostar, me apuesto lo que quieras a que ningún usuario de hotmail ha hecho click en “Utilizar seguridad mejorada” en su vida (Sí, eso es un link). ¿Qué quiere decir “seguridad mejorada”? ¿Que si inicio sesión normal será menos seguro? ¿Por qué no tengo “seguridad mejorada ” en Gmail?

Y la guinda la pone pedir el “Windows Live ID”, no el mail, no el nombre de usuario ¡El Windows Live ID!, ni más ni menos. Menos mal que lo explican más arriba (Sí, en eso en azul no hay un sólo enlace).

Relacionados:

  • When is Good

    When is Good es una de esas ideas sencillas y efectivas que pueden hacerte la vida mucho más fácil. En este caso, a la hora de planear una...

  • Visual Interfaces should…

    Estoy leyendo About Face 3, de Alan Cooper. Un libro imprescindible para entender el diseño de interacción más bestia que se sostiene...

  • Diseñando formularios

    "Web Form Design: Filling In the Blanks" es un recomendable libro sobre el diseño de formularios. Luke Wroblewski analiza, de manera más o menos...

Testeando accesibilidad

Si generas contenido en internet, es casi imprescindible que te manejes bien en terminos de accesibilidad. Si crear buen contenido es una experiencia gratificante, más lo es que este contenido sea accesible para personas con discapacidad.

Hay muchas herramientas para testear la accesibilidad de tu página, la principal quizás sea el Test de Accesibilidad Web (TAW), que genera una vista de tu página con los puntos que presentan conflicto con el nivel de accesibilidad web escogido.

Los resultados del TAW se muestran en dos grupos, los automáticos y los manuales. A grandes rasgos, los resultados automáticos son incontestables: presentan conflictos de accesibilidad que deberías corregir si deseas obtener el nivel que has marcado. Los resultados manuales son aquellos que necesitarás revisar tú mismo y, en muchos casos, no son errores de accesibilidad, sino avisos del tipo “revisa que esto esté cerca de esto otro, que yo no lo puedo hacer por ti”. Generalmente, si no tienes ningún error en los resultados automáticos, tu site es muy accesible.

Este blog, por ejemplo, no tiene ningún error de accesibilidad en la categoría AAA reflejado en las alertas automáticas. Hay sin embargo muchas concesiones al diseño en lo que a los resultados manuales se refiere. Por ejemplo, los links contiguos presentan problemas de accesibilidad. Sin embargo el test salta con esa alerta en la nube de tags de la barra lateral, lugar en el que, en realidad, los enlaces están bien diferenciados.

Otra herramienta muy útil es Vischeck, que te muestra tu site del modo en el que lo verían personas con diferentes discapacidades visuales. Siempre es buena idea revisar los colores de los enlaces y elementos gráficos principales.

También puede interesarte el CSS Analyser, de Juicy Studio, que analiza tu CSS en busca de relaciones de color poco claras y otros problemas de accesibilidad.

Por último, una correcta maquetación del texto es fundamental. Buscar un ancho de línea óptimo, un tamaño de letra generoso y un interlineado cómodo son las premisas fundamentales. Hay cientos de recursos sobre cómo manejar la tipografía en pantalla, seguro que dará para otro post. Una herramienta que me gusta mucho a la hora de maquetar texto es Typetester, de Marko Dugonji. Con esta herramienta podrás probar diferentes combinaciones para tu caja de texto y descargar la CSS que más se adapte a tus necesidades.

Recursos
Si quieres profundizar más en el tema, Whdb.com publicó un genial post hace unos días sobre 100 recursos fundamentales de accesibilidad.

Relacionados:

  • Apostando!

    Uno de los ejemplos más claros de mal diseño de interacción. Si eres capaz de identificar todos los enlaces del cuadro de login de hotmail...

  • When is Good

    When is Good es una de esas ideas sencillas y efectivas que pueden hacerte la vida mucho más fácil. En este caso, a la hora de planear una...

  • Visual Interfaces should…

    Estoy leyendo About Face 3, de Alan Cooper. Un libro imprescindible para entender el diseño de interacción más bestia que se sostiene...