App Store & Google Store Görsel Tasarımlarında Veri Kullanımı

Mehmet Oguz Arikan
Hürriyet Ürün Ekibi
6 min readAug 15, 2016

--

Özet: Ekran görselleri gibi grafik ağırlıklı bir çalışmada bile, verilerden yararlanmak gerekiyor. Elinizde veriler varsa bunları kullanmak, elinizde bir veri yoksa da farklı yöntemler kullanarak bunları elde etmek önemli. Böylece yaptığınız her çalışma, farklı birimlerin ihtiyaçlarına uygun şekilde gelişiyor ve tasarım süreci de veri odaklı hale geliyor.

Bundan 6 ay kadar önce Hürriyet Ürün Ekibine dahil olduğumda, uzun zamandır yenilenmek istenen Hürriyet mobil uygulamasının arayüz tasarımı süreci tamamlanmıştı. Benim dahil olduğum noktadan itibaren ise mobil uygulamanın slider, Foto Galeri ve onboarding akışlarının üzerinden tekrar geçtik ve yeni çözümler geliştirdik.

Bu akışları tamamladıktan sonra, prototip ve beta versiyonlarımızı kullanıcılarımıza test ettirdik. Daha sonra sıra, uygulamayı App Store ve Google Store’da herkesin kullanımına açmaya geldi. Bunun için mağazalarda uygulamayı tanıtacak olan görseller üzerine, uzun ve ayrıntılı bir çalışma yapmamız gerekiyordu.

Çünkü kullanıcıların uygulamayı indirmeden önce, uygulama hakkında en önemli izlenimi edindiği nokta mağaza görselleridir.

Bu yüzden mağaza görsellerini grafik olarak ele almanın yanında mağaza analizlerini, kullanıcı görüşmelerini ve online anketleri de tasarım sürecine dahil etmeye karar verdik.

Fikir Süreci: En Çok Oyu Alan Kazansın

İşe herkesin yaptığı gibi başladık; tasarım süreçlerin olmazsa olmazı olan, tüm fikirlerin yazıldığı bir Excel dosyası oluşturduk. App Store ve Google Store’da yer alacak görsellerde neler söylememiz gerektiği üzerine fikirlerimizi yazdık.

Buradaki önerilerimiz uygulamada yer alan özelliklerimize değiniyordu. Bu özellikler de benchmark’lar, bağlamsal görüşmeler ve persona çalışmaları sonucunda şekillenmiş, kullanıcı testleriyle sürekli iyileştirilmiş ve test edilmişti.

Elimizde 10'un üzerinde farklı öneri vardı. Apple Mağaza özelinde 5 ekran görüntüsü üst sınırı olduğundan, öneriler arasında bir önceliklendirme yapmamız gerekiyordu.

İşte veriden faydalanmaya başladığımız nokta, tam olarak burasıydı.

Mağaza Analizleri

Analytics ekibimizin bizimle paylaştığı, son 3 aya ait analizleri inceledik. En çok şikayet edilen konu başlıklarını belirledik ve önceliklendirmemizi buna göre yapmak istedik.

Öne çıkan şikayetlerin bazıları, eski sürümle alakalı teknik sıkıntıları işaret ediyordu. Bazıları da Hürriyet’in siyasi duruşu hakkındaki şikayetlerden oluşuyordu.

Teknik sıkıntıları yeni uygulamada zaten halletmiştik ve siyasi konular da bizim kontrolümüz dışındaydı. Zira biz editör ekibi değil, ürün geliştirme ekibiydik.

Böylece değinemediğimiz şikayet başlıklarını eledikten sonra geriye erişim yetkileri, kullanıcı deneyimi ve bildirimler hakkındaki şikayetler kaldı.

Kullanıcı Görüşmeleri

Tasarım öncesinde bağlamsal görüşmeler yaptığımız, tasarım sürecinde de prototip testleri için bir araya geldiğimiz kullancılarımızın ne dediklerini tekrar inceledik. Bu noktada sözü, UX Research takım arkadaşım Gizem’e bırakıyorum.

‘’Zaten geliştirdiğimiz özellikler, bu görüşmelerden de faydalanılarak ortaya çıkmıştı. Biz de bu özelliklere hakimdik. Ancak geri dönüp tekrar incelemek ve analiz etmek, önceliklendirmeyi nitel veri ile de sağlamlaştırmak istedik.’’

