Archivos de la categoría Usabilidad

Manual sobre “Open Graph Protocol”

Hasta hace poco Facebook “escaneaba” la página y con ella extraía los elementos que consideraba más interesantes, como el título, un breve resumen del sitio, un vídeo o una imagen si existían, etc. Con “Open Graph Protocol” puedes definir en cualquier página web el valor los elementos del objeto que se muestra en Facebook. Lo que resumiendo sería que si pones esto el usuario al compartir (o darle like) a tu página posiblemente mostrará más información que antes.

En este link podéis encontrar un vídeo (en inglés) sobre Open Graph Protocol, explicado por uno de los ingenieros de Facebook (tiene mucho acento indio, espero que no os cueste entenderle).

Estas “metas” se ponen dentro del head de la página. En los ejemplos lo ponen justo debajo del tag <title> yo lo pondría después de las meta “normales”, aunque cada cual que lo ponga dónde más le guste.

Probablemente las que vayas a necesitar estén dentro de este listado:

<meta property=”og:title” content=”Manual Open Graph Protocol”/>
<meta property=”og:url” content=”http://rocreguant.com/Manual-sobre-Open-Graph-Protocol”/>
<meta property=”og:description”content=”Brebe introducción sobre Open Graph protocol (impulsado Facebook), para implementarlo de forma simple en cualquier sitio web.”/>

Luego también se puede añadir metas como imágenes o vídeos (estos ejemplos han sido sacados de la web oficial)

<meta property=”og:image” content=”http://ia.media-imdb.com/rock.jpg”/>
<meta property=”og:video” content=”http://example.com/bond/trailer.swf” />

Pero esto no termina aquí! Utiliza Open Graph Protocol para que Facebook trate tu URL como una Fanpage! ([EN] fuente)

Esto lo puedes conseguir añadiendo una de las siguientes lineas de código.

<meta property=”fb:admins” value=”USER_ID1,USER_ID2″ /> (dónde USER_ID2 y USER_ID2 serian los administradores)

O bien usando:

<meta property=”fb:app_id” value=”1234567″ /> (dónde value sería el ID de vuestra app en facebook)

Con esto podrás acceder a tu panel de analytics como el de las Fanpages, en el que te muestra los usuarios activos diarios, los likes, los nuevos usuarios…

Para más información podéis consultar la web oficial de Open Graph Protocol.

Bonus: Lo que se comenta en las altas esferas es que puedes usarlo para “engañar” a Facebook. Por ejemplo, tu haces un vídeo relacionado sobre el post que has escrito pero sin ponerlo como embedded. Lo pones como meta, y la gente al darle al like a la página sin vídeo comparte el vídeo. (link black)

7 puntos a seguir para hacer un website más amigable para los móviles

Cada día que pasa, los smartphones ganan más adeptos. Quizás no todos los sitios tengan que ser amigables para los móviles, pero tranquilos que ese día llegará y vale más estar prevenidos. No es lo mismo que un pc debido al tamaño de pantalla, la forma de interactuar, la potencia del aparato… Nos obligan a que el sitio tenga objetivos distintos según el dispositivo que usamos. Por lo que siguiendo estos puntos nos permitirá mejorar la experiencia del usuario de un smartphone.

1- Reduce el contenido visible para el usuario

Todo lo que se muestre por pantalla tiene que ser obligatoriamente imprescindible siempre teniendo en cuenta el objetivo de la página. Y con esto me refiero a:

  • Contenido: Leer mucho texto en un móvil es algo incómodo, y las lecturas suelen ser más rápidas (en diagonal). Con toda la tranquilidad puedes quitar toda la paja e intentar resumir el contenido necesario.

  • Funcionalidades: Estas pueden ser widgets en el blog (contador de visitas, el tiempo…), o links de navegación (por ejemplo el blogroll) pueden molestar bastante al usuario.

Con esto conseguimos que el sitio cargue más rápido y a la vez sea más fácil la navegación para el usuario consiguiendo un aumento de permanencia en el sitio y una menor tasa de rebote.

2- Usa solo una columna

