Perangkat TV menyediakan serangkaian kontrol navigasi yang terbatas untuk aplikasi. Membuat skema navigasi yang efektif untuk aplikasi TV bergantung pada pemahaman tentang kontrol terbatas ini serta batasan pengguna saat mengoperasikan aplikasi Anda. Saat membuat aplikasi Android untuk TV, perhatikan dengan cermat cara pengguna melakukan navigasi saat menggunakan tombol remote kontrol, bukan layar sentuh.
Prinsip
Tujuannya adalah agar navigasi terasa alami dan familiar tanpa mendominasi antarmuka pengguna atau mengalihkan perhatian dari konten. Prinsip berikut membantu menetapkan dasar pengukuran untuk pengalaman pengguna yang konsisten dan intuitif di seluruh aplikasi TV.
Menyederhanakan akses ke konten. Pengguna ingin mengakses konten dengan cepat, menggunakan sesedikit mungkin klik. Atur informasi Anda sedemikian rupa sehingga hanya memerlukan sedikit layar.
Ikuti praktik terbaik dan rekomendasi untuk membuat navigasi dapat diprediksi oleh pengguna. Jangan menciptakan kembali pola navigasi yang tidak perlu, karena hal ini akan menyebabkan kebingungan dan ketidakpastian.
Menyederhanakan navigasi agar dapat mendukung perilaku pengguna yang banyak diadopsi dengan lancar. Jangan terlalu rumit dengan menambahkan lapisan navigasi yang tidak perlu.
Pengontrol
Pengontrol hadir dalam berbagai gaya, mulai dari remote kontrol minimalis hingga pengontrol game yang kompleks. Semua pengontrol menyertakan tombol arah (D-pad) serta tombol pilih, layar utama, dan kembali. Tombol lainnya bervariasi menurut model.
D-pad
Metode navigasi utama di TV adalah melalui D-pad, yang mencakup
tombol hardware arah atas, bawah, kiri, dan kanan. D-pad mentransfer fokus dari satu objek ke objek terdekat
ke arah tombol yang ditekan.
Tombol pilih
Memilih item di layar yang menjadi fokus.
Tombol Beranda
Membawa pengguna ke layar utama sistem.
Tombol kembali
Memberi pengguna cara untuk kembali ke tampilan sebelumnya.
Tombol mikrofon
Memanggil Asisten Google atau input suara.
Navigasi D-pad
Di perangkat TV, pengguna melakukan navigasi menggunakan tombol arah atau tombol panah. Jenis kontrol ini membatasi gerakan ke atas, bawah, kiri, dan kanan. Untuk membuat aplikasi terbaik yang dioptimalkan bagi TV, Anda harus menyediakan skema navigasi yang mudah dipelajari oleh pengguna menggunakan kontrol yang terbatas ini.
Framework Android menangani navigasi arah antar elemen tata letak secara otomatis, jadi Anda biasanya tidak perlu melakukan tindakan tambahan untuk aplikasi. Namun, Anda harus menguji navigasi secara menyeluruh dengan pengontrol D-pad untuk menemukan masalah navigasi.
Ikuti panduan ini untuk menguji apakah sistem navigasi aplikasi Anda berfungsi baik dengan D-pad di perangkat TV:
- Pastikan pengguna dengan pengontrol D-pad dapat menavigasi semua kontrol yang terlihat di layar.
- Untuk men-scroll daftar dengan fokus, pastikan tombol atas dan bawah D-pad men-scroll daftar dan tombol pilih memilih item dalam daftar. Pastikan pengguna dapat memilih elemen dalam daftar dan daftar tersebut masih dapat di-scroll saat elemen dipilih.
- Pastikan peralihan antarkontrol tidak rumit dan bisa diprediksi.
Mengubah navigasi terarah
Framework Android secara otomatis menerapkan skema navigasi direksional berdasarkan posisi relatif elemen yang dapat difokuskan dalam tata letak Anda. Uji skema navigasi yang dihasilkan dalam aplikasi Anda menggunakan pengontrol D-pad. Setelah mengujinya, jika Anda ingin pengguna berpindah dalam tata letak dengan cara khusus, Anda dapat menyiapkan navigasi direksional eksplisit untuk kontrol Anda.
Contoh kode di bawah menunjukkan cara menentukan kontrol berikutnya untuk menerima fokus
bagi objek tata letak TextView:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
Tabel berikut mencantumkan semua atribut navigasi yang tersedia untuk widget antarmuka pengguna Android:
| Atribut | Fungsi |
|---|---|
nextFocusDown |
Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke bawah. |
nextFocusLeft |
Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke kiri. |
nextFocusRight |
Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke kanan. |
nextFocusUp |
Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke atas. |
Untuk menggunakan salah satu atribut navigasi eksplisit ini, tetapkan nilai ke
android:id widget lain dalam tata letak. Pastikan untuk menyiapkan
urutan navigasi sebagai loop, sehingga kontrol terakhir mengarahkan fokus kembali ke
yang pertama.
Menyediakan fokus dan pemilihan yang jelas
Keberhasilan skema navigasi aplikasi di perangkat TV bergantung pada apakah pengguna dapat dengan cepat menentukan elemen antarmuka pengguna yang sedang difokuskan. Jika Anda tidak memberikan indikasi yang jelas tentang item yang difokuskan, dan oleh karena itu, item apa yang dapat ditindaklanjuti oleh pengguna, mereka dapat dengan cepat merasa frustrasi dan keluar dari aplikasi Anda. Untuk alasan yang sama, penting untuk selalu memiliki item dalam fokus yang dapat ditindaklanjuti oleh pengguna segera setelah aplikasi Anda dimulai atau kapan pun aplikasi tidak digunakan.
Dalam tata letak dan penerapan aplikasi, gunakan warna, ukuran, animasi, atau kombinasi dari semua atribut ini untuk membantu pengguna menentukan tindakan apa yang dapat mereka ambil berikutnya. Gunakan skema seragam untuk menunjukkan fokus di seluruh aplikasi Anda.
Android menyediakan Resource daftar status drawable untuk mengimplementasikan sorotan bagi kontrol yang difokuskan dan dipilih. Contoh kode berikut menunjukkan cara mengaktifkan perilaku visual bagi sebuah tombol untuk menunjukkan bahwa pengguna telah menjelajah ke kontrol kemudian memilihnya:
<!-- res/drawable/button.xml --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <!-- focused --> <item android:state_hovered="true" android:drawable="@drawable/button_focused" /> <!-- hovered --> <item android:drawable="@drawable/button_normal" /> <!-- default --> </selector>
Contoh kode XML tata letak berikut menerapkan daftar status drawable sebelumnya ke
Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Pastikan untuk menyediakan padding yang mencukupi dalam kontrol yang dapat difokuskan dan dapat dipilih agar sorotan di sekelilingnya terlihat jelas.
Navigasi tombol kembali
Untuk konsistensi di seluruh aplikasi di platform, pastikan perilaku tombol kembali mengikuti panduan ini.
Menggunakan perilaku tombol kembali yang dapat diprediksi
Untuk menciptakan pengalaman navigasi yang mudah dan dapat diprediksi, saat pengguna menekan tombol kembali remote, bawa mereka ke tujuan sebelumnya.
Jika pengguna membuka item menu ke kartu di tengah halaman, lalu menekan tombol kembali, hasilnya bergantung pada apakah aplikasi menggunakan navigasi atas atau navigasi kiri:
- Aplikasi menggunakan navigasi atas: bawa pengguna kembali ke bagian atas halaman dengan men-scroll dengan cepat dan mengaktifkan fokus pada menu.
- Aplikasi menggunakan navigasi kiri: aktifkan menu samping kiri dan fokus pada item menu yang sedang aktif.
Pastikan tombol kembali tidak dibatasi oleh layar konfirmasi atau bagian dari loop tak terbatas.
Jangan.
Hindari penghalang keluar. Mengizinkan pengguna keluar dari aplikasi tanpa
konfirmasi.
Jangan.
Jangan pernah memasuki loop tak terbatas untuk menutup dan membuka
menu. Idealnya, menekan tombol kembali akan keluar dari aplikasi. Jangan
menampilkan tombol keluar di menu kecuali jika itu kasus khusus, seperti
profil anak.
Jangan menampilkan tombol naik atau kembali
Tidak seperti pada perangkat genggam, tombol kembali pada remote digunakan untuk menavigasi kembali di TV. Tombol kembali virtual tidak perlu ditampilkan di layar:
Jangan.
Tampilkan tombol batal jika perlu
Jika satu-satunya tindakan yang terlihat adalah tindakan konfirmasi, destruktif, atau pembelian, sebaiknya sediakan tombol Batal yang akan kembali ke tujuan sebelumnya:
Lakukan.
Menerapkan navigasi kembali
Framework Android umumnya menangani navigasi kembali dengan baik, seperti halnya untuk D-pad. Jika menggunakan komponen Navigation, Anda dapat mendukung berbagai grafik navigasi. Terkadang, Anda mungkin perlu menerapkan beberapa perilaku kustom, seperti membuat tombol kembali mereset fokus ke awal daftar panjang.
ComponentActivity,
class dasar untuk FragmentActivity
dan AppCompatActivity,
memungkinkan Anda mengontrol perilaku tombol kembali dengan menggunakan
OnBackPressedDispatcher-nya,
yang dapat Anda ambil dengan memanggil getOnBackPressedDispatcher().
Untuk mengetahui informasi selengkapnya, lihat Menyediakan navigasi kembali kustom.
Kontrol pemutaran di TV
Pemutaran video adalah salah satu fitur terpenting di TV. Penting agar pemutar video di aplikasi di seluruh Android TV berperilaku sama. Lihat panduan kontrol pemutaran untuk TV.
Navigasi tab langsung
Selain mematuhi persyaratan kualitas aplikasi TV, aplikasi dengan feed TV live yang terintegrasi di tab Live juga harus memenuhi persyaratan pemutaran tanpa gangguan dan pemutaran langsung, seperti yang dijelaskan di bagian berikut.
Pemutaran lancar
Pemutaran tanpa gangguan berlaku untuk perilaku dalam aplikasi setelah deep link saluran Live atau Linear dari Google TV dan Android TV.
Saat pengguna mengklik deep link, aturan berikut berlaku:
- Tanpa penundaan: Pengguna harus diarahkan langsung ke pemutaran channel tanpa memblokir atau menunda layar, seperti alur login atau pendaftaran atau video branding.
- Pengecualian cold boot: Jika deep link memulai pemuatan aplikasi target dari cold boot, penundaan booting diizinkan. Video atau animasi branding saat aplikasi di-boot juga diizinkan dalam kasus ini.
- Pengecualian penundaan pemuatan: Jika perlu waktu beberapa detik untuk membuka channel, branding diizinkan. Durasi hanya boleh selama yang diperlukan untuk memuat channel.
Jika pengguna logout atau tidak berlangganan, Anda dapat memblokir pemutaran untuk channel berbayar guna menyelesaikan alur login atau pendaftaran.
Langsung kembali
Saat pengguna meluncurkan aplikasi dari deep link di tab Live, lalu menekan tombol kembali, mereka harus kembali ke tab Live dengan satu kali menekan tombol kembali, terlepas dari berapa lama waktu yang telah berlalu. Perilaku kembali langsung ini diperlukan untuk semua deep link tab Live di Google TV dan Android TV.
Deep link tab Live dibedakan dengan parameter deep link yang ditambahkan:
?exit_on_back=[true|false]. Aplikasi harus mem-parsing parameter ini untuk menentukan
apakah aplikasi diluncurkan dari tab Live. Jika exit_on_back adalah true,
aplikasi harus menerapkan perilaku kembali langsung.
Perhatikan bahwa jika pengguna menekan tombol selain tombol kembali sebagai tekanan tombol pertama setelah deep link, persyaratan kembali langsung tidak berlaku, dan hanya perilaku tombol kembali standar yang diperlukan.
Misalnya, setelah mengikuti deep link, pengguna menekan tombol pilih D-pad, yang memunculkan overlay kontrol. Pengguna menunggu hingga overlay menghilang, lalu menekan tombol kembali. Karena tombol pertama yang ditekan setelah mengikuti deep link adalah tombol pilih D-pad, persyaratan kembali langsung tidak berlaku. Sebagai gantinya, logika stack kembali aplikasi normal akan berlaku.
Penekanan tombol kembali yang berulang harus mengarahkan pengguna ke root aplikasi lalu kembali ke Google TV atau Android TV, tanpa loop tak terbatas. Untuk mengetahui informasi selengkapnya, lihat bagian Perilaku tombol kembali yang dapat diprediksi.
Arsitektur navigasi
Arsitektur navigasi yang ditentukan dengan baik membantu pengguna memahami posisi mereka dalam aplikasi Anda dan cara mengakses berbagai konten. Pertimbangkan aspek desain navigasi berikut.
Tujuan awal tetap
Layar pertama yang dilihat pengguna saat meluncurkan aplikasi dari peluncur juga merupakan layar terakhir yang dilihat pengguna saat kembali ke peluncur setelah menekan tombol kembali.
Deep linking menyimulasikan navigasi manual
Baik melakukan deep linking atau navigasi secara manual ke tujuan tertentu, pengguna dapat menggunakan tombol kembali untuk melakukan navigasi dalam tujuan untuk kembali ke tujuan awal.
Deep linking ke aplikasi dari aplikasi lain menyimulasikan navigasi manual. Misalnya, jika pengguna langsung membuka halaman detail di aplikasi Moviestar dari Google TV, lalu menekan tombol kembali, mereka akan diarahkan ke halaman beranda aplikasi Moviestar.
Jalur yang jelas ke semua elemen yang dapat difokuskan
Izinkan pengguna menavigasi UI Anda dengan petunjuk yang jelas. Jika tidak ada jalur langsung untuk mengakses kontrol, pertimbangkan untuk memindahkannya.
Lakukan.
Tempatkan kontrol, seperti tindakan penelusuran yang ditampilkan di sini, di lokasi yang tidak tumpang-tindih
dengan elemen lain yang dapat diklik.
Jangan.
Hindari tata letak yang berisi kontrol di tempat yang sulit dijangkau. Menjangkau
tindakan penelusuran yang ditampilkan di sini mungkin sulit dilakukan dengan D-pad.
Sumbu
Rancang tata letak Anda untuk memanfaatkan sumbu horizontal dan vertikal. Setiap arah memiliki fungsi tertentu, sehingga memudahkan navigasi hierarki besar.
Lakukan.
Kategori dapat dijelajahi pada sumbu vertikal, dan item dalam setiap
kategori dapat dijelajahi pada sumbu horizontal.
Jangan.
Hindari hierarki tata letak yang kompleks dan bertingkat.