Algunos estándares se van perfilando en las web. En este artículo se presentan ejemplos de hacia donde va la web y hacia donde no.
Más que estándares, este artículo hace un repaso por algunos de los aspectos que predominan en los proyectos web exitosos.
Ninguno es de obligado cumplimiento, pero si tu sitio no sigue alguna de estas premisas pregúntate si tienes una buena razón para ello.
Areas que requieren registro
Se ha convertido un estándar que la primera opción mostrada más visible es la dedicada a usuarios no registrados y la secundaria a los ya registrados.
Los usuarios no registrados tienen prioridad por tres razones:
Para el sitio es crítico ganar nuevos usuarios
Si el nuevo usuario ve claras las ventajas del registro a priori, no se dará de alta
El usuario registrado ya está familiarizado con el proceso y sin mirar va directo a introducir su usuario y contraseña
Ejemplos correctos prioridad usuario no registrado: Correo Yahoo, Gmail y La Caixa.
Ejemplo incorrecto prioridad usuario ya registrado: BBVAnet.com
Acciones que pueden requerir registro
Cuando el usuario quiere realizar una compra, el proceso lógico es que primero se le pidan los datos para realizar la transacción y al final los datos para el registro. Este estándar tiene ventajas:
La publicidad en formato texto es la que mejor funciona y la que tiene mayores tasas de click-through. Por el contrario los banners animados es la publicidad menos efectiva.
El NYTimes usa publicidad en formato texto y banners gráficos, pero sin animación.
Tampoco en Amazon, ni en Yahoo se ven imágenes animadas, ni pop-ups o pop-unders aún comunes en la web en español. Si estos grandes sitios han renunciado a los ingresos millonarios de este tipo de publicidad seguramente existe una buena razón.
Se puede entender que algunos sitios que viven casi exclusivamente de la publicidad (ElMundo.es) vendan el formato a quien lo prefiera, pero es una paradoja que Iberia use banners graficos animados para sus propias promociones internas, cuando es un formato que da problemas.
En el caso de Iberia las promociones van rotando y es necesario recargar la home varias veces hasta que vuelve a aparecer la promoción que a uno le interesa. Sería mucho más util para los usuarios y efectivo para Iberia, mostrar un listado de trayectos en oferta o de ultima hora en formato texto en la home.
Romper el efecto cabecera
Los usuarios nunca miran en la cabecera porque no esperan encontrar nada de utilidad allí. Por esta razón los grandes sitios evitan crear el efecto de "franja" de cabecera con el logo y los colores corporativos.
Yahoo, Amazon, Ebay, Google usan logos pequeños y evitan los colores intensos de fondo en sus cabeceras, para que no se vuelva invisible al usuario. De este modo la cabecera se convierte en una zona útil para situar links.
Por el contrario las cabeceras corporativas tipo "franja" como las de Fnac o BSCH, son ignoradas por los usuarios y quedan convertidas en áreas muertas.
Eliminación de áreas fijas de navegacion
Mantener fija un área o menú de navegación es un derroche de espacio. La saturación de un largo listado de vínculos quita visibilidad a las opciones realmente importantes para el usuario.
El lugar natural donde ver y acceder a todos los contenidos del sitio es la home, el usuario ya conoce esto, no hay que repetir los accesos en todas las páginas.
El caso correcto: en esta página de un ordenador portatil en Amazon el menú de la izquierda de la home es sustituido por vínculos relacionados con el producto.
No es el caso de esta página de un reproductor DVD del Corte Inglés que mantienen un menú con vínculos a otras secciones de informática.
Cuando un usuario está viendo la página de un producto son dos los comportamientos más probables. Uno, obtener más información del producto. Dos, buscar productos similares alternativos. No necesita todas las categorías de la sección informática a un clic, porque de repente no va a decidir comprarse un escáner.
Navegación relacionada
Son los vínculos a otros contenidos del sitio intimamente relacionados. Son enlaces muy efectivos y que aumentan drásticamente el número de páginas vistas por visita.
Amazon es conocida por las secciones Quien compró este producto también compró este otro" o "Quien ha visto este producto también ha visto estos otros".
Aunque esta opcion parece centrada en lograr que el usuario compre más de un libro (pura venta), en realidad es muy amigable y está centrada en el usuario ya que:
No se trata de poner un contenido relacionado tangencialmente (aprovechando que el Pisuerga pasa por Valladolid). Si no se tiene nada realmente relacionado, mejor no poner nada.
Altísima velocidad de descarga
No me refiero solo al peso en Kb de las páginas, sino también a la optimización de servidores y bases de datos.
Una altísima velocidad de descarga es una condicion básica inicial para el exito de cualquier proyecto web. Básica y obvia, pero frecuentemente ignorada.
Incluso con ADSL los sitios que tardan más de 5 segundos son percibidos como lentos.
Es un placer de navegar en un sitio rápido. En un sitio ligero en el mismo tiempo se ven más páginas, lo que aumenta la probabilidad de encontrar lo que se busca.
Una descarga rápida causa más emociones positivas en el usuario, que cualquier cambio en el diseño estético.
No es casual que la descarga de páginas de los grandes sitios sea muy rapida incluso con módem. Google es legendariamente rápido, instantáneo. Otro tanto, Ebay, Amazon, Yahoo... En España, ElMundo.es es de los pocos rápidos en cualquier tipo de conexión.
¿Por qué ElPais.es o Iberia.es tienen estás velocidades de descarga tan lentas incluso con ADSL? Un usuario en ElPaís se lo piensa dos veces para ver un nuevo artículo, mientras que la inmediatez de ElMundo.es hace ver muchos artículos. Buscar un billete de avión requiere de muchas búsquedas, lo cual es una tortura con la velocidad de descarga de Iberia.es.
Google tiene muy claro que su velocidad es la mitad de su éxito. Imáginemos un buscador lento y bueno, contra otro más rápido, pero peor. En el tiempo que uno hace una búsqueda en uno lento, hace tres búsquedas en el menos bueno. Tiene tres opciones para para afinarlas e igualmente consigue encontrar lo que busca. El ejemplo vale para cualquier tipo de web.
En realidad la velocidad es un tema complejo, pero muchas veces no es solo una cuestion de más maquina, sino de optimizar las bases de datos y servidores para que sirvan las paginas mas rápidamente.
Menus desplegables dinámicos no funcionan
¿Cuántos sitios éxitosos usan menús desplegables dinámicos? Ninguno.
Los menús desplegables parecen ventajosos porque permiten meter muchas opciones en una sola ¿pero dónde esta la ganancia si al final las opciones están ocultas?. Técnicamente están allí, pero en la práctica nadie sabe que están allí.
No parece que estos sean suficientes argumentos para Iberia, La Vanguardia o Administracion.es que mantienen menus desplegables dinamicos.
Paginas de bienvenida y elección de idioma
Desaparecidas hace mucho de la web en inglés, en la web en castellano aún están muy presentes.
En el ranking de Google una homepage con solo unos pocos vínculos de elección de país e idioma y vacia de informacion tiene muy mal posicionamiento y es un tapón para la indexación del resto de páginas del sitio.
Las páginas de bienvenida no tienen justificación alguna, deben ser eliminadas.
Eliminar las pantallas de elección de idioma puede provocar quejas que se evitan presentando la pagina en el idioma del navegador, que en la mayoría de casos es el del usuario. No hay lugar para que el usuario se sienta ofendido por ser recibido en otro idioma si está usando el navegador en el idioma en el que es recibido.
Incompatibilidad navegadores y S.O. minoritarios
Cualquier sitio de los "grandes" se puede ver bien con cualquier navegador y sistema operativo. Yahoo aún se ve decentemente navegadores totalmente desfasados.
Sin embargo en España muchos sitios no funcionan bien con Mozilla, Opera, Mac o Linux, con la justificacion de que el porcentaje de usuarios es tan bajo no justifica el gasto en dar compatibilidad y soporte.
Este razonamiento simplista ignora que detrás de cada 10-20 usuarios medios o básicos hay un usuario avanzado (normalmente un amigo) que usa software minoritario y cuyas recomendaciones siguen. Los usuarios avanzados son los que primero usarán el sitio y comenzarán el boca-orjea.
Evidentemente un usuario avanzado no va a recomendar un sitio en el que no puede navegar.
Un ejemplo triste, Caprabo no funciona con Mozilla Firefox, según el sitio "debido a problemas técnicos ajenos a Caprabo" ;)
Vinculos azules y subrayados
Es cierto que no es obligatorio que los vínculos tengan este aspecto, pero hay que tener una muy buena razón para optar por otro formato más allá del no queda bien estéticamente o "los usuarios ya lo saben".
El 90% de webs americanas de éxito (Amazon, Yahoo, Ebay, Craigslist ) subrayan los vínculos y los pintan en color azul, es el estándar más universal y conocido en la web.
Se puede argumentar que webs para públicos muy especificos pueden renunciar a este estándar, pero no es el caso de ElCorteIngles, Fnac, Terra, etc.. que son sitios para todos los públicos.
El scroll no es fatal, el espacio en blanco tampoco
Apenas hay alguna página en español con mucho scroll, son todas muy cortas: El Corte Ingles, Terra.es, LaNetro.com...
Por el contrario en las homepages de Amazon o Yahoo hay bastante scroll, son páginas largas.
Las páginas cortas disponen de menos espacio y por ello están mas recargadas de contenidos, sin apenas espacio en blanco.
El scroll permite espacio en blanco que es necesario para crear una arquitectura de información efectiva. No se puede pasar el diseño únicamente en hacer unos elementos más chillones que otros a base de carga gráfica. El espacio en blanco alrededor de los elementos, les da importancia sin añadir ruido.
No lanzar contenidos nuevas ventanas
Los grandes sitios americanos en pocos casos lanzan los contenidos del sitio en nuevas ventanas. La nueva ventana rompe la linealidad de la navegación e imposibilita usar el botón "volver" del navegador.
Sin embargo en la web en castellano es frecuente que se lancen contenidos en nuevas ventanas. Un caso claro de abuso de nuevas ventanas se da en la web del BSCH donde gran parte de los contenidos de la home se lanzan en nuevas ventanas.
Ninguno es de obligado cumplimiento, pero si tu sitio no sigue alguna de estas premisas pregúntate si tienes una buena razón para ello.
Areas que requieren registro
Se ha convertido un estándar que la primera opción mostrada más visible es la dedicada a usuarios no registrados y la secundaria a los ya registrados.
Los usuarios no registrados tienen prioridad por tres razones:
Para el sitio es crítico ganar nuevos usuarios
Si el nuevo usuario ve claras las ventajas del registro a priori, no se dará de alta
El usuario registrado ya está familiarizado con el proceso y sin mirar va directo a introducir su usuario y contraseña
Ejemplos correctos prioridad usuario no registrado: Correo Yahoo, Gmail y La Caixa.
Ejemplo incorrecto prioridad usuario ya registrado: BBVAnet.com
Acciones que pueden requerir registro
Cuando el usuario quiere realizar una compra, el proceso lógico es que primero se le pidan los datos para realizar la transacción y al final los datos para el registro. Este estándar tiene ventajas:
- Tiene más sentido para el usuario que al empezar se le hable de datos de su compra, no se le pidan contrasenas ni otros datos personales.
- Se pueden reaprovechar muchos datos para el registro posterior que entonces es mucho más ligero y rápido.
- Proceso centrado en la compra, objetivo del usuario: Casa del Libro donde primero se completan todos los datos de la compra.
- Proceso centrado en registro, objetivo del sitio: Fnac donde antes de conocer los costes totales se le pide introducir el número de tarjeta de crédito
La publicidad en formato texto es la que mejor funciona y la que tiene mayores tasas de click-through. Por el contrario los banners animados es la publicidad menos efectiva.
El NYTimes usa publicidad en formato texto y banners gráficos, pero sin animación.
Tampoco en Amazon, ni en Yahoo se ven imágenes animadas, ni pop-ups o pop-unders aún comunes en la web en español. Si estos grandes sitios han renunciado a los ingresos millonarios de este tipo de publicidad seguramente existe una buena razón.
Se puede entender que algunos sitios que viven casi exclusivamente de la publicidad (ElMundo.es) vendan el formato a quien lo prefiera, pero es una paradoja que Iberia use banners graficos animados para sus propias promociones internas, cuando es un formato que da problemas.
En el caso de Iberia las promociones van rotando y es necesario recargar la home varias veces hasta que vuelve a aparecer la promoción que a uno le interesa. Sería mucho más util para los usuarios y efectivo para Iberia, mostrar un listado de trayectos en oferta o de ultima hora en formato texto en la home.
Romper el efecto cabecera
Los usuarios nunca miran en la cabecera porque no esperan encontrar nada de utilidad allí. Por esta razón los grandes sitios evitan crear el efecto de "franja" de cabecera con el logo y los colores corporativos.
Yahoo, Amazon, Ebay, Google usan logos pequeños y evitan los colores intensos de fondo en sus cabeceras, para que no se vuelva invisible al usuario. De este modo la cabecera se convierte en una zona útil para situar links.
Por el contrario las cabeceras corporativas tipo "franja" como las de Fnac o BSCH, son ignoradas por los usuarios y quedan convertidas en áreas muertas.
Eliminación de áreas fijas de navegacion
Mantener fija un área o menú de navegación es un derroche de espacio. La saturación de un largo listado de vínculos quita visibilidad a las opciones realmente importantes para el usuario.
El lugar natural donde ver y acceder a todos los contenidos del sitio es la home, el usuario ya conoce esto, no hay que repetir los accesos en todas las páginas.
El caso correcto: en esta página de un ordenador portatil en Amazon el menú de la izquierda de la home es sustituido por vínculos relacionados con el producto.
No es el caso de esta página de un reproductor DVD del Corte Inglés que mantienen un menú con vínculos a otras secciones de informática.
Cuando un usuario está viendo la página de un producto son dos los comportamientos más probables. Uno, obtener más información del producto. Dos, buscar productos similares alternativos. No necesita todas las categorías de la sección informática a un clic, porque de repente no va a decidir comprarse un escáner.
Navegación relacionada
Son los vínculos a otros contenidos del sitio intimamente relacionados. Son enlaces muy efectivos y que aumentan drásticamente el número de páginas vistas por visita.
Amazon es conocida por las secciones Quien compró este producto también compró este otro" o "Quien ha visto este producto también ha visto estos otros".
Aunque esta opcion parece centrada en lograr que el usuario compre más de un libro (pura venta), en realidad es muy amigable y está centrada en el usuario ya que:
- Ayuda al usuario a tomar una decisión de compra sobre el libro. Si lo que han comprado otros compradores del libro también nos interesa, podemos saber con certeza que es un libro interesante para nosotros.
- Muestra alternativas muy parecidas. Normalmente el usuario mira varios libros similares antes de elegir uno, quizás aún no haya localizado uno que realmente le guste.
No se trata de poner un contenido relacionado tangencialmente (aprovechando que el Pisuerga pasa por Valladolid). Si no se tiene nada realmente relacionado, mejor no poner nada.
Altísima velocidad de descarga
No me refiero solo al peso en Kb de las páginas, sino también a la optimización de servidores y bases de datos.
Una altísima velocidad de descarga es una condicion básica inicial para el exito de cualquier proyecto web. Básica y obvia, pero frecuentemente ignorada.
Incluso con ADSL los sitios que tardan más de 5 segundos son percibidos como lentos.
Es un placer de navegar en un sitio rápido. En un sitio ligero en el mismo tiempo se ven más páginas, lo que aumenta la probabilidad de encontrar lo que se busca.
Una descarga rápida causa más emociones positivas en el usuario, que cualquier cambio en el diseño estético.
No es casual que la descarga de páginas de los grandes sitios sea muy rapida incluso con módem. Google es legendariamente rápido, instantáneo. Otro tanto, Ebay, Amazon, Yahoo... En España, ElMundo.es es de los pocos rápidos en cualquier tipo de conexión.
¿Por qué ElPais.es o Iberia.es tienen estás velocidades de descarga tan lentas incluso con ADSL? Un usuario en ElPaís se lo piensa dos veces para ver un nuevo artículo, mientras que la inmediatez de ElMundo.es hace ver muchos artículos. Buscar un billete de avión requiere de muchas búsquedas, lo cual es una tortura con la velocidad de descarga de Iberia.es.
Google tiene muy claro que su velocidad es la mitad de su éxito. Imáginemos un buscador lento y bueno, contra otro más rápido, pero peor. En el tiempo que uno hace una búsqueda en uno lento, hace tres búsquedas en el menos bueno. Tiene tres opciones para para afinarlas e igualmente consigue encontrar lo que busca. El ejemplo vale para cualquier tipo de web.
En realidad la velocidad es un tema complejo, pero muchas veces no es solo una cuestion de más maquina, sino de optimizar las bases de datos y servidores para que sirvan las paginas mas rápidamente.
Menus desplegables dinámicos no funcionan
¿Cuántos sitios éxitosos usan menús desplegables dinámicos? Ninguno.
Los menús desplegables parecen ventajosos porque permiten meter muchas opciones en una sola ¿pero dónde esta la ganancia si al final las opciones están ocultas?. Técnicamente están allí, pero en la práctica nadie sabe que están allí.
No parece que estos sean suficientes argumentos para Iberia, La Vanguardia o Administracion.es que mantienen menus desplegables dinamicos.
Paginas de bienvenida y elección de idioma
Desaparecidas hace mucho de la web en inglés, en la web en castellano aún están muy presentes.
En el ranking de Google una homepage con solo unos pocos vínculos de elección de país e idioma y vacia de informacion tiene muy mal posicionamiento y es un tapón para la indexación del resto de páginas del sitio.
Las páginas de bienvenida no tienen justificación alguna, deben ser eliminadas.
Eliminar las pantallas de elección de idioma puede provocar quejas que se evitan presentando la pagina en el idioma del navegador, que en la mayoría de casos es el del usuario. No hay lugar para que el usuario se sienta ofendido por ser recibido en otro idioma si está usando el navegador en el idioma en el que es recibido.
Incompatibilidad navegadores y S.O. minoritarios
Cualquier sitio de los "grandes" se puede ver bien con cualquier navegador y sistema operativo. Yahoo aún se ve decentemente navegadores totalmente desfasados.
Sin embargo en España muchos sitios no funcionan bien con Mozilla, Opera, Mac o Linux, con la justificacion de que el porcentaje de usuarios es tan bajo no justifica el gasto en dar compatibilidad y soporte.
Este razonamiento simplista ignora que detrás de cada 10-20 usuarios medios o básicos hay un usuario avanzado (normalmente un amigo) que usa software minoritario y cuyas recomendaciones siguen. Los usuarios avanzados son los que primero usarán el sitio y comenzarán el boca-orjea.
Evidentemente un usuario avanzado no va a recomendar un sitio en el que no puede navegar.
Un ejemplo triste, Caprabo no funciona con Mozilla Firefox, según el sitio "debido a problemas técnicos ajenos a Caprabo" ;)
Vinculos azules y subrayados
Es cierto que no es obligatorio que los vínculos tengan este aspecto, pero hay que tener una muy buena razón para optar por otro formato más allá del no queda bien estéticamente o "los usuarios ya lo saben".
El 90% de webs americanas de éxito (Amazon, Yahoo, Ebay, Craigslist ) subrayan los vínculos y los pintan en color azul, es el estándar más universal y conocido en la web.
Se puede argumentar que webs para públicos muy especificos pueden renunciar a este estándar, pero no es el caso de ElCorteIngles, Fnac, Terra, etc.. que son sitios para todos los públicos.
El scroll no es fatal, el espacio en blanco tampoco
Apenas hay alguna página en español con mucho scroll, son todas muy cortas: El Corte Ingles, Terra.es, LaNetro.com...
Por el contrario en las homepages de Amazon o Yahoo hay bastante scroll, son páginas largas.
Las páginas cortas disponen de menos espacio y por ello están mas recargadas de contenidos, sin apenas espacio en blanco.
El scroll permite espacio en blanco que es necesario para crear una arquitectura de información efectiva. No se puede pasar el diseño únicamente en hacer unos elementos más chillones que otros a base de carga gráfica. El espacio en blanco alrededor de los elementos, les da importancia sin añadir ruido.
No lanzar contenidos nuevas ventanas
Los grandes sitios americanos en pocos casos lanzan los contenidos del sitio en nuevas ventanas. La nueva ventana rompe la linealidad de la navegación e imposibilita usar el botón "volver" del navegador.
Sin embargo en la web en castellano es frecuente que se lancen contenidos en nuevas ventanas. Un caso claro de abuso de nuevas ventanas se da en la web del BSCH donde gran parte de los contenidos de la home se lanzan en nuevas ventanas.
Eduardo Manchón