TV Platformu için Kullanıcı Arayüzü Tasarımını Yeniden Düşünmek

TV Kullanıcı Arayüzündeki Temel Bileşenlere Giriş

Bu günlerde tüketicilerin büyük bir çoğunluğu ücretli TV ile kabloyu kesiyor ancak bu, içeriklerini tüketmek için büyük ekrandan uzaklaştıkları anlamına gelmiyor. Nielsen tarafından yayınlanan bir veriye göre, ABD'li yetişkinlerin izleme alışkanlıkları, tüm izlemelerin %92'sinin hala TV ekranında gerçekleştiğini tespit etti. Bunlar oldukça büyük rakamlar.

ABD'li yetişkinler arasında izlemenin %92'sinden fazlası hala TV ekranında gerçekleşiyor.

“TV izlemenin” anlamı son birkaç on yılda büyük ölçüde değişti. Artık ekranlarımızı dolduracak bir uzaktan kumanda ve kablo kutusuyla sınırlı değiliz; Akıllı TV'ler kullanıyoruz veya Roku, Amazon Fire ve Apple TV gibi diskleri kullanarak yayın yapıyoruz veya Xbox ve Playstation gibi video oyun konsollarını bağlıyoruz. Ve bu cihazların her biri, eski moda ekran kılavuzunuzdan çok daha güçlü bir kullanıcı arayüzüne izin verir.

Hulu, Netflix veya Amazon gibi abonelik tabanlı çevrimiçi hizmetler aracılığıyla yayın veya VOD programlarını izlemek için ödeme yapmak, küresel çevrimiçi katılımcıların %26'sını temsil ediyor (Nielsen). Bu önemli bir rakam. Bununla birlikte, ankete katılanların %72'si, içeriklerini geleneksel bir TV bağlantısı üzerinden izlemek için hala ödeme yaptıklarını onayladı.

Bu, geleneksel TV bağlantısının burada kalacağı anlamına mı geliyor?

Hepimiz oradaki kablo kesicilerin daha yüksek bir sayıyı temsil edeceğini düşünüyoruz. Nielsen, 2015-16 sezonunda ABD'de 116,4 milyon evin TV izlemesinin beklendiğini bildirdi. Bu çok büyük bir rakam ve rapor, bu evlerin yaklaşık 9,5 milyonunun ücretsiz OTA TV'ye geçtiğini de ortaya koydu. Oradaki tüm akış hizmetlerinden Netflix (%60,7) oyunun önünde görünüyor, onu Amazon Prime Video (%49,4) ve Hulu (%26) izliyor. İnsanların kabloyu kesmelerinin en büyük nedenlerinden birinin, yalnızca kullandığımız kadar ödemek istememiz olduğuna inanıyorum.

Bilgisayarlar ve hatta cep telefonları ile karşılaştırıldığında, TV için kullanıcı arayüzleri tasarlamak hala nispeten yeni bir alandır. Aynı zamanda temelde farklı bir platformdur ve içeriğimizi tüketme şeklimiz farklıdır. TV için tasarım, ekran boyutu ve izleyici mesafesi, teknik kısıtlamalar ve kullanım bağlamı dahil olmak üzere benzersiz bir dizi düşünceyi gerektirir. Kullanıcılar ortalama 10 fit uzakta oturan bir "arkaya yaslanma" deneyimi yaşıyor ve kullanıcı arayüzü ve deneyiminin bunu yansıtması gerekiyor. Dokunmatik ekranlı tabletlerin ve telefonların aksine, televizyonlardaki etkileşimler, karmaşıklığı artıran bir uzaktan kumanda veya video oyunu denetleyicisi kullanılarak D-pad (yön kontrol paneli) aracılığıyla yapılır.

Ekran

Televizyonlar tabletler ve telefonlar gibi değildir.

TV'ler zaman içinde devasa, hantal bir mobilya parçasından duvarda asılı şık minimalist bir ekrana dönüştü. Televizyonlar tüm oturma odasını kaplarken, TV setlerinde, özellikle kenarlara yakın yerlerde tutarsız görüntüler üreten bir teknoloji kullandılar. Bu sorunları telafi etmek için CRT TV'ler aşırı taramaya tabi tutuldu. Bu sadece görüntülerin biraz büyütüldüğü ve böylece kenarların görüntüleme alanının sınırlarının dışında olmadığı anlamına gelir.

