Imágenes, iconos y botones de herramientas en aplicaciones móviles

Anteriormente, hemos escrito sobre la integración de APIs y aplicaciones móviles para crear una experiencia de usuario rica y atractiva. Desde que publicamos nuestra entrada anterior, hemos seguido mejorando la aplicación de demostración de GPS, añadiendo soporte para APIs que permiten obtener información meteorológica actual y eventos programados en las cercanías.

Uno de los desafíos al ofrecer todas estas funcionalidades en una pantalla móvil pequeña es proporcionar a los usuarios un sistema de navegación claro, consistente y fácil de usar en todas las secciones de la aplicación.

Utilizar imágenes de iconos como botones en aplicaciones móviles puede crear un menú de navegación elegante y atractivo, especialmente si los iconos se eligen basándose en convenciones reconocibles y ampliamente aceptadas. Por ejemplo, una flecha que apunta a la izquierda a menudo indica "volver", y el icono de un disquete suele representar la función de "guardar", incluso cuando el destino final no sea necesariamente un nuevo archivo ni un disco.

En esta publicación, describiremos cómo utilizar iconos de imagen para crear menús de navegación multiplataforma con botones de herramientas en aplicaciones móviles, utilizando MobileTogether.

Las capturas de pantalla que se muestran a continuación ilustran la aplicación "Where Am I" funcionando en dispositivos Apple iOS y teléfonos Android.

En cada pantalla, el usuario ha obtenido las coordenadas GPS actuales y se le presenta la misma serie de opciones, representadas por botones de herramientas:

• Visualice una fotografía satelital de la ubicación, según el nivel de zoom seleccionado
• Enviar un mensaje de texto que contenga la ubicación actual
• Abrir la aplicación de mapas predeterminada en la ubicación actual
• Realice una búsqueda general en la web basada en la ubicación actual
• Obtenga las condiciones climáticas actuales en esa ubicación
• Consulte una lista de próximos eventos en los alrededores
• Utilice la API de búsqueda de MapQuest para buscar en los alrededores

Los botones de las herramientas se definen y se configuran en la aplicación utilizando MobileTogether Designer, la herramienta de desarrollo de aplicaciones visual que permite a los desarrolladores previsualizar la estructura de la aplicación y probar la lógica de ejecución compleja en cualquier momento durante el desarrollo.

Nuestro menú de navegación está estructurado como una serie de tablas, que se muestran aquí tal como se ven en la ventana de diseño de páginas del programa MobileTogether Designer:

Existen varios aspectos a considerar al crear un menú con iconos, especialmente para garantizar una experiencia de usuario predecible y consistente en una variedad de dispositivos móviles con diferentes tamaños de pantalla y resoluciones.

En primer lugar, es importante que cada imagen sugiera de manera efectiva la función que se activará al hacer clic en ella.

En segundo lugar, las imágenes deben ser lo suficientemente grandes para adaptarse a usuarios con dedos de diferentes tamaños. A menudo escuchamos a los usuarios de dispositivos móviles excusar los clics accidentales debido a que tienen "dedos torpes". Pero, ¿era el usuario torpe, o es que la interfaz de la aplicación es demasiado pequeña y confusa para navegar?

Finalmente, para las aplicaciones que muestran múltiples pantallas con diversos botones de herramientas, una estructura y funcionalidad consistentes en todas las páginas hacen que la aplicación sea mucho más intuitiva de usar.

Nuestra aplicación de demostración "Where Am I" combina estratégicamente la funcionalidad de dos propiedades de control para gestionar el tamaño y la disposición de los iconos de las herramientas.

Establecer el ancho de control para cada icono en "fill_parent" nos permite utilizar un único archivo de imagen para todos los tamaños de pantalla. En nuestra aplicación, cada icono es un archivo de imagen .png de 192x192 píxeles, y "fill_parent" redimensionará automáticamente la imagen para que se ajuste al ancho de la columna en cada dispositivo móvil utilizado por el usuario final.

Las dimensiones de las columnas de la tabla para cada icono de herramienta se definen mediante expresiones XPath. Utilizamos un elemento en el árbol de datos persistentes para especificar el ancho de las columnas de los iconos de las herramientas. Esto nos permitió experimentar con diferentes tamaños en diversos dispositivos, simplemente redefiniendo el valor en el árbol de datos, en lugar de editar cada propiedad de ancho de columna para cada prueba. En general, utilizamos tres tamaños diferentes de iconos en la aplicación. Aquí está la parte del árbol de datos donde se almacenan los anchos de las columnas:

La tabla también incluye columnas vacías para crear márgenes alrededor de cada icono de herramienta. El ancho de las columnas para los márgenes está dejado en blanco, lo que significa que todo el espacio restante no asignado se divide equitativamente entre ellas. Además, hemos añadido un control de espaciado entre las filas de iconos para crear el margen vertical entre ellas.

También puede optar por incrustar el archivo de la imagen del icono de la herramienta directamente en el archivo de la aplicación, o bien subir las imágenes al servidor de MobileTogether por separado.

Definir las acciones para los botones de herramientas en aplicaciones móviles

Definir las acciones que se ejecutarán al hacer clic en el icono de la herramienta es sencillo. MobileTogether permite que cualquier control sea clickable, al igual que un botón. Las acciones de los controles se definen a través del menú contextual que aparece al hacer clic derecho:

El botón seleccionado anteriormente está diseñado para abrir la aplicación de mapas predeterminada en el dispositivo móvil, centrándose en las coordenadas GPS. Sin embargo, el script de acción se ha mejorado con definiciones separadas para un toque, o un clic normal, y un clic prolongado.

Dependiendo de la preferencia del usuario, al hacer clic podría reproducirse un sonido proveniente de la biblioteca de sonidos integrada de MobileTogether. Un clic normal abre el mapa, pero un clic prolongado simplemente muestra una ventana de mensaje que explica la función del botón.

Tamaños variables para los botones de herramientas en aplicaciones móviles

Necesitábamos botones de herramientas más pequeños para situaciones en las que el botón de la herramienta comparte espacio con texto u otros controles en la página, por ejemplo, en la página de búsqueda y en las páginas de resultados de búsqueda que se muestran aquí

Los iconos de las herramientas que aparecen en estas páginas se definieron en columnas, utilizando el elemento de menor ancho para los iconos, dentro del árbol de datos persistentes.

Aprenda más y pruébelo usted mismo

Si no vieron nuestra publicación anterior sobre la integración de APIs en aplicaciones móviles, pueden leerla aquí. O, si son nuevos en MobileTogether, visiten la página de Demostraciones de MobileTogether, donde encontrarán enlaces a videos, tutoriales y más aplicaciones de demostración.

Puede examinar nuestra aplicación de demostración con más detalle para ver exactamente cómo implementamos los botones de herramientas en las aplicaciones móviles, o para revisar las API para mapas, búsqueda, clima y eventos. Simplemente descargue el MobileTogether Designer, que es de uso gratuito, y obtenga una copia de nuestra aplicación en GitHub en este repositorio: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I