Tingkat Kualitas Widget

Widget adalah komponen penting untuk menyesuaikan layar utama pengguna. Fitur ini sering kali dapat membantu pengguna mencapai perjalanan pengguna yang penting untuk aplikasi dengan sekali ketuk, atau memberikan ringkasan cepat dari bagian data aplikasi yang paling penting. Fitur ini juga dapat disesuaikan agar sesuai dengan kebutuhan pengguna dan disesuaikan dengan preferensi individu.

Kualitas widget dapat memengaruhi interaksi pengguna dengan konten dan fitur aplikasi Anda. Ada tiga tingkat utama kualitas widget:

• Tingkat 3: Kualitas Rendah - tidak memenuhi standar kualitas minimum dan tidak memberikan pengalaman pengguna yang baik.
• Tingkat 2: Standar Kualitas - bermanfaat, dapat digunakan, dan memberikan pengalaman berkualitas.
• Tingkat 1: Terdiferensiasi - merupakan widget contoh yang menawarkan pengalaman utama yang dipersonalisasi, dan membantu pengguna membuat layar utama yang unik dan produktif.

Tingkat 3: Kualitas Rendah

Widget dianggap berkualitas rendah jika tidak memenuhi kriteria konten, penemuan, warna, dan tata letak standar. Untuk informasi selengkapnya tentang cara membuat widget berkualitas tinggi dan praktik terbaik, lihat panduan berikut.

Tingkat 2 - Standar Kualitas

Agar dianggap berkualitas baik, widget harus memenuhi semua kriteria Tata Letak, Warna, Penemuan, dan Konten berikut:

Tata Letak

• Widget harus mengisi batas yang ditetapkan oleh petak peluncur saat ditetapkan di layar utama. Ukuran widget dapat diubah menjadi setidaknya salah satu ukuran berikut : 2x2, 4x2 (sel petak peluncur). Untuk informasi selengkapnya, lihat Panduan ukuran.
  • Widget harus disejajarkan dengan benar dengan elemen layar utama lainnya pada sumbu vertikal atau horizontal, dan tidak menempati ruang yang tidak diperlukan.
  • Widget harus menyentuh setidaknya dua tepi grid yang berlawanan. Dengan kata lain, widget tidak harus berbentuk persegi panjang. Elemen ini dapat memiliki bentuk kustom, selama tepi bentuknya menyentuh setidaknya dua tepi petak.
• Jika dapat diubah ukurannya, widget harus memiliki ukuran min atau maks yang sesuai, yang dapat ditetapkan dengan minWidth, minHeight, maxResizeWidth, dan maxResizeHeight di AppWidgetProviderInfo XML
  • Ukuran maksimum harus ditetapkan jika mengubah ukuran widget hanya akan menambah ruang kosong.
  • Ukuran minimum harus ditetapkan berdasarkan ukuran minimum yang masih menawarkan nilai widget Anda dan memenuhi persyaratan target sentuh (48x48).

check_circle

Anjuran

Berikan target sentuh pada 48x48 dp.

cancel

Larangan

Membuat target sentuh terlalu kecil.

Warna

• Tombol ikon dan teks widget harus memiliki rasio kontras yang memadai untuk memenuhi persyaratan aksesibilitas (tidak termasuk thumbnail dan gambar).

check_circle

Anjuran

Pastikan kontras warna memadai.

cancel

Larangan

Menggunakan warna dengan kontras warna yang tidak memadai.

Penemuan

• Widget harus memiliki pratinjau yang akurat di alat pilih Widget. Hal ini dapat ditetapkan dengan previewImage dan previewLayout di XML AppWidgetProviderInfo, atau dengan Preview yang Dibuat.

  • Pratinjau widget terlihat konsisten dengan fungsi yang ditawarkan saat ditambahkan ke layar utama.
  Video 1: Widget dengan pratinjau yang tidak akurat.

Konten

• Konten widget tidak boleh selalu usang atau tidak tepat waktu.
  • Widget harus diperbarui setelah pengguna menyelesaikan tindakan dari widget.
  • Widget harus diperbarui setelah pengguna menyelesaikan tindakan terkait dari dalam aplikasi
• Widget harus mengizinkan pengguna memuat ulang konten secara manual, jika ada ekspektasi bahwa data dimuat ulang lebih sering daripada UI.
• UI widget harus berfungsi atau konten akan dipangkas.
• Status kosong dan nol widget harus disengaja dan harus menampilkan nilai widget atau memberikan pesan ajakan (CTA), saat widget diinstal, tetapi pengguna belum login.

Gambar 2. Widget dengan status kosong yang berharga.

Gambar 3. Widget dengan tombol muat ulang.

Tingkat 1 - Dibedakan

Widget terbaik memenuhi semua kriteria Tingkat 2 dan semua kriteria Tata Letak, Warna, Penemuan, dan Koherensi Sistem berikut.

Tata Letak

• Widget mengisi batas dan sejajar dengan benar ke elemen layar utama lainnya pada sumbu vertikal atau horizontal, dan tidak menempati ruang yang tidak perlu
  • Semua bentuk HARUS menyentuh keempat tepi batas petak

check_circle

Anjuran

Buat widget diperluas ke keempat tepi batas petak.

cancel

Larangan

Buat ukuran kustom yang tidak mengisi batas petak.

• Widget mendukung ukuran yang dipilih

  • Widget dapat diubah ukurannya menjadi setidaknya salah satu ukuran berikut : 2x2, 4x2

• Header widget digunakan dan diterapkan secara konsisten

  • Sebaiknya gunakan header jika:
    • Anda ingin menyediakan deep link ke fungsi aplikasi tertentu seperti penelusuran.
    • Anda ingin menerapkan ikon branding aplikasi yang berfungsi ganda sebagai link konsisten kembali ke aplikasi saat diketuk.
    • Widget berisi konten scroll (daftar, petak, dll.)
    • Konten header memberikan konteks yang bermanfaat (nama daftar tugas)
  • Header bersifat opsional jika:
    • Widget adalah gambar layar penuh (Foto)
    • Ruang terbatas (tinggi < 2 baris)
    • Jika konten header berlebihan.
  • Jika menggunakan header, penuhi spesifikasi kami:
    • Ikon, Judul, Tindakan.
      • Ikon selalu ada
      • Judul muncul jika ada cukup ruang
      • Tindakan berdasarkan konteks widget.
    • Tinggi 48dp, Padding, 14dp

check_circle

Anjuran

Berikan header yang memenuhi spesifikasi widget.

cancel

Larangan

Gunakan spesifikasi kustom untuk ukuran dan judul.

Warna

• Widget mendukung palet warna berdasarkan tema sistem, warna konten, atau warna merek.
  • Widget mendukung palet mode Terang dan Gelap.
  • Warna dinamis adalah contoh tema konteks perangkat.
  • Ekstraksi warna lokal adalah contoh tema berbasis konten aplikasi.
  • Warna semantik adalah contoh tema berbasis konten aplikasi.

Gambar 4. Widget dengan warna dinamis wallpaper dan warna tema bermerek.

Penemuan

• Pratinjau mencakup konten pengguna atau menerapkan tema sistem (api Generated Previews atau previewLayout dalam AppWidgetProviderInfo XML).

Gambar 5. Widget dengan konten pratinjau umum dan konten pratinjau konten pengguna.

• Widget memiliki nama atau deskripsi yang membantu pengguna memahami nilai widget.
  • Nama kurang dari 50 karakter.
  • Nama dan deskripsi bersifat unik dalam aplikasi. Misalnya, aplikasi tidak dapat memiliki beberapa widget yang bernama sama.

check_circle

Anjuran

Sertakan deskripsi singkat yang unik.

cancel

Larangan

Berikan deskripsi umum.

Koherensi Sistem

• Widget persegi panjang harus menggunakan radius sudut yang disediakan oleh sistem (khusus OEM)

check_circle

Anjuran

Gunakan radius sudut sistem.

cancel

Larangan

Menetapkan radius sudut kustom.

• Menampilkan status pemuatan dengan indikator progres (dalam initialLayout dengan warna bertema atau merek yang setara).

Gambar 6. Widget dengan indikator pemuatan dan status pemuatan kustom.

• Menggunakan konfigurasi sistem, bukan titik entri setelan widget kustom
• Menggunakan transisi peluncuran sistem saat masuk/keluar dari aplikasi ke widget

Ingat tips yang ditawarkan dalam panduan ini saat membuat widget. Anda ingin memberikan kualitas terbaik dan pengalaman pengguna yang luar biasa. Banyak standar kualitas dapat dipenuhi dengan Tata Letak Kanonik. Untuk mempelajari lebih lanjut panel kualitas, desainer dapat melihat Template Widget Android, dan developer dapat melihat Contoh kode tata letak di Contoh Platform kami & Panduan developer tata letak.