UI ve UX farkı nedir: bir ödeme adımı üzerinden net bir anlatım

UI ve UX çoğu zaman tek bir kelime gibi söylenir, oysa iki ayrı işi anlatır. UI ekranda gördüğünüz ve dokunduğunuz yüzeydir; UX ise o ekranla bir işi bitirmeye çalışırken yaşadığınız şeyin tamamıdır. Farkı bilmek, bir tasarım teklifinde neyin karşılığını ödediğinizi ve sitenizdeki sorunun hangi tarafta olduğunu anlamanızı sağlar.

UI neyi, UX neyi kapsar

UI, yani kullanıcı arayüzü, ekranın görünen katmanıdır. Renkler, yazı tipleri, boşluklar, ikonlar, butonlar ve form alanları bu katmana girer. Bir butonun normal, basılı, devre dışı ve yükleniyor hâllerinin nasıl görüneceği de UI kararıdır. Bu çalışmanın çıktısı genellikle Figma'da hazırlanmış ekranlar ve tekrar kullanılabilen bir bileşen kütüphanesidir.

UX, yani kullanıcı deneyimi, ekrandan önce başlar. Siteye kimin, hangi işi yapmak için geldiği, bilginin hangi sırayla sunulacağı, bir işlemin kaç adım süreceği, hata olduğunda ne olacağı ve butonların üzerinde ne yazacağı UX kararlarıdır. Çıktıları akış şemaları, tel kafes çizimler (wireframe), tıklanabilir prototipler ve kullanıcı testlerinden çıkan bulgulardır.

Sağlıklı bir projede önce UX kararları verilir, UI bu kararların üzerine giydirilir. Sıra tersine döndüğünde güzel görünen ama kullanması zor ekranlar ortaya çıkar.

Kısa ayrım: UX "kullanıcı bu işi bitirebiliyor mu" sorusuna bakar. UI ise "bitirirken ne gördüğünü ve nereye basacağını anlıyor mu" sorusuna bakar.

Aynı ödeme adımında iki farklı iş

Bir alışveriş sitesinde sepetten sonra gelen ödeme ekranını düşünün. Bu tek ekran için iki ayrı soru listesi vardır.

UX tarafındaki kararlar

• Üye olmadan devam edilebiliyor mu?
• Kaç alan dolduruluyor? Fatura adresi teslimat adresiyle aynıysa ikinci kez isteniyor mu?
• Kargo ücreti ve toplam tutar bu adımdan önce görülmüş müydü?
• Kart reddedildiğinde girilen bilgiler korunuyor mu, kullanıcıya ne yapması gerektiği söyleniyor mu?
• Adımlar mantıklı bir sırada mı: önce adres, sonra kargo, en son ödeme?

UI tarafındaki kararlar

• "Siparişi tamamla" butonu ekrandaki en belirgin öğe mi, yoksa "alışverişe dön" bağlantısıyla aynı ağırlıkta mı?
• Hata mesajı ilgili alanın hemen altında mı ve yalnızca kırmızı renkle değil, metinle de anlatılıyor mu?
• Alan adları yazmaya başlayınca kaybolan soluk bir ipucu mu, yoksa her zaman görünen bir etiket mi?
• Telefonda butonlar parmakla rahat basılacak büyüklükte mi, metin ile zemin arasındaki kontrast okumaya yetiyor mu?

İki tarafın da başarısız olabileceği ayrı senaryolar vardır. Özenle tasarlanmış ama on beş alan soran bir ödeme ekranında UI iyi, UX zayıftır. Üç alana indirilmiş ama onay butonu sayfanın dibinde soluk gri duran bir ekranda ise UX iyi, UI zayıftır. Müşteri açısından sonuç aynıdır: sipariş tamamlanmaz. Bu nedenle web tasarım ve e-ticaret projelerinde iki işi birbirinden ayırmadan yürütmek gerekir.

UI ve UX yan yana

Kendi sitenizde beş dakikalık kontroller

