Usabilidad De Contenido Para Móvil: ¿Como Servir Mejor A Tus Lectores Que Navegan Con El Móvil?

Cada vez mas los usuarios de móviles navegan y buscan información en Internet con sus celulares. ¿Pero estas haciendo algo para que tu blog o sitio de noticias sea más fácil de usar por tus lectores?

Photo credit: BBC Mobile

En algunos países europeos, por ejemplo, la cantidad de móviles está muy cerca del punto de saturación, y en muchos browsers presentes en los teléfonos celulares pueden ser fácilmente visualizados sitios web, que originalmente fueron diseñados exclusivamente para ser vistos en un ordenador. De hecho hoy mas del 20% de los usuarios de móviles ingleses usa Internet en sus móviles (fuente: 3G.co.uk).

Es por esto que si tu diseñas, administras, o publicas sitios web, considera seriamente como podría funcionar si lo vieras con tu móvil.

Abid Warsi y el team de la usabilidad WebCredible ha juntado en un set basico de siete guias para quien tiene intenciones de trabajar en su sitio convirtiéndolo para ser visualizado por móviles.

Estas guías están basadas en el actual WebCredible con un inespecificado set de usuarios de móviles. Fueron cuestionados acerca de información de la navegación que hacen los usuarios en diferentes sitios a través de los móviles. Los temas y problemas encontrados forman parte de la siguiente guía.

Aqui los detalles:

7 Guías de Usabilidad para Websites en Aparatos Móviles

1) Encuentra las Necesidades de Los Usuarios Rápidamente

Yahoo!'s oneSearch predice lo que los usuarios están buscando y te da el resultado a tu medida.

Los usuarios de PC y Móviles pueden tener diferentes razones para visitar el mismo sitio.

Los usuarios de móviles lo usan mas para encontrar localidades o tiempo de recorridos, direcciones o lo que esta sucediendo cerca de ellos. También buscan lugares de divertimiento, o simplemente leer algo mientras viajan en bus, o mientras esperan un amigo.

Para tu propio sitio, trata de predecir las necesidades y aplicalas lo mas rápido posible. Las excepciones a este item son las personas que descargan en sus móviles, como por ejemplo los ringtones.

Yahoo! ya lo hace efectivamente con el nuevo servicio para móviles oneSearch service. Buscando 'Cines' produce una lista de cines cerca del lugar donde se encuentra el usuario mostrandole las direcciones y números de teléfono. Haciendo clic sobre 'Call' se abre un box de dialogo en tu móvil. Una función avanzada a breve sera la de buscar en un mapa la dirección y lugar exacto de lo que buscamos.

2. No Repitas la Navegación en Cada Pagina

El sitio BBC breadcrumb trail ahorra espacio y fue un efectivo sustituto para repetir la navegación.

Websites Usables diseñados para los Pc usualmente repiten la navegación en cada pagina.

Sin embargo, la pantalla en los móviles es muy importante como sus componentes para la navegación, al momento que vienen redimensionadas al tamaño de la pantalla. El sitio BAA por ejemplo, ocupa toda la pantalla del móvil en modo que los usuarios pueden navegar visualizando el contenido principal.

Para tu website en el móvil, solamente visualiza la homepage. En otras paginas incluye solamente links para volver a la homepage o desde el punto de donde el usuario partió. En este modo puedes ver arriba o abajo de la pantalla fácilmente. BBC Mobile en efecto con un par de clics breadcrumb trail puedes ir arriba o abajo de la lista de links.

3) Distinguir claramente los artículos seleccionados

El O2's seleccionado necesita ser fuerte para ser notada. Las paginas son diseñadas para una navegación mas simple en Thomson Local.

Los usuarios de movibles tienen un escaso control del cursor.

Esto es porque el mecanismo de puntuación (como el joystick o botones de dirección) maraca simultáneamente la pagina y los links, botones y campos.Debido a esta carencia de control, es importante dar un feedback claro a los usuarios acerca del preciso focus en cada momento. Esto puede ser hecho, cambiando la apariencia de los items. Por ejemplo, puedes cambiar los colores del font y background, links y botones.

Otro ejemplo interesante es el O2's mobile portal Que no resalta los botones muy bien. Agrega un borde azul sobre un fondo celeste, que no se diferencia mucho. Los usuarios tiene que mover el joystick alrededor para encontrar el cursor. Peor todavía, Thomson Local que solo se distingue los campos haciéndolos visibles solo con una linea mas gruesa de lo normal. El contrasto de sus links evidenciados, se ven bien porque se ve la diferencia con el fondo que es blanco.

4) Hacer Lo Mas Simple Posible Al Usuario

Los usuarios caen erróneamente tratando de escribir frases largas en Thomson Local. Los usuarios pueden fácilmente ver los cines usando la lista de Odeon's Cinema.

Permite a los usuarios de seleccionar información en vez de escribir el texto libre (o por lo menos ofrece una alternativa a este método).

