Todo lo que se puede medir, se puede mejorar
Marzo 27, 2008, 8:46 am
Guardado en: E-Commerce, Usabilidad

Las herramientas de medición online ofrecen soluciones eficaces en marketing

Las soluciones y aproximaciones que mercados como el estadounidense están asumiendo en el desarrollo de estrategias online es uno de los grandes temas que hay que abordar de inmediato, pues el nivel de madurez y competitividad que existen es cada vez mayor. Así se puso de manifiesto en el seminario organizado por Multiplica “Optimization Trends & Tools”, celebrado en Madrid.

La web se está convirtiendo en el mejor pulsómetro del negocio y cada vez entenderemos el web analytics como vehículo para ofrecer insights sobre la evolución de las necesidades de nuestros consumidores y clientes. El panorama del web analytics está modificándose por momentos. Vamos a pasar de las “web tontas” a las “web inteligentes”. Llega la customización y personalización con mensajes con inteligencia. Llega la microsegmentación, la inteligencia comercial.

La complejidad técnica en la captación de datos (provocada en parte por la irrupción del móvil como punto de contacto con la red), las nuevas formas de distribuir contenido, la paulatina muerte de la página vista como eje central de la medición de internet tras la implantación del web 2.0, la consolidación de Google Analytics y Omniture como soluciones de web analytics, son algunas de las tendencias que se están configurando hoy en la medición online.

El terreno del web analytics tendrá cada vez más peso en aquellos mundos donde medir es relevante: servidores de publicidad, gestores de contenidos, aplicaciones de marketing o CRM tendrán mejores soluciones de analítica web. Además hay que estar atentos a las nuevas soluciones dada la cada vez mayor interrelación entre mundos como el test multivariante o el behavioral targeting con el web analytics. “Cada vez daremos más importancia al análisis y la toma de decisiones y menos al reporting”, explicó David Boronat, socio fundador de Multiplica.

La clave en internet es la conversión. Las llamadas a la acción son tan importantes que están dentro de la arquitectura. “Todos los sites deberían tener tres homes con mensajes diferentes. Es necesario aportar una visión no sólo cuantitativa, sino cualitativa: hacer análisis de arquetipos, saber qué le gusta al usuario, qué no le gusta…Identificar a los diferentes usuarios y los contextos de relación con ellos. Hay que ofrecerle una ‘ruta pedagógica’ por la página web y lograr la conversión”. Boronat también ha destacado la importancia del buscador interno, “el gran descuidado”. Según él, los usuarios que buscan tienen tres veces más posibilidades de convertirse en clientes y los usuarios que no encuentran tienen tres veces más pocibilidades de salir de nuestra página.

Herramientas de medición
Además de Google Analytics y Omniture existen otras web analytics como XiTi que ofrece soluciones de medida y análisis de audiencia para todos tipos de sitios internet. Según Pablo Román, country manager de XiTi, el concepto de conversión está más ligado a la fidelización que al uso de tácticas para atraer al usuario al site. XiTi ha elaborado un estudio con 942 sitios web que hacen search marketing. Del trabajo se desprende que el origen del tráfico no está tan ligado al pago de campañas en plataformas, pues sólo el 17,4% del tráfico proviene de esta manera. El 82,6% viene de “fuentes naturales”.

El 81% de las visitas entrantes accedían a través de buscadores y por conocimiento de marca. “A este visitante no hay que convertirlo, hay que darle lo que quiere dentro del web”.

Ramón de la Guardia, director de desarrollo de negocio de Wunderloop, otra herramienta de medición online, ha mostrado cómo a través del ‘behavioral targeting’ (técnica de segmentación en base al comportamiento o navegación del usuario) se pueden desarrollar acciones de marketing mucho más targetizadas. “La publi del futuro se desarrollará teniendo en cuenta la actitud del usuario en su navegación por la red. Pero no sólo hay que analizar su comportamiento en nuestra página web, también en las otras que visite”. En Wunderloop: se pueden crear targets de comportamiento del usuario y targets del contenido. Así, en función de la navegación y de los datos que queden registrados en las cookies se pueden lanzar contenidos concreto y publicidad adaptada a los gustos del usuario.