Geleneksel olarak, yayıncılar bunu öngördü ve kritik bilgilerinin herhangi birinin ekranın kenarlarına çok yakın gösterilmesinden kaçınmak istediler. Bu sorunu çözmek için metni bozulma olmadan görüntülemek için bir başlık güvenli alanı ve görüntünün güvenli bir şekilde görüntülenebileceği eylem için güvenli bir alan oluşturdular.

Kontrolümüz dışındaki nedenlerden dolayı, aşırı tarama hala bir şey… yeni HDTV'lerinizde bile. Aşırı tarama miktarı TV'ler arasında tutarlı değil. Başlıklar ve önemli işlemler gibi tüm birincil bilgilerinizin güvende olduğundan emin olmak için bunları güvenli sınırlar içinde tutun.

Şu anda güvenli eylem alanları için belirlenmiş bir “standart” yoktur; çoğunlukla platformun kendisi tarafından tanımlanır. Google, güvenli alanlarını dar tutar ve Apple'ınki biraz daha cömerttir. Web'deki birçok aramamdan, bu bölgeler merkezden bir televizyon ekranının %85 ile %95'i arasında değişecektir. Üzerinde çalışıyor olabileceğiniz tüm farklı platformların gereksinimlerini karşılamak için, 60 piksel üst ve alt kenar boşlukları ve 90 piksel kenar boşluklarından oluşan bir güvenli bölge kullanmanızı öneririm. Bu, tüm televizyon ekranlarını barındırmak ve her platform gereksinimini karşılamak için tüm birincil bilgilerinizin bu alana sığması gerekeceği anlamına gelir.

Yeni televizyon kullanıcı arayüzü tasarımınıza başlamak için yeni bir 1920 x 1080 tuval oluşturun. Dolgu (güvenli bölge) yanlarda (sol ve sağ) 90 piksel, üst ve alt için 60 piksel olmalıdır. Ücretsiz dosya indirmenizi buradan alabilirsiniz.

Navigasyon

Yukarı-aşağı-sol-sağ TV arayüzlerini nasıl şekillendirir.

Bir tasarımcı olarak, tasarladığımız donanım bazı tasarım modellerimizi tanımlayacaktır. Mobilde, eylemleri gerçekleştirmek için kaydırır, dokunur, uzun basar, çeker vb. Sekmeler ve menüler, cihazlarımızda gezinme kalıpları olarak kullanılmaktadır. Televizyon, doğru yapılmazsa kolayca aşırı karmaşık hale gelebilecek büyük bir tuval sunar. Kullanıcılar tarafından görülebilir miktarını en üst düzeye çıkarmak için uzun içerik satırları görmek, televizyon kullanıcı arayüzlerinin standart bir öğesi haline geldi.

Parmaklarımızla kontrol ettiğimiz mobil cihazların aksine, TV kullanıcı arayüzlerinin çoğu bir D-pad ile kontrol edilir ve ekrandan uzakta kullanılır. İster uzaktan kumandada ister oyun kumandasında olsun, D-pad gezinmeyi dört yönle sınırlar: yukarı, aşağı, sol ve sağ.

Her platformun ayrıca kendi yerleşik kuralları vardır. Örneğin Xbox'ta, tamponlar içerik görünümleri arasında sekme yapmak için kullanılırken tetikleyiciler bir "Page Up" ve "Page Down" denetimi sağlar. Ayrıca her platformda daha deneyimli oyuncuların aşina olacağı bir dizi "güçlü kullanıcı" düğmesi vardır.

TV kullanıcı arayüzlerindeki diğer kritik unsur odak durumudur . Ekrana dokunma veya fare kullanma yeteneği olmayan kullanıcılar, seçmek istedikleri öğeye gitmelidir. Kullanıcı uygulamada gezinirken, bir gezinme öğesinin odakta olduğunu gösteren farklı UI öğeleri vurgulanmalıdır.

Televizyon için tasarım yaparken odak ve vurgu durumları çok önemlidir. Bu odak durumu, seçilebilir bir bileşeni vurgulayan ve kullanıcının ekrandaki mevcut konumunu belirten öğedir. Odağın görüntülendiği biçim değişebilir; bileşene bağlı olarak, ancak tutarlılık her zaman anahtar olacaktır. Net ve yüksek oranda görünür odak, kullanıcının ekrandaki mevcut konumunu hızla tanımasına yardımcı olur ve gezinmeyi kolaylaştırır. Bir kullanıcı bir anlığına TV'den başka yöne baktığında ve ardından bakışlarını geri çevirdiğinde, navigasyon için o anda hangi seçeneğin seçili olduğu otomatik olarak netleştirilmelidir. Ekrandaki her öğeye imleçle ulaşılabilmeli ve imlecin bir sonraki nereye hareket edebileceği her zaman açık olmalıdır.