Gizem Ünaler

Bu noktada persona çalışmamızın tekrar üzerinden geçtik, ortak kelimeleri ve haber okuma motivasyonlarını inceledik ve 4 ortak başlığa ulaştık. Bunlar yazar takibi, gündem takibi, kategoriler ve bildirimler olarak şekillendi. Bu çalışma sayesinde, nitel verilerimiz de cepteydi.

Son Darbe: Kullanıcı Anketi

Mağaza analizi ve persona çalışmasındaki verilerimiz sonrasında, artık bir önceliklendirme oluşmaya başlamıştı. Ancak son 5 özelliğe karar vermeden önce, mobil sitemiz üzerinden tüm okuyucularımıza bir anket yapmaya karar verdik. Bu ankette de, yeni çıkacak mobil uygulamamızda en çok hangi özellikleri görmek isteyeceklerini oylamalarını istedik.

Kullancıya Ne İstediğini Sormak

Anketler ile ilgili çok bilinen bir söylem var. Bu söylem de “Sakın gidip kullanıcıya ne istediğini sormayın!” şeklinde… Çünkü insanların yaptıklarını ya da ihtiyaç duyduklarını söyledikleri şeylerle, gerçekten yaptıkları şeyler arasında her zaman fark vardır. Bu yüzden tek anket üzerinden ilerlemek, bizim bir hata yapmamıza neden olurdu.

Örnek olarak, “TV’de hangi programları izlersiniz?” sorusuna herkesin klasikleşen, “Belgesel” cevabını vermesi gibi…

Biz ise bu ankette daha önce ihtiyacını gördüğümüz, test ettiğimiz özellikleri soruyorduk ve bu yüzden yanıltıcı bir sonuç çıkmayacağını biliyorduk. Dolayısıyla, aklımızdaki bir fikri geliştirmek için anket tekniğinden faydalanmış olduk.

Peki Anket Nasıl Sonuçlandı?

Hürriyet’in telefon uygulamasında hangi özellikleri kullanabilmek isterdiniz?

başlıklı 10 tane seçeneği olan öznel sorumuza, 1.088 kullancı cevap verdi.

En yüksek oyu alan ilk 5 seçim şunlardı;

1-Haberler arasında rahatça geçebilme

2-Son dakika haberleri

3-Haberler hakkında anlık bildirimler alma

4-Yazar yazılarını ve onları takip edebilme özelliği

5- Yazı boyutlarını değiştirebilme

Veriyi Anlamlı Bir Hale Dönüştürme

İşin önemli noktalarından biri, tüm bu verileri bir araya getirip, analiz ettikten sonra, son bir dökümanda özetlemekti. Böylece biz önceliklendirme yaparken, pazarlama ekibimize de mağazada yer alacak görsellerin metinleri üzerinde rahatça çalışabileceği bir döküman vermiş olacaktık.

ilk başta çıkardığımız 10'dan fazla görsel başlığı önerisini, elimizdeki verilere göre eledik. Sıralamayı ise uygulamadaki haberler, yazarlar ve detay sayfaları arasındaki hiyerarşiyi baz alarak yaptık.

Sonuç olarak görsellerde yer vereceğimiz özellik ve başlıklar şunlar oldu;

1- Biz Yenilendik

“Hata” başlığı altına gelen tüm olumsuz geri dönüşler ve analitik olarak da bariz olan kötü gidişiat sebebiyle, bu mesajı iletmek önemliydi. Biz yenilenmiştik.

2- Son Dakika Haberleri ve Bildirimler

Görüşme yaptığımız tüm kullanıcılara baktığımızda, haber okuma motivasyonları arasında en öne çıkan başlık, gündemin takip edilebilmesiydi. Gündeme ait son dakika haberleri hakkındaki mesajımızı ikinci sıraya yerleştirdik.

3- Kategoriler

Kullanıcı görüşmelerini tekrar analiz ettiğimizde, farklı kategorileri takip eden okuyucularımızın önemini gördük. Tasarımda da kategoriler arası geçişi kolaylaştırarak cevap verdiğimiz bu ihtiyacı üçüncü sıraya yerleştirdik.