Escribiendo el texto en el móvil es fácil equivocarse con tantos botones. Los usuarios de móviles tienen mas probabilidades en incurrir en equivocaciones. Puede ser mas efectivo proveer paginas de fácil actualización.

En Thomson Local, por ejemplo, no es fácil hojear negocios o localidades. Los usuarios tienden a abreviar los términos de búsqueda (ej. tipo de negocios) qué conduce a los resultados inadecuados de la búsqueda. El sitio de Odeon mobile permite al usuario encontrar un cine con la búsqueda u hojeando. Los usuarios que usan la búsqueda, cometen mas errores de aquellos que solo hojean, generalmente encuentra la respuesta luego de 2 links.

5) Muestra Solo La Información Esencial

El contenido innecesario empuja hacia abajo el box de búsqueda en Thomson Local a diferencia de BAA que lo coloca encima del contenido.

Las pantallas del teléfono móvil son por supuesto minúsculas, es solo una fracción de lo que son las pantallas de los PC.

Asegúrate de identificar las paginas que vienen consultadas por los móviles y dándoles solo la informacion necesaria. De lo contrario los contenidos importantes podrían encontrarse abajo sin posibilidad de ser vistos. Ten en cuenta que muchos usuarios de móviles no tienen una tarifa plana y tienen que pagar mucho por los paquetes de datos que descargan. Los usuarios pueden quedarse muy defraudados de pagar contenidos que al final no les sirve.

Los links encabezados en BAA y Thomson Local se toman mucho espacio en la pantalla, dificultan la búsqueda de información. 'Acerca de BAA', 'Ayuda' y 'Publicita con nosotros' no son prioridades de los usuarios de móvil.

6) Posiciona controles básicos en la pagina

En el sitio de TFL fue fácil navegarlo gracias a los controles básicos que se encuentran en su pagina.

Para ahorrar espacio en la pantalla de los móviles, las paginas no tienen botones básicos como 'Volver' o solo muestran la pagina a toda pantalla. Como generalmente ves en otros browsers que incluyen el botón 'volver' en cada pagina.

El Planner del Transporte de Londres posee controles básicos, tales como 'Proxima pagina', 'Vuelve a los resultados' y 'New journey', en el fondo de cada pagina.

7) Diseño y Layout mas accesible

El sitio de TFL es ideal para las pantallas de los moviles. El sitio de BAA no parece ser diseñada para móviles, lo que lo hace muy pobre su visualización.

En tu website, asegúrate que el diseño de tu pagina presente contenidos en el orden justo y hacerlo visualizable por los móviles.

Los layouts de los sitios diseñados para las pantallas Pc, generalmente no se ven bien en los moviles. Además, los browsers para móviles, utilizan un tipo de transcoder que hacen ver la pagina vertical como un retrato.

Es por esto que frecuentemente las paginas diseñadas tienen que ser adaptadas a los usuarios de móviles. Si los usuarios de móviles entran en tu business es hora que pienses en crear sitios a medida para los celulares. Los sitios que se diseñan para los móviles, tienen mejor representación de aquellos que no la poseen.

Por ejemplo el sitio de BAA se visualiza mal en las pantallas de los móviles. Las secciones se ven aproximativas al igual que su diseño. Las palabras con link son difíciles de leer. Al contrario del sitio de Transportes de Londres que aparecen en simples categorías, que hacen fácil y rápido su uso.

Consejos

No descuides tus actuales y potenciales usuarios de móviles no teniendo en cuenta en diseñar sitios para ellos.

Trata de seguir las guías y usa el test de usabilidad de tu sitio web para móviles. Usa este test que te puede dar informaciones que en otros sitios tal vez no encontraras.

En resumen: Considera estas opciones si tienes en mente de crear sitios para móviles. Lee aquí:

1. No hagas nada
   Hacer nada es de por si una solución equivocada, pero obviamente una fácil opción. Los aparatos móviles se están volviendo siempre mas evolucionados permitiendo una visualización mejor, aunque si los sitios fueron creados para PC. Si tu sitio esta hecho con CSS-driven (ej. no usa tablas ni layout) pues entonces esta preparado para los móviles.
2. Crea un handheld stylesheet
   Una rápida solución (y muy veloz de implementar) es crear un stylesheet que solo funcione con aparatos móviles, tomando mas control de del look del sitio para visualizarlo en los móviles. El stylesheet puede esconder items que tu no quieres que aparezcan (a través de el comando CSS display: none). Esta no es la solución ideal ya que muchos browsers para móviles no soportan los stylesheets.
3. Construye un sito para móviles
   La mejor solución, es crear una modifica al sitio web para móviles. Necesitas implementarlo con un sistema de detección automática para controlar si esta siendo visitado por un móvil, en modo que lo mande directamente al sitio especifico para celulares.

Articulo original escrito por Abid Warsi y primera publicación en WebCredible como "7 usability guidelines for websites on mobile devices" el 1 de Octubre de 2007.