Mobil Film ve Dizi Sitesi Tasarımında Gerçekten İşe Yarayan 9 Detay
Film ve dizi sitesi trafiğinin önemli bölümü telefondan gelir. Buna rağmen birçok tema hâlâ masaüstü tasarımını küçültüp “responsive” etiketiyle sunuyor. Sayfa teknik olarak taşmıyor olabilir ama kullanıcı aradığı filme ulaşmak için küçük ikonlara basıyor, player’ı açmak için ekranı yakınlaştırıyor veya menüye ulaşmak için en üste dönüyor.
Mobil tasarımda amaç masaüstünün aynısını göstermek değil, aynı işi daha küçük ekranda daha rahat yaptırmaktır.
1. İlk ekranda neyin önemli olduğuna karar verin
Telefon ekranında yer kıymetlidir. Büyük logo, uzun menü, dev banner ve iki satır duyuru üst üste geldiğinde içerik görünmeden ekran biter. Kullanıcı sitenin ne olduğunu zaten birkaç saniyede anlar; ona içerik sunmaya daha erken başlayın.
2. Poster kartları parmakla rahat seçilebilmeli
Masaüstünde hover ile açılan bilgi mobilde yoktur. Bu yüzden film adı, puan, yıl veya gerekli temel bilgiler kart üzerinde okunabilir olmalı. Kartın tıklama alanını sadece küçük başlığa vermek yerine görselin tamamını tıklanabilir yapmak daha doğal hissettirir.
3. Yatay kaydırmayı bilinçli kullanın
“Yeni Eklenenler” veya “Yakında” gibi bölümlerde yatay slider mobil için uygundur. Ancak kullanıcı kaydırılabilir olduğunu anlamalıdır. Sağdan bir sonraki kartın küçük bir kısmını göstermek bu konuda doğal bir ipucu verir.
Tüm sayfayı yatay kaydırmaya zorlayan taşmalarla, bilinçli yatay içerik sliderını birbirine karıştırmayın.
4. Sabit alt menü doğru kullanılırsa çok rahattır
Ana sayfa, filmler, keşfet, diziler ve profil gibi sık kullanılan alanları mobil alt menüde tutmak başparmak erişimini kolaylaştırır. Fakat alt menü video kontrollerinin, çerez bildiriminin veya diğer sabit butonların üzerine binmemelidir.
İkonların anlamı açık olmalı; mümkünse kısa metin etiketiyle birlikte kullanılmalıdır. Sadece belirsiz beş ikon gösterildiğinde kullanıcı hangisinin ne yaptığını deneme-yanılmayla öğrenir.
5. Arama mobilde birinci sınıf özellik olmalı
İçerik sayısı arttıkça kullanıcı menüden gezinmek yerine arama yapar. Arama ikonunun kolay bulunması, input açıldığında klavyenin ekranı bozmaması ve sonuçların hızlı gelmesi önemlidir.
Arama alanını 30 piksel yüksekliğinde küçücük bir kutuya sıkıştırmak tasarımı “minimal” gösterebilir ama kullanımını zorlaştırır.
6. Player oranını koruyun
Video alanı 16:9 oranındaysa ekran küçüldüğünde genişliği yüzde 100, yüksekliği otomatik veya aspect-ratio ile yönetmek gerekir. Sabit 700 piksel genişlikte iframe mobilde yatay taşar. Tam ekran düğmesi ve orientation değişimi de gerçek cihazlarda test edilmelidir.
7. Bölüm sayfasında sonraki aksiyonu görünür yapın
Kullanıcı bölüm bitirdiğinde “sonraki bölüm” butonunu bulmak için sayfanın tepesine dönmemeli. Player’ın hemen altında veya uygun sabit bölgede sonraki bölüm geçişi sunmak akışı iyileştirir. Dizi teması açısından bu küçük detay, uzun kullanımda çok fark yaratır.
8. Popup ve modal kullanımını sınırlayın
Mobil ekranda tam sayfa üyelik modalı kullanılabilir; fakat açıldığında body kaymasının kilitlenmesi, kapatma butonunun görünür olması ve klavye açıldığında form alanlarının erişilebilir kalması gerekir. Aynı anda kampanya popup’ı, bildirim izni ve giriş modalı açmak kullanıcıyı boğar.
9. Mobil performansı ayrı ölçün
Masaüstünde fiber bağlantıyla hızlı açılan sayfa, 4G bağlantıda aynı olmayabilir. Görsellerin boyutu, ilk yüklemede gelen JavaScript ve üçüncü taraf reklam/player kodları mobil cihaz işlemcisini daha fazla etkiler. Chrome’un cihaz simülasyonu yararlıdır ama en az bir gerçek Android ve iPhone testi yapın.
Telefonu elinize almadan mobil tasarım bitmiş sayılmaz
Geliştirici ekranında 390 piksel görünüm açmak başlangıçtır. Gerçek kullanımda adres çubuğu, klavye, geri hareketi, tam ekran video ve dokunma davranışı devreye girer. Bu yüzden en iyi mobil test “sayfa sığıyor mu?” değil, “tek elle rahat kullanabiliyor muyum?” sorusudur.
Mobil görünümü canlı denemek isterseniz BahadirMovie demosunu telefondan açıp ana sayfadan bölüm izleme ekranına kadar akışı test edebilirsiniz.