Mejores Prácticas en Pruebas de Usabilidad para Web Móvil

Seguramente tendrán un buen contexto respecto a la existencia de estándares, marcos de referencia, guías, buenas prácticas, etc., que continuamente se publican en el mundo con el fin de definir criterios y pautas que apoyen a los desarrolladores de sitios web, para brindar una buena experiencia al cada vez más creciente grupo de usuarios de dispositivos móviles.

W3C (World Wide Web Consortium), es una comunidad internacional donde sus integrantes trabajan en conjunto para desarrollar estándares web. Está dirigida por Tim Berners-Lee, creador de URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) y HTML (Hyper Text Markup Language), que son las principales tecnologías sobre las que se basa la web. Esta comunidad ha liberado —entre otros importantes estándares y documentos— las Mobile Web Application Best Practices (disponibles en distintas versiones, la más reciente es la de Diciembre de 2010).

En las pruebas de software para dispositivos móviles, resulta muy conveniente considerar dichas recomendaciones, ya que al implementarlas se busca no sólo lograr la mayor calidad posible y satisfacer a los usuarios actuales, sino ampliar el mercado de las empresas dado que ya una parte considerable de la población utiliza su smartphone o tablet como mecanismo principal para encontrar información, productos, entretenimiento, soluciones, etcétera.

Sabemos que en lo referente a web móvil, los ratings de las aplicaciones están a la vista de cualquiera, por lo tanto, sería difícil ocultar una pobre calidad, que incluso pudiera ser una de las principales razones de su poco éxito.

En vista de lo anterior, enfocaremos el contenido de la presente entrega en mostrar algunos de los aspectos de usabilidad para web móvil, que se sugiere tener presentes entre nuestra lista de pruebas imperdonables. Es decir, sería deseable que nuestros checklist, escenarios o casos de pruebas, contemplen entre otros, los siguientes elementos para buscar el éxito de nuestras aplicaciones móviles.

A) Evaluar si el contenido es tan flexible como para ser utilizado con una gran variedad de dispositivos. Ello permitirá alcanzar un mayor número de usuarios y obtener más satisfacción de su parte. Considerar las diferentes plataformas, sistemas operativos, tamaños de pantalla, etc.

1) Evaluar coherencia temática. El contenido desde una URI refleja la misma información al usuario, sin importar qué dispositivo móvil utilice.

2) Capacidades/características. Verificar que se aprovechen al máximo las características de los dispositivos móviles, para proveer una mejor experiencia de uso.

3) Deficiencias en la implementación. Asegurarse que se hayan tomado medidas adecuadas para evitar problemas en la implementación.

4) Pruebas. Cerciorarse que las pruebas realizadas se efectúen tanto en emuladores, como sobre varios modelos de dispositivos móviles reales.

B) Evaluar el apego a estándares web buscando garantizar una mayor interoperabilidad. La diversidad de modelos y opciones disponibles en dispositivos móviles, no debiera convertir en un caos la experiencia del usuario debido a arbitrariedades en sus formas de operar.

5) Etiquetado válido. Asegurar la creación de documentos de contenido válidos de acuerdo a las gramáticas formales disponibles.

6) Compatibilidad de formato. El contenido enviado por la aplicación móvil debe ser en un formato compatible con el dispositivo.

7) Uso de hojas de estilo. Se sugiere el uso de hojas de estilo para las maquetas y presentación de contenido.

8) Estructura. Uso de las funciones del lenguaje de etiquetado para definir la estructura lógica del documento.

9) Mensajes de error. Asegurarse de que los mensajes de error realmente faciliten el regresar al contenido anterior, siendo lo suficientemente informativos.

C) Evaluar posibles problemas de diseño. Los cuales pudieran hacerse más evidentes, entre otras cosas, debido a pantallas y teclados pequeños. Es necesario verificar que se esté evitando el uso de:

10) Tablas anidadas.

11) Gráficos para el espaciado.

12) Marcos.

13) Mapas de imagen.

14) Ventanas emergentes. (Se sugiere evitar el uso de éstas y si se cambia de ventana, informar al usuario).

D) Identificar consideraciones o limitantes tecnológicas dependientes de funciones que solo estén disponibles en ciertos dispositivos móviles.

15) Fuentes. Usar las de mayor compatibilidad posible.

16) Cookies. No depender de la existencia de éstas.

17) Compatibilidad de tablas. Asegurarse de que si se usan tablas es porque son compatibles con los dispositivos.

18) Objetos o Scripts. No debe haber una dependencia de los objetos o scripts integrados.

19) Colores. Asegurarse de que la información mostrada por medio de colores, también sea comprensible sin color.

E) Evaluar la calidad en la Navegación.

20) Barra de Navegación. Asegurarse de proporcionar una barra de navegación reducida y que esté concentrada en la parte superior de la página.

21) Navegación. Revisar que los mecanismos de navegación sean consistentes entre las páginas.

22) Identificar destino de cada vínculo. Revisar que cada link tenga claramente identificado un destino.

23) Teclas de acceso rápido. Designar teclas de acceso rápido a los links y funciones más utilizadas.

24) URIs: Cerciorarse que sean lo más cortas posible.

25) Balance. Asegurarse de que haya un balance entre contar con demasiados vínculos en una página y hacer que el usuario vaya de un sitio a otro hasta llegar a lo que busca.

F) Evaluar posibles problemas de compatibilidad relacionados a colores, imágenes, estilo, pantalla. Es cierto que elementos como éstos pueden facilitar el destacar cierto contenido, pero a veces pueden propiciar errores debido a las características de pantalla, contrastes de color, formato, etc., de los diversos dispositivos.

