User Story
Kullanıcı olarak bir içeriğin detayını görüntülerken aynı zamanda fragmanını izleyebilmek, ve içeriğin bulunduğu kategori içerisinde diğer içeriklere geçiş yapabilmek istiyorum ki bir içeriği izlemek için daha kolay karar verebileyim ve yeni içerikler keşfedebileyim.
For English version please use the link below;
https://medium.com/@jeffromi/movie-tv-show-page-bbc81f1af855
Design process
Ideation + Validation
- Testlerin saglikli bir sekilde yonlendirilebilmesi icin desktop uzerinden 2 farkli varyasyon calisilmis olup mobil uzerinden ise kullanici bazli yonlendirme yapilabilmesi icin birden fazla versiyon calisilmistir.
- Hazırlamış olduğumuz tasarım ve prototipleri ürün ekibi ve mevcut dışardan gelen BluTV aboneleri ile test ettik.
Objective
Detay görüntüleme -> İzleme oranlarında artış Toplam session -> izleme oranlarında artış Detay sayfası görüntülemelerinin 10–20%’sinin yeni yapılan sağa/sola geçiş özelliğinden kaynaklanması
Acceptance Criteria
Geliştirme / yeni tasarım ilk etapta sadece Desktop için olacak ve ilk önce A/B testi yapılacak . A/B test kurgusu önceki kurgularımıza benzer olacak, desktop’dan ziyaret eden tüm kullanıcılar teste tabi olacak. (Yani detay sayfası açmadan hemen önce sixpack’den ilgili varyasyon istenecek ve test varyasyonuysa yeni tasarım gösterilecek) Herhangi bir içeriğin detayını görüntülemek istediğimde (site içinden tıklama veya dışarıdan sayfaya gelme) yeni tasarımı görmeliyim . Tıpkı şu an olduğu gibi, sayfaya dışarıdan gelindiğinde header gözükmeli ve modal görünümü olmamalı. Ters şekilde sayfaya içerideki bir linkden ulaştığımda modal görünümü olmalı, ve sayfadan çarpı ile çıkıp geri dönebilmeliyim.
Users Interviews
Detayına burdaki link’ten ulaşabilirsiniz: https://drive.google.com/file/d/1m7J0oFp34z6k10M5a89is2BrPo9ECpzJ/view?usp=sharing
Hangi tip personalara test yapıldı?
- Hakkı, yazılımcı, haftada 8 saat içerik izliyor. Netflix, BluTv kullanıyor
- Ezgi, öğrenci, haftada 20 saat içerik izliyor. Netflix, BluTv kullanıyor
- Sinem, endüstri Mühendisi, haftada 30 saat içerik izliyor. Youtube ve Korsan Siteler kullanıyor
- Ruba, içerik Asistanı, haftada 25 saat içerik izliyor. Netflix ve Korsan Siteler kullanıyor
- Emre, CRM Coordinator, haftada 6 saat içerik izliyor, BluTv, Korsan Siteler kullanıyor.
- Ahmet, Editör, haftada 50 saat içerik izliyor, Netflix, BluTv kullanıyor.
- Batu, Bilgisayar Mühendisi, haftada 3 saat içerik izliyor Korsan Siteler kullanıyor.
- İbrahim, Matematik Mühendisi, 10 saat içerik izliyor, Youtube, Puhu, Korsan Siteler kullanıyor
- Murat, Yazılımcı, haftada 14 saat içerik izliyor. BluTv ve Korsan Siteler kullanıyor.
Kullanıcının Keşfetmesini İstediğimiz Fonksiyonlar
- Fragman İzleme Modu
- Bölüm üzerinden more button tıklayarak detaya ulaşma
- 2.bölüm hover edildiğinde kayıt ol izleme yap
- Sayfa sonundaki more butona basarak detaya ulaşma
- Sonraki dizi hover pop up açılımı
- Daha Fazla metine basınca detay açılımı
Fragman İzleme modu (Version 1)
Ekranda kullanıcıların dikkatini çeken ilk şey Fragman Modu oldu. Kullanıcılar hızlıca keşfedebildi. Tıklayınca Fragmanın açılacağını anladılar. Ayrıca ayrı temiz bir yerde açılmasını beğendiler. (9/8)
Bölüm Üzerinden more button Tıklama
Kullanıcılar bölüm detaya ulaşmak için bu fonksiyonu kullanabildiler, ve bu fonksiyonun bölüm özetlerini açacağını keşfedebildiler. (9/7)
Bölüm Hover Edildiğinde kayıt ol izleme yap
Kullanıcılar 2.bölüm üzerine gelindiğinde çıkan kayıt ol izleme yap yazısını anladılar. Tıkladıklarında kayıt ol giriş yap sayfasına yöneleceklerini düşündüler. 1.bölümü izleyebileceklerini ama 2.bölüm için giriş yapmaları gerektiğini anladılar ve bölümlerin yanındaki kilit sembolleri anlamalarını daha da kolaylaştırdı. (9/9)
Pain Points — Olumsuz
- Binge izleme modunu anlayamadılar. (Kelime Olarak) (9/6)
- Kullanıcılar sezon değiştirme butonun yanındaki + sembolünü anlamadılar . (9/3)
- 1.bölüm üzerinde ki bedava yazısını göremediler. Üye olmadan ilk bölümü izleyemeyeceklerini düşündüler. (9/4)
- Hem daha fazla yazısına tıklayıp detayın açılması hem de bu buton üzerinden detayın açılması kafa karıştırdı. (9/3)
- Neye göre sonraki ya da benzer içerik mi? kafa karıştırdı. (9/3)
Kullanıcı Önerileri
- Bedava yazısı daha fazla kendini gösterebilir. (9/2)
- Listeme ekle üzerine gelince ne işe yaradığını belirten bir yazı çıkabilir (9/2)
- Detay sayfası açıldıktan sonra geri dönmek için kullanıcı scroll aradı. (9/1)
- Binge İzleme adı farklı olabilir. (9/1)
- Oyuncular üzerinde isim arandı. (9/1)
Logo / Başlıklar ve İçerikler Arası Gezinme
- Eğer içerik bir koleksiyon ve kategori sayfasından açıldıysa, ilgili kategori veya koleksiyonun başlığı en sol üstte gösterilir. (örn. ekteki tasarımda kullanıcı “en çok izlenen diziler” koleksiyonundan yaşamayanlar içeriğinin detayını açmıştır.
- Her içeriğin mevcutsa logosu, logosu yoksa beraber kararlaştırılacak font ile metin olarak başlığı gösterilir.
- İlk açılma anında seçilen içeriğin logosu en solda ve aktif gözükür
- Aktif olan bir içeriğin logosu / başlığı 1.2 scale edilir. (Buna beraber de bakıp prototipdekine en yakın hale getirelim) ve opacity’si 100% olur. Aktif olmayan içeriklerin başlıklarının opacitysi ve boyutu düşüktür.
- Eğer seçilen içerik ilgili koleksiyon/kategorinin ilk içeriği değilse, sağ üstte sola gitme ikonu gösterilir. Aynı zamanda aktif içerik logosunun solunda koleksiyondaki bir önceki içeriğin logosunun bir kısmı gösterilir. Bu ikisinden birisini tıklanırsa, bir önceki içeriğe geçilir.
- Eğer koleksiyon veya kategoride seçili içerikten sonra farklı içerikler varsa, logoları sağa doğru dizilir. Bu içeriklerin logolarından birisine tıklandığında o içerik aktif olur. Bu esnada tıklanan logo ortada kalacak şekilde logo satırı kayar. Tıklanan logo zaten ortadakiyse satırın kaymasına gerek yoktur. Eğer tıklanan logo koleksiyondaki en son içerikse, satır kaymaz ve logo satırın en sağında aktif olarak gösterilir. (BKNZ prototip)
- Sağ üstte konumlandırılan ileri ve geri butonları sadece o yönde bir içerik varsa gösterilir. Tıklandığında yukarıda anlatılan animasyon gerçekleşir. Her tıklamada yalnızca 1 içerik kaydırılır. Üst üste tıklama yapılırsa üst satır aynı hızda kayar, fakat detay içeriği daha güncellenmez, .3sn’lik delayden sonra (yani hızlı tıklamam bittiğinde) detay sayfası gösterilir.
- Video alanına tıklandığında bir sonraki içeriğe geçilir. (Sağ oka tıklamak ile tamamen aynı şekilde çalışmalıdır)
Fragman & Video Gösterimi
- Eğer ilgili içeriğin fragmanı yoksa, galeri görselleri video alanında kullanılır. İlgili görseller retinada 2x gösterilmelidir. Görseller her 4s.’de bir loop edecek şekilde değişir. Buradaki animasyon fadein/fadeout şekline olmalıdır.
- Eğer ilgili içeriğin fragmanı varsa, ilk görsel 4sn boyunca gösterilir, daha sonra fadeout eder ve video oynamaya başlar.
- İlk kullanımda fragmanların sesi açıktır. Kullanıcı sağ alttaki ses ikonuna tıkladığında ses kapanır ve ikon değişir. Kullanıcının sesi son bıraktığı durum sessionlar arasında hatırlanır. (client’da saklanır)
- Fragman oynamaya başladığında aktif içeriğin logosunun üzerindeki çizgi bir progress bar olarak davranır.
- Fragman bittiğinde tekrar başa döner, progress bar’da aynı şekilde başa döner.
- Bir içeriğin birden fazla fragmanı varsa, progress bar fragman adedine bölünür. (örn 2 çizgi gösterilir) İlk fragman bittiğinde diğer fragmana geçilir ve diğer progress bar durumu göstermeye başlar.
- Eğer birden fazla fragman varsa sağa geçiş fonksiyonları öncelikle diğer fragmanları oynatır, son fragmandan sonra diğer içeriğe geçer. (Video alanına tıklama, sağ oka tıklama)
- Fragman oynamaya başladıktan sonra kullanıcının mouse haraketleri takip edilmeye başlanır. Cursor konumu 8sn boyunca değişmezse ekranın alt bölümü aşağıya doğru kayarak kaybolur, video veya görsellerin üzerindeki opacity mask kalkar. Yalnızca üst bölümde (logolar ve navigasyon) opacity mask olmaya devam eder. Kullanıcı mouse’unu hareket ettirdiğinde eski duruma dönülür.
Dizi Sayfası Genel Fonksiyonlar
- İlk açılışta, bölümler tab’i aktif gelir.
- Bölümler tabi aktifken aşağıda sezonlar gösterilir.
- Aktif olan sezonun altında ilgili sezonun bölümleri gösterilir.
- Dizi sayfalarında, alt alan ilk açılışta ekranın altına doğru taşmaktadır. Yani posterlerin yalnızca bir kısmı gözükmektedir.
- Kullanıcı eğer aşağıya doğru scroll ederse veya mouse ile genel fonksiyonların bulunduğu alana hover ederse alan yukarıya doğru animate eder. (Animasyon scroll eventinde de olmalıdır, yani doğal scroll değil)
- Kullanıcı alt alandan dışarıya hover ederse 2sn sonra alt taraf tekrar aşağıya doğru gizlenir.
- Eğer scroll eventi ile alt tarafı açarsam ve daha sonra alt bölüme hover edip yine sonrasında başka bir alana hover edersem aynı şekilde 2n sonrasında çekmece geri kapanır.
- Eğer dizi izlediğim bir diziyse, son kaldığım sezon ve bölüm aktif olarak gösterilir. (Sezon aktiftir, son izlediğim bölüm ise satırın en başında gösterilir. Eğer son bölümse en sonda gösterilir)
Tüm detay sayfalarında ki fragman görünümünü
- Arka planda fragman oynatılır, Dizi/film logosu var ise metin yerine logo görüntülenir
- BluTV özel yapım tag eklenir, diğer tag’ler gibi çalışır
- Sayfa altında butona tıklandığında yada “daha fazla” sayfa slide ederek sayfada daha fazda detay görüntülenir
- Fragman switch sayesinde tüm detay bilgileri gizlenir ve sesli şekilde fullscreen gösterim sağlar
- Benzer içerik sadece bir tane olacak şekilde hover edildiğinde görüntülenir
- İzleme listeme hover edildiğinde “listeme ekle” tooltip görüntülenir
- Dizi bölümleri üzerinde ilk bölüm ücretsiz play button aktif gelir, diğerleri ise hover ile üye ol gösterir
