Mi web móvil

Según vi en el Curso de diseño de webs eficaces, podemos definir la arquitectura de información como:

El arte, la ciencia y la práctica de diseñar espacios interactivos comprensibles, que ofrezcan una experiencia de uso satisfactorio facilitando el encuentro entre las necesidades de los usuarios y los contenidos del sitio web.

También nos proponían unos pasos a seguir para conseguirlo, grosso modo, eran estos:

1. Conocer a nuestros usuarios
2. Definir estructura y organización de nuestra web.
3. Cómo organizar y presentar los contenidos, incluido sistema de navegación.
4. Diseño. Detalles de colores, fuentes,…

Dicho esto, que sólo es redundar en lo que muchos sabeis, nos queda aplicar este proceso para nuestra web móvil.

Recordemos que nuestros usuarios están navegando con un dispositivo que tiene una pantalla muy pequeña, no es sencillo introducir datos, tiene muchas cosas que le pueden distraer mientras navega, etcétera. Por tanto, nuestro usuario busca algo concreto y rápido. De lo contrario es muy probable que nuestro usuario se vaya de nuestra web.

En la siguiente imagen podemos ver la estructura de nuestra web para pc. La cual no sería nada válida para una web móvil.

Sin centrarnos en la temática de nuestra web, ya sabemos que nuestra web móvil debe ser lo más simple posible. Debo simplificar al máximo y definir de forma muy clara los enlaces, para saber a dónde te llevan claramente.  Podemos crear prototipos, en papel o html, para que los usuarios evaluen y aporten mejoras.

Para hacerlo los más simple posible, tenemos dos aproximaciones, según nos dice la guía de desarrollo de webs para dispositivos móviles:

• Limitar las opciones.
  Coge sólo el contenido que va a ser relevante para un usuario móvil y descarta el resto.  Evita riesgos de que el usuario se pierda en la navegación. Esta aproximación será buena para sitios pequeños o muy enfocados a un tema concreto. Por ejemplo, puede que lo más interesante de nuestra web sea su sección de noticias, localización y contacto. ¿Entonces para qué ponemos enlace a la estructuración y junta directiva, foto incluida, de nuestra empresa?. ¿Recuerdas que voy en bus y tengo 5 minutos para ver tu datos de contacto?.

• Crear una arquitectura de información jerarquica simple y bien etiquetada. Obviamente, esto incluirá la aproximación anterior en la que limitabamos las opciones a presentar. Algunas sugerencias:
  • 5 Categorías como máximo
  • 10 enlaces por página como máximo.
  • No más de 5 niveles de profundidad.
  • Priorizar enlaces por actividad y popularidad.
  • Utilizar accesskeys.
  • Evitar formularios.
  • No usar tablas.

  Una vez que determines las necesidades del contenido y definido la estructura de categorias y etiquetas, crea un mapa web para tener una visión de alto nivel de tu información. Fijaos en la estructura simplificada que podemos obtener de la estructura anterior.

Llegamos a una conclusión clara, y es que la clave para mejorar u obtener la Arquitectura de información de tu web móvil, de nuevo, es tener presente la simplicidad.

Podemos encontrar varios simuladores que nos permitirán obtener una vista previa de nuestra página en dispositivos móviles. También Firefox tiene varias extensiones muy útiles para realizar pruebas, pronto os dejaré una entrada con las que yo utilizo.

Os dejo un listado de los simuladores que más utilizo:

• iPhone (iPhone tester) (Test iPhone)
• Opera Mini (Simulador web) (Descargar simulador)
  
• Simulador incluido dentro de ready.mobi

También puede ser muy interesante DeviceAnywhere. Aunque lo veo excesivo para realizar pruebas sobre el diseño de nuestra página. Sí puede ser interesante para quien realice aplicaciones para móviles, ya que trabajarán sobre dispositivos reales.

Ya está abierto el plazo de matrícula, hasta el 26 de Febrero, de una nueva edición del Curso en línea de introducción al diseño de webs eficaces.

El curso no esta destinado al diseño web en general sino a la eficacia en el diseño web, basado en estándares (css) y en criterios de eficacia (usabilidad, accesibilidad y arquitectura de la información).

Los profesores del curso son Inma Bermejo Salar, Juan Carlos García Gómez y Yusef Hassan Montero.

Lo realicé en la edición del año pasado y me pareció excelente. Os lo recomiendo.

A través de anieto2k descubro XUI, un framework de javascript para dispositivos móviles. Tiene un tamaño muy reducido, sólo 6 Kb, comparado con jQuery, Mootools, ExtJS, etcétera.

Why another JavaScript framework?! When development of PhoneGap was under way we noticed slow load times for modern JavaScript frameworks (such as Prototype, MooTools, YUI, Ext and (yes) even jQuery. A big reason why these libraries are so big is because is mostly they contain a great deal of cross browser compatability code.

Como veis, justifican su desarrollo y escaso tamaño debido a que el resto de framework contienen mucho código debido al cross browser y no son apropiados para dispositivos móviles.

Nos dicen que está desarrollado para trabajar en navegadores basados en WebKit(Safari y Google Chrome), Fennec(Mozilla) y Opera, pero trabajan en una versión compatible con IE Mobile y Blackberry.

Este tipo de desarrollos demuestran que la web móvil es un mercado emergente, y que se trabaja para que cada vez sea más atractiva. Tampoco estoy diciendo que sea necesario javascript para hacer una web atractiva, pero en muchos casos el javascript no intrusivo nos puede facilitar la vida.