İki Ayrı Platformu Tek Platformda Toplamak / Sporekrani.com

Geçtiğimiz sene Sporekrani.com bizimle re-design için iletişime geçtiğinde mevcut websitelerine ek olarak iki ayrı geniş kapsamlı platformu daha hayata geçirmek istiyorlardı. Özetlemek gerekirse: Canlı sonuçların, maç yayınlarının ve TV yayın akışının olduğu bir site ile geniş kapsamlı puan durumlarının ve istatistiklerinin olduğu bir site gibi iki platformun birleşimini doğru şekilde kullanıcıya sunmalıydık.

İş: Sporekrani.com
Platform: Responsive Web Design
Tasarım: uXcope Design Studio

Nasıl başladık?

Mevcut site karmaşık bilgi mimarisine ve gözlemlediğimiz kullanıcıları kafa karışıklığına sokan bir arayüze sahipti. Bu durum kullanıcıları çok sayıda tekrara ve ileri geri yapmaya zorluyordu. Reklam gelirleri ve sponsorluklar üzerine kurulmuş bir sistem olduğu için kullanılması zor olan bir ürün, reklam alanlarıyla daha da karmaşık hale gelmişti.

Sporla ve spor etkinliklerini izlemekle ilgili yaptığımız görüşmelerde daha çok aldığımız yorumlar şöyleydi:

“Buraya bastığımda ne olacağını bilmiyorum”

“İlk bakışta reklamdan başka bir şey göremiyorum”

“Sadece TRT’de yayınlanacakları nasıl görebiliyoruz?”

“Google’dan gelip bakıp çıkıyorum”

Görüşmelere paralel olarak benchmarking aşamasında da ilerleyerek yerli ve yabancı bu sektörde bulunan farklı siteleri inceledik. Özetle; amaca yönelik sade ve hem gözü hem kullanıcıyı yormayan bir tasarıma ihtiyacımız vardı. Yeniden kurgulayacağımız sitedeki deneyimde yine reklamlar olacaktı ama bu noktada daha az saldırgan ve kullanıcıyı yormayacak reklam alanları çizmek gerektiğinin farkındaydık.

Büyük ve karmaşık projelerde problem çözümü için uyguladığımız site haritası metodu ile karşımızda nasıl bir proje olduğunu görerek işi talep eden paydaşlarla birlikte tüm site ve ekranlar üzerinden geçtik.

Site haritası ana sayfadan başlayan ve dallanıp budaklanarak alt sayfalara ayrılan büyük bir ahtapot gibiydi. Bu yöntemi büyük projelerinizde kullanmanızı tavsiye ederiz. Burada amaç hem büyük resmi görerek projeyi adam/saat anlamında tahmini süre/maliyet hesaplamak hem de müşterilerinizle fazlandırmak istediğiniz projeleri bölümlere ayırmaktır. En büyük resmi tek ekranda verebildiğiniz durumlarda zihnimiz bunu daha kolay algılayacak ve aynı zamanda konuya hakim olmayan paydaşlar daha kolay nasıl yol izlenebileceğini görecektir. Ayrıca bu gibi büyük tabloyu çizdiğiniz projeler için bilgi mimarisi olarak benzer bilgiler yer alan ekranları benzer deneyimle kurgulamak adına size yardımcı olacaktır. Çünkü açık ve net şekilde birbiriyle alakalı bilgileri görüp seçmeniz çok kolay oluyor.

Sporekrani.com projesinde, site haritasında görmüş olduğunuz 3 renk 3 farklı faz için planlanmıştı. İlk faz için sarı kutucuklar kilit rol oynuyordu ve ilk işimiz o ekranlara ait akışı ve wireframeleri çizmekti. Anasayfadaki temel navigasyon, filtreler, liste ve widgetlarla başlayan proje, maç/etkinlik detayı, lig detayı ve bunların alt sayfalarına doğru ilerliyordu.

Neler yaptık?

Ana sayfa özelinde detaylandıracak olursak özellikle etkinlik listesinin temel filtresinin tarihler üzerine olduğunu göstermemiz gerekiyordu.

Tarih filtresini en üste konumlandırdık.

Mevcut günden önceki 2 gün ve sonraki 2 gün olarak ihtiyaçlar doğrultusunda filtreyi optimize ettik.

Spontan ziyaret eden kullanıcıların anlık olarak canlı yayınları görerek o an izleyebilecek içerik sunmak adına canlı ve yaklaşan etkinlikleri öne çıkardık.

Devamında spor türü ve platform bazlı filtreleme yapılabilmesi için tüm etkinliklerin olduğu listenin üstüne filtre konumlandırdık.

Ana sayfada detaylı bir wireframe çizdikten sonra pek istemesek de mecbur kaldığımız reklam bannerları ile sayfayı doldurduk.

Bu noktada bannerların, içerikleri ayrıştıracak şekilde konumlandırılmasına ve okunmayı zorlaştırmayacak şekilde boyutlandırılmasına dikkat ettik.

Vazgeçilemeyecek önemde olan büyük bannerlar için kullanıcının isterse kapatabileceği yapılar kurguladık.

Haberler ve statik sayfalar gibi içeriklerde sayfadaki yazıların okunaklı olmasına ve görsellerin ekranın görünür alanı kaplamamasına dikkat ettik.

Maç detay ekranlarında sponsorlu içeriklerin dikkat çekmesine ve kullanılabilirliği olumsuz etkilememesine özen gösterdik.

Tab’lı yapılarda ikonla güçlendirilmiş metinler kullandık. Kullanıcıları bilgiye ulaştırırken neyin ne işe yaradığını düşünme sürelerini azaltarak açık ve net başlıklar kullandık.

Bu arada SEO için içerikler eklemek durumunda olduğumuz için sayfaların altında ek bilgilere yer verdik. Bu bilgi kısımları kullanıcıları rahatsız etmeyecek ve bilgi almak için kullanabilecekleri yerler olarak konumlandırdık. Yine SEO için detaylandırılmış ve içerik doldurulmuş footer alanında kullanılabilir olması açısından aç/kapa yapısı kullandık.

Sitede geçirilen zamanı artırmak için lig ve takım özelinde detaylı istatistik ve içerikleri barındıran sayfaları tasarlayarak kullanıcıların ilgisini çekebilecek içeriklere yer vermeye çalıştık. Sayfaların tasarımlarını globalde spor ile ilgilenen kullanıcıların en çok takip ettiği sitelerden esinlenerek ve benchmarking yaparak tasarladık.

Spor ekranının yan projesi olan TV ekranı projesinde karasal yayınlarda TV’de olan programları listeledik. Bu noktada spor etkinliklerine nazaran yerel ve şifresiz kanallara erişim çok daha kolay olduğu düşünülerek anlık olarak canlı program takibi adına hangi kanalda hangi program olduğu ve ne kadar süre kaldığı gibi bilgilere yer verdik. Kullanıcının sayfayı adeta bir TV program guide gibi kullanabilmesini hedefledik.

Genel olarak uXcope ekibi olarak keyif aldığımız, severek yaptığımız, kendi içinde farklı zorlukları olan bir proje oldu. Sporekrani.com çalışanları da paydaşlar olarak tüm sorumluluklarını eksiksiz ve zamanında tamamlayarak bizlere destek oldular.

Bunun gibi nice projelerde görüşmek üzere, sevgiyle esen kalın!