Bir uzmana başvurmadan önce sitenizin durumunu aşağıdaki kısa denemelerle görebilirsiniz. Her biri en fazla beş dakika sürer.

1. Beş saniye testi. Siteyi hiç görmemiş birine anasayfayı beş saniye gösterip kapatın. Ne sunduğunuzu ve ilk olarak ne yapması gerektiğini söyleyebiliyor mu?
2. Tek elle telefon testi. En önemli işlemi (sipariş, teklif formu ya da randevu) telefonda tek elle baştan sona yapın. Yakınlaştırmak zorunda kaldığınız her yer bir sorundur.
3. Bilerek hata yapın. Formu boş gönderin, e-posta adresini eksik yazın. Mesaj hangi alanın neden hatalı olduğunu söylüyor mu, doğru yazdıklarınız yerinde duruyor mu?
4. Dokunuş sayısı. Anasayfadan en çok ilgi gören ürününüze ya da telefon numaranıza kaç dokunuşta varılıyor?
5. Boş sonuç. Site içi aramaya yazım hatalı bir kelime girin. Sonuç bulunamadı sayfası bir çıkış yolu öneriyor mu?
6. Tutarlılık. Üç farklı sayfayı yan yana açın. Ana buton hepsinde aynı renkte, aynı biçimde ve benzer bir yerde mi?

İlk beş kontrol ağırlıklı olarak UX, sonuncusu UI hakkında fikir verir. Bir uyarı: sitenizi ezbere bildiğiniz için sorunların üzerinden fark etmeden geçersiniz. Denemeleri siteyi tanımayan birine yaptırın ve yardım etmeden izleyin; takıldığı yerler en değerli bulgularınızdır.

UX analizi ne zaman gerekir

Her site kapsamlı bir analize ihtiyaç duymaz. Birkaç sayfalık bir tanıtım sitesinde çoğu zaman düzgün bir görsel yenileme yeterlidir. Şu durumlarda ise analiz yaptırmak mantıklıdır:

• Ziyaret var ama sipariş, form ya da kayıt sayısı buna göre düşük kalıyor.
• Reklam bütçesi artıyor, sonuç aynı oranda artmıyor.
• GA4 huni raporunda belirli bir adımda belirgin bir kayıp görünüyor.
• Müşterilerden sürekli aynı sorular geliyor: kargo ücreti, siparişin durumu, iade koşulları.
• Sitenin yeniden tasarlanması ya da bir mobil uygulama yapılması gündemde. Neyin çalıştığını bilmeden yenilemek, iyi işleyen kısmı da bozabilir.

Bir UX analizi genellikle dört parçadan oluşur: mevcut ölçüm verisinin incelenmesi, ekranların kullanılabilirlik ilkelerine göre uzman gözüyle değerlendirilmesi, birkaç gerçek kullanıcıyla yapılan görev testleri ve bulguların etkisine göre sıralandığı bir liste. Verinin güvenilir olması için ölçüm kurulumunun önce doğrulanması gerekir; bu konuyu GTM entegrasyonu ve ölçüm sayfamızda anlatıyoruz.

Nereden başlamalı

Yukarıdaki altı kontrolü bu hafta yapın ve gördüklerinizi iki sütuna yazın: işi bitirmeyi zorlaştıranlar (UX) ile görünüm ve tutarlılık sorunları (UI). Liste çoğunlukla UI tarafında toplanıyorsa bir arayüz yenilemesi işinizi görür. UX sütunu doluysa önce akışı düzeltmek gerekir; yeni renkler eksik bir adımı tamamlamaz.

Ardından GA4'te en önemli işleminizin adımlarını bir huni olarak açın ve en büyük kaybın hangi adımda olduğuna bakın. Bu iki bilgi, kime ne için başvuracağınızı netleştirir. UI/UX tasarım ve analiz hizmetimizin kapsamını inceleyebilir, listenizi birlikte değerlendirmek isterseniz iletişim sayfamızdan bize ulaşabilirsiniz.