Kullanıcıların uygulamada nerede olduklarını merak etmelerine neden olabilecek tasarım örnekleri. Bu örnekler, konumlandırmanın yeterli görsel göstergesini (odak durumu) sağlamaz. Kullanıcılar, yukarı veya aşağı hareket etmek zorunda kalmadan her zaman nerede olduklarını net bir şekilde görebilmelidir. Televizyon setinden uzağa ve geriye bakabilmeli ve yine de konumunuzu bilmelisiniz.

tipografi

On metre öteden okumak.

TV uygulamalarına genellikle on fitlik deneyimler denir; bu, siz ve televizyonunuz arasındaki ortak bir mesafeyi ifade eden bir terimdir. Mobil ve masaüstü gibi diğer cihazların aksine, televizyon daha çok “arkanıza yaslanın ve rahatlayın” ortamı olarak ayarlanmıştır. Bu mesafe göz önüne alındığında, bir kullanıcı arayüzüne web'de veya mobilde olduğundan biraz farklı davranmamız gerekiyor.

TV ekranları genellikle mobil cihazlardan ve masaüstü bilgisayar monitörlerinden daha büyüktür ancak daha uzak bir mesafeden izlenir. Okunabilirlik önemli bir özellik haline gelir, bu da metnin boyutunun ve diğer öğelerin buna göre ayarlanması gerektiği anlamına gelir. Yaşınıza bağlı olarak, 18px muhtemelen en küçük okunabilir boyut olacaktır ve yalnızca kaş tırnağı gibi önemli olmayan etiketler için uygundur. Yine de, genel bir kural olarak, seçtiğiniz yazı tipi boyutları asla 24 puntodan küçük olmamalıdır. Her tür kullanıcıya uyum sağlamak için minimum yazı tipi boyutunu düşündüğüm şey budur.

TV'de iyi tipografinin anahtarı sürekli test etmektir. Monitörünüzde ince, küçük yazı tipi temiz ve canlı görünecektir, ancak bir kez TV'de görüntülenebilir veya anlaşılmaz hale gelebilir.

Tarama Hatları

Tarama çizgileri nedir?

Masaüstü, mobil ve tablet ekranlarından farklı olarak, televizyon ekranındaki görüntü tek ve çift tarama çizgilerinden oluşur. Televizyon bu çizgileri tek ve çift tarama çizgileri arasında hızla değişen aşamalarda işler. Tek bir tarama çizgisine düşen herhangi bir piksel (veya piksel çizgisi) titreyecektir. Öğelerinizin ekranda titremesini önlemek için, satırlarınızı her zaman çift sayılarda ve 2 pikselden ince olmayacak şekilde tutmalısınız. Bu, platformlar arası projeler üzerinde çalışırken ve tasarımlarınızı genellikle televizyon için 1 piksel kenarlık düğmeleri oluştururken bulabileceğiniz dokunmatik cihazlardan (mobil ve tablet) aktarmaya hazırlanırken göz önünde bulundurulması gereken bir şeydir.

Bu bulanık çizgilerden veya şekillerden kaçınmanın bir başka yolu da tasarımlarınızın her zaman mükemmel piksel olmasını sağlamaktır. Aşağıdaki örnek, tek olmayan sayılar kullanılarak oluşturulan çizgilere iyi bir örnektir. Gördüğünüz gibi bunun etkilerini net bir şekilde görebiliyoruz ve gözleri rahatsız ediyor.

Renk

TV ekranlarının sınırları vardır.

Akılda tutulması gereken ilk unsur, televizyonların masaüstü, tablet ve ahize cihazlarına göre çok daha yüksek gama değerine sahip olmasıdır. Gamanın resim kalitesini nasıl etkilediğini tanımlamanın en iyi yolu, gamanın gri tonlamadaki her adım arasındaki parlaklık farkı düzeyini veya siyahların ne kadar "hızlı" daha parlak hale geldiğini temsil etmesidir. Işığı iki kat daha parlak olarak algılarız. Parlaklık, ekran ve diğer ayarlar söz konusu olduğunda farklı TV marka ve modelleri büyük farklılıklar gösterir. Tip gibi, renk de TV'lerde erken ve sıklıkla test edilmelidir.

