Jon Parro

Ayer vi la nueva web que ha estrenado la Real Sociedad y aunque tiene cosas que mejoran la versión anterior, en ésta se siguen cometiendo importantes errores de usabilidad.

No pretendo hacer un análisis exhaustivo de toda la web, pero sí me voy a centrar en la página de inicio.

No pongas barreras al contenido
Han optado por una página de inicio que sólo sirve de paso intermedio para llegar a otras secciones de la web, esto no significa otra cosa que poner barreras entre el usuario y los contenidos. Es una página que se podía haber evitado totalmente, ocupando su lugar esta otra http://www.realsociedad.com/Home/Index.
Ya que esta 2ª página es la que realmente muestra información relevante sobre el club y además en ella tienen cabida todas las secciones que están en la página de inicio: tienda, próximo partido, entradas, cambio de idioma,…

Partiendo de esto, aquí se debería acabar toda historia, pero puestos a analizar esta página, vamos a seguir.

Focos de atención
Desconozco la estrategia de marketing online de la Real Sociedad y cuál es su objetivo con esta web pero voy a suponer que para los dirigentes del club es importante que los socios sigan el día a día de su equipo. Sin embargo, la imagen que están transmitiendo con ese diseño es que lo que ellos llaman en la página de inicio como “Entrar Web oficial” tiene bastante poca importancia para el club, ya que se trata de un diseño con múltiples focos de atención, llevándose el protagonismo la fotografía de un jugador de la Real Sociedad y las 4 secciones inferiores: Tienda, Próximo partido, Entradas y Real Sociedad TV.

Una vez que se accede a esta página de inicio, al usuario le cuesta bastante tiempo saber cómo acceder al contenido del club. Alguien me dirá que realmente toda la fotografía es un enlace a la “web oficial” y que se trata de un área suficientemente extensa, sin embargo aquí el problema no es de tamaño sino de focos de atención. Por una parte la fotografía tiene su foco en el futbolista y por otra el texto “Entrar Web Oficial” queda totalmente difuminado por la importancia de la fotografía y en parte por encontrarse situado justo debajo del escudo, lugar adecuado para poner el nombre del club “Real Sociedad”, lo que hace que pase desapercibido para el usuario.

Diferenciar enlaces
No están bien diferenciadas las distintas secciones y sus enlaces, prácticamente el 90% de la página de inicio es enlazable y todo ello parece ser un único enlace, sin espacio entre secciones que las diferencie claramente.

No dispone de un diseño que comunique visualmente cuáles son las áreas clicables, algo que se puede representar fácilmente bien mediante enlaces de texto estándar o bien mediante efectos gráficos que otorguen a las distintas secciones un aspecto pulsable.

Me he animado a escribir este post porque en ocasiones me suelen preguntar cómo pueden empezar a aprender sobre usabilidad y experiencia de usuario. Eso unido a que cada vez veo más humo y gente que se las da de gurú sin tener ni idea, he creído conveniente hacer una lista de gente competente, interesante y de la que realmente se puede aprender mucho.

Blogs:

• Yusef Hassan
• Cesar García
• Francisco Tosete
• Olga Revilla
• Luis Villa
• Juan Leal
• Daniel Torres Burriel
• Joaquín Márquez
• Olga Carreras
• Ricardo Tayar
• Sergio Ortega

Twitter:

• @Usabilidoso
• @karinai
• @tentandote
• @galu
• @yusef
• @maxkuri
• @inquiettudes
• @sortega
• @eeeh
• @elclerigo
• @pablolopez_eu
• @sergiodelacasa
• @nosoy1mas
• @soymarios
• También podéis seguir la lista UX-Spanish

Al diseñar un formulario una de las primeras cuestiones importantes a tener en cuenta es la alineación de los label y los campos. A continuación voy a comentar las ventajas y desventajas de los distintos tipos de alineaciones.

1. Horizontal, label alineados a la izquierda.

La excesiva distancia entre un label y su campo correspondiente dificulta su relación y ralentiza la lectura, siendo esto un pequeño inconveniente. Sin embargo, a su vez esto puede resultar interesante para formularios con datos con los que el usuario no está familiarizado, ya que se le obliga a prestar mayor atención.

La alineación a la izquierda de los label permite predecir al usuario fácilmente dónde comienza el siguiente label, facilitando la lectura vertical.

2. Horizontal, label alineados a la derecha.

Mayor facilidad para relacionar label y su campo correspondiente gracias a estar ambos más juntos. De esta manera el formulario se rellena con mayor rapidez.

Se dificulta la lectura vertical debido a las diferentes longitudes de los label y que el usuario tiene que forzar la vista para ver dónde comienza el siguiente label.

3. Alineación vertical.

Al encontrarse label y su campo correspondiente muy juntos y en el mismo eje de visión, el usuario puede rellenar el campo prácticamente al mismo tiempo que lee el label, por lo tanto reduce el tiempo necesario para completar el formulario. Esto se acentúa si los datos a rellenar son fáciles y familiares para el usuario, en dónde casi no necesita pararse a leer los label.

En la parte negativa, está el hecho de que se necesita más espacio vertical.

En las alineaciones verticales es necesario jugar con los espacios, separando correctamente un label y su campo, del siguiente label.

A día de hoy se siguen viendo páginas de error 404 poco usables o útiles para las personas. La clave para diseñar correctamente una página de error 404 está precisamente en la palabra persona.

Las páginas de error 404 se  producen por llegar a una página que no existe en nuestra web, posiblemente porque el usuario ha llegado desde un enlace incorrecto (interno o externo) o bien porque el mismo usuario ha escrito mal la URL. En cualquier caso hay que personalizar esta página y proporcionar una alternativa al usuario para salir de ella.

Cuando en el primer párrafo decía que clave estaba en la palabra persona, me refería a que hay que hacer páginas de error 404 útiles y usables para las personas. Con ese objetivo doy las siguiente recomendaciones:

1. Haz que el usuario entienda lo que ha pasado.
   Utiliza un lenguaje claro y sencillo, el usuario no sabe que el error se llama 404, ni lo sabe ni le importa, así que simplemente indícale que la página que buscaba no existe, sin tecnicismos.
2. Ofrécele alternativas.
   El usuario ya sabe qué ha ocurrido un problema, ahora hay que darle soluciones. Puedes incluir un enlace a la página principal, al mapa web y ponerle una caja de búsqueda para que busque la información que necesite. Si lo ves necesario, incluso le puedes ofrecer enlaces a las 2-3 secciones más visitadas de tu web. También es interesante incluir un enlace al formulario de contacto.
3. Haz tu página 404 sencilla.
   Muesta los mensajes de forma breve y clara, no incluyas demasiada información ni diseño gráfico sin sentido, simplemente utiliza la página para explicar el problema y llevarle rápidamente a otra sección de tu web.

Aunque tu página 404 sea muy usable, siempre es mejor que el usuario no llegue a estas páginas, ya que dan mala imagen, así que en la medida de lo posible corrige los errores.

Es posible que los errores 404 lleguen en muchas ocasiones de un mismo enlace o por alguna página que ya no exista, en esos casos podemos corregir ese error. Para ello tenemos que seguir pautas de errores mediante nuestro servicio de analítica web. Por ejemplo, si descubrimos que tenemos un enlace interno mal puesto lo podemos corregir sin probemas, o si existe un enlace externo mal puesto a una página nuestra, podemos hacer una redirección 301 a la página correcta.