App Store Ekran Görüntüsü Tasarımı: Dönüşümü Artıran İpuçları

Kullanıcıların büyük kısmı, arama sonuçlarında veya mağaza kartında görünen ilk birkaç görsele bakarak indirme kararını verir; setin geri kalanına asla kaydırmadan çıkan ziyaretçi sayısı yüksektir. Bu yüzden en güçlü özelliğinizi veya en net değer önerinizi ilk görsele koyun — onboarding ekranı, giriş formu ya da ayarlar sayfasıyla açmak, en pahalı yerinizi boşa harcamak demektir.

Google Play ve App Store'un bazı yerleşimlerinde (arama sonucu kartı, kategori listeleri) yalnızca ilk 1-2 görsel kullanıcıya tıklamadan görünür; geri kalan set yalnızca uygulama sayfasına girenler tarafından görülür. Bu, ilk görsellerin isabet oranını görselin kendisinden çok daha kritik hale getirir.

Her iki mağaza da resmi deneyim araçları sunar (Apple'ın Product Page Optimization'ı, Google'ın Store listing experiments özelliği); farklı ilk görsel sıralamalarını gerçek trafikte test edip hangisinin dönüşümü artırdığını ölçebilirsiniz. Sezgiyle karar vermek yerine, trafiğiniz yeterliyse bu araçları kullanmak en güvenilir yoldur.

Ham bir ekran görüntüsü tek başına nadiren yeterlidir; görselin üstüne veya altına 4-6 kelimelik kısa bir başlık bindirmek, küçük boyutta bile mesajın anında okunmasını sağlar. Her görsel tek bir fikri anlatmalı — bir başlığa iki mesaj sıkıştırmak, ikisini de zayıflatır.

Set boyunca aynı tipografi hiyerarşisini koruyun: başlık için sabit bir font ağırlığı ve boyutu, varsa alt metin için daha ince bir ikinci katman. Yüksek kontrast şart — açık zemin üzerine açık renk metin, thumbnail boyutunda tamamen kaybolur. Aynı arka plan renk paleti ve aynı bindirme konumu (hep üstte ya da hep altta), setin tek bir tasarımdan geldiği izlenimini güçlendirir.

Görseller soldan sağa kaydırıldığında başlıklar tek bir hikâye anlatmalı: önce en güçlü değer önerisi, sonra onu destekleyen özellikler, en sonda sosyal kanıt ya da çağrı niteliğinde bir kapanış. İzole sloganlar yerine birbirini tamamlayan bir sıra kurmak, kullanıcının seti sonuna kadar takip etme ihtimalini artırır.

Cihaz çerçevesi (telefon/tablet gövdesi) görsele "gerçek bir cihazda çalışan gerçek bir uygulama" hissi katar ve marka tanınırlığına katkı sağlar. Ancak bir bedeli vardır: çerçeve, asıl arayüze ayrılan görünür alanı küçültür ve thumbnail boyutunda detayların okunmasını zorlaştırır.

Google, Play görsellerinde durum çubuğu temiz, çerçevesiz tam ekran (full-bleed) görüntüler öneriyor — bu, arayüze ayrılan alanı maksimuma çıkarır ve mobil ekranda taranırken daha az görsel gürültü yaratır. Çerçeve kullanmaya karar verirseniz, çerçevenin hedef platformla eşleşmesi zorunludur: Android görselinde iPhone çerçevesi (ya da tersi) kullanmak, mağazalarda bilinen bir kalite/red sorunudur.

Kesin bir kural yoktur; oyun ya da fotoğraf ağırlıklı uygulamalarda çerçevesiz tam ekran genelde daha etkilidir, arayüzü sade ve marka kimliği güçlü ürünlerde ise hafif bir çerçeve görsel tutarlılığı artırabilir. Trafiğiniz yeterliyse ikisini de test edin; değilse Google'ın önerisine (çerçevesiz, tam ekran) uymak güvenli varsayılandır.

Uygulamanız hem açık hem karanlık temayı destekliyorsa, ekran görüntülerinizin tümünü yalnızca bir temadan almak yanıltıcı olabilir; kullanıcıların önemli bir kısmı sistem karanlık modunu kullanıyorsa ve setiniz tamamen açık temadan oluşuyorsa, ilk açılışta gördükleri arayüzle mağaza görselleri arasında bir tutarsızlık hissi oluşur. Setin bir kısmını karanlık, bir kısmını açık temadan almak ya da baskın temayı öne çıkarmak, bu tutarsızlığı azaltır.

Metin bindirmesi kullanıyorsanız görselleri dil başına yerelleştirmek dönüşümü ölçülebilir şekilde artırır; her iki mağaza da her görüntülenen dil için ayrı bir set yüklemenize izin verir. Ayrı set yüklemediğiniz diller için varsayılan (genellikle İngilizce) set otomatik gösterilir — bu bir hata değildir, ama en çok indirme aldığınız dillerde yerelleştirilmiş metin, kullanıcıya kendi dilinde konuşan bir uygulama izlenimi verir.

Yerelleştirirken dikkat edilmesi gereken pratik nokta metin uzunluğudur: İngilizcede 5 kelime tutan bir başlık, Almanca ya da Türkçede aynı yerleşimde taşabilir veya kırpılabilir. Şablonu, en uzun dilinizdeki metne göre test edip tüm dillerde okunabilir kalmasını doğrulayın.

Play Store mağaza kaydında, telefon ekran görüntülerinden ayrı bir 1024x500 piksellik "öne çıkan görsel" (feature graphic) alanı vardır. Bu görsel mağaza sayfanızın üst kısmında, arama dışı tanıtım yerleşimlerinde (öne çıkarma, koleksiyonlar, editoryal listeler) ve tanıtım videonuz varsa videonun kapak/kaplama görseli olarak kullanılır.

Boyutu geniş ve alçaktır (yaklaşık 2:1 oran), bu yüzden dikey bir telefon ekran görüntüsünü doğrudan bu alana sığdırmaya çalışmak nadiren iyi sonuç verir. Çoğu geliştirici burada bir ekran görüntüsü kolajı yerine logo, ürün adı ve kısa bir slogan içeren sade bir marka kompozisyonu kullanır.

Video kapak görseli olarak kullanıldığında, ortadaki oynatma (play) düğmesi ve bazı yerleşimlerde kenarlardaki UI elemanları görselin bir kısmını kaplar; kritik metni veya logoyu tam ortaya ya da kenarlara çok yakın yerleştirmekten kaçının. Boyut detayları (piksel sınırları, dosya biçimi) için blogumuzdaki ayrı bir yazıda mağaza görsel ölçülerini derledik.

En sık görülen hata, ekran görüntüsünün büyük kısmını kapatan yoğun metin bindirmesidir; kullanıcı hem uygulamanın gerçek arayüzünü göremez hem de mesajı okumak için durup düşünmek zorunda kalır. İkinci sırada düşük kontrast gelir — açık renk zemin üzerine yine açık renk metin, özellikle küçük mobil ekranlarda tamamen kaybolur.

Üçüncü yaygın hata, set içindeki görsellerin tutarsız bir şablondan gelmesidir: her görselde farklı font, farklı arka plan rengi veya farklı bindirme konumu kullanmak, setin "tek bir tasarımdan" değil rastgele parçalardan geldiği izlenimi verir ve tarama hızını düşürür. Dördüncü hata, ilk görsele onboarding, giriş ekranı ya da izin isteme diyaloğu gibi ürünün gerçek değerini anlatmayan bir ekranı koymaktır.

Bu tasarım kararlarının tamamını tek bir şablonda tutmak isterseniz Vibeloy Screenshot Studio, cihaz sınıfına göre doğrulanmış boş şablonlar üzerinden başlık, arka plan ve renk paletini tek noktadan uygulamanızı, karanlık/açık varyant ve dil başına set üretmenizi tarayıcıda sağlar. Bu, premium bir Vibeloy özelliğidir.