Google Browser Size: herramienta de google para mejorar usabilidad de tus sitios

Autor: lisnetcg | Archivado en: Diseño Web, Internet, Navegadores, Optimización, Usabilidad el día 20/Dic/2009

Dentro de la diversidad de aspectos relacionados con la usabilidad a la que se afrentan los desarrolladores web en la actualidad, se encuentra uno que muchos pasan por alto, como tomar en cuenta el tamaño de los navegadores cuando se diseña una Web.

Bruno Borden especialista del Equipo de Desarrolladores de Google Earth, notó que muchas personas accedían a la página de descarga del sitio pero no realizaban la descarga, aunque como se puede ver este botón es muy difícil que sea pasado por alto:

Se preguntó si sería posible que muchas personas tuvieran el tamaño de las ventanas de su navegador demasiado pequeño como para ver este botón:

Para analizar esto, Bruno observó las dimensiones de las ventanas de los navegadores de los visitantes al sitio. Su primera idea fue no medir por completo la ventana del navegador si no solo el área del cliente (sin barras de herramientas, barra de estado, etc).

Su segunda idea fue controlar por varias semanas las dimensiones de las ventanas de los navegadores en una herramienta de visualización de contornos:

Usando esta herramienta comprobó que alrededor de un 10% de los usuarios no pueden ver el botón de descarga sin tener que hacer scroll a la página, el 10% puede no parecer mucho, pero en este contexto, viene a significar un importante número de personas que no realiza descarga de Google Earth. A partir de estos datos, el equipo fue capaz de rediseñar la página con mejores resultados.

Teniendo en cuento esto, diseñaron una web que puede superponer un DIV que contenga un visualizador de contornos sobre un IFRAME el cual puede contener cualquier otra página web:

Esto resultó ser una buena forma de ver cuales controles eran visibles y cuales no, en los navegadores de tamaño normal, el único problema fue la superposición de los DIV que impide a los eventos del ratón llegar a la página dentro del IFRAME, por lo que no era posible interactuar con la página.

Para darle solución a esto dividieron el DIV en cuatro partes:

Cada una de las líneas anteriores (rojo, amarillo, azul, verde) representa un DIV por separado. A medida que se mueve el puntero del ratón, se redimensiona y reposiciona los DIVs para dejar un pequeño margen de espacio en blanco alrededor del puntero, y ajustar las compensaciones de fondo de cada DIV para hacer que el aspecto gráfico quede como una plantilla sin fisuras. (En un principio se hizo en un temporizador, pero encontraron una manera más simple: cuando el ratón toca alguno de los DIVs, cambiar el tamaño / reposición de todos los DIVs.) Resultado final: un diseñador puede hacer click y de esta manera interactuar con la página , y a la ves interactuar con el sitio normalmente en lugar de escribir varias veces en las URL.

Esta herramienta esta a disposición de todos en Google Labs. Para probarlo, basta con visitar browsersize.googlelabs.com e introducir la dirección de la pagina que deseas examinar.

---

Posts Relacionados

• ¿Verdad o mentira?
• Publicidad en la web
• Las claves para subir en el ranking del GOOGLE
• Usabilidad Web: Criterios Generales