Memikirkan Kembali Desain Antarmuka Pengguna untuk Platform TV

Pengantar Bahan Dasar UI TV

Sebagian besar konsumen hari ini memotong kabel dengan TV berbayar tetapi ini tidak berarti mereka telah menghindar dari layar lebar untuk mengkonsumsi konten mereka. Menurut rilis data oleh Nielsen, kebiasaan menonton orang dewasa AS menemukan bahwa 92% dari semua menonton masih berlangsung di layar TV. Ini adalah angka yang cukup besar.

Lebih dari 92% menonton di kalangan orang dewasa AS masih terjadi di layar TV.

Arti "menonton TV" telah banyak berubah selama beberapa dekade terakhir. Kami tidak lagi terbatas pada remote dan kotak kabel untuk mengisi layar kami; kami menggunakan Smart TV, atau streaming menggunakan pucks seperti Roku, Amazon Fire, dan Apple TV, atau menghubungkan konsol video game seperti Xbox dan Playstation. Dan masing-masing perangkat ini memungkinkan antarmuka pengguna yang jauh lebih kuat daripada panduan layar kuno Anda.

Membayar untuk menonton siaran atau program VOD melalui layanan online berbasis langganan seperti Hulu, Netflix, atau Amazon mewakili 26% responden online global (Nielsen ). Ini adalah angka yang signifikan. Namun, 72% responden mengonfirmasi bahwa mereka masih membayar untuk menonton konten mereka melalui sambungan TV tradisional.

Apakah ini berarti koneksi TV tradisional tetap ada?

Kita semua tampaknya berpikir bahwa pemotong kabel di luar sana akan mewakili jumlah yang lebih tinggi. Nielsen melaporkan bahwa 116,4 juta rumah di AS diperkirakan akan menonton TV selama musim 2015-16. Ini adalah jumlah yang sangat besar dan laporan tersebut juga menemukan bahwa sekitar 9,5 juta rumah tersebut telah beralih ke TV OTA gratis. Dari semua layanan streaming di luar sana, Netflix (60,7%) tampaknya berada di depan, diikuti oleh Amazon Prime Video (49,4%) dan Hulu (26%). Saya percaya salah satu alasan terbesar orang memutuskan kabelnya adalah karena kami hanya ingin membayar untuk apa yang kami gunakan.

Jika dibandingkan dengan komputer dan bahkan ponsel, mendesain UI untuk TV masih merupakan bidang yang relatif baru. Ini juga merupakan platform yang berbeda secara fundamental dan cara kami mengonsumsi konten kami berbeda. Desain untuk TV memerlukan serangkaian pertimbangan yang unik, termasuk ukuran layar dan jarak pemirsa, kendala teknis, dan konteks penggunaan. Pengguna berada dalam pengalaman "bersandar", duduk rata-rata 10 kaki jauhnya dan antarmuka pengguna serta pengalaman perlu mencerminkan hal ini. Berlawanan dengan tablet dan ponsel layar sentuh, interaksi di televisi dilakukan melalui D-pad (pad kontrol arah) menggunakan remote atau pengontrol video game, yang memperumit kerumitan.

Pajangan

Televisi tidak seperti tablet dan ponsel.

TV telah banyak berubah dari waktu ke waktu dari perabot besar yang kikuk menjadi tampilan minimalis ramping yang tergantung di dinding. Dulu ketika televisi akan memenuhi seluruh ruang tamu, mereka menggunakan teknologi yang menghasilkan gambar yang tidak konsisten di seluruh perangkat TV, terutama yang dekat dengan tepinya. Untuk mengatasi masalah ini, TV CRT mengalami overscan. Ini hanya berarti bahwa gambarnya sedikit diperbesar sehingga tepinya tidak berada di luar batas area tampilan.

Secara tradisional, penyiar mengantisipasi hal ini dan ingin menghindari informasi penting mereka ditampilkan terlalu dekat ke tepi layar. Untuk mengatasi masalah ini, mereka membuat area aman judul untuk menampilkan teks tanpa distorsi dan area aman tindakan di mana gambar dapat ditampilkan dengan aman.