Victoria Quesada Sacristán (El Publicista)



Diseñar para distintos navegadores
Enero 28, 2007, 8:25 pm
Guardado en: Hojas de estilo CSS, Navegadores, Usabilidad

Por Patricia Campuzano

Componer un diseño a base de estilos .css y que éste se vea bien tanto en Internet Explorer como en el Mozilla  se puede convertir en un rompecabezas. 

Estadísticamente, casi el 70% de los usuarios de Internet utilizan el Explorer (principalmente porque es el navegador que viene con Windows) y el segundo explorador más utilizado es el Mozilla Firefox.

Sabiendo estos datos, no nos queda más remedio que tener en cuenta cómo se ve la página en distintos navegadores. Lo ideal es crear una sola hoja de estilos css que sirva para ambos casos, pero si el diseño es “complicado” y no llegamos a un empate en una sola de hoja de estilos, podemos hacer el siguiente truco del almendruco…

- Creamos la hoja de estilos principal. Mozilla la interpretará correctamente porque cumple con los estándares redactados por la W3C.

- Para salvar las diferencias con el Explorer, crearemos una hoja de estilos que contenga las especificaciones para una óptima visualización de la página en Internet Explorer.

          estilo.css: declaración de todos los estilos de la web.
          cssIE.css: estilos para Explorer

- Añadimos en el HEAD el siguiente código:

          <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
          <!–[if IE]>
          <link rel=”stylesheet” type=”text/css” href=”cssIE.css”>
          <![endif]–>

Sólo se cargará la hoja de estilos cssIE.css si el usuario está usando el Microsoft Internet Explorer como navegador.



Buscadores Google personalizados
Enero 3, 2007, 11:30 am
Guardado en: HTML / JavaScript, SEO, Usabilidad

Por Patricia Campuzano

El pasado mes de octubre Google amplió su plataforma con Custom Search EngineBásicamente permite crear buscadores personalizados para buscar contenidos en nuestro sitio web o en otros que especifiquemos al crear el buscador.

Tan rápido y sencillo como dar nombre al buscador, una descripción, palabras clave que describan los contenidos que el buscador se encargará de localizar (hojas de estilos css, dhtml, javascript, etc…), idioma y sitios web donde realizará la búsqueda.

Como es habitual, para utilizar el servicio (totalmente gratuito) es necesario tener una cuenta gmail. Una vez creado, puedes incluir el buscador en tu sitio web copiando el código correspondiente.



Distintos tamaños de fuente
Diciembre 11, 2006, 4:16 pm
Guardado en: HTML / JavaScript, Usabilidad

Por Patricia Campuzano 

El tamaño del texto es un factor importante a tener en cuenta cuando diseñamos una página web. Algunas páginas web ofrecen al usuario la posibilidad de aumentarlo (+) o disminuirlo (-) adaptándolo a sus necesidades visuales. Gracias a Sharon Paine (de Dynamic Web Coding)  ofrecer este servicio en nuestra web es relativamente sencillo (leer los términos de uso).

Descargar ZIP

1.- Descargar los siguientes archivos .js que permitirán cambiar el tamaño de todos los textos de nuestro sitio web. Los guardamos la raíz del sitio web dentro de una carpeta llamada js

http://www.dyn-web.com/js/dw_cookies.js
http://www.dyn-web.com/dhtml/sizefont/src/dw_sizerdx.js

2.- Crear tres botones gráficos de aumentar, disminuir y reestablecer.

3.- En el documento web, añadimos dentro del <head> el script de los js

<script src=”js/dw_cookies.js” mce_src=”js/dw_cookies.js” type=”text/javascript”></script>
<script src=”js/dw_sizerdx.js” mce_src=”js/dw_sizerdx.js” type=”text/javascript”></script>

4.- Creamos la barra de navegación compuesta por los tres botones que servirán para aumentar, disminuir o reestablecer el texto

<!– Botón para disminuir el tamaño texto –>

    <a href=”" mce_href=”" onclick=”dw_fontSizerDX.adjust(2); return false” title=”Aumentar texto”><img src=”images/mas.gif” mce_src=”images/mas.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

