Dönüşümü artıran arayüz, ziyaretçinin sayfaya girdiği anda ne sunulduğunu anlayıp tek bir net adımı zahmetsizce atabildiği arayüzdür. Bunu sağlayan kurallar soyut değil: ilk ekrandaki cümle, buton sayısı, form uzunluğu, parmak boyutu, yükleme süresi, metin kontrastı ve hata mesajlarının dili. Aşağıdaki sekiz kuralın her birini kendi sitenizde birkaç dakikada kontrol edebilirsiniz.
Kısa liste: 1) İlk ekran ne yaptığınızı tek cümlede söylesin, 2) her sayfada tek ana eylem olsun, 3) formda yalnızca gereken alanları isteyin, 4) mobilde dokunma alanları parmağa göre boyutlansın, 5) sayfa hızlı açılsın, 6) güven sinyalleri karar anının yanında dursun, 7) metin okunur ve yeterince kontrastlı olsun, 8) hata mesajı sorunu ve çözümünü birlikte söylesin.
Başlamadan önce "dönüşüm" kelimesini kendi işiniz için tanımlayın. Bir üretici için numune talebi, bir klinik için randevu, bir kafe için yol tarifi tıklaması, bir mağaza için sipariş olabilir. Hangi eylemi saydığınızı yazmadan yapılan arayüz değişikliğinin işe yarayıp yaramadığını göremezsiniz. Bu eylemleri Google Analytics 4'te anahtar etkinlik olarak işaretlemek, aşağıdaki kontrollerin sonucunu ölçmenin en pratik yolu.
İlk ekran: mesaj ve ana eylem
1. İlk ekran ne yaptığınızı tek cümlede söylesin
Ziyaretçi kaydırmadan önce üç soruya cevap arar: burası ne, benim için mi, şimdi ne yapmalıyım. "Kaliteli hizmet, güvenilir çözüm" gibi sloganlar bu soruların hiçbirini yanıtlamaz. Denizli'de havlu ve bornoz üreten bir firma için "Otel ve ev tekstili için fason havlu, bornoz ve plaj havlusu üretimi" cümlesi, şık bir sloganın yapamadığını yapar: doğru kişiyi içeride tutar, yanlış kişiyi vakit kaybetmeden yönlendirir.
Başlığın altına kime hitap ettiğinizi ve sizi neyin farklı kıldığını anlatan kısa bir cümle, onun altına da ana buton gelir. Arka plandaki büyük görsel ya da video bu mesajın önüne geçmemeli.
Nasıl kontrol edilir: Ana sayfanızı sitenizi tanımayan birine telefonda beş saniye gösterin, kapatın ve ne sattığınızı sorun. Cevap sizin cümlenize yakın değilse başlık değişmeli. Ardından masaüstü ve mobilde ilk ekranın görüntüsünü alın; başlık ve ana buton ikisinde de kaydırmadan görünmeli.
2. Her sayfada tek ana eylem olsun
"Teklif al", "Katalog indir", "Bültene katıl" ve "Bizi takip edin" aynı ağırlıkta yan yana durursa ziyaretçi çoğu zaman hiçbirini seçmez. Her sayfanın tek bir ana eylemi olmalı; diğerleri çerçeveli buton ya da metin linki gibi ikincil görünmeli. Ana eylem sayfanın türüne göre değişir: hizmet sayfasında teklif ya da arama, ürün sayfasında sepete ekleme, blog yazısında ilgili hizmete geçiş.
Buton metni de bu kuralın parçası. "Gönder" ya da "Tıklayın" yerine sonucu söyleyen bir fiil kullanın: "Teklif iste", "Numune talep et", "Masa ayırt". Bu tür önceliklendirme kararlarını UI/UX tasarım hizmetimizde kullanıcı akışını kâğıda dökerek, ekran tasarımına geçmeden önce veriyoruz.
Nasıl kontrol edilir: Sayfanın ekran görüntüsünü alıp bir görsel düzenleyicide bulanıklaştırın ya da ekrana gözlerinizi kısarak bakın. Hâlâ seçilebilen tek bir buton kalıyorsa doğru yoldasınız. İki ya da üç renkli buton birbiriyle yarışıyorsa hangisinin asıl hedef olduğuna karar verin.
Formlar ve mobil kullanım
3. Form alanlarını azaltın
Her ek alan, formu yarıda bırakmak için bir sebep daha demektir. İlk temas için genellikle ad, telefon ya da e-posta ve kısa bir not yeter. Firma unvanı, vergi numarası, açık adres gibi bilgiler ilk görüşmeden sonra da alınabilir. Zorunlu olmayan alanları ya kaldırın ya da "isteğe bağlı" diye açıkça işaretleyin.
Bayi başvurusu gibi gerçekten uzun bir süreç gerekiyorsa formu adımlara bölün ve kaçıncı adımda olunduğunu gösterin. Mobilde doğru klavyeyi açmak da işi kolaylaştırır: telefon alanı sayı tuşlarını, e-posta alanı @ işaretli klavyeyi getirmeli; tarayıcının otomatik doldurma özelliği de kapatılmamalı.
Nasıl kontrol edilir: Formunuzu telefonda baştan sona doldurun ve süre tutun. Her alan için "bu bilgi olmadan ilk dönüşü yapabilir miyiz?" diye sorun; cevap evetse alan gidebilir. Form başlatma ve form gönderme olaylarını ayrı ayrı ölçerseniz kaç kişinin yarıda bıraktığını da görürsünüz.
4. Mobilde dokunma alanları parmağa göre olsun
Fare imleci küçük bir linke rahatça gider, başparmak gitmez. Apple'ın arayüz yönergeleri dokunma hedefleri için en az 44×44 pt, Google'ın Material Design sistemi 48×48 dp öneriyor; erişilebilirlik standardı WCAG 2.2 ise asgari 24×24 CSS pikseli şart koşuyor. Yan yana duran linkler arasında boşluk bırakın, menüyü başparmağın uzanabileceği yerde tutun.
Telefon numarası tıklanınca arama başlatmalı, adres harita uygulamasını açmalı, WhatsApp butonu doğrudan sohbete gitmeli. Menüsüne masada telefondan bakılan bir kafe ya da rezervasyonu yolda yapılan bir otel için bu ayrıntılar doğrudan müşteri kaybı ya da kazancı demek.
Nasıl kontrol edilir: Sitenizi telefonda tek elle, yalnızca başparmağınızla gezin. Yanlış linke basıyorsanız ya da bir şeyi okumak için yakınlaştırmanız gerekiyorsa alanlar küçük. Telefon numarasına, adrese ve WhatsApp butonuna tek tek dokunup doğru uygulamanın açıldığını görün.
Hız ve güven
5. Sayfa hızlı açılsın
Yavaş sayfa, ziyaretçinin içeriği görmeden terk ettiği sayfadır. Google'ın Core Web Vitals ölçütleri işe başlamak için iyi bir çerçeve: en büyük içeriğin görünmesi (LCP) 2,5 saniyenin, etkileşime tepki (INP) 200 milisaniyenin, düzen kayması (CLS) 0,1'in altında olmalı. Sık görülen sebepler belli: sıkıştırılmadan yüklenen telefon fotoğrafları, ilk ekranda otomatik oynayan büyük videolar, ağır kaydırıcılar ve sayfaya gömülmüş çok sayıda üçüncü taraf kodu.
Metareks Lojistik için kurduğumuz kurumsal sitede hedef, panelden kolayca güncellenebilen ama hızlı açılan bir yapıydı; ikisi birbirinin alternatifi değil. Hız arama görünürlüğünü de etkilediği için SEO optimizasyonu çalışmalarında da ilk bakılan konulardan biridir.
Nasıl kontrol edilir: PageSpeed Insights'a sayfa adresinizi yazın ve mobil sonuca bakın. Sitenizin yeterli trafiği varsa üstte gerçek kullanıcı verisi, altta laboratuvar testi görünür. Google Search Console'daki Core Web Vitals raporu da hangi sayfa gruplarının sorunlu olduğunu listeler.
6. Güven sinyalleri karar anının yanında dursun
Ziyaretçi butona basmadan hemen önce tereddüt eder: bu firma gerçek mi, bana dönecekler mi, bilgilerimi ne yapacaklar? Güven unsurları bu tereddüdün yaşandığı yerde durmalı, sayfanın en altındaki bir referans şeridinde değil. İşe yarayanlar somut şeylerdir: açık adres ve sabit telefon, haritada konum, gerçek ve güncel Google yorumları, tamamlanmış işlerden fotoğraflar, sertifikalar, teslim ve iade koşulları, formun yanında kişisel verilerin ne için kullanılacağını söyleyen kısa bir not ve aydınlatma metni linki.
Stok fotoğraftaki gülümseyen ofis çalışanları güven vermez; kendi atölyeniz, ekibiniz ve ürününüz verir. Mermer ve traverten satan Denizli firmalarında uygulanmış projelerin fotoğrafı, ihracat yapan bir tekstil üreticisinde çalışılan ülkeler ve belgeler, uzun bir "hakkımızda" metninden daha ikna edicidir.
Nasıl kontrol edilir: Ana butonun çevresine bakın. Hemen üstünde ya da altında ziyaretçinin olası itirazını karşılayan bir bilgi var mı? Sitedeki yorum ve referansların gerçek ve doğrulanabilir olduğundan, iletişim bilgilerinin güncel olduğundan emin olun.
Okunabilirlik ve hata mesajları
7. Metin okunur ve kontrastlı olsun
Açık gri zemin üzerinde ince açık gri yazı ekranda zarif görünebilir ama güneş altında telefondan okunmaz. WCAG, normal metin için en az 4.5:1, büyük metin için 3:1 kontrast oranı ister. Mobilde gövde metni için 16 piksel yaygın kabul gören alt sınırdır; paragraflar kısa, satırlar göz yormayacak uzunlukta tutulmalı. Butonlar da bu kurala dahil: açık sarı zemin üzerine beyaz yazı sık rastlanan bir hata.
Nasıl kontrol edilir: Chrome geliştirici araçlarında bir metni incelediğinizde renk seçici kontrast oranını gösterir; WebAIM Contrast Checker gibi ücretsiz araçlar da iki rengi girince sonucu verir. Ardından sayfayı telefonda, ekran parlaklığı düşükken dışarıda okumayı deneyin.
8. Hata mesajı sorunu ve çözümünü söylesin
"Geçersiz giriş" ya da formun tepesinde kırmızı bir "Hata oluştu" yazısı ziyaretçiye ne yapacağını söylemez. İyi bir hata mesajı ilgili alanın hemen yanında çıkar ve neyin yanlış olduğunu, nasıl düzeltileceğini sade bir dille yazar: "Telefon numarası 10 haneli olmalı, başında 0 olmadan yazın." Hata gösterildiğinde daha önce girilen bilgiler silinmemeli. Uyarı yalnızca kırmızı renge dayanmamalı; renkleri ayırt edemeyen kullanıcı için metin ya da simge de olmalı.
Başarılı gönderimden sonra da net bir onay ekranı gösterin: mesajın alındığını, ne zaman ve hangi kanaldan dönüleceğini yazın.
Nasıl kontrol edilir: Formu bilerek yanlış doldurun: e-postayı eksik yazın, zorunlu alanı boş bırakın, telefon alanına harf girin. Her hatada ekranda ne yazdığını ve girdiğiniz verilerin yerinde kalıp kalmadığını not edin. Son olarak doğru bir gönderim yapın ve mesajın e-postanıza ya da panelinize gerçekten ulaştığını görün. Çalışmayan bir form, dönüşümü kimse fark etmeden kaybettiren hatadır.
Hangi kuraldan başlamalı?
Sekizini aynı anda değiştirmek yerine en çok ziyaret alan ve ana eylemin bulunduğu sayfadan başlayın. Pratik bir sıra şöyle:
- Formun ve arama butonlarının çalıştığını, mesajların size ulaştığını doğrulayın (kural 8 ve 3).
- Mobil hızı ve dokunma alanlarını düzeltin (kural 5 ve 4).
- İlk ekran mesajını ve ana eylemi netleştirin (kural 1 ve 2).
- Güven sinyallerini ve okunabilirliği elden geçirin (kural 6 ve 7).
Her değişiklikten önce birkaç haftalık dönüşüm sayısını not edin ve değişiklikleri mümkünse tek tek yapın; hangisinin etkili olduğunu ancak böyle anlarsınız. Sitenin altyapısı mobilde çok yavaşsa ya da düzen değiştirilemiyorsa yamalar yerine web sitesini yeniden tasarlamak daha az emek isteyebilir. Arama tarafında nereden başlayacağınızı merak ediyorsanız SEO'nun temellerini anlattığımız yazıya da göz atabilirsiniz.
Point'te arayüz çalışması nasıl ilerliyor?
İşe mevcut sitenin verisiyle başlıyoruz: ziyaretçilerin hangi sayfalardan geldiği, hangi adımda ayrıldığı, formların ve arama butonlarının ölçülüp ölçülmediği. Ölçüm yoksa önce onu kuruyoruz. Ardından ana kullanıcı akışlarını çiziyoruz; örneğin "ürünü gör, numune iste" ya da "menüye bak, masa ayırt". Tel kafes (wireframe) aşamasında yerleşim ve öncelik konuşuluyor, renk ve görsel dil ancak bu oturduktan sonra geliyor. Tasarım mobil ekrandan başlıyor, masaüstüne genişletiliyor.
Yayından önce bu yazıdaki sekiz kuralı kontrol listesi olarak kullanıyoruz; yayından sonra da ölçümü izleyip gerekirse düzeltiyoruz. Asya Boutique projesinde mobil uyumlu yerleşim, hızlı yükleme ve kolay içerik yönetimi bu sürecin sonucu. Kaynak dosyalar ve yönetim paneli işletmeye teslim ediliyor. 2007'den beri Denizli merkezli çalışan ekibimizin kapsamını ve süreç adımlarını Denizli UI/UX tasarım sayfamızda bulabilirsiniz.
Bu yazıdaki konuyla ilgili hizmetlerimiz: Denizli web tasarım, Denizli sosyal medya yönetimi ve Denizli SEO ajansı.
