Navigasi di TV

Perangkat TV menyediakan serangkaian kontrol navigasi yang terbatas untuk aplikasi. Untuk membuat skema navigasi yang efektif bagi UI TV Anda, pertimbangkan kontrol terbatas ini dan cara pengguna melakukan navigasi menggunakan tombol remote control, bukan layar sentuh.

Banner besar navigasi

Sorotan

  • Pengontrol menawarkan kemampuan navigasi terbatas – atas-kiri-kanan – jadi perhatikan bagaimana hal ini dapat membentuk desain UI aplikasi Anda.
  • Navigasi akan terasa alami dan familier.
  • Membuat pengalaman navigasi sederhana dengan tombol kembali di remote.
  • Jika pengguna tidak memiliki jalur yang lurus untuk menuju ke suatu kontrol, pertimbangkan untuk memindahkannya.

Prinsip

Tujuannya adalah agar navigasi terasa alami dan familier 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.

Efisien

Permudah dan cepat untuk membuka konten. Pengguna ingin mengakses konten dengan cepat, dengan menggunakan sedikit klik. Atur informasi Anda dengan cara yang memerlukan layar paling sedikit.

Dapat diprediksi

Ikuti praktik terbaik dan rekomendasi untuk membuat navigasi dapat diprediksi bagi pengguna. Jangan mengubah pola navigasi secara tidak perlu, karena hal ini menyebabkan kebingungan dan ketidakpastian.

Intuitif

Menjadikan navigasi cukup sederhana untuk mendukung perilaku pengguna yang diadopsi secara luas secara luas. Jangan terlalu rumit dengan menambahkan lapisan navigasi yang tidak perlu.

Pengontrol

Pengontrol hadir dalam berbagai gaya, mulai dari remote control minimalis hingga pengontrol game yang rumit. Semua pengontrol mencakup tombol arah (D-pad) plus tombol pilih, layar utama, dan kembali. Tombol lain bervariasi menurut model.

Pengontrol

  • Directional pad (D-pad) - Metode navigasi utama di TV adalah melalui D-pad, yang mencakup tombol hardware arah atas, bawah, kiri, dan kanan.
  • Tombol Pilih - Memilih item di layar dengan fokus. Tekan dan tahan dapat digunakan untuk menampilkan lebih banyak opsi.
  • Tombol layar utama - Mengarahkan 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 D-pad 4 arah: atas, bawah, kiri, dan kanan. Untuk membangun aplikasi TV yang optimal, desain skema navigasi yang memungkinkan pengguna mempelajari dengan cepat cara menggunakan aplikasi menggunakan empat tombol panah. D-pad memindahkan fokus dari satu elemen ke elemen terdekat ke arah yang sesuai.

Untuk menguji navigasi aplikasi Anda berfungsi baik dengan D-pad di perangkat TV, pertimbangkan hal berikut:

  • Pastikan pengguna dapat membuka semua elemen yang dapat difokuskan pada layar.
  • Pastikan arah navigasi mudah dan dapat diprediksi.
  • Untuk daftar scroll, pastikan tombol atas dan bawah D-pad men-scroll seluruh daftar dan setiap item daftar dapat dipilih.

Tombol Utama

Menekan tombol layar utama akan selalu membawa pengguna kembali ke Beranda atau Peluncur Google TV. Aplikasi saat ini akan ditangguhkan di latar belakang secara default.

Menekan lama tombol layar utama akan menampilkan dasbor sistem di Google TV dan petak aplikasi di Android TV. Perilaku default dapat bervariasi sesuai dengan produsen.

Tombol Utama

Tombol kembali

Agar konsisten di seluruh aplikasi pada platform, pastikan perilaku tombol kembali mengikuti panduan ini.

Gunakan perilaku tombol kembali yang dapat diprediksi

Untuk menciptakan pengalaman navigasi yang dapat diprediksi, saat pengguna menekan tombol kembali remote, bawa mereka ke tujuan sebelumnya. Pada akhirnya, pengguna harus diarahkan ke Beranda atau Peluncur Google TV jika mereka terus menekan tombol kembali.

Aplikasi dengan navigasi atas

Pengguna dibawa kembali ke bagian atas halaman dengan men-scroll cepat dan mengaktifkan fokus pada menu.

Aplikasi dengan navigasi atas
Aplikasi dengan navigasi kiri

Menu samping kiri diaktifkan dan fokus pengguna dialihkan ke item menu aktif.

Aplikasi dengan navigasi kiri

Pastikan tombol kembali tidak dibatasi oleh layar konfirmasi atau bagian dari loop tanpa henti.

Hindari gerbang keluar. Pengguna harus dapat keluar dari aplikasi tanpa konfirmasi apa pun.

Jangan tampilkan tombol kembali

Tidak seperti perangkat genggam, tombol kembali pada remote digunakan untuk menavigasi mundur di TV. Tidak perlu menampilkan tombol kembali virtual di layar.

Hindari menampilkan tombol kembali di layar. Pengguna dapat menggunakan tombol kembali pada remote.

Tampilkan tombol batal, jika perlu

Jika satu-satunya tindakan yang terlihat adalah tindakan mengonfirmasi, merusak, atau membeli, sebaiknya gunakan tombol Batal yang kembali ke tujuan sebelumnya.

Tampilkan tombol batal – jika diperlukan – untuk memungkinkan pengguna kembali ke halaman sebelumnya.

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 deep linking atau menavigasi secara manual ke tujuan tertentu, pengguna dapat menggunakan tombol kembali untuk menavigasi dari mana saja di aplikasi ke tujuan awal.

Deep linking menyimulasikan navigasi manual

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.

Hapus jalur ke semua elemen yang dapat difokuskan

Memungkinkan pengguna menavigasi UI dengan arah yang jelas. Jika tidak ada jalur lurus untuk menuju ke suatu kontrol, sebaiknya pindahkan lokasi tersebut.

Kontrol tempat, seperti tindakan penelusuran, di lokasi yang tidak tumpang-tindih dengan elemen lain yang dapat diklik.
Hindari tata letak yang berisi kontrol di tempat yang sulit dijangkau. Mencapai tindakan penelusuran yang ditampilkan di sini tidak mudah dikelola dengan D-pad.

Sumbu

Desain tata letak Anda untuk memanfaatkan sumbu horizontal dan vertikal. Berikan fungsi spesifik ke setiap arah agar dapat menavigasi hierarki besar dengan cepat.

Kategori dapat dijelajahi pada sumbu vertikal, dan item dalam setiap kategori dapat dijelajahi pada sumbu horizontal.
Hindari hierarki tata letak yang kompleks dan bertingkat.