26) Re-dimensión de imágenes. Asegurar que se redimensionen las imágenes en el servidor, si tienen un tamaño intrínseco.

27) Gráficos grandes. Verificar que no se empleen imágenes que no pueden ser mostradas en el dispositivo (grandes o con gran resolución), excepto para información crítica que de otro modo se perdería.

28) Legibilidad de la imagen de fondo. Verificar que el contenido siga siendo legible en el dispositivo al emplear imágenes de fondo.

29) Contraste de color. Verificar que la combinación de color del primer plano y el color de fondo proporcionan un contraste adecuado.

30) Scrolling. Revisar que el desplazamiento entre la página se limite a una sola dirección, a menos que sea indispensable también el desplazamiento secundario.

31) Límite de tamaño de página. Verificar que el tamaño de toda la página sea apropiado a las limitaciones de memoria del dispositivo.

32) Tamaño de las hojas de estilo. Uso de hojas de estilo pequeñas.

G) Evaluar los posibles problemas relacionados a retrasos y tiempos de espera en la red.

33) Actualización automática. Verificar que la página no se actualice automáticamente, a menos que se haya informado al usuario y éste tenga forma de desactivarla.

34) Caché. Cuidar que en las respuestas HTTP se proporcione información de caché.

35) Recursos externos. Verificar que se mantenga al mínimo el vínculo a recursos externos.

H) Evaluar que el diseño facilite la introducción de datos, evitando al máximo el uso de teclado u otros métodos monótonos de manejar en dispositivos móviles.

36) Reducción de uso del teclado.

37) Evitar al máximo la introducción de texto.

38) Existencia de un orden de tabulación.

39) Existencia de selección por default.

40) Modo de entrada por default.

41) Etiquetado de controles. Verificar que se asignen adecuadamente etiquetas a todos los controles de formularios.

42) Posición de controles. Verificar que las etiquetas estén colocadas adecuadamente respecto a los controles que correspondan.

I) Evaluar que la información proporcionada a los usuarios de dispositivos móviles sea lo más limitada y sintetizada posible.

43) Título de la página. Asegurarse que el título de la página es corto pero descriptivo.

44) Claridad. Hacer uso de un lenguaje claro y simple.

45) Adecuado. Verificar que el contenido es adecuado para su uso en el contexto móvil.

46) Limitación. Evaluar que el contenido esté limitado a lo que el usuario ha solicitado.

47) Material principal. Asegurarse que el contenido o material principal de la página se ubique antes del material que no lo es.

48) Tamaño usable de la página. Verificar que se divida en porciones usables pero de tamaño limitado.

Estas son las buenas prácticas de la versión más reciente publicadas por el W3C; una buena combinación entre las anteriores y las siguientes, seguramente nos permitirán generar pruebas más completas sobre nuestros sitios y aplicaciones web para móviles (se evita el detalle por cuestión de espacio):

1. Uso escaso de cookies.

2. Uso apropiado de las tecnologías de almacenamiento del lado del cliente para datos locales.

3. Replicar datos locales.

4. No Ejecutar datos JSON (Notación de objetos JavaScript) no confiables.

5. Asegurarse que el usuario es informado sobre el uso de la información personal y de dispositivos.

6. Habilitar inicio de sesión automático.

7. Utilizar compresión de transferencia.

8. Minimizar aplicaciones y tamaño de datos.

9. Evitar redirecciones.

10. Optimizar las solicitudes de red.

11. Minimizar recursos externos.

12. Agregar imágenes estáticas dentro de Sprites.

13. Incluir imágenes de fondo en línea en hojas de estilo CSS.

14. Recursos caché Referencias Recursos Fingerprinting.

15. Datos caché AJAX.

16. No enviar información de

cookies innecesariamente.

17. Mantener razonable el tamaño del DOM (Document Object Model).

18. Optimizar el tiempo de inicio para la aplicación.

19. Minimizar la latencia percibida.

20. Diseño para métodos de interacción múltiple.

21. Preservar el enfoque en actualizaciones de páginas dinámicas.

22. Uso de identificadores de fragmento para manejar las vistas de la aplicación.

23. Hacer de los números de teléfono un “Click-to -Call “.

24. Garantizar flujos de texto de párrafo.

25. Garantizar la consistencia de estado

entre dispositivos.

26. Considerar las tecnologías específicas para móviles para iniciar aplicaciones web.

27. Uso del elemento Meta Viewport para identificar tamaño deseado de la pantalla.

28. Preferir Server-Side Detection cuando sea posible.

29. Utilice Client-Side Detection cuando sea necesario.

30. Utilice Clasificación de dispositivos para simplificar la adaptación del contenido.

31. Soportar una variante No-JavaScript si es el caso.

32. Ofrecer a los usuarios una variedad

de interfaces.

Vale la pena revisar además, las herramientas que nos ayudan de forma automática a evaluar muchas características de usabilidad y accesibilidad de este tipo de aplicaciones, y apoyarnos en algunas que el mismo W3C proporciona disponibles en: www.w3c.org/QA/Tools

Como ejemplo, el “MobileOK checker”, realiza varias pruebas en una página web para determinar qué tan amigable es en su versión móvil. Las pruebas realizadas se encuentran definidas en la especificación “mobileOK Basic Tests 1.0”. Una página web es considerada mobileOK una vez que pasa todas las pruebas (documentadas en su totalidad y disponibles para su análisis en la sección de Ayuda). Si se desea validar contenido específico como hojas de estilo CSS, o para encontrar links rotos, etc., hay otro tipo de validadores y herramientas que proporciona el mismo W3C, todas muy útiles para los fines que hemos venido mencionando.