Niveles de calidad de los widgets

Los widgets son un componente fundamental para personalizar la pantalla principal de un usuario. A menudo, pueden ayudar a los usuarios a lograr un recorrido clave para una app con un solo toque o proporcionar un resumen rápido de los datos más importantes de una app. También se pueden personalizar para adaptarse a las necesidades del usuario y a las preferencias individuales.

La calidad de un widget puede afectar la participación de los usuarios con el contenido y las funciones de tu app. Existen tres niveles principales de calidad de widgets:

  • Nivel 3: Baja calidad: No cumplen con el nivel mínimo de calidad ni proporcionan una experiencia del usuario excelente.
  • Nivel 2: Estándar de calidad: Es útil, se puede usar y proporciona una experiencia de calidad.
  • Nivel 1: Diferenciados: Son widgets ejemplares que ofrecen experiencias de héroe personalizadas y ayudan a los usuarios a crear pantallas principales únicas y productivas.

Nivel 3: Baja calidad

Un widget se considera de baja calidad si no cumple con los criterios estándar de diseño, color, descubrimiento y contenido. Para obtener más información sobre cómo compilar un widget de alta calidad y que siga las prácticas recomendadas, consulta los siguientes lineamientos.

Nivel 2: Estándar de calidad

Para que se considere de buena calidad, el widget debe cumplir con todos los siguientes criterios de diseño, color, descubrimiento y contenido:

Diseño

  • El widget debe llenar los límites que establece la cuadrícula del selector cuando se coloca en la pantalla principal. Se puede cambiar el tamaño del widget a al menos uno de los siguientes tamaños : 2x2, 4x2 (celdas de cuadrícula del selector). Para obtener más información, consulta los Lineamientos de tamaño.
    • El widget debe alinearse correctamente con otros elementos de la pantalla principal en el eje vertical o horizontal y no debe ocupar espacio innecesario.
    • El widget debe tocar al menos dos bordes opuestos de la cuadrícula. En otras palabras, los widgets no tienen que ser rectangulares. Pueden tener formas personalizadas, siempre que los bordes de la forma toquen al menos dos bordes de la cuadrícula.
  • Si se pueden cambiar de tamaño, los widgets deben tener un tamaño mínimo o máximo adecuado, que se puede establecer con minWidth, minHeight, maxResizeWidth y maxResizeHeight en el archivo AppWidgetProviderInfo XML.
    • Se debe establecer el tamaño máximo si cambiar el tamaño del widget solo agrega espacio en blanco.
    • El tamaño mínimo se debe establecer en función del tamaño mínimo que aún ofrece valor a tu widget y que cumple con los requisitos del objetivo táctil (48 x 48).
Proporciona objetivos táctiles a 48 x 48 dp.
Hacer que los objetivos táctiles sean demasiado pequeños

Color

  • El texto y los botones de íconos de los widgets deben tener relaciones de contraste suficientes para cumplir con los requisitos de accesibilidad (no se incluyen las miniaturas ni las imágenes).
Asegúrate de que haya suficiente contraste de color.
Usar colores con contraste insuficiente

Descubrimiento

  • El widget debe tener vistas previas precisas en el selector de widgets. Esto se puede configurar con previewImage y previewLayout en el XML de AppWidgetProviderInfo o con Vistas previas generadas.

    • La vista previa del widget se ve coherente con la funcionalidad que se ofrece cuando se agrega a la pantalla principal.
    Video 1: Widget con una vista previa imprecisa.

Contenido

  • El contenido de los widgets no debe ser obsoleto o desactualizado de forma constante.
    • El widget debe actualizarse después de que el usuario complete una acción desde él.
    • El widget debe actualizarse después de que el usuario complete una acción relacionada desde la app.
  • El widget debe permitir que los usuarios actualicen el contenido de forma manual si se espera que los datos se actualicen con más frecuencia que la IU.
  • La IU del widget debe ser funcional o el contenido se recorta.
  • Los estados cero y vacíos del widget deben ser intencionales y mostrar el valor del widget o proporcionar un llamado a la acción cuando el widget está instalado, pero el usuario aún no accedió.
descubrimiento_nivel2
Figura 2: Widget con un estado vacío valioso.
discovery_tier2
Figura 3: Widget con botón de actualización.

Nivel 1: Diferenciado

Los mejores widgets cumplen con todos los criterios del nivel 2 y con todos los siguientes criterios de diseño, color, descubrimiento y coherencia del sistema.

Diseño

  • El widget ocupa todo el límite y se alinea correctamente con otros elementos de la pantalla principal en el eje vertical u horizontal, y no ocupa espacio innecesario.
    • Todas las formas DEBEN tocar los cuatro bordes de los límites de la cuadrícula.
Haz que el widget se expanda a los 4 bordes de los límites de la cuadrícula.
Crea un tamaño personalizado que no ocupe los límites de la cuadrícula.
  • El widget admite un tamaño preferido

    • Se puede cambiar el tamaño del widget a, al menos, uno de los siguientes : 2 × 2, 4 × 2
  • El encabezado del widget se usa y aplica de forma coherente.

    • Se recomienda usar el encabezado en los siguientes casos:
      • Quieres proporcionar vínculos directos a ciertas funciones de la app, como la búsqueda.
      • Quieres aplicar un ícono de desarrollo de la marca de la app que también funcione como un vínculo coherente a la app cuando se presiona.
      • El widget contiene contenido desplazable (lista, cuadrícula, etcétera)
      • El contenido del encabezado proporciona contexto útil (nombre de la lista de tareas pendientes).
    • El encabezado es opcional en los siguientes casos:
      • El widget es una imagen con sangrado completo (fotos)
      • El espacio es limitado (< 2 filas de altura)
      • Cuando el contenido del encabezado es redundante.
    • Si usas un encabezado, cumple con nuestras especificaciones:
      • Ícono, título y acciones.
        • El ícono siempre está presente
        • El título aparece cuando hay suficiente espacio
        • Acciones basadas en el contexto del widget
      • Altura: 48 dp, padding: 14 dp
Proporciona un encabezado que cumpla con las especificaciones del widget.
Usa especificaciones personalizadas para el tamaño y los títulos.

Color

  • El widget admite la paleta de colores según los temas del sistema, el color del contenido o el color de la marca.
Widgets que muestran temas dinámicos
Figura 4: Widgets con colores dinámicos del fondo de pantalla y colores de temas de marca.

Descubrimiento

Widgets con vistas previas genéricas y del contenido del usuario
Figura 5: Widgets con contenido de vista previa genérico y contenido de vista previa de usuarios.
  • El widget tiene un nombre o una descripción que ayuda a los usuarios a comprender el valor del widget.
    • El nombre tiene menos de 50 caracteres.
    • El nombre y la descripción son únicos dentro de la app. Por ejemplo, la app no puede tener varios widgets con el mismo nombre.
Incluye una descripción breve y única.
Proporciona una descripción genérica.

Coherencia del sistema

  • Los widgets rectangulares deben usar el radio de esquina que proporciona el sistema (específico del OEM).
Usa el radio de esquina del sistema.
Establece un radio de esquina personalizado.
Widgets con diferentes estados de carga
Figura 6: Widgets con indicador de carga y estado de carga personalizado.
  • Usa la configuración del sistema en lugar de un punto de entrada de configuración de widget personalizado.
  • Usa la transición de inicio del sistema cuando se ingresa o sale de la app al widget

Recuerda las sugerencias que se ofrecen en esta guía cuando crees tu widget. Quieres brindar la mejor calidad y una excelente experiencia del usuario. Se pueden cumplir muchas barras de calidad con los diseños canónicos. Para obtener más información sobre las barras de calidad, los diseñadores deben consultar las Plantillas de widgets de Android, y los desarrolladores deben consultar las muestras de código de diseño en nuestros ejemplos de plataforma y la Guía para desarrolladores de diseños.