<!– Botón para aumentar el tamaño texto –>

    <a href=”" mce_href=”" onclick=”dw_fontSizerDX.adjust(-2); return false” title=”Disminuir texto”><img src=”images/menos.gif” mce_src=”images/menos.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

<!– Botón para reestablecer el tamaño del texto –>

    <a href=”" mce_href=”" onclick=”dw_fontSizerDX.reset(); return false” title=”Reestablecer texto”
    ><img src=”images/reset.gif” mce_src=”images/reset.gif” width=”20″ height=”20″ alt=”" border=”0″></a>

Listo! Al hacer click sobre el botón correspondiente, aumentará, disminuirá o se reestablecerá el tamaño del texto de nuestro sitio web.



Eliminar el contorno de un .SWF en una página web
Diciembre 7, 2006, 7:51 pm
Guardado en: Flash / ActionScript, Usabilidad

Por Patricia Campuzano

Desde hace menos un año los archivos .SWF insertados en un documento web aparecen por defecto “desactivados”, es decir, para navegar por una película flash es necesario hacer clic sobre ella previamente.

detecflash.jpg

Desconozco el motivo, pero gracias a un .js obra de Geoff Stear y el uso de capas podemos evitarlo.

1.- Descargar el archivo swfobject.js y guardarlo en la raíz de nuestro sitio web

http://www.design-root.com/js/swfobject.js

2.- Incluimos dentro del <head> del documento web la siguiente etiqueta

<script src="swfobject.js" type=”text/javascript” ></script>

3.- Insertamos el flash en nuestro documento a través del siguiente div:

<div id="flashcontent">
<script type="text/javascript">
var so = new SWFObject("archivo.swf", "Player", "500", "500", "7", "000000");
so.write("flashcontent");
</script>
</div>

Los parámetros que definen el archivo .SWF a mostrar son los de la variable SWFObject

var so = new SWFObject("archivo.swf", "Player", "500", "500", "7", "000000");

Si quisiéramos insertar más de un .SWF en la misma página, podríamos duplicar la capa cambiando su id.



La cabecera de un sitio web
Diciembre 5, 2006, 1:08 am
Guardado en: Usabilidad

Por Patricia Campuzano

Todas las cuestiones sobre usabilidad web cobran especial sentido cuando hablamos de proyectos de gran embergadura, tipo ElMundo.es, ElPais.es, MSN.es, etc… En proyectos pequeños como microsites o especiales flash, los criterios de usabilidad quedan expuestos a la creatividad del diseñador.

Los portales mencionados anteriormente coinciden en un aspecto: todos tienen una cabecera que sirve de barra de navegación, clara y accesible para todos los usuarios (experimentados o no).

La cabecera de una página web suele contener, por regla general, los siguientes elementos:

  • el lototipo de la empresa
  • los enlaces a las secciones principales del sitio web
  • un buscador de contenidos

////////////////////////////////////////////////// 

Cabecera www.elpais.es

La web de El Pais (que ha sido rediseñada recientemente) es, desde mi punto de vista, uno de los mejores periódicos digitales que podemos encontrar actualmente en Internet, no sólo por sus contenidos, sino por su diseño que no se ve desmejorado por seguir cuestiones de usabilidad.

En cuanto a la cabecera, distinguimos dos zonas: publicidad y enlaces.

Cabecera www.elpais.es

La zona de publicidad queda fuera del marco de la cabecera e incluye dos modelos de banners (uno de 745×100 y dos de 220×45) indicando que es una zona reservada para publicidad.

A continuación, encontramos la barra principal de navegación del site. Lo más interesante y “novedoso” respecto a otras cabeceras similares es que, dependiendo de la sección en la que nos encontremos, muestra los subenaces en una línea secundaria utilizando JavaScript/CSS. 

Este modelo de barra de navegación es muy práctica y permite mostrar todos los enlaces a las distintas páginas del site en un espacio reducido. La única “pega” que le veo es que para ver los enlaces secundarios es necesario hacer clic sobre el enlace principal correspondiente; el evento rollOver permite en cambio ver qué subsecciones existen dentro de cada sección sin necesidad de hacer clic previamente.

