Discoverability en IE9

Uno de los aspectos más importantes cuando se desarrolla el nuevo modo anclado de Internet Explorer 9, es cómo hacer para dar a conocer entre los usuarios las nuevas funcionalidades desarrolladas.

Es muy complicado que los usuarios sepan que arrastrando el favicon a la barra de tareas de Windows Vista y Windows 7 se consigue tener el sitio en modo anclado. Sería bastante negativo que después de las horas dedicadas a desarrollar esta funcionalidad y todas las ventajas que supone esta característica para tu sitio web, el usuario nunca llegue a conocerlo.

Para lograr dar a conocer esta funcionalidad de Internet Explorer 9, y además enseñar al usuario las características avanzadas que tiene el sitio en modo anclado, se recomiendan utilizar diferentes técnicas.

 

Instalar la aplicación

Lo primero que se puede hacer es añadir un enlace o botón que dispare el evento de instalación de la web en Site Mode:

  1: function addSite() { 
  2:   try { 
  3:      window.external.msAddSiteMode(); 
  4:   } catch (e) { 
  5:      alert("Esta característica está solo disponible en Internet Explorer 9."); 
  6:   }
  7: }
  8: 

<button onclick=»addSite();»>Añadir al menu de inicio</button>

Como ya contamos en otro post, éste método no es exactamente igual que anclar el sitio manualmente. Ya que de este modo se añade al menú de aplicaciones pero no se ancla la aplicación a la barra de tareas. Además éste método requiere que el usuario acepte dicha instalación mediante una ventana modal:

clip_image001

 

Este método no es el más utilizado por los detalles que acabos de comentar.

 

Discoverability

Lo más recomendado para dar a conocer que tu sitio tienen características avanzadas en el modo anclado  es utilizar alguna de las siguientes opciones:

Top Pop-Down: Detectar si Detecta si el sitio tiene el anclaje implementado (o no) y manda una notificación.

clip_image003

Toast-Style: Mensaje que aparece en la pantalla. Emplazamiento configurable (pop up o pop under)

clip_image005

Banner de Publicidad: Implementación de una imagen. Recomendado para el escenario del “drag to PIN”

clip_image007

Una vez que elijas la opción que creas más conveniente, Internet Explorer 9 te lo pone fácil. Sólo necesitas poner en un div, una imagen o el elemento HTML que consideres más interesante la clase “msPinSite”.

<div id=»divPinSite» class=»msPinSite»>

….

</div>

Y controlar cuando el usuario se encuentra en el modo anclado para no volver a enseñar esta recomendación.

  1: window.onload = function() { 
  2:  try { 
  3:    if (window.external.msIsSiteMode()) { 
  4:       // Iniciamos resto de funciones del site mode
  5:    } else { 
  6:      document.getElementById('divPinSite').style.display = "block"; } 
  7:  } catch (e) { 
  8:  }
  9: }

 

Mi opción favorita es la de la barra en la parte superior o inferior de la página. Concretamente haciendo toda la barra pineable o un icono dentro de la barra.

clip_image009

 

En mi caso hago que si se pulsa en “Saber más” despliego un div con información para el usuario.

clip_image011

Además tenemos un método que podemos utilizar para dar una mejor experiencia para el usuario. Podemos utilizar msIsSiteModeFirstRun. De esta manera podemos conocer si es la primera vez que el usuario ha abierto nuestra web en modo anclado y aprovechar para contabilizarlo para nuestras estadísticas y para mostrarle alguna ayuda sobre cómo usar las funcionalidades implementadas. Los valores devueltos por esta función son:

0 — El sitio anclado no está en un estado de primera ejecución.

1 — Es el primer inicio a partir de una operación de arrastrar y colocar.

2 — Este es el primer inicio a partir de un acceso directo en el menú Inicio

Por último, nos quedaría recordar que este aviso deberíamos mostrarlo sólo cuando el usuario está visualizando el sitio en un Internet Explorer 9.

 

También podríamos comprobar si el usuario ha entrado por una instancia de Internet Explorer 9 a nuestro sitio, aunque el usuario ya tuviera nuestro sitio anclado previamente. La forma de hacer esto es utilizando una cookie que implique que el usuario ha anclado el sitio, y si nos da negativo el método window.external.msIsSiteMode() podríamos informar al usuario que si entra por el la aplicación anclada disfrutará de una mayor funcionalidad.

Un ejemplo de cómo utilizar el discoverability lo podemos ver en el sitio de Antena3.com

clip_image013

 

Espero que os sea de utilidad!

4 comentarios sobre “Discoverability en IE9”

  1. Hola:
    Interesante artículo.
    La verdad es que todo lo que tiene que ver con Pinned Sites tiene un potencial enorme.
    Por cierto, en el div lo has definido como «divPinSite». No sé si también vale como class, pero en la documentación y en los dos ejemplos que enlazas están usando «msPinSite».

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *