10 tips para mejorar la usabilidad en web móvil

Recién leo en Hongkiat una nota con 10 tips para mejorar la usabilidad en web móvil que vale la pena tomar en cuenta

  1. Diseña en base a la resolución de pantalla.
  2. Divide las páginas web en pequeñas partes.
  3. Simplifica el diseño.
  4. Siempre deja la opción de “Ver el sitio web completo”.
  5. Posiciona bien los elementos de navegación según la audiencia y el dispositivo.
  6. Usa enlaces de texto, en vez de imágenes (para reducir el peso de la página web).
  7. Diferencia el enlace seleccionado del resto de enlaces.
  8. Balance los enlaces según la página que se muestra. No intentes mostrar todos los enlaces en una página.
  9. Reduce el ingreso de texto, en su lugar busca usar ingreso de opción multiple o autocompletado.
  10. No uses pop-ups ni páginas que se refresquen automáticamente.

Pueden ver la explicación y ejemplos de cada tip en el artículo original: Mobile Web Design: 10 Tips To Better Usability (inglés).


Fotografía por John Larsson, liberada bajo licencia Creative Commons by.

Diseñar la web móvil es más que solo adaptar al navegador

iPhone Transit Planner por illustir (cc-by)

iPhone Transit Planner por illustir (cc-by)

Esta semana pude leer un artículo en el blog de Pablasso llamado ¿Cómo debe ser el Internet para móviles? que es acerca de cómo WAP y WAP2 han quedado obsoletos con la llegada del iPhone de parte de Apple, y como él acertadamente menciona, ahora no hay tantas limitaciones de memoria o software como antes. Hasta aquí puedo darle la razón, con Apple y Android soportando HTML5 ¿quién quiere usar WAP?

Por otro lado termina el artículo con un par de comentarios en los que no estoy de acuerdo, vamos por partes:

Pablasso: En mi mundo ideal los móviles deberían de adaptarse a mostrar los contenidos lo más fielmente posible, y si no tienen la pantalla adecuada, entonces proveer aplicaciones para obtener esos contenidos por otros medios, como puede ser RSS

Es un error grave pensar que la web debe ser igual todo el tiempo y en todo lugar, especialmente  en el campo de los móviles.

Web móvil va más allá de adaptar al navegador, importan las capacidades del dispositivo así como también importa el contexto (lugar, hora, tarea, etc) en donde recibe la información, y para apoyar esto citó a la guía breve de web móvil de la W3C:

W3C: Es importante tener en cuenta que existen grandes diferencias entre usuarios móviles y usuarios fijos, como son los diferentes tipos de contenido que manejan, las capacidades de los dispositivos que utilizan (pantallas pequeñas) y el contexto en el cual el usuario recibe el contenido (por ejemplo, en el autobús).

Mostrar en el móvil exactamente lo mismo que en la PC no es siempre lo mejor, aunque también es cierto que un buen navegador, como Safari Mobile, puede ayudar mucho a navegar sobre esas webs no optimizadas para móviles y crear una mejor experiencia web que WAP o WAP2.

iPhone junto al iPod Touch son buenos dispositivos con un excelente navegador pero están muy lejos de competir contra una PC. En un día normal de navegación he llegado a bloquear Safari Mobile hasta 3 veces, no puedo cargar más de 2 webs “normales” (no adaptadas a móviles) y menos usar Flash.

De nuevo, la web móvil no es acerca de un navegador, hay que considera rendimiento (hardware), compatibilidad (software), velocidad de transferencia (conexión) y costo (de conexión, del móvil, etc.).

Pablasso: A menos que sea punto clave para tu negocio, yo no me preocuparía en ofrecer una versión web para móviles con navegadores inferiores al iPhone.

Tengo que aceptar estoy de acuerdo, si no es clave para tu negocio no debes preocuparte por desarrollarlo, porque para todo hay mercado y es bueno enfocarte en el tuyo. Por ejemplo, si el 90% de las visitas desde móviles provienen de iPhone ¿qué sentido tendría invertir tiempo y dinero en desarrollar una web WAP?

Sin embargo, no hay que olvidar que el enfoque de la web es lograr el mayor alcance posible, independientemente del medio, el dispositivo e incluso de limitaciones físicas. De allí la importancia de apegarse a estándares y no desarrollar solo para uno.

Más información sobre la web móvil

Tips de desarrollo de widgets para móviles

Mobile Widgets por Dan Taylor (CC)

Mobile Widgets por Dan Taylor (CC)

Hoy en el blog de Betavine, Mobile Web Widgets, encontré una lista de consejos al desarrollar widgets para móviles. Me gusta la lista, especialmente porque aplica en el desarrollo web móvil.

Los dejo con una traducción un poco libre de Technical tips for mobile widget development:

  • Automaticamente selecciona el campo principal cuando sea posible, es más fácil que usar el joystick del teléfono para llegar a él.
  • Los efectos al colocarte encima de un elemento (Hover) son importantes para la usabilidad. Haz evidentes los botones porque a veces es difici llegar a ellos.
  • Asegurate que el móvil tenga la fuente que tu usas y especialmente que se vea bien. las fuentes cursivas pueden no verse bien.
  • No redimensiones imágenes usando HTML, los teléfonos lo hacen mal y se ve mal.
  • Asegurate de tener un buen icono que se vea genial en el “Administrador de Widgets”.
  • Usa CSS Sprites porque es más fácil migrar tu widget a la web..
  • No hay un manejador de evento keypress, tenlo presente si planeas crear un juego.
  • Recuerda, el teléfono es rápido, pero no tan rápido como tu computadora. Tampoco la conexión a Internet, optimiza lo más que puedas.