El color juega un papel importante para indicar la sección actual (en la imagen, INICIO), mostrando el submenú en el mismo color (blanco). Además, al ser la sección principal de la página, el logotipo figura mucho más grande que en el resto de secciones.

El alto total de la cabecera no supera los 225 px, un alto razonable si tenemos en cuenta todos los elementos incluídos en ese espacio.



Cuestiones generales sobre usabilidad web
Junio 21, 2006, 4:39 pm
Guardado en: Usabilidad

Por Patricia Campuzano

¿Pero qué diablos significa usabilidad? Usabilidad es un término que normalmente viene acompañado de un nombre, Jacob Nielsen (el gurú de la usabilidad) y se refiere básicamente a seguir una serie de "reglas" a la hora de estructurar los contenidos del sitio web, bien para que sea sencillo navegar por las distintas páginas del mismo o para que los contenidos que más nos interesa que vea el usuario estén dispuestos en el lugar correcto (esto es, un lugar que no pasará inadvertido por el usuario). Pero el término usabilidad también se refiere a otros aspectos de la web como es el diseño, pero esto lo veremos más adelante.

Para empezar, sin necesidad de mirar de arriba a abajo nuestro sitio web, podemos plantearnos las siguientes cuestiones:

  • ¿Cuáles son los objetivos de mi sitio web?
  • La dirección de mi sitio web, ¿es fácil de recordar?  
  • Los contenidos, ¿se ajustan a mis objetivos?
  • ¿Se presentan claramente los objetivos, servicios y contenidos que ofrece mi sitio web?
  • La estructura (organigrama) del sitio web, ¿está orientado al usuario?
  • ¿Actualizamos el sitio web con frecuencia -a diario?

Quizás la respuesta a estas cuestiones nos la pueda dar alguien ajeno a la página web, que no tenga nada que ver con el "fascinante mundo del desarrollador web". De esta forma, podremos comprobar con qué obstáculos se encuentra un usuario cualquiera cuando accede a nuestra página web.



Las páginas Error! de tu sitio web también existen
Junio 14, 2006, 7:59 pm
Guardado en: HTML / JavaScript, Usabilidad

por Patricia Campuzano 

¿Alguien se acuerda alguna vez de diseñar las páginas de error típicas (ErrorDocument 404! Página no encontrada) de su sitio web? Ah! ¿pero se pueden diseñar? Si, y debería ser una de las primeras páginas a componer, puesto a menudo es donde va a parar un usuario que accede a una url “rota” de nuestro sitio web.

Las estadísticas demuestran que la página de error es una de las más vistas en internet, por lo que conviene que esta página, además de informar del error, informe al usuario de los contenidos que SI puede encontrar en nuestro sitio web (”no encontraste lo que buscabas, ¡pero hay más cosas que ver!”).

Pasos a seguir:

1.- Componemos la página HTML que, además de contener el error de página no encontrada, tenga otros enlaces como “Home”, “Nuestra ofertas de este mes”, etc…

2.- Guardamos esta página HTML como 400.html, 401.html, 403.html, 404.html, 405.html, 406.html, etc… Tantas como página de error queramos crear, aunque normalmente con la 404 (página no encontrada) será suficiente.

3.- Subimos las páginas HTML al directorio principal de nuestro servidor.

4.- Creamos un documento txt que contenga la siguiente información:

ErrorDocument 401 http://www.el-nombre-de-tu-dominio.com/401.html
ErrorDocument 402 http://www.el-nombre-de-tu-dominio.com/402.html
ErrorDocument 403 http://www.el-nombre-de-tu-dominio.com/403.html
ErrorDocument 404 http://www.el-nombre-de-tu-dominio.com/404.html

etc..

Una línea por cada página de error creada.

5.- Guardarmos este documento de texto con el nombre .htaccess . Tiene que empezar por . y no debe llevar ninguna extensión (.txt, .doc, .html ni nada que se le parezca).

6.- Subimos el documento .htaccess al directorio raiz de nuestro sitio web.

Al intentar acceder a una página errónea de nuestro sitio web, por ejemplo, http://www.design-root.com/asfaas se verá la página de error 404 de página no encontrada creada anteriormente.

En la web de Maestros del web tienes un interesante articulo sobre las páginas de error 404!.