Untuk alasan di luar kendali kami, pemindaian berlebih masih menjadi masalah… bahkan pada HDTV baru Anda. Jumlah overscan tidak konsisten di seluruh TV. Untuk memastikan bahwa semua informasi utama Anda seperti judul dan tindakan penting aman, simpan di dalam margin aman.

Saat ini tidak ada "standar" yang ditetapkan untuk area tindakan aman; itu sebagian besar ditentukan oleh platform itu sendiri. Google menjaga area aman mereka tetap sempit dan Apple sedikit lebih murah hati. Dari banyak pencarian saya di web, zona ini akan bervariasi antara 85% dan 95% dari layar televisi dari pusat. Untuk memenuhi persyaratan dari semua platform berbeda yang mungkin sedang Anda kerjakan, saya sarankan menggunakan zona aman dengan margin atas dan bawah 60px dan margin samping 90px. Ini berarti bahwa semua informasi utama Anda harus sesuai dengan area ini untuk mengakomodasi semua layar tv dan memenuhi setiap persyaratan platform.

Untuk memulai desain antarmuka pengguna televisi baru Anda, buat kanvas 1920 x 1080 baru. Padding Anda (zona aman) harus 90 piksel di sisi (kiri dan kanan) serta 60 piksel untuk atas dan bawah. Anda bisa mendapatkan unduhan file gratis di sini.

Navigasi

Bagaimana atas-bawah-kiri-kanan membentuk antarmuka TV.

Sebagai seorang desainer, perangkat keras yang kami desain akan menentukan beberapa pola desain kami. Di ponsel, kami menggesek, mengetuk, menekan lama, menarik, dll. untuk melakukan tindakan. Tab dan menu digunakan sebagai pola navigasi di perangkat kami. Televisi menawarkan kanvas besar yang besar yang dapat dengan mudah menjadi terlalu rumit jika tidak dilakukan dengan benar. Melihat deretan konten yang panjang untuk memaksimalkan jumlah konten yang terlihat oleh pengguna telah menjadi elemen standar UI televisi.

Tidak seperti perangkat seluler yang kami kendalikan dengan jari, sebagian besar UI TV dikendalikan oleh D-pad dan digunakan pada jarak dari layar. Baik pada remote atau gamepad, D-pad membatasi navigasi ke empat arah: atas, bawah, kiri, dan kanan.

Setiap platform juga memiliki konvensinya sendiri. Di Xbox, misalnya, pemicu menyediakan kontrol "Page Up" dan "Page Down" sementara bumper digunakan untuk tab di antara tampilan konten. Ada juga sejumlah tombol “power user” di setiap platform yang akan familiar dengan gamer yang lebih berpengalaman.

Elemen penting lainnya di UI TV adalah status fokus . Tanpa kemampuan untuk menyentuh layar atau menggunakan mouse, pengguna harus menavigasi ke elemen yang ingin mereka pilih. Saat pengguna menavigasi dalam aplikasi, elemen UI yang berbeda harus disorot yang menunjukkan bahwa elemen navigasi sedang fokus.

Fokus dan sorot keadaan saat mendesain untuk televisi sangat penting. Status fokus tersebut adalah elemen yang menyoroti komponen yang dapat dipilih dan menandakan lokasi pengguna saat ini di layar. Bentuk di mana fokus ditampilkan mungkin berbeda; tergantung pada komponennya, bagaimanapun, konsistensi akan selalu menjadi kuncinya. Fokus yang jelas dan sangat terlihat membantu pengguna dengan cepat mengenali lokasi mereka saat ini di layar dan memudahkan navigasi. Ketika pengguna mengalihkan pandangan sejenak dari TV dan kemudian mengembalikan pandangan mereka, secara otomatis akan jelas opsi apa yang saat ini dipilih untuk navigasi. Setiap item di layar harus dapat dijangkau oleh kursor, dan harus selalu jelas ke mana kursor dapat bergerak selanjutnya.