4- Yazarlar

Elimizdeki analizleri incelediğimizde, “Yazarlar” hakkındaki yeniliklere kesinlikle yer vermemiz gerektiği anlaşılıyordu. Okuyucularımız yazarlar ile Hürriyet kimliğini eşleştiriyor. Günün birinde bir yazar ayrıldığında, o kaynağa gidecek motivasyona da sahipler. Dolayısıyla yazarlar konusundaki yenilikleri ve yazar takip edebilmeyi de dördüncü sıraya aldık.

5- Haberler Arası Rahat Geçebilme ve Yazı Boyutlarını Büyütebilme

Mobil sitemizde yaptığımızın ankette ilk 5 arasında en çok oy alan özelliklerimizden biri olan haberler arası rahat deneyim ve kullanıcıya kontrol imkanı sağlayan yazı boyutlarını da son sıraya yerleştirdik.

Analiz Dökümanının Görselleştirilmesi

Dökümanı, yatay satırlardan ve başlıklardan oluşan bir tablo olarak tasarladık. Tüm analizleri hem Ürün Ekibi, hem diğer birimler için görselleştirdik.

Arayüz tasarımları yapmanın yanında, verileri görselleştirdiğimiz bu dökümanların tasarımını yapmak da oldukça zevkli oluyor. Bu dökümanlar sayesinde elimizdeki tüm veriler hem bizim, hem de diğer birimlerin hafızalarına kazınmış oluyor.

Sırasıyla özelliklerimiz ve çalışılacak başlıklardaki anahtar kelimelerle birlikte, UX ekibimizin persona çalışmasından da alıntıları eklemiştik.

Döküman tamamlanınca, işin bundan sonraki kısmı Pazarlama ekibine kalıyordu. Ekip bize, iletişim kanallarında kullandığı tonda yazılmış metinleri iletecek ve biz de bu metinleri ekran görüntülerine yerleştirecektik.

Onlardan metinleri beklerken biz de ekran görüntüleri için Apple ve Google Play mağazalarında, farklı farklı uygulamaların ekran görüntülerini inceledik.

İlk başta yaptığımız 7 farklı konsepti, 2 konsepte kadar düşürdük.

Konsept 1: Ürünü Öne Çıkar

Bu konsept, tasarımda sürdürdüğümüz içeriği öne çıkaran ve okumayı kolaylaştıran yapıyı devam ettiren bir versiyon oldu. Çalışmada tek renk bir arkaplan kullanarak, içeriği öne çıkaran beyaz renkli mock-up’lar ile, okunaklı başlıklara yer verdik.

Konsept 2: Sınırları Aş

Diğer konseptimiz ise, her ekran görüntüsünün dikey şekilde yerleştirilmesi yerine, ekran görüntülerini taşırarak yerleştirdiğimiz bir versiyon oldu. Grafik olarak ise aynı prensipleri korumaya devam ettik.

Apple Mağaza tarafında ilk konsept ile devam ederken, Google Play Mağazası’nda iki farklı konsepti test edebileceğimiz şekilde yayına aldık. Test hala devam ediyor ve sonuçları biz de merakla bekliyoruz.

Sonuç: Veriyi Kullanabildiğin Tüm Yerlerde Anlamlı Şekilde Kullan

Yeni tasarım süreçlerinde tüm bu nicel ve nitel veriler, genellikle wireframe süreçlerinde, a/b testlerinde ve iyileştirmelerde kullanılıyor. Ancak sanal mağazalar gibi kullacılara dokunan tüm noktalarda, veri anlamlı bir şekilde kullanılabilir, tasarıma yön verebilir ya da destek olabilir. Elinizdeki veriler yeterli değilse bile farklı yöntemler kullanarak fikirlerinizi test edebilir ve varsayımlarınızı kuvvetlendirebilirsiniz.

Yeni uygulamamızı Apple cihazlarınız için buradan, Android işletim sistemine sahip cihazlarınız için ise buradan indirebilirsiniz.

Yorumlarınızı da ayrıca fikirler@hurriyet.com.tr adresine iletebilirsiniz.

Teşekkürler,

Mehmet Oğuz Arıkan
Ürün Tasarımcısı

--

--