Empiezo una serie de artículos dedicados a errores comunes y algunos no tanto en el diseño web. Aunque intentaré no solo hacer una lista de cosas que no conviene hacer, sino de dar soluciones y alternativas. Por supuesto, estoy abierto a correcciones y aportaciones.

1. No confundas al usuario con varias versiones de la página

EL ERROR

Muchas veces se usa una página de inicio, de entrada, intros o splash screen, como lo queramos llamar. En ella en ocasiones se da a elegir al usuario que versión de la página quiere que se muestre. Que si resolución a 800×600, 1024×768, en HTML, en versión Flash, si tiene un router de 56kbps, 128kbps, que idioma hablas o si está sentado en una silla de mimbre. No hace falta decir que preguntar sobre que navegador estás usando y en base a ello mostrar una página u otra es intolerable.

El usuario no tiene porque saber nada de eso, y aunque lo supiese, lo que quiere es que se muestre el contenido de la web y te dejes de hacerle preguntas.

LA SOLUCIÓN

Si tu excusa es que no sabes que resolución van a tener tus usuarios, y crees que van a ser de diferentes tipos, usa estructuras líquidas o elásticas que se adapten a cualquier resolución. Si por tu diseño, no es posible tal cosa, usa las estadísticas para saber cual es el mínimo aconsejable. Actualmente creo que 800×600 ya puede estar desterrado, aunque depende del público al que te dirijas, tienes que tener en cuenta los dispositivos móviles que tienen una resolución muy limitada como el nokia 770 el iPhone de Apple.

En cuanto a la selección del navegador. Esta frase, “Sitio optimizado para internet explorer 6.0″, olvídala. Haz tu página siguiendo los estándares. Por desgracia el navegador más usado actualmente es el que cumple menos los estándares, puedes ajustarte a él para mostrar correctamente tu página si no quieres perder ese sector de usuarios, pero siempre mostrándose igual de correcta en navegadores que si son respetuosos con los estandares.

Y en cuanto a la selección bastante habitual de HTML o FLASH, hazte la siguiente pregunta, ¿que objetivo quieres cumplir? Sabemos que una página enteramente en flash no resulta del todo accesible, posicionable en buscadores, pero ofrece ventajas visuales únicas. Lo ideal es tener una estructura en HTML y CSS, indexable y accesible, y usar flash para destacar ciertas partes de la página o para tener cierta funcionalidad gráfica que FLASH te ofrece de una forma muy cómoda. Por ejemplo, para animaciones, cabeceras, algun tipo de interfaz para cierta miniaplicación, etc. En conclusión, si has decidido que tu página deba ser enteramente en flash, múestrala directamente, pero indica al visitante que debe hacer si por alguna razón no tiene instalado el plugin y no se puede mostrar la página. Dale la opción de instalarlo o si lo deseas en este punto si que puedes dar la opción de ir a una versión en HTML.

Por último, en una página multilingüe, ¿cual de ellos mostrar? Para responder a esta pregunta te haré otra, ¿a quien va dirigida la página? Pongamos un ejemplo, una página de una inmobiliaria con dos idiomas, castellano y polaco. Si la página intenta vender en Polonia a españoles, en castellano, si es al contrario, pues en polaco. Si el caso no es tan obvio como este, haz uso de nuevo a las estadísticas y observa de donde viene la mayor parte del tráfico de tu web, ese será tu idioma por defecto. En cualquiera de los casos, el cambio de idioma tiene que estar visible y accesible desde cualquier punto de la web.

La página de pronovias es un ejemplo de como no hay que hacer las cosas.

La primera en la frente. Nos salta un popup para mostrar el inicio de la página, el cual es hábilmente bloqueado por el navegador. Luego muestra una intro, donde unas veces si y otras no muestra el botón de “Saltar intro”, con lo que algunas veces nos la tendremos que ver entera para acceder al contenido. Y por último la selección del idioma. No importa en que lugar de la página estés, si decides cambiar de idioma volverá a la intro y si tienes suerte saldrá el botón de saltársela. Para que después de todo, no se cargue el idioma solicitado.

Recuerda: Cuantos menos clics necesite el usuario para acceder a la información que desea, mejor.

2. Mantén la funcionalidad lógica del botón “Atrás” del navegador

EL ERROR

Este es un principio básico en usabilidad. El visitante sabe que pulsando ese botón, va a volver a la página anterior que estaba visitando, no rompas esta regla.

Como apunta acertadamente Eduardo:

Cuando diseñamos el interfaz de una web, en realidad no estamos diseñando un interfaz de usuario independiente y aislado. Lo que realmente estamos diseñando es un interfaz de usuario que está localizado dentro de otro (el propio del navegador) y que a su vez se encuentra dentro de otro interfaz, el del sistema operativo. Es una estructura de interfaces anidados de una forma jerárquica en la que el sistema operativo marca las pautas para la creación del interfaz del navegador que, a su vez, impone condiciones en el diseño del interfaz de una página web. Por ejemplo, los botones de navegación del navegador.

Abrir enlaces en una nueva página, aparte de que es una decisión que no tienes que tomar tu, deshabilita la función del botón “atras” ya que en una ventana nueva no existen páginas anteriores a las que volver. Abrir popups con javascript, es más de lo mismo.

Otro tema del que se ha hablado mucho es el uso de este botón en páginas completamente en flash, por lo general si un visitante lo pulsa creyendo que volverá a una página anterior dentro del flash, lo único que conseguirá es iniciar de nuevo la película o en el peor de los casos volver a una pagina de inicio/intro/entrada de las que hemos hablado antes. El uso de AJAX en exceso también puede inducir el mismo tipo de error que una página en Flash

LA SOLUCIÓN

Crea un diseño consistente, usa las fuerzas en estructurar bien los datos para un posible clic del botón de atrás, en lugar de intentar evitar que los visitantes pulsen el botón.

Para resolver el tema del botón en Flash y AJAX existe un script llamado SWFAdress, entre sus principales características :

• Podemos mandar enlaces de páginas internas por email o messenger ya que aporta direcciones completas en la URL, no solo de la película principal.
• Usar el botón de historial, delante y detrás, y el botón de recarga.

Lo mejor es ver los ejemplos para saber como funciona.