Contoh desain yang dapat membuat pengguna bertanya-tanya di mana mereka berada di aplikasi. Contoh-contoh ini tidak memberikan indikasi visual yang cukup (keadaan fokus) pemosisian. Pengguna harus dapat melihat dengan jelas di mana mereka berada setiap saat tanpa harus bergerak ke atas atau ke bawah. Anda harus bisa mengalihkan pandangan dari pesawat televisi dan ke belakang dan tetap mengetahui posisi Anda.

Tipografi

Membaca dari jarak sepuluh kaki.

Aplikasi TV sering disebut sebagai pengalaman sepuluh kaki, istilah yang mengacu pada jarak yang sama antara Anda dan televisi Anda. Bertentangan dengan perangkat lain seperti ponsel dan desktop, televisi diatur untuk menjadi lebih dari lingkungan "bersandar dan bersantai". Mengingat jarak ini, kita perlu memperlakukan UI sedikit berbeda dari yang kita lakukan di web atau seluler.

Layar TV umumnya lebih besar dari perangkat seluler dan monitor komputer desktop tetapi dilihat dari jarak yang lebih jauh. Keterbacaan menjadi fitur penting, yang berarti bahwa ukuran teks dan elemen lainnya harus disesuaikan. Bergantung pada usia Anda, 18px mungkin merupakan ukuran terkecil yang dapat dibaca dan hanya sesuai untuk label yang tidak penting, seperti tab alis. Meski begitu, sebagai aturan umum, ukuran font yang Anda pilih tidak boleh lebih kecil dari 24 pts. Inilah yang saya anggap sebagai ukuran font minimum untuk mengakomodasi setiap jenis pengguna.

Kunci tipografi yang baik di TV adalah menguji terus-menerus. Tipis, tipe kecil di monitor Anda akan terlihat bersih dan tajam, tetapi begitu di TV, mungkin tampak pecah atau menjadi tidak dapat dipahami.

Pindai Garis

Apa itu garis pindai?

Tidak seperti layar desktop, seluler, dan tablet, gambar di layar televisi terdiri dari garis pindaian ganjil dan genap. Televisi membuat garis-garis ini dalam fase bergantian dengan cepat antara garis pindaian ganjil dan genap. Setiap piksel (atau garis piksel) yang jatuh ke satu garis pemindaian akan berkedip. Untuk menghindari kedipan item Anda di layar, Anda harus selalu menjaga garis Anda ke angka genap dan tidak lebih tipis dari 2 piksel. Ini adalah sesuatu yang perlu dipertimbangkan ketika mengerjakan proyek lintas platform dan bersiap untuk mentransfer desain Anda dari perangkat sentuh (ponsel dan tablet), di mana Anda sering menemukan diri Anda membuat tombol batas 1px, untuk televisi.

Cara lain untuk menghindari garis atau bentuk buram ini adalah memastikan desain Anda selalu piksel sempurna. Contoh di bawah ini adalah contoh bagus dari garis yang dibuat menggunakan angka tidak rata. Seperti yang Anda lihat, kita dapat dengan jelas melihat efeknya, dan itu menjadi meresahkan mata.

Warna

Tampilan TV memiliki batas.

Elemen pertama yang perlu diingat adalah bahwa televisi memiliki nilai gamma yang jauh lebih tinggi daripada perangkat desktop, tablet, dan handset. Cara terbaik untuk menjelaskan bagaimana gamma memengaruhi kualitas gambar adalah bahwa gamma mewakili tingkat perbedaan kecerahan antara setiap langkah dalam skala abu-abu, atau seberapa "cepat" warna hitam menjadi lebih cerah. Kami melihat dua kali cahaya sebagai hanya sebagian kecil lebih terang. Berbagai merek dan model TV sangat bervariasi dalam hal kecerahan, tampilan, dan pengaturan lainnya. Seperti jenis, warna harus diuji lebih awal dan sering di TV.

