Idiomas en la web

Muchas de las páginas web y miles de blogs y portales de todo el mundo están adaptando, cada vez más sus contenidos a múltiples idiomas. Esto supone, en la gran mayoría de los casos, tener que dedicar un espacio de nuestra cabecera y pié de página para añadir un menú, para que el usuario pueda seleccionar un idioma.

idiomasenlaweb

Hasta aquí, todo esta muy bien, pero visitando varias páginas web me encuentro con diferentes tipos de menú para mostrar las opciones de idioma, que paso a repasar y a dar mi opinión personal, desde el punto de vista de la usabilidad y la experiencia de usuario. Por que, quizás las que más se utilizan, no sean las más correctas:

¿Donde colocarlo?

Creo que depende mucho de como sea tu página. Las redes sociales, que disponen de una página principal, con login y sin apenas contenido, muestran todos (o al menos los más importantes) en una sola línea antes del pié de página. El problema que les encuentro es que (dejando a un lado Facebook), después (una vez accedes a las páginas interiores), es casi imposible localizar el menú de selección de idioma, por lo que hay que cerrar sesión y volver a entrar. P.e. Tuenti lo tiene muy bien solucionado.

En las páginas que disponen de más contenido en la home, creo que lo correcto es colocar el menú de idiomas, en la parte superior derecha de la página y si podemos acompañarlo de un símbolo para que se identifique correctamente, ayudará al usuario que ha accedido a nuestra web y no entiende nada.

¿Con bandera o sin bandera?

Muchos portales, colocan al lado del idioma la bandera correspondiente al país o la zona donde se habla. Creo que esta práctica, que afortunadamente, parece que empieza a desaparecer, no es correcta:

  • Las banderas “no son usables”. La gente (la gran mayoría) no conocen ni la bandera de su comunidad autónoma.
  • Las banderas no representan un idioma sino un lugar, un país, una comunidad, etc.
  • No es lógico (por poner un ejemplo) que mostremos la bandera de España para representar la lengua española, cuando en España se hablan múltiples lenguas oficiales, como el catalán, euskera o el gallego. Y después, si nuestra página ofrece alguno de estos, mostremos la bandera de la comunidad correspondiente.

¿Español o spanish?

Sobre esta parte más lingüística ya no tengo tanto conocimiento, pero se, por lo menos a nivel personal, que si encuentro en una página en inglés, la palabra “español” lo voy a identificar antes que “spanish”.

En resumen. Mis consejos para aplicar un menú de idioma en una web, habría que tener en cuenta los siguientes consejos:

  • Intenta que tu web se muestre en el idioma de navegación de tu usuario. Hoy en día puedes detectar desde que país esta accediendo un usuario o en el idioma que está navegando, por lo que intenta ofrecerle lo que está usando. Igualmente, aun que tu web se cargue según el idioma de usuario no ocultes el menú de idioma.
  • Utiliza diferentes dominios o subdominios por idioma: .es, .cat, .co.uk, .com, .de, .nl
  • No utilices banderas. Busca un icono parecido a un bocadillo de cómic o que se identifique fácilmente con el cambio de idioma.
  • Escribe el nombre del idioma en su idioma (p.e. español, català, english, etc.)
  • Si puedes, muestra los idiomas en la cabecera de la web.
  • Si traduces tu página web, !traduce tu web!… ¿que quiero decir? últimamente veo mucho, que algunas webs ofrecen varios idiomas y al pinchar te redirige a google translate o similar…

 

.

Background-color: #FFFFFF

Últimamente me estoy dando cuenta que está volviendo la moda de utilizar colores oscuros en los fondos de la web.

Varias de las páginas que consulto habitualmente o que “descubro” que han rediseñado su portal, y cotilleo para “ver que han hecho”, han cambiado su pulido y esterilizado “Background-color:#FFFFFF” por bonitos azules marinos, negros e incluso estampados multicolor.

Ahora yo me pregunto…

¿Hasta que punto afecta el color de fondo de una web?

Añadir un color de fondo oscuro o un motivo cargado en una web, puede resultar muy beneficioso para esta, ya que, si el trabajo esta bien hecho y mantiene una coherencia con la imagen de marca y el contenido de la página, podemos a realizar un trabajo mucho más memorable y atractivo para nuestro usuario, que con un fondo en blanco.

El problema viene, cuando la web tenga contenido, por lo que hay que plantearse dos aspectos mucho más importantes que la “memorabilidad” de nuestra web:

  • ¿De que color será el texto? Hay que definir un color de texto que contraste lo suficiente con el fondo de la página, para evitar problemas de accesibilidad, pero sobre todo de legibilidad del usuario final. También hay que tener en cuenta que si queremos diferenciar los títulos, subtítulos y párrafos, no solo por tamaño, si no también por estilo, tenemos que utilizar más de un color o fuente en nuestro texto.
  • ¿Como son las imágenes que se van a utilzar? Según el tamaño, la tonalidad o el efecto de imágenes y gráficos que vamos a utilizar en la web, tenemos que saber que un color oscuro debajo de una imagen, hará que esta pierda tonalidad y fuerza.

Como conclusión personal, pienso que la utilización de un fondo claro u oscuro, con motivos, degradados u otros aspectos gráficos no tendría que tratarse de una simple moda, si no de las necesidades de cada proyecto, valorando la identidad gráfica de nuestro proyecto y sobre todo su público general. Por lo que, sin ser un experto en la materia, ya que aún no he tenido la oportunidad de realizar un proyecto con estas características, me permito exponer unos cuantos conceptos que nos ayudarán a realizar un proyecto coherente y sin dificultades visuales o efectos indeseados:

El texto de la web:

  • No utilices tipografías con serifa (es decir, las famosas Timer New Romand, Garamond, etc.); mejor dicho, utiliza SIEMPRE tipografías de palo seco (Sans Serif), ya que mejorará la lectura de los textos.
  • No utilices cuerpos inferiores a 14px. Con un fondo blanco, podríamos llega a utilizar tipografías de palo seco con un cuerpo mínimo de 11px. pero al utilizarse “en negativo” no se visualizan correctamente.
  • En los párrafos utiliza un color de fuente lo suficientemente contrastado con el fondo, para que la lectura sea fácil y clara. Recuerda también ampliar el interlineado. El interlineado tiene que se igual o superior a la altura de la “x” de tu fuente.
  • Si quieres diferenciar los títulos, subtítulos y textos de tu web, no solo por tamaño de fuente, si no también por color, el título, que tiene un cuerpo de letra mucho mayor que el texto, tendría que ser más oscuro que este, y nunca a la inversa.

textos

Las imágenes de la web:

  • Utiliza siempre un marco en las fotos. Intenta que este sea lo más claro posible y de mínimo 2px. de grosor. De esta manera, evitarás que las fotos claras pierdan fuerza y que las más oscuras no lleguen a verse correctamente.
  • Si puedes evitarlo y tu proyecto no te lo exige, no utilices fotos en blanco y negro o con filtros de color.
  • Intenta que el tamaño de las imágenes sea grande y evita utilizar miniaturas.

fotos1

 

.

Del “efecto wow” a la facilidad de uso

Hace ya más de 9 meses que trabajo en el departamento de Usabilidad y experiencia de usuario de Toprural y, como en cualquier puesto de trabajo, cada día descubres y aprendes nuevas maneras de trabajar.

la-foto-300x224

Debido a mi formación de diseñador gráfico, había tenido mucha experiencia profesional en el diseño de páginas web y usabilidad enfocada a un punto mucho más “visual” que “útil” para el usuario. Aquí cada día que pasa descubro que hay que darle mucha más importancia a la facilidad de uso que pueda tener el usuario al entrar en nuestra página/herramienta/portal, que no a lo que yo denomino “efecto wow!”… ese estado que te atrapa cuando entras en una web en la que todo se mueve y convierte tu monitor en una especie de super producción de Hollywood, digna del mismísimo James Cameron… y a veces con banda sonora incluida.

El problema de esto es que la distracción de tu usuario es irremediable y te va a conducir al fracaso… si tienes una web con estas características tendrías que plantearte las siguientes preguntas:

  • ¿Es necesario tanto show en una web?
  • ¿Tu usuario llega a su destino? ¿encuentra lo que busca?
  • ¿Tu usuario tiene tiempo para ver todas las animaciones y bombardeos en forma de flash antes de encontrar lo que busca?

Como decía al principio, llegar a un equipo íntegro de experiencia de usuario, me ha hecho cambiar bastantes ideas que tenía marcadas a fuego en mi cabeza (quizás por deformación profesional). Si lo tuviera que definir con una fórmula sería la siguiente:

Diseño web + usabilidad = EXPERIENCIA DE USUARIO

Ahora, antes de empezar un proyecto realizo un protocolo de actuación que antes no había realizado nunca. De hecho, lo conocía pero lo ignoraba. Mantengo mi mentalidad de “grafista” pero ya empiezo a cruzar gráficos con los adjetivos fácil y útil. Y siempre sin olvidar los mandamientos de la experiencia de usuario.

Todo esto, permite construir un prototipo pensando mucho en el diseño, pero aún más en:

  • ¿Que sensaciones recibirá el usuario al navegar por la web?
  • ¿Es fácil de utilizar?
  • ¿Tiene un orden correcto y bien definido?
  • ¿Es una web amigable y rápida?
  • ¿Utiliza un lenguaje limpio y claro o muy técnico?
  • e infinitas preguntas más…

Todo esto quizás no nos permitirá tener la web con el “efecto wow!!” más alto del mundo, pero si conseguiremos que nuestro usuario se sienta cómodo y encuentre lo que necesita rápidamente… por lo que su experiencia será…

PERFECTA!

Y para acabar recuerda… tu usuario puede ser cualquiera, y puede estar en cualquier sitio… ¡No se lo pongas difícil!

.

3 apps de referencia

Hoy quería compartir con vosotros 3 apps para iPhone, desarrolladas en España y sobre todo, gratuitas, que me han parecido impresionantes, tanto en diseño como usabilidad:

  vueling-200x300 lacaixa-200x300 telepizza-200x300

Vueling

Funcional e intuitiva, la aplicación móvil de Vueling permite realizar cualquier tipo de consulta de la empresa, comprar tus billetes e incluso hacer check-in, descargando un código QR que te permite acceder al avión, sin necesidad de imprimir nada.

“laCaixa”

Me parece una de las aplicaciones más completas. Te permite ver tu cuentas y puntos estrella, realizar traspasos, comprar entradas (servicaixa), consultar la agenda de CaixaForum, etc. Personalmente, cuando la utilizo me siento mucho más seguro que en un ordenador.

Telepizza

Telepizza revoluciona, una vez más, la experiencia de pedir una pizza. La aplicación te permite realizar un pedido con envío a domicilio o para recoger en la tienda más cercana, a través de una sencilla e intuitiva navegación. También permite guardar tus datos personales, para no tener que rellenarlos continuamente y marcar tus pedidos como favoritos, por lo que tu segundo pedido lo puedes hacer en menos de un minuto. ¿Lo mejor? ofrece impresionantes ofertas y descuentos, de hasta el 50% del precio total de tu pedido… y como siempre, el envío en gratuito.

.