Renklerinizi seçerken izlemeniz gereken birkaç kural: Gece veya karanlık bir odada televizyon izlerken parlak renkler gözleri rahatsız edebilir. Doymuş renkleri (özellikle kırmızı) aşırı kullanmaktan ve büyük öğelerde veya arka planlarda yoğun beyaz kullanımından kaçının. Saf beyaz haleler ve diğer görsel dikkat dağıtıcı unsurlar yaratacaktır. Beyazları seçerken, herhangi bir titremeyi önlemek için bir #f1f1f1 hex değeri seçmeniz önerilir. Okunabilirliği artırmak için öğeleriniz arasında yeterli kontrast oluşturduğunuzdan emin olun.

Genel kural, yüksek kontrastlı renkler (özellikle koyu renklerin yanında parlak renkler) arasında keskin kenarlardan kaçınmak ve çok doygun kırmızılar ve sarılar gibi "sıcak" renklerden kaçınmaktır. Bunlar, daha az doygun renklerden veya maviler ve yeşiller gibi daha soğuk renklerden daha kolay akacaktır.

Renk seçimlerinizin büyük ekrana nasıl yansıdığını anlamak için renkleri her zaman gerçek bir televizyonda test edin. Renkler televizyon modelleri arasında önemli ölçüde değişebileceğinden, mümkünse uygulamanızı birden fazla TV'de önizleyin. Sadece TV setinizden HDMI kablosunu takın ve test edin.

Temeller

Dikkate alınması gereken küçük şeyler.

Bu unsurlar, tasarımlarınızı bir bütün olarak yönlendirmek için kullanılmalıdır. TV kullanıcı arayüzlerinizi tasarlarken göz önünde bulundurulması gereken en büyük nokta basitlik ve hafif etkileşimdir.

Etkileşim tasarımı için temel ilkelerin ve en iyi uygulamaların çoğu hala geçerli olsa da, televizyon bir bilgisayar veya mobil cihazdan farklı olarak daha rahat bir şekilde kullanılır. Bir televizyondaki kullanıcı arayüzü açık, basit ve görsel olmalıdır. Tasarım, düşük bilgi yoğunluğu ile basitlik ve netlik gerektirir. Elemanların büyük olması ve belli bir mesafeden okunabilmesi için yeterince aralıklı olması gerekir. Her ekran için net bir dizi eylem veya seçenek sunun.

Bu tasarım, güzel büyük kart uygulamaları kullanılarak temiz ve basittir. Odak durumları, temiz tasarımın geri kalanıyla hizalanan ölçek ve alt gölgelerle elde edilir. Meta veriler de yalnızca fareyle üzerine gelindiğinde görünür, bu da kullanıcıların mevcut karta odaklanmasını sağlar.

En önemli içeriği veya seçenekleri, kullanıcının kolayca görüntüleyebileceği ve gezinebileceği şekilde ekrana ilk olarak yerleştirin. Gereksiz ekran seviyeleri kaldırılmalıdır. Farklı seviyelere girmek ve tekrar çıkmak kolay ve açık olmalıdır.

Bir TV uygulaması tasarlarken en önemli faktör, kullanıcı işlemleri için net ve doğru navigasyonu dahil etmektir. Navigasyon belirsiz ise, kullanıcılar kendilerini şaşkın ve güvensiz hissedeceklerdir.

Kısacası, kullanıcılar her zaman bir uygulama içinde tam olarak nerede olduklarını bilmelidir. Kullanıcının gezinmek için yalnızca temel kontrolleri kullandığını unutmayın. Taşı, Geri Dön, Gir ve diğer temel gezinme işlevleri açık olmalıdır. Kullanıcılar bu işlemlerle istedikleri işlemleri kullanabilmelidir.

Tasarımcılar olarak bizim işimiz, kullanıcıların içeriğe açık ve gezinmesi kolay bir şekilde erişmesini sağlayan kullanıcı arayüzleri oluşturmak ve tasarlamaktır. Kullanıcıların içeriğimizi görebilmeleri için yeni alışkanlıklara uyum sağlamasını bekleyemeyiz. Bunun yerine, kullanıcı arayüzlerimizi, karanlıkta bize amacından daha azını veren biri tarafından ve çok sınırlı bir giriş cihazı ile çalıştırılabilecek şekilde uyarlamamız gerekiyor. Bu oldukça zor, ancak potansiyel getirisi çok büyük. İyi eğlenceler tasarlayın!

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır