Los textos de qweos.net

Guías Prácticas para Profesionales Web: Buenas Prácticas en Web Móvil

Hacía tiempo que no se publicaba una nueva edición de las Guías Prácticas para Profesionales Web, en esta ocasión, hablamos sobre las Buenas Prácticas en Web Móvil 1.0

Los dispositivos móviles poseen una serie de características que suelen dificultar su uso:

• Suelen tener pantallas pequeñas, con lo que se muestra poca información a la vez.
• Actualmente, las conexiones son malas (lentas; con poco ancho de banda y alta latencia), inestables y caras.
• Las interfaces de usuario son heterogéneas y dependen de cada dispositivo.
• Son necesarias estrategias de diseño diferentes a los ordenadores comunes. Normalmente la interacción es costosa; los botones y teclas son pequeños, existe dificultad para escribir (gran control de la psicomotricidad fina), para poder leer…

Ya Jakob Nielsen, estando en Fundamentos Web 2005, dijo:

"Los servicios móviles que no sean muy fáciles de usar fracasarán"

Buenas Prácticas en Web Móvil 1.0

Para poner un poco de orden y criterio, el W3C ha lanzado Mobile Web Best Practices 1.0 o algo así como las "Buenas Prácticas para el Desarrollo Web en Dispositivos Móviles". Con este documento el W3C quiere ofrecer un conjunto de pautas que ayuden a los desarrolladores Web a proporcionar una mejor experiencia a los usuarios de dispositivos móviles.

Para los que se hayan peleado alguna vez con las Pautas de Accesibilidad al Contenido Web 1.0 (WCAG 1.0), muchos de los principios les serán bastante familiares. A continuación pongo una traducción libre al español del Summary of Statements – Mobile Web Best Practices 1.0 (versión candidata de 2006). El siguiente listado está también libremente reorganizado por mí:

Navegabilidad

• URI. Intente que la URI de entrada al sitio sea tan corta como pueda.
• Barra de navegación. Ofrezca en la cabecera de la página sólo la navegación mínima necesaria.
• Recursos externos. Intente que los enlaces a recursos externos sean los mínimos posibles.
• Navegación. Ofrezca mecanismos de navegación consistentes.
• Equilibrio de enlaces. Valore el tener muchos vínculos en una página y que el usuario tenga que seguir muchos enlaces hasta encontrar lo que busca.
• Teclas de acceso. Proporcione atajos de teclado (accesskeys) a los enlaces de navegación y a las funciones más usadas.
• Enlaces. Identifique de forma clara el destino de cada enlace. No cambie el formato de los enlaces a menos que sepa que el dispositivo es compatible con la modificación.
• Mapas de imagen. No utilice mapas de imagen a menos que sepa que el dispositivo los soporta. En cualquier caso, piense en vías alternativas para poder mostrar la información.
• Ventanas emergentes (Pop-Up). No utilice ventanas emergentes. No cambie la ventana actual sin informar al usuario.

Control del usuario

• Recarga automática. No haga que las páginas se recarguen automáticamente cada cierto tiempo, a menos que se informe al usuario de ello y se ofrezca una forma para poder detener dicha acción.
• Redireccionamiento. No utilice código que redireccione automáticamente las páginas. En lugar de eso, configure el servidor para que encargue de redireccionarlas.
• Pulsaciones de teclas. Intente que las teclas que tenga que pulsar el usuario sean las mínimas necesarias.

Contenido

• Adecuación. Compruebe que el contenido es apropiado para su uso en un contexto móvil.
• Claridad. Use un lenguaje claro y simple.
• Limitación. Limite el contenido al que el usuario solicita.
• Títulos de las páginas. Cree títulos de páginas cortos pero descriptivos.
• Consistencia. Cerciórese de que el contenido es consistente cuando se accede desde diferentes dispositivos.
• Jerarquía semántica. Verifique que el contenido más importante de la página aparece antes que el contenido secundario.

Imágenes

• Imágenes. No use imágenes para lograr el posicionamiento de elementos, crear espacios, etc.
• Tamaño de imágenes. No utilice imágenes que no puedan mostrarse en el dispositivo. Evite imágenes grandes o detalles de alta resolución. Defina el tamaño de las imágenes en el marcado si poseen una medida específica.
• Imágenes de fondo. Cuando utilice imágenes de fondo, verifique que el contenido sigue siendo legible.
• Escalado de imágenes. Si se deben escalar las imágenes a una medida específica, redimensiónelas desde el servidor.

Color

• Uso del color. Compruebe que la información transmitida por medio del color sigue estando disponible sin él.
• Contraste del color. Compruebe que los colores de primer plano y del fondo contrastan lo suficiente.

Diseño