Como pueden ver, no son consejos fuera de este mundo, son consejos muy básicos pero siempre debemos tener en cuenta al desarrollar para la web móvil, o los widgets para móviles.

Prefieren los móviles

Accessing the Web from a mobile device is not something users do because they have to, it is something they do because they want to

Que en una traducción un tanto libre dice:

Accesar a la web desde un dispositivo móvil no es algo que los usuarios hagan porque pueden, es algo que hacen porque quieren

yahoo - portadaUna frase escrita por el MWI Team blog basada en IBM Study Finds Consumers Prefer a Mobile Device Over the PC, un estudio de IBM realizado el pasado octubre en Estados Unidos, China y el Reino Unido. El estudio mostró que al menos el 50% de las personas, de las 600 que participaron, han sustituido la computadora por un dispositivo móvil. Algo impresionante y que en mi caso es totalmente cierto. Además se espera que en el 2013 la cifra aumente de 50% a 80%, aunque personalmente no apostaría por eso.

Siguiendo con los resultados del estudio, muestran que uno de los mayores usos, además de comunicación, es el consumo de información a través de la web móvil, y que gracias a esto se espera que aumente el número de personas que prefieren los móviles. Los usuarios esperan usar más el internet desde el móvil para el 2011, además de tener más contenido disponible, incluyendo redes sociales y mensajería instantánea.

Recomendaciones para desarrolladores

También dentro del documento hacen algunas recomendaciones para la gente que trabaja con móviles acerca de cómo actuar frente esta adopción. Abajo los dejo tres de los cinco puntos que conciernen a la web móvil:

  • Definir una estrategia respecto al Internet móvil para entender el comportamiento de los consumidores y poder identificar la estrategia que mejor aproveche los puntos fuertes.
  • Transformar el modelo de negocios para integrarlo la estrategia respecto al internet móvil, esto incluye áreas de investigación y desarrollo, mercadeo y ventas (marketing and sales) o servicios de entrega (service delivery).
  • Apoyar la adopción de estándares libre y open source para hacer crecer y nutrir el ecosistema(móvil).

Read on mobile: 50%

readonmobile

Cuando escribí que el 2009 es el año de los móviles, en parte fue por las estadísticas y en parte porque es algo que ya se siente. Tengo dos móviles, un Sony Ericsson y un iTouch, sin mencionar la PDA abandonada, y día a día es más fácil navegar en Internet, ya sea porque los sitios web tiene una versión móvil o porque el navegador es lo suficientemente capaz de navegar en casi cualquier web.

Tener el móvil es un buen avance, otro es que la web en general ya se esta preparando, ya hay muchas webs con versión móvil, pero por otro lado ¿estamos aprovechando todo esto?

Ayer revisaba mis estadísticas de Google Reader, y es sorprendente que casi la mitad de mis lecturas son desde el móvil, por supuesto hay blogs que leo solo en la computadora pero también es cierto que otros solo los leo desde móvil. Casi seguro lo mismo sucede con otros sitios web que visito como Twitter, Facebook, Friendfeed y Flickr.

La web móvil tarde o temprano va a instalarse, como dije antes, creo que será este año 2009, lo que me intriga saber es qué tan rápido las personas la van a empezar a consumir. Sé que esto ya esta pasando, pero no a todos los niveles, en Latinoamérica ni siquiera tenemos buenos planes de Internet por parte de las telefónicas, actualmente tampoco veo a la gente con necesidad de conectarse desde cualquier lugar, la mayoría aún desconoce los beneficios de esto.

¿Cuando llegará la época en que digamos “Read on mobile: 100%”?

Nota: Los porcentajes de la imagen son de los temas leídos (no ignorados) y no el porcentaje que leo en móvil.

Más artículos acerca de la web móvil

La mejor forma que he encontrado de aprender algo, además de explicárselo a alguien, es escribirlo. Así fue como hace un mes aproximadamente me decidí aprender más de web móvil y resulte escribiendo cuatro artículos para el foro de móviles de Cristalab:

  1. Desarrollo de sitios web móviles con Yahoo! Blueprint. Es una reseña rápida del Framework de Yahoo! para crear aplicaciones móviles, Yahoo! Blueprint. Más adelante haré una reseña de la versión 1.1 (la del artículo es la 1.0) y entraré en detalles sobre el tema.
  2. Siete errores al diseñar un sitio web móvil. Una critica constructiva a un artículo sobre errores al diseñar para la web móvil.
  3. Las estadísticas web declaran al 2009 el año de los móviles. La era de los móviles ya ha llegado, por eso estoy convencido de que el 2009 es el año de los móviles. En este artículo hablo sobre los motivos que me llevan a pensar eso.
  4. Estilo iPhone para las carpetas de Apache. El último artículo, o mejor dicho tutorial, en donde explico de forma más técnica como convertir el estilo de las carpetas del servidor web para que sean compatibles con Safari Mobile (iPhone/iTouch).

Además les recomiendo el tema La revolución móvil de Internet está en manos de Webkit que escribió Freddie de Cristalab.

Artículos recomendados en Friendfeed

Si te interesa el tema de la web móvil considera unirte a la sala web móvil en Friendfeed en donde puedes compartir más artículos o leer los que comparto ocasionalmente.

Espero esto te sirva para iniciarte en la web móvil o si estas dentro ayudes a difundir la palabra ;-)