Beberapa panduan yang harus diikuti saat memilih warna Anda: Warna-warna cerah mungkin akan membuat mata tidak nyaman saat menonton televisi di malam hari atau di ruangan gelap. Hindari penggunaan warna jenuh yang berlebihan (terutama merah) dan penggunaan warna putih yang berlebihan pada elemen atau latar belakang yang besar. Putih murni akan menciptakan lingkaran cahaya dan gangguan visual lainnya. Saat memilih warna putih, disarankan untuk memilih nilai hex #f1f1f1 untuk menghindari kedipan. Untuk meningkatkan keterbacaan, pastikan Anda membuat kontras yang cukup antara elemen Anda

Aturan umumnya adalah untuk menghindari tepi tajam antara warna yang sangat kontras (terutama warna cerah di sebelah warna gelap), dan untuk menghindari warna "panas" seperti merah dan kuning yang sangat jenuh. Ini akan lebih mudah berdarah daripada warna yang kurang jenuh, atau warna yang lebih dingin seperti biru dan hijau.

Selalu uji warna di televisi yang sebenarnya untuk memahami bagaimana pilihan warna Anda diterjemahkan ke layar lebar. Jika memungkinkan, pratinjau aplikasi Anda di beberapa TV karena warna dapat sangat bervariasi antar model televisi. Cukup pasang kabel HDMI dari perangkat TV Anda dan ujilah.

Dasar

Hal-hal kecil yang perlu dipertimbangkan.

Elemen-elemen ini harus digunakan untuk memandu desain Anda secara keseluruhan. Pertimbangan terbesar saat mendesain UI TV Anda adalah kesederhanaan dan interaksi yang ringan.

Sementara banyak dasar dan praktik terbaik untuk desain interaksi masih berlaku, televisi digunakan dengan cara yang lebih santai tidak seperti komputer atau perangkat seluler. UI di televisi harus jelas, sederhana, dan visual. Desainnya membutuhkan kesederhanaan dan kejelasan dengan kepadatan informasi yang rendah. Elemen-elemennya harus besar dan berjarak cukup jauh untuk dibaca dari kejauhan. Sajikan serangkaian tindakan atau opsi yang jelas untuk setiap layar.

Desain ini bersih dan sederhana, menggunakan perawatan kartu besar yang bagus. Status fokus dicapai dengan skala dan bayangan jatuh yang selaras dengan sisa desain bersih. Metadata juga hanya terlihat saat mengarahkan kursor, yang memungkinkan pengguna untuk tetap fokus pada kartu saat ini.

Tempatkan konten atau opsi yang paling penting terlebih dahulu di layar agar mudah dilihat dan dinavigasi oleh pengguna. Level layar yang tidak perlu harus dihapus. Pergi ke level yang berbeda dan keluar lagi harus mudah dan jelas.

Faktor terpenting saat merancang aplikasi TV adalah menyertakan navigasi yang jelas dan akurat untuk pengoperasian pengguna. Jika navigasi ambigu, pengguna akan merasa bingung dan tidak aman.

Singkatnya, pengguna harus selalu tahu persis di mana mereka berada dalam suatu aplikasi. Ingat, pengguna hanya menggunakan kontrol dasar untuk bernavigasi. Pindah, Kembali, Masuk, dan fungsi navigasi dasar lainnya harus jelas. Pengguna harus dapat menggunakan operasi yang mereka inginkan dengan tindakan ini.

Sebagai desainer, tugas kami adalah membuat dan mendesain antarmuka pengguna yang memberi pengguna akses ke konten dengan cara yang jelas dan mudah dinavigasi. Kami tidak dapat mengharapkan pengguna untuk menyesuaikan kebiasaan baru hanya agar mereka dapat melihat konten kami. Sebaliknya, kami harus menyesuaikan antarmuka pengguna kami sehingga mereka dapat dioperasikan dalam kegelapan oleh seseorang yang memberi kami kurang dari niat penuh mereka, dan dengan perangkat input yang sangat terbatas. Ini cukup menantang, tetapi potensi hasilnya sangat besar. Selamat mendesain!

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib