Dokumen ini menyoroti prinsip dan panduan untuk siapa saja yang merancang setelan platform Android, setelan inti GMS (Setelan Google), atau developer yang mendesain setelan untuk aplikasi Android mereka.
Prinsip-prinsip desain
Berikan gambaran umum yang baik
Pengguna harus dapat melihat sekilas layar setelan dan memahami semua setelan individual dan nilainya.
Gambar 1. Setelan dan nilainya saat ini ditampilkan di layar tingkat atas
Mengatur item secara intuitif
Tempatkan setelan yang sering digunakan di bagian atas layar. Batasi jumlah pengaturan di satu layar. Menampilkan lebih dari 10-15 item dapat membingungkan. Buat menu yang intuitif dengan memindahkan beberapa setelan ke layar terpisah.
Gambar 2. Setelan umum ada di bagian atas layar
Membuat setelan mudah ditemukan
Dalam beberapa kasus, sebaiknya duplikasi setelan individual di dua layar yang berbeda. Situasi yang berbeda dapat memicu pengguna mengubah setelan, jadi menyertakan setelan di beberapa tempat akan membantu pengguna menemukan item ini.
Untuk setelan duplikat, buat layar terpisah untuk setelan dan buat titik entri dari tempat yang berbeda.
 |
 |
Gambar 3 & 4. "Suara notifikasi default" muncul di layar "Notifikasi" dan "Suara"
Gunakan judul dan status yang jelas
Buat judul setelan yang singkat dan bermakna. Hindari penggunaan judul yang tidak jelas seperti "Setelan umum". Di bawah judul, tampilkan status untuk menyoroti nilai setelan. Tampilkan detail spesifik, bukan hanya menjelaskan judul.
Judul harus:
- Letakkan teks yang paling penting dari label Anda terlebih dahulu.
- Susun ulang kata-kata negatif seperti "jangan" atau "tidak pernah" menjadi istilah netral seperti "blokir".
- Gunakan label yang tidak bersifat pribadi seperti "Notifikasi", bukan "Beri tahu saya". Pengecualian: Jika rujukan ke pengguna diperlukan untuk memahami setelan, gunakan orang kedua ("Anda"), bukan orang pertama ("I").
Judul harus menghindari:
- Istilah umum, seperti menetapkan, mengubah, mengedit, memodifikasi, mengelola, menggunakan, memilih, atau memilih.
- Kata berulang dari pemisah bagian atau judul sublayar.
- Jargon teknis.
Jenis halaman
Daftar setelan
Ini adalah jenis layar yang paling umum. Hal ini memungkinkan beberapa setelan ditempatkan bersama. Daftar setelan dapat berupa campuran kontrol, seperti tombol, menu, dan slider.
Jika ada beberapa setelan dalam satu kategori, setelan tersebut dapat dikelompokkan bersama. Lihat Pengelompokan dan pemisah untuk mengetahui detail selengkapnya.
Gambar 5. Contoh daftar setelan
Tampilan daftar
Tampilan daftar digunakan untuk menampilkan daftar item seperti aplikasi, akun, perangkat, dan lainnya. Kontrol untuk memfilter atau mengurutkan dapat ditambahkan ke layar.
Gambar 6. Contoh tampilan Daftar
Layar entitas
Layar entity digunakan untuk menampilkan setelan item yang berbeda, seperti aplikasi, akun, perangkat, jaringan Wi-Fi, dll.
Secara visual, entity ditampilkan di bagian atas dengan ikon, judul, dan subtitel. Semua setelan di layar ini harus terkait dengan entity ini.
Gambar 7. Contoh layar Entity yang digunakan dalam info Aplikasi
Gambar 8. Contoh layar Entity yang digunakan di Storage
Setelan utama
Setelan utama paling baik digunakan saat seluruh fitur dapat diaktifkan atau dinonaktifkan, seperti Wi-Fi atau Bluetooth. Dengan menggunakan tombol di bagian atas layar, pengguna dapat mengontrol fitur ini. Menggunakan setelan utama untuk menonaktifkan fitur akan menonaktifkan semua setelan terkait lainnya.
Jika fitur memerlukan deskripsi teks yang lebih panjang, setelan utama dapat digunakan karena jenis layar ini memungkinkan teks footer yang lebih panjang.
Jika setelan perlu diduplikasi atau ditautkan dari beberapa layar, gunakan setelan utama. Karena setelan utama adalah layar terpisah, Anda tidak perlu memiliki beberapa tombol di tempat yang berbeda untuk setelan yang sama.
Gambar 9. Contoh setelan utama yang digunakan di layar Notifikasi aplikasi; menonaktifkan tombol utama akan menonaktifkan seluruh fitur untuk aplikasi ini
Gambar 10. Contoh setelan utama yang digunakan di layar Notifikasi aplikasi dengan tombol utama dinonaktifkan
Layar pemilihan tombol pilihan
Layar ini digunakan ketika pengguna perlu membuat pilihan untuk setelan. Tombol radio dapat ditampilkan dalam dialog atau di layar terpisah. Tombol pilihan tidak boleh digunakan bersama penggeser, menu, atau tombol.
Layar tombol pilihan dapat berisi gambar di bagian atas dan teks footer di bagian bawah. Setiap tombol pilihan dapat memiliki subteks beserta judul.
Gambar 11. Tombol pilihan tidak boleh digunakan dalam daftar setelan
Gambar 12. Berikut ini cara menggunakan tombol pilihan dengan benar di setelan
Komponen
Header
Mulai Android 8.0, toolbar tindakan menyajikan penelusuran dan bantuan serta tindakan terkait lainnya. Menu tambahan tidak disarankan karena pengguna mungkin tidak menemukan tindakan yang tersembunyi di menu ini.
Untuk toolbar tanpa tindakan khusus layar. Menampilkan tindakan penelusuran dan bantuan.
Gambar 13. Toolbar dengan tindakan penelusuran dan bantuan
Untuk toolbar dengan satu tindakan: Tampilkan tindakan sebelum melakukan penelusuran.
Gambar 14. Toolbar dengan satu tindakan sebelum tindakan penelusuran dan bantuan
Untuk toolbar dengan lebih dari 1 tindakan: Pertimbangkan untuk menempatkan tindakan utama sebelum penelusuran, saat menempatkan tindakan lanjutan di menu tambahan.
Jika semua tindakan bersifat lanjutan atau hanya berguna untuk sekelompok kecil pengguna, sebaiknya tempatkan semua tindakan di menu tambahan.
Gambar 15. Toolbar dengan menu tambahan untuk tindakan
Header entitas
Header entity hanya dapat menampilkan judul, atau judul dengan subteks (beberapa baris diizinkan untuk subteks). Tindakan di bawah bersifat opsional. Anda dapat memiliki maksimum dua tindakan.
Gambar 16. Header entitas
Bagian ikon dan judul (App1) akan di-scroll di bawah header (Info aplikasi).
Gambar 17. Judul info aplikasi di sini adalah bagian dari toolbar, sedangkan bagian layar lainnya akan ter-scroll di bawahnya
Link menu
Judulnya wajib diisi. Anda juga harus menampilkan subteks yang menyoroti status setelan. Penggunaan ikon bersifat opsional.
Cobalah untuk membuat teks judul tetap ringkas. Jika judul panjang, judul dapat berlanjut ke baris berikutnya tanpa terpotong. Jangan mengaktifkan menu atau tindakan dengan menekan lama.
Contoh:
Gambar 18. Link menu dengan ikon, judul, dan subteks
Gambar 19. Link menu dengan judul dan subteks
Gambar 20. Link menu hanya dengan judul
Link menu dengan ikon, judul, subteks, dan target hit terpisah di sebelah kanan
Target ketuk lainnya harus menggunakan warna tema.
Gambar 21. Contoh menu target ketuk dengan dua kali
Link menu dengan ikon, judul, subteks, dan ikon statistik/angka/notifikasi
Nilai numerik seperti persentase dan waktu dapat ditampilkan di sebelah kanan bersama dengan subteksnya, sedangkan grafik batang dapat ditampilkan di bawah ini.
Biasanya, nilai numerik disajikan di sebelah kanan sehingga pengguna dapat dengan mudah melihat dan membandingkannya.
Gambar 22. Contoh menu dengan ikon, judul, statistik, dan grafik
Pengelompokan dan pembagi
Jika layar memiliki banyak setelan, mereka dapat dikelompokkan dan dipisahkan oleh pemisah. Tidak seperti versi Android lama, pemisah kini digunakan untuk mengelompokkan setelan dalam grup, bukan memisahkan setelan individual.
Jika setelan dalam grup terkait erat, Anda dapat menambahkan judul grup. Jika menggunakan {i>heading<i} grup, Anda harus selalu menyertakan {i>divider<i}.
Gambar 23. Setelan yang dikelompokkan dengan pemisah
Alihkan
Beralih dengan ikon, judul, dan subteks
Gambar 24. Beralih dengan ikon, judul, dan subteks
Beralih dengan judul dan subteks
Gambar 25. Beralih dengan judul dan subteks
Beralih dengan judul saja
Judul dapat disertai dengan ikon di sebelah kiri.
Gambar 26. Ganti dengan judul saja
Item daftar plus tombol
Anda dapat menggabungkan item daftar dengan tombol. Mengetuk sisi kiri garis vertikal bertindak seperti tautan dan membawa pengguna ke layar berikutnya. Sisi kanan berperilaku seperti {i>switch<i} standar.
Untuk item daftar di sisi kiri, judul wajib diisi. Ikon dan subteks bersifat opsional.
Gambar 27. Item daftar dan tombol
Penggeser
Ikon bersifat opsional di penggeser.
Gambar 28. Penggeser
Tombol di layar
Tindakan positif menggunakan warna tema sedangkan tindakan negatif menggunakan warna abu-abu. Tindakan positif dapat mencakup membuka aplikasi, menginstal aplikasi, menambahkan item baru, dll. Tindakan negatif meliputi menghapus data, meng-uninstal aplikasi, menghapus item, dll.
Gambar 29. Tombol abu-abu untuk "Uninstal" dan "Paksa berhenti"
Gambar 30. Tombol biru untuk "Aktifkan sekarang"
Pengungkapan progresif (Lanjutan)
Setelan yang tidak sering digunakan harus disembunyikan. Gunakan "Advanced" hanya jika ada setidaknya 3 item yang disembunyikan.
Di sini, subteks menunjukkan judul pengaturan yang tersembunyi. Subteks hanya boleh satu baris. Teks tambahan terpotong dengan elipsis.
Gambar 31. Lanjutan yang digunakan di layar "Tampilan'"
Menu tarik-turun
Menu drop-down tersedia, tetapi idealnya Anda harus menggunakan dialog atau layar pemilihan tombol pilihan. Tindakan ini direkomendasikan untuk menyederhanakan setelan, karena ada tiga pola berbeda untuk satu pilihan.
Jika diperlukan, menu drop-down dapat digunakan jika setelan memiliki opsi sederhana.
Gambar 32. Menu tarik-turun
Kotak centang
Gunakan tombol alih-alih kotak centang jika memungkinkan.
Kotak centang dapat digunakan:
- Untuk tindakan negatif seperti membatasi aplikasi atau memblokir layanan.
- Untuk menghindari terlalu banyak tombol di layar.
Gambar 33. Kotak centang digunakan untuk mengurangi jumlah tombol pada layar ini
Link
Tidak disarankan menggunakan link di setelan. Hanya gunakan link jika benar-benar diperlukan. Link harus menggunakan warna aksen tanpa garis bawah.
Gambar 34. Link digunakan di setelan
Footer
Teks footer dapat digunakan untuk menambahkan konten penjelasan. {i>Footer<i} harus selalu memiliki {i>divider<i} di bagian atas. Footer ditampilkan di bagian bawah layar. Footer dapat memiliki link, jika diperlukan.
Gambar 35. Teks footer
Pola
Data
Data penting dapat ditampilkan dalam grafik seperti diagram batang atau diagram lingkaran. Data ini dapat ditampilkan di header entity. Contohnya meliputi data seluler dan penyimpanan.
Data yang kurang penting lainnya dapat disajikan dengan menggunakan tampilan daftar reguler.
Gambar 36. Contoh menampilkan Penyimpanan
Gambar 37. Contoh yang menampilkan Jaringan
Edukasi pengguna
Beberapa fitur mungkin memerlukan penjelasan atau edukasi pengguna. Anda dapat menggunakan animasi atau gambar beserta teks. Animasi atau gambar harus ditampilkan di bagian atas layar, sedangkan teks footer dapat digunakan untuk menambahkan penjelasan.
Gambar 38. Setelan menggunakan animasi dan teks footer
Formulir
Jika formulir memiliki satu kolom input, gunakan dialog normal. Hal ini memberikan cara mudah bagi pengguna untuk memasukkan satu input.
Namun, jika formulir memiliki beberapa kolom, pertimbangkan untuk menggunakan dialog layar penuh. Ini memberikan lebih banyak ruang layar untuk mengatur kolom dalam pola yang jelas.
Gambar 39. Formulir dengan dialog normal
Hasil penelusuran
Hasil penelusuran menampilkan judul, subteks (jika tersedia), dan lokasi breadcrumb setelan.
Gambar 40. Hasil penelusuran