Hürriyet Mobil Web Yenilenme Süreci: Zorluklar ve çözümler
Hürriyet çatısı altında 2015 Kasım’ında ilk kez bir araya geldiğimizde, geliştirebileceğimiz birçok nokta bulunduğunu görebiliyorduk. Kullanıcı Deneyimi (UX) ekibinin yaptığı araştırmalar da, bu düşüncemizi onaylıyordu. Birçok okuyucu hem Hürriyet’in web sitesinden hem mobil siteden hem de uygulamalardan şikayet ediyordu. Zaten detaylı kullanıcı testlerine ihtiyaç bile kalmadan, bu alanlarda az da olsa tecrübe edinmiş her uzman, bu ürünlerdeki tasarım ve kullanılabilirlik sorunlarını fark edebilirdi. Biz de ilk odaklanacağımız geliştirmeyi bu ürünler arasından seçmeye karar verdik.
Neden ilk proje olarak mobil seçildi?
Hem tasarımsal hem de deneyimsel sorunlarına bakıldığında, Hürriyet’te ilk el atılması gereken yerlerden birisinin mobil site olması gerektiğine karar verdik. Ürün ekibi yapılanması tamamlandığında ilk iş olarak yeni mobil site için çalışmalara başlandı. Bu kapsamda UX ekibi kullanıcı görüşmeleri yaptı, anketler yayınladı ve çıkan sonuçlar değerlendirildikten sonra 2 alternatif tasarım çalışıldı. Geliştirme süreci akabinde testler tamamlandığında, daha önce şirket bünyesinde hiç kullanılmayan bir yönteme başvuruldu: Mobil web ürünü aşama aşama canlı sistemlere aktarıldı. Sonuçta da kullanıcıların en önemli ihtiyaçlarına karşılık veren bir ürün ortaya çıkmış oldu.
“Mobil web’in yenilenmesi projesi, Hürriyet Ürün ekibinin ilk çocuğuydu.”
Ufuk Aydın, Hürriyet Ürün Tasarım Takım Lideri
Mobil web kullanım sayılarına baktığımızda, günlük kullanımın en çok sabah 8 ile 11 ve akşam 6 ile 10 arasında gerçekleştiğini tespit ettik. Çoğunlukla trafikte geçen bu zaman dilimlerinde ziyaretçilerin hangi kaynaklardan geldiğini incelediğimizde ise, sosyal medyanın ve Google aramalarının trafiğin çok önemli bir kısmını sağladığını gördük. Bu iki değer de kullanıcılarımıza hızlı erişilebilen bir mobil web sayfası ile, kolay tüketilen içerik sayfaları yapmamız gerektiğini gösterdi. Nitekim hem ürün ekibi olarak yaptığımız geliştirmeler hem de yayın ekibinin strateji değişikliği sonrasında oturum sayıları ikiye katlandı, tekil sayfa görüntülemelerinde ise %200’ü aşan bir artış yaşadık. Genel tüketim rakamları artarken, kullanıcı başına yapılan tüketim miktarında da yükseliş gördük. Bir oturumda görüntülenen tekil sayfa miktarında %70’e varan bir artış olduğu gibi sıçrama değerinde de %15’i bulan bir düşüş sağladık. Yani mobil sayfalara daha fazla okuyucunun gelmesini ve bu okuyucuların sayfa üzerinde daha uzun süre kalmalarını sağlamış olduk.
“Cihazın kendisi ve özellikleri her ne olursa olsun rahatlıkla kullanılabilen, kullanırken de data tüketimini minimum seviyede tutmayı başarabilen bir mobil web sitesi geliştirdik.”
Bahadır Ersin, Hürriyet Ürün Geliştirme Takım Lideri
Zorluklar nelerdi?
Hürriyet bünyesi altında geliştirdiğimiz ürünler sadece deneyimsel ve tasarımsal olarak yargılanmakla kalmıyor, politik olaylardan etkilenen, okuyucu görüşleri tarafından şekillenen bir yapıya da sahip oluyor. Zira herhangi bir içerik sitesi ya da e-ticaret sitesi yapmıyoruz. Kullanıcılar sitemize girerken belli beklentilere ve duygulara sahip oluyor. Kendisi için önemli bir şeyler bulmayı bekliyor ve bu beklentilerinin karşılanmadığını düşünürse de sosyal medyaya yazarak ya da Hürriyet’in sitesine yorum bırakarak tepki gösteriyor. Bu yüzden yeni yapılan bir geliştirme de ilk olarak okuyucuların tepkisini topluyor. Önceden 5 tıkla ulaşılan bir sayfayı 2–3 tıka indirsek ve bu noktadaki acı noktasını gidersek bile, eleştiri alabiliyoruz. Fakat bir süre bu özelliği kullanan okuyucular, çoğunlukla yeni tasarımı benimsiyor. Bu durum da Hürriyet’te yapılan ya da yapılacak her tasarımda, zorluk yaşamamıza sebep oluyor.
“Hürriyet’te yeni bir ürün tasarlamanın en büyük zorluğu, okuyucunun yaptığımız işi ürün-tasarımdan daha yüksek beklentilerle değerlendirmesi oluyor. Bu da Hürriyet markasının kullanıcı bazında ne kadar büyük bir yansıması olduğunu gösteriyor.”
Ufuk Aydın, Hürriyet Ürün Tasarım Takım Lideri
Bugüne kadar Hürriyet ürünlerinin büyük bir kısmı bir bütün olarak değerlendirilmeden, eksik noktalara yama yapma mantığıyla yayına çıkarılmıştı. Ürünler hakkında bir kullanıcı araştırması, kullanılabilirlik testi, kapsam çıkartılması ve bunun fazlandırılması gibi çalışmalar yapılmamıştı. Bu yüzden de çıkartılan her yeni ürün, okuyucuların tepkisine maruz kalmıştı. Hatta Hürriyet Sosyal gibi kullanıcı beklentilerine ters düşen projeler okuyucu kaybedilmesine sebep olmuştu. Bu yüzden mobil web projesinde, daha önce yayına çıkan ürünlerden farklı bir yol izlenmesine ihtiyaç vardı.
İlk seferde olmadıysa bir daha dene
Mevcut ürün ekibi yapılanması tamamlanmadan önce Hürriyet için bir mobil sayfa çalışması daha yapılmıştı. Bu ilk versiyonu şirket içi kullanıma açarak testler yaptık. Teste katılan kullanıcılar sayfa üzerinde içerikleri okumanın ve genel olarak kullanımın zor olduğunu söylüyordu. Sayfanın beyaz ağırlıklı tasarımları olmasının okumayı zorlaştırdığı belirtiliyordu. Ayrıca sayfanın ferah görüntüsü için kullanılan boşluklar yüzünden sayfa uzunluğunun ‘rahatsız edecek boyutta’ arttığı söyleniyordu. Bunlara ek olarak mobil kullanıcılarla yaptığımız görüşmelerde, kullanıcılar sayfada çok fazla scroll yapmayı sevmediklerini belirtmişlerdi. Tüm bunlar göz önüne alındığında, ilk tasarımın okunabilirlik, kullanılabilirlik ve tasarım gibi deneyim noktaları açısından çok zayıf olduğuna ve bu haliyle yayına çıkamayacağımıza karar verdik. Ufak tasarımsal rötüşlar ya da daha fazla özellik ekleyerek düzeltme yapmaya çalışmak yerine, yeni bir tasarım yapılması daha iyi olacaktı.
“İlk prototipi çöpe atıp, en baştan, yeni bir arayüz tasarladık. Bunun için de iyi bir temel kurmayı, bunu optimize etmeyi ve sonrasında bu temelin üzerine eklemeler yaparak ilerlemeyi istedik.”
Ufuk Aydın, Hürriyet Ürün Tasarım Takım Lideri
İkinci bir tasarım için çalışmalara başladık, ancak ilk tasarım için fazlaca zaman kaybetmiştik. Bu yüzden ikinci tasarımı hem çok hızlı şekilde ve doğru deneyimi sunarak hayata geçirmemiz hem de kullanıcı beklentilerini olabildiğinde karşılar şekilde tasarlamamız gerekiyordu.
Acı noktalarının belirlenmesi
Tüm bunları göz önünde bulundurarak, ikinci bir tasarım için ön araştırmalara başladık. UX ekibimiz birkaç ay içinde 100’den fazla kullanıcıyla yüz yüze görüşmeler yaptı, mevcut mobil sayfa üzerinden anketler yayınladı ve gelen şikayetleri tek tek inceledi. Fakat bu araştırma süreci sadece ön hazırlık ile sınırlı kalmadı.Tasarımların tamamlandığı Nisan ayından, yayına çıktığımız Haziran ayının sonuna kadar, aktif keşif süreçleri devam etti.
Kullanıcıların en yoğun şikayetleri içerikler ve reklamlar sebebiyle oluşuyordu. Bu iki konu da ürünsel bir müdahale ile çözülebilecek konular değildi. Çünkü içerik üreten editör ekibine veya ana gelir kalemini oluşturan reklam satış ekibine herhangi bir müdahalemiz söz konusu değildi. Başka bir deyişle ne haberleri biz yazıyorduk, ne de reklam yerleştirmelerini biz yapıyorduk. Biz yalnızca doğru ürünlerin, doğru deneyimi yansıtacak ve kullanıcı beklentilerini karşılayacak şekilde ürünleştirilmesi ve tasarlanmasından sorumluyduk.
İçerik ve reklamların ardından üçüncü sırada ise, kullanılabilirlik ve okunabilirlik hakkındaki şikayetler geliyordu. Biz de kullanılabilirlik sorunlarına odaklanmaya karar verdik.
Neleri değiştirdik?
Mobil web sayfası için bir minimum kullanılabilir ürün (Minimum Viable Product, MVP) belirleyerek bu kapsamdan sapmadan yayına almak, sonra mobil sayfalarımızı kullanıcılardan gelecek geri bildirimlere göre, optimize ede ede geliştirmek istedik. Böylece 2. versiyon, bir önceki tasarımdan daha okunabilir ve kullanılabilir hale geldi.
Yaptığımız değişikliklere değinirsek:
1. Ana manşet Carousel’i değişti
İşe 12 haberden oluşan ana carousel alanını değiştirmekle başladık. Bu alanı hem yayın ekibinden, hem de kullanıcılardan gelen geri dönüşlere bağlı olarak optimize ettik.
a. Haber görselleri kapak görseli oldu: Masaüstü sitesindeki kapak görselleriyle mobil sitede karşılaşmak, okuyuculara ‘karışık’ ve ‘okunabilirlikten uzak’ bir deneyim sunuyordu. Okurlardan gelen görüşleri değerlendirdik ve manşet kapak görselinin, masaüstü sayfası (hurriyet.com.tr) ile aynı olmasına karar verdik. Mobil için ayrıca görsel hazırlanmasına gerek kalmadan, haber içi fotoğrafın Carousel’de de kullanılmasını önerdik ve hayata geçirdik. Bu fikrimiz editörlerden tepki topladı. Çünkü sade görseller kullanmanın okumaları azaltacağını, okuyucuların dikkatini habere çekemeyeceğini düşünüyorlardı. Fakat korkulan olmadı ve okunma sayıları etkilenmedi.
b. Kapak görsellerinin tasarımı değişti: Bir önceki maddeyi gerçekleştirebilmek için editörlerle bir mütabakat sağlamamız gerekiyordu. Onların önerilerini de alarak, haber başlığının arka planını okunmayı kolaylaştıran ve haber fotoğrafıyla da yarışmayan, siyah renkte bir görsel tasarladık.
2. Döviz kurlarını gösteren alanın yeri değişti
Mevcut mobil sayfa yapısı içerisinde döviz kurları ve hava durumu hakkında bilgi veren sabit alanlar bulunuyordu. Yeni tasarımda kullanıcıların sayfa uzunlukları ile ilgili şikayetlerini de göz önünde bulundurarak bu alanları kaldırmaya karar verdik. Ancak yeni sayfanın yayına çıkması ile beraber, kullanıcılardan olumsuz tepkiler almaya başladık. Bizim için önemli olmadığını, hatta gereksiz yere sayfayı uzattığını düşündüğümüz bu iki alanın neredeyse tüm kullanıcıların ihtiyacını karşıladığını fark edememiştik. Aldığımız tepkiler üzerine kur bilgilerini anasayfada bulunan Ekonomi kategorisine ait alana ekledik.
Hava durumu için ise farklı bir gösterim düşündük. Henüz çalışmalar sürmekle beraber, hava durumunu ayrıca bir kategoriye dönüştürmeyi planlıyoruz.
3. Yorum akışı düzenlendi
Hürriyet kullanıcıları, haberlere yorum yapmayı ve haberle etkileşime geçmeyi seviyor. Bu yüzden de eski tasarımda yorum alanı çok fazla ön plandaydı. Fakat mobilde iframe ile yerleştirilmiş bu alan, kullanım sırasında sorun yaratıyordu ve istenen etkileşimi sağlamıyordu.
Yeni tasarımda yorum alanını haber detayın en altına koyarak yorum yazmayı ve okumayı kolaylaştırmayı amaçladık. Bu değişiklik sonrasında hem yorumlar tam sayfa olarak görüntülenebilir hale geldi hem de kullanıcıların yorum yazmaları kolaylaştı. Temiz, net bir arayüze sahip oldu. Ayrıca eski tasarımda yorum yapmak isteyen kullanıcılar, tam sayfa şeklinde açılan bir form alanıyla karşılaşıyordu. Kullanıcıların Hürriyet’in haber detay sayfasından farklı görünen başka bir sayfaya yönlenmesi, adını ve soyadını girmesi, sonra yorum yazması gerekiyordu. Yeni tasarımda ise yorum yazma modülü, mesajlaşma alanı gibi bir görünüme sahip oldu.
4. Foto galeri tasarımı değişti
Galeri haberlerindeki carousel mantığı değiştirilerek, hem görselin hem de açıklama metninin aynı oranda rahat görüntülenmesi ve tüketilmesi sağlandı.
5. Landscape modu eklendi
Önceki tasarımda mobil cihazınızı yan çevirdiğiniz zaman haber görüntüsü yine portrait kullanım hali ile görünüyordu. Yeni tasarım ile ‘adaptive design’ mantığına uygun şekilde, telefonunuzu yan tuttuğunuzda da grid görünümü değişecek bir arayüz ölçüsü eklendi.
6. Performans iyileştirildi
Eski mobil sayfanın açılması için kullanıcıların ortalama 15 saniye beklemeleri gerekiyor, bu süre bazı eski tarayıcılarda 30–40 saniyelere kadar ulaşabiliyordu. Aynı zamanda yoğun görsel kullanımı ve görsellerin mobile uyumlu olmaması sebebiyle, kullanıcıların data paketi etkileniyordu. Bu yüzden görsel kalitesini ve formatlarını mobile uygun hale getirdik ve sayfaların açılış hızlarını etkileyen her teknik noktaya müdahale ettik. Örneğin bir içeriğe basılması ile yönlenilmesi arasında geçen 0,4 saniyelik tepkime süresini bile 0’a yakın bir seviyeye indirdik.
“Mobil kullanıcılarının şikayetleri genellikle sayfaların yavaş açılması ve sayfaların data paketlerini tüketmesiydi. Öncelikle bu sorunları gidermeye çalıştık ve görünen o ki, başarılı da olduk.”
Bahadır Ersin, Hürriyet Ürün Geliştirme Takım Lideri
7. Menü değişti
Eski mobil menü tasarımında geniş bir bant kullanılıyordu. Bu durum içerik alanından çalıyor, okunmayı zorlaştırıyordu. Ayrıca menü altında Futbol ve Seyahat gibi alt kategorilerin bazıları gösterilmiyordu. Yeni tasarımda bu sorunları giderdik.
8. Haber detay değiştirildi
Kullanıcıların en büyük şikayetlerinden birisi, haberleri rahatça okuyamamaktı. Buradaki okunabilirlik sorunları giderildi, haber detay tasarımları sade ve okunabilir bir hale getirildi.
MVP hazırlanması ve proje fazları
Geçmişte yayına çıkan ürünlerin tersine, bu ürünü aşama aşama yayına aldık. Uzun süre yalnızca iç kullanıcılara, yani Hürriyet çalışanlarına gösterildi. Sonra yeni tasarımın gösterildiği kullanıcı yüzdeleri yavaş yavaş artırıldı; önce kullanıcıların %1’ine, ardından sırasıyla %10, %30, %50 ve %70’ine açıldı. Kullanıcılara ilk 2 aşamada anketler gösterildi. Mobil sayfayla ilgili fikirleri alındı.
Toplam 4 ay süren bu fazlandırma sırasında kullanıcılara yeni arayüz tanıtıldı. %70’e açılana dek kullanıcılara Netscaler yardımıyla “şu anda yeni sayfadasınız, isterseniz eski tasarıma dönebilirsiniz” mesajı gösterildi. Anketlerin sonucuna bağlı olarak geliştirmeler tamamlandı ve Haziran ayında yeni mobil site kullanıcıların %100’üne açıldı. Sonuç olarak ortaya bir MVP çıktı.
Neyi yanlış tahmin ettik?
MVP için 3 yeni özelliği yayına almayı planlamıştık. MVP süreci boyunca yaptığımız testlerde, bunların gereksiz olduğunu gördük.
1.Section’ların özelleştirilmesi
Her kategoriye özel haber detayın altında önerilen section’ların farklılaşmasının mantıklı olabileceğini düşünmüştük. Bu kullanımı The Guardian’da görmüş, kullanıcılarımızın ilgisini çekeceğini düşünmüştük. MVP haldeki ürünü yayına aldıktan sonra, sıçrama değerlerini (bounce rate) ve aşağı kaydırma derinliği (scroll depth) sayılarını incelediğimizde, aslında böyle bir beklenti ve ilgi olmadığını gördük.
2. Etkileşim sayısının gösterilmesi
Yeni mobil tasarımı ilk yayına aldığımızda ana sayfadaki kartların üzerinde etkileşim sayısını da veriyorduk. Bunun kullanıcının hangi içeriği okuyacağına dair verdiği karara pozitif katkı sağlayacağını düşünüyorduk. Fakat kullanıcıların bu terimi anlamadığını, anlayanların fark etmediğini, fark etseler de bu sayıyla ilgilenmediğini fark ettik. Kaldı ki kullanıcılar mobildeki listeleme sayfalarında gezerken hangi içeriği okuyacağına karar vermeden önce uzun uzun düşünmüyor. Okuyucunun bu kararı vermesini etkileyecek bir rakamsal bilgi daha eklememiz, aslında okuyucunun kararını hiç etkilemedi. Bu yüzden etkileşim sayısına şimdi sadece haber detay sayfasında yer veriyoruz.
“Hedefimiz MVP olmasına rağmen bazı özellik ve eklentileri en basit haliyle denemek istemiştik. Kullancıya sunduğumuz zaman farkettiğimiz en çarpıcı durum hızlı, sade kolay haber okuma beklentisi bütün özelliklerin en başında geliyormuş ve bunu başardığımıza inanıyorum.”
Ufuk Aydın, Hürriyet Ürün Tasarım Takım Lideri
3. Okuma Listesi
Hürriyet’e günde ortalama 500 içerik giriliyor. Okuyucularımızın da bu haberlerin bazılarını sonradan okumak isteyebileceğini, bunun için de bir okuma listesi oluşturmanın iyi bir çözüm olacağını düşündük. Ayrıca mobil web deneyim içerisinde kullanıcıların içeriği nasıl ve ne sıklıkta tükettiğini yanlış tahmin ettik. MVP süreci bize Okuma Listesi geliştirmesinin kullanıcılar için herhangi bir anlam taşımadığını gösterdi. Biz de bu özelliği ileride tekrardan değerlendirmek üzere, parka alma kararını verdik.
Son söz
Hürriyet’te bugüne kadar bir ürünün 1 kez yenilenmesi ve 5 yıl boyunca yamalar yapılarak kullanılması gibi bir yöntem izlenmişti. Yeni kurduğumuz ekipte ise trendlerin takibini, düzenli olarak yapılan bağlamsal görüşmeleri ve kullanıcıların ihtiyaçlarını ön plana koymayı düstur edindik. Bunu yaparken Hürriyet’in analiz ve yazılım ekiplerinden destek aldık ve almaya da devam ediyoruz.
Mobil sayfamız her ne kadar okuyuculardan olumlu tepkiler aldıysa da, önümüzdeki günlerde onu ihtiyaçlara göre şekillendirmeye ve yenilemeye devam edeceğiz.