• Página limitada. Divida la página en partes cuyos tamaños sean fáciles de utilizar en el dispositivo.
• Peso limitado. Asegúrese de que el peso total de las páginas es el adecuado para las limitaciones de memoria del dispositivo.
• Desplazamiento. Limite el desplazamiento de la página a una dirección, a menos que el desplazamiento secundario pueda evitarse.
• Medidas. No use medidas definidas en píxeles. No utilice medidas absolutas en los valores de los atributos del marcado ni en los valores de las hojas de estilos.
• Fuentes. No confíe en la compatibilidad de las fuentes tipográficas que se declaran en los estilos.
• Capacidades. Aproveche las capacidades del dispositivo para ofrecer una experiencia de uso óptima.
• Pruebas. Haga pruebas tanto con dispositivos reales como con emuladores.

Tecnologías y marcado

• Marcado válido. Cree documentos que sean válidos con los estándares y tecnologías del W3C.
• Minimice. Use un marcado conciso y eficaz.
• Marcos. No use conjuntos de marcos.
• Estructura. Use las características del lenguaje de marcado para indicar la estructura lógica del documento. Haga uso de un marcado semántico.
• Tablas
  • No utilice tablas a menos que sepa que el dispositivo es compatible con ellas.
  • No utilice tablas anidadas.
  • No use las tablas para la maquetación
  • Cuando sea posible, ofrezca alternativas a la presentación de datos tabulados.
• Scripts, objetos, applets y plug-ins: no use elementos incrustados en las páginas a menos que sepa que van a funcionar en el dispositivo. En cualquier caso, ofrezca alternativas para los usuarios que no puedan verlos.
• Alternativas no textuales. Ofrezca alternativas textuales para cada elemento no textual.
• Compatibilidad con la codificación de caracteres. Verifique que el contenido está codificado con un juego de caracteres que va a ser soportado por el dispositivo.
• Codificación de caracteres. Indique el juego de caracteres que está utilizando.
• Mensajes de error. Ofrezca mensajes de error informativos y significativos, con los mecanismos de navegación necesarios para salir del error y volver a la información útil.
• Cookies. No confíe en que las cookies estén siempre disponibles.
• Caché. Intente guardar en memoria la información de las respuestas HTTP.
• Formato del contenido. Cuándo sea posible, envíe el contenido en un formato preferido y que sepa que va a ser compatible con el dispositivo.
• Incompatibilidades. Sea prudente a la hora de trabajar con implementaciones deficientes.

Hojas de estilos

• Use hojas de estilos para controlar la presentación, a menos que el dispositivo no sea compatible con ellas.
• Organice los documentos de tal forma que sean legibles sin hojas de estilos.
• Intente que las hojas de estilo sean pequeñas (en peso).

Formularios

• Valores por defecto. Ofrezca valores preseleccionados por defecto y evite la introducción libre de texto cuando sea posible.
• Modo de entrada. Si el dispositivo es compatible, especifique una forma por defecto de insertar texto, idioma y/o método de introducción.
• Orden de tabulación. Cree un orden lógico entre los enlaces, controles de los formularios y objetos.
• Etiquetado de controles. Etiquete adecuadamente todos los controles de los formularios y asocie explícitamente cada etiqueta a su control.
• Posición de los controles. Coloque las etiquetas de tal forma que se muestren correctamente y en correspondencia con los controles de formulario a los que se refieren.

Comprobación automática

Los del W3C están en todo y estas "buenas prácticas" se pueden comprobar automáticamente con la herramienta (aún en desarrollo) W3C Mobile Web Best Practices checker

¿Más información?

• En la Red es muy probable que alguien se encuentre haciendo lo mismo que tú. Mientras preparaba este artículo, me encontré con que Gonzalo Bravo García de "Blog Posible" ya había traducido, probablemente de manera más rigurosa y formal que yo, el Resumen de Principios: Buenas Prácticas en Web Móvil 1.0.
• W3C Mobile Web Initiative. Iniciativa de Web Móvil, el grupo del W3C encargado de definir las pautas (en inglés)
• Guía Breve de Web Móvil, introducción publicada por la oficina española del W3C.
• Usabilidad en aplicaciones para teléfonos móviles publicado en Alzado.org por Miquel Nieto y Jose María Sánchez de Ocaña.
• El futuro de la web, está en los dispositivos móviles, también en Blog Posible.
• Ring, un blog sobre desarrollo y usabilidad Web para dispositivos móviles.
• Handheld Usability Web y libro de Scott Weiss sobre usabilidad en dispositivos móviles (en inglés).

Actualización del 5 de marzo de 2007: ahora puedes comprobar qué tal se leen tus páginas en ciertos dispositivos móviles.

Actualización del 15 de julio de 2008: la oficina española del W3C ha resumido las Buenas Prácticas en Web Móvil en formato tarjeta.

Actualización del 3 de marzo de 2009: el Observatorio de Internet Móvil ha publicado Líneas Maestras de Diseño para la Web Móvil, una traducción libre del Design Guide de la comunidad Volantis.

También puede interesarte...

• Mobile Web Design
• Introduction to W3C’s Mobile Web Best Practices
• Guías Prácticas para Profesionales Web: Sistemas de educación en línea (e-learning)
• WCAG 2.0 en pocas palabras