Visualizando el website en el móvil procura que todo se muestre en una sola columna, ya que ir desplazando la pantalla de un lado para otro a cada linea de texto es extremadamente engorroso. Esto también evita que se tenga que hacer zoom para acercar la página y poder leer el texto. Aprovecha todo el ancho de la pantalla de cada dispositivo. Si quieres poner algo más aparte del texto lo mejor es ponerlo debajo del contenido antes que al lateral, evitando así que se tengan que los usuarios se tengan que desplazar lateralmente para no perderse partes del sitio.

3- Haz una navegación distinta

Como los links ya hemos dicho anteriormente que no pueden estar al lado del contenido te doy algunos consejos para ayudarte a emplazar los links de navegación. En principio lo menos recomendable es emplazarlos arriba del todo ya que desplaza el contenido hacia abajo haciéndolo menos visible a los usuarios. Por lo que tienes tres posibilidades:

  • Ponerlo arriba: Esta es para provocar un poco. Creo que es una buena idea situar los links en la página de inicio del sitio, pudiendo incluso evitar poner contenido alguno. A parte de los links puedes poner la cajita de búsqueda y otras funcionalidades que consideres importantes.
  • Ponerlo a bajo: Puedes poner todo el contenido y debajo de este los links y demás. De este modo conseguirás que una vez el usuario haya terminado con el contenido descubra toda una multitud de rutas por las que proseguir con su navegación.
  • No poner nada: Puedes limitarte a poner un link a la página de inicio dónde has colocado todos los links, otro link de “Back” para volver a la página anterior y links usando las palabras del contenido para que sea más fluida la navegación. Este último punto se debería de seguir siempre.

4- No hagas escribir mucho a los usuarios

Todos los que hemos usado un celular sabemos que son engorrosamente lentos para escribir y son aparatejos con los que hacemos muchos errores tipográficos. Es mucho más fácil escribir con un teclado normal que usando la pantalla de nuestro celular. Pero tranquilos, que no cunda el pánico, traigo soluciones para todos! Para reducir la entrada de texto puedes usar:

  • Usa de cookies: Si ya ha entrado o a rellenado el formulario porque no recordar lo que el usuario ya se ha esforzado en rellenar? O simplemente basta con no salir de la sesión.
  • No pidas todos los datos: Puedes pedirlos por partes, o simplemente pedir los necesarios y “obligar” al usuario introducir el resto.
  • Usa otras plataformas, como Facebook, nos permite que puedas incrustar un código a tu sitio permitiendo que los usuarios puedan conectarse a tu sitio sin tener que introducir ningún carácter. Permitiendo que podamos coger algunos datos de los que constan en los perfiles de los usuarios.

5- Usa distintas versiones para móviles

No todos los celulares tienen la misma pantalla, la misma forma de navegación o la velocidad de conexión. Por lo tanto podemos crear versiones más reducidas de peso, de tamaño o que permitan distintas formas de navegación. Sin ir más lejos Facebook tiene 3 versiones, la estándar, la de menor peso y la que es mejor para teléfonos táctiles.

6- Piensa en móviles táctiles y no táctiles

No todos los celulares tienen pantalla touchscreen, por lo tanto debemos pensar en ambos. En los táctiles es muy fácil pulsar sobre un link si no hay otro muy cerca. Para cualquier ruta de navegación importante es recomendable que los links sean imágenes debido a que son de un mayor tamaño y hay una menor probabilidad de fallo.

7- Aproveche TODO el potencial de cualquier móvil

Los smartphones ofrecen muchísimas posibilidades que los PC no pueden ofrecer. Como por ejemplo:

  • Llamar: Cuando pongas un número de teléfono en tu sitio web haz que al pulsar sobre este se le ofrezca la posibilidad al usuario de realizar una llamada a dicho numero.
  • Mapas: Ofrecer la posibilidad de que el usuario al ver una dirección pueda verla localizada en un mapa.
  • Comparte: Da la opción para que puedan compartir su localización usando el gps del móvil para saber que otros usuarios están cerca, de que tienda están cerca…
  • QR: Usa los códigos QR, no te quedes atrasado, brinda la probabilidad a tus usuarios del mundo físico de poder conectarse a cualquier sitio para ampliar la información que se les ofrece.

En resumen, si no es ya una necesidad tener el sitio adaptado para dispositivos móviles lo va a ser muy pronto. Para adaptarlo mejor reduce contenido y pónselo fácil al usuario.
Añadirías algún otro apartado?