Los widgets son un aspecto esencial de la personalización de la pantalla principal. Piensa que son como vistas rápidas de los datos y las funcionalidades más importantes de una app, a los que se puede acceder de forma directa desde la pantalla principal del usuario. Los usuarios pueden mover widgets en los paneles de la pantalla principal y, si la función es compatible, cambiarles el tamaño para adaptar la cantidad de información que se debe incluir en un widget según sus preferencias.
En esta página, se proporciona una introducción a los diferentes tipos de widgets que puedes crear y algunos principios de diseño que debes seguir. Para comenzar a crear el widget de una app, lee Cómo crear el widget de una app.
Tipos de widgets
Cuando comiences a planificar tu widget, piensa en qué tipo de widget vas a intentar compilar. Por lo general, los widgets están dentro de una de las siguientes categorías:
Widgets informativos
En general, los widgets informativos muestran algunos datos clave que son importantes para un usuario y hacen un seguimiento del modo en que esa información cambia con el tiempo. Algunos buenos ejemplos de widgets informativos son los widgets del clima, los widgets del reloj o los registros de resultados deportivos. Por lo general, cuando se presiona un widget informativo, se inicia la app asociada y se abre una vista detallada de la información del widget.
Widgets de colección
Como su nombre lo sugiere, los widgets de colección se especializan en mostrar una gran cantidad de elementos del mismo tipo, como una colección de fotos de una app de galería, un grupo de artículos de una app de noticias o un conjunto de correos electrónicos o mensajes de una app de comunicación. Por lo general, los widgets de colección se enfocan en dos casos prácticos: explorar la colección y abrir la vista detallada de un elemento de la colección para el consumo. Los widgets de colección se pueden desplazar de forma vertical.
Widget de ListView
Widget de GridView
Widgets de control
El objetivo principal de un widget de control es mostrar las funciones de uso frecuente que el usuario puede activar directamente desde la pantalla principal sin tener que abrir primero la app. Vendrían a ser como controles remotos de las apps. Un ejemplo típico de widget de control son los widgets de apps de música que permiten al usuario reproducir, pausar u omitir pistas de música desde afuera de la app de música real.
La interacción con widgets de control puede progresar o no a una vista de detalles asociada, según si la función del widget de control generó un conjunto de datos, como en el caso de un widget de búsqueda.
Widgets híbridos
Si bien todos los widgets tienden a gravitar hacia uno de los tres tipos descritos arriba, en realidad, muchos son widgets híbridos que combinan elementos de diferentes tipos.
Para planificar tu widget, concéntrate en uno de los tipos básicos y agrega elementos de otros tipos si es necesario.
Limitaciones de los widgets
Si bien los widgets se pueden considerar "miniapps", existen ciertas limitaciones que es importante comprender antes de comenzar a diseñarlos:
Gestos
Debido a que los widgets se ubican en la pantalla principal, tienen que coexistir con la navegación que se establece allí. Esto limita la compatibilidad con gestos disponible en los widgets, en comparación con la de las apps de pantalla completa. Si bien estas, por ejemplo, pueden admitir un localizador de vistas que permita al usuario navegar entre pantallas de forma lateral, ese gesto ya aparece en la pantalla principal con el propósito de navegar entre paneles de esa pantalla.
Los únicos gestos disponibles para widgets son los siguientes:
- Tocar
- Deslizar en forma vertical
Elementos
Dadas las limitaciones de interacción recién mencionadas, algunos de los bloques de compilación de la IU que dependen de gestos restringidos no están disponibles para los widgets. Para obtener una lista completa de los bloques de compilación compatibles y más información sobre las restricciones de diseño, consulta la sección "Cómo crear diseños de widgets de apps" en la guía de API Widgets de apps.
Pautas de diseño
Contenido del widget
Los widgets son un excelente mecanismo para que un usuario se sienta atraído a tu app, ya que "anuncian" contenidos nuevos e interesantes que están disponibles para el consumo en tu app.
Al igual que los avances en la portada de un diario, los widgets deben consolidar y concentrar la información de una app, además de proporcionar una conexión más detallada dentro de la app. En otras palabras, el widget es la "entrada", mientras que la app es el "plato principal". Por lo tanto, siempre debes asegurarte de que tu app muestre más detalles sobre un elemento de información que lo que el widget ya muestra.
Navegación desde widgets
Además del contenido puramente informativo, también debes considerar completar la oferta de tu widget con vínculos de navegación a las áreas de uso frecuente de tu app. Esto permite a los usuarios completar tareas más rápido y extiende el alcance funcional de la app a la pantalla principal.
Los siguientes son posibles vínculos de navegación a la superficie en widgets:
- Funciones generativas: Son las funciones que permiten al usuario crear contenido nuevo para una app, como un nuevo documento o mensaje.
- Apertura de la app en el nivel superior: Cuando se presione un elemento de información, en general, el usuario navegará hasta una pantalla de detalles de nivel inferior. Proporcionar acceso al nivel superior de tu app proporciona más flexibilidad de navegación y puede reemplazar a un acceso directo puntual que los usuarios usarían para navegar hasta la app desde la pantalla principal. Si usas el ícono de tu app como prestación, también puedes proporcionar una identidad clara a tu widget en caso de que los datos que estés mostrando sean ambiguos.
Cambio del tamaño del widget
Cuando se mantiene presionado un widget y luego se suelta, se abre el modo de cambio de tamaño (si el widget admite este modo). Los usuarios pueden usar los controladores de arrastre o las esquinas de los widgets para establecer el tamaño deseado.
El cambio del tamaño permite a los usuarios ajustar la altura o el ancho de un widget según las restricciones de la cuadrícula de ubicación del panel de la pantalla principal. Puedes decidir si tu widget puede cambiar de tamaño libremente o si está limitado a cambios de tamaño en forma horizontal o vertical. No es necesario admitir el cambio de tamaño si tu widget es de tamaño fijo.
Permitir a los usuarios cambiar el tamaño de los widgets tiene importantes beneficios:
- Pueden ajustar la cantidad de información que desean ver en cada widget.
- Pueden mejorar el diseño de los widgets y accesos directos de los paneles de la pantalla principal.
La planificación de una estrategia de cambio de tamaño dependerá del tipo de widget que estés creando. Los widgets de listas o de colecciones basadas en cuadrículas suelen ser sencillos, ya que el cambio de tamaño del widget solo despliega o contrae el área de desplazamiento vertical. Sin importar el tamaño del widget, el usuario puede desplazar todos los elementos de información hasta la vista. Por otro lado, los widgets informativos requieren un poco más de planificación práctica, ya que no se pueden desplazar y todo el contenido debe ajustarse a un tamaño determinado. Tendrás que ajustar de forma dinámica el contenido y el diseño de tu widget según el tamaño que el usuario haya definido mediante la operación de cambio de tamaño.
En este sencillo ejemplo, el usuario puede cambiar el tamaño horizontal de un widget del clima en 4 pasos y exponer información más detallada sobre el clima en la ubicación actual a medida que aumenta el tamaño del widget.
Para cada tamaño del widget, determina qué parte de la información de tu app debe aparecer. Para tamaños más pequeños, concéntrate en lo esencial y, luego, agrega más información contextual a medida que el widget se expanda de forma horizontal y vertical.
Consideraciones de diseño
Puede ser tentador diseñar los widgets de acuerdo con las dimensiones de la cuadrícula de posiciones de un dispositivo en particular con el que desarrollas apps. Puede ser una aproximación inicial útil a medida que diseñas el widget, pero ten en cuenta lo siguiente:
- La cantidad, el tamaño y la separación de las celdas pueden variar mucho de un dispositivo a otro. Por lo tanto, es muy importante que tu widget sea flexible y pueda incorporar más espacio de lo previsto.
- De hecho, a medida que el usuario modifique el tamaño de un widget, el sistema responderá con un rango de tamaño en dp según el cual se podrá rediseñar el widget. Si planificas la estrategia de cambio de tamaño de tus widgets en "segmentos de tamaño", en lugar de dimensiones de cuadrícula variables, obtendrás los resultados más confiables.
Configuración del widget
A veces, es necesario configurar los widgets antes de que puedan ser útiles. Piensa en un widget de correo electrónico, por ejemplo, en el que debes proporcionar una cuenta para que se pueda mostrar la bandeja de entrada. O un widget de fotos fijo en el que el usuario tiene que asignar la imagen que se mostrará desde la galería.
En Android, los widgets muestran sus opciones de configuración justo después de que se los coloca en un panel de la pantalla principal. La configuración del widget debe ser sencilla y no debe presentar más de 2 o 3 elementos. Utiliza el estilo de cuadro de diálogo, en lugar de las actividades de pantalla completa, para presentar las opciones de configuración y conservar el contexto del usuario, incluso si se requieren varios diálogos.
Una vez que se realiza la configuración, en general, no hay muchas razones para volver hacerlo. Por lo tanto, los widgets de Android no muestran el botón "Configuración".
Lista de tareas
- Concéntrate en pequeñas porciones de información visible en el widget. Expande la información en tu app.
- Elige el tipo de widget adecuado para tu objetivo.
- Si se puede cambiar el tamaño del widget, planifica cómo se debe adaptar el contenido de este a diferentes tamaños.
- Haz que la orientación del widget y el dispositivo sean independientes; para ello, asegúrate de que el diseño sea capaz de expandirse y contraerse.