UI UX Nedir? Farkları ve Küçük İşletme Sitelerinden Örnekler

UI ve UX, bir web sitesinin ya da uygulamanın iki farklı tasarım katmanıdır. UI (User Interface, kullanıcı arayüzü) ekranda gördüğünüz her şeydir: butonlar, renkler, yazı tipleri, ikonlar ve boşluklar. UX (User Experience, kullanıcı deneyimi) ise ziyaretçinin siteye girdiği andan işini bitirdiği ana kadar yaşadığı sürecin tamamıdır: aradığını bulabildi mi, ne kadar uğraştı, sonunda ne hissetti?

Kısacası UI "nasıl görünüyor?", UX "ne kadar kolay ve işe yarar?" sorusunu cevaplar. Bu yazıda farkı bir tabloyla özetliyor, ardından küçük işletme sitelerinden somut örneklerle UX'in nerede para kazandırıp nerede kaybettirdiğini gösteriyoruz.

UX kavramı nereden çıktı?

"User experience" ifadesini yaygınlaştıran kişi, 1993'te Apple'da çalışırken kendi unvanında bu ifadeyi kullanan bilişsel bilimci Don Norman'dır. Norman'ın kurucu ortağı olduğu Nielsen Norman Group, UX'i şirketle, hizmetleriyle ve ürünleriyle son kullanıcının etkileşiminin tüm yönleri olarak tanımlar. Yani UX sadece ekranla sınırlı değildir: formu gönderdikten sonra gelen e-posta, telefonu açan kişinin tavrı ve faturanın anlaşılırlığı da deneyimin parçasıdır. Bu yazıda web sitesi tarafına odaklanıyoruz.

UI ve UX farkı: karşılaştırma tablosu

Bir benzetme: bir restoranda UI masaların, tabakların ve menü kartının tasarımıdır. UX ise kapıdan girdiğiniz andan hesabı ödeyip çıktığınız ana kadar geçen her şeydir. Çok şık bir menü kartı (iyi UI), garsonun 20 dakika gelmemesini (kötü UX) kurtarmaz.

İkisi birbirinden bağımsız değildir. Okunmayan küçük gri bir yazı (UI hatası) doğrudan kötü bir deneyim (UX sorunu) yaratır. Bu yüzden iyi projelerde ikisi birlikte ele alınır. Web tasarımın tüm katmanlarını web tasarım nedir yazısında anlattık.

UI/UX tasarım süreci nasıl işler?

Bir web sitesi projesinde UI ve UX çalışması genellikle şu sırayla ilerler:

1. Araştırma: Ziyaretçi kim, siteye neden geliyor, hangi soruya cevap arıyor? Müşteri görüşmeleri, rakip siteler ve varsa mevcut sitenin verileri incelenir.
2. Kullanıcı akışı: Ziyaretçinin hedefe ulaşmak için izleyeceği yol çizilir. Örneğin "Google'dan geldi, hizmeti okudu, fiyatı gördü, WhatsApp'tan yazdı."
3. Taslak (wireframe): Renk ve görsel olmadan, sadece kutular ve metinlerle sayfa yerleşimi hazırlanır. Bu aşamada değişiklik yapmak ucuzdur.
4. Görsel tasarım (UI): Onaylanan taslağın üzerine renk, yazı tipi, fotoğraf ve ikonlar yerleşir.
5. Prototip ve test: Tıklanabilir bir ön sürüm birkaç kişiye denettirilir, takılınan yerler düzeltilir.
6. Yayın sonrası ölçüm: Gerçek ziyaretçi verisiyle iyileştirme sürer.

İlk üç adım UX, dördüncü adım UI ağırlıklıdır; son iki adımda ikisi birlikte değerlendirilir.

Küçük işletme sitelerinde somut UX örnekleri

Büyük şirketler UX için ekip kurar. Küçük bir işletmenin sitesinde ise birkaç doğru karar çoğu zaman yeterlidir. En sık karşılaştığımız dört alan:

1. İletişim ve teklif formları

Form, ziyaretçinin müşteriye dönüştüğü yerdir; en çok kayıp da burada yaşanır.

Formda gerçekten ihtiyacınız olmayan her alan, bir grup ziyaretçinin vazgeçmesine yol açar. "Firmanız" alanını gerçekten kullanıyor musunuz? Kullanmıyorsanız kaldırın. KVKK açısından da az veri toplamak daha güvenlidir.

2. Mobil menü

Telefonda menü, ziyaretçinin sitedeki pusulasıdır.

• Menü simgesi (üç çizgi) ekranın üst köşesinde, kolay bulunacak yerde olmalı.
• Açılan menüde öğeler parmakla rahat basılabilecek aralıkta durmalı. W3C'nin WCAG 2.2 rehberi dokunma hedefleri için en az 24x24 CSS pikseli şart koşuyor, 44x44 pikseli daha iyi seviye olarak öneriyor.
• Menünün kapatma butonu görünür olmalı.
• Menüde 6-7'den fazla ana öğe olmamalı; gerisi alt menüye ya da sayfa altına taşınmalı.
• Telefon ve WhatsApp, menünün içine gizlenmek yerine ekranın altında sabit bir çubukta durabilir.

3. Harekete geçirici butonlar (CTA)

"Bize ulaşın" ya da "Rezervasyon yap" gibi butonlar, sayfanın asıl amacıdır.

• Her sayfada tek bir ana eylem olsun. Beş farklı buton yan yana durunca hiçbiri öne çıkmaz.
• Buton metni ne olacağını söylesin: "Gönder" yerine "Ücretsiz teklif iste", "Tıklayın" yerine "Müsaitlik sorgula".
• Ana butonun rengi sayfada başka hiçbir yerde kullanılmasın; böylece göz onu hemen bulur.
• Telefon numarası tel: bağlantısı olsun; dokununca arama başlasın.
• Butonun etrafında yeterli boşluk olsun, yanlışlıkla başka bir öğeye basılmasın.

4. Hız

Ziyaretçi için yavaş bir sayfa, kötü tasarlanmış bir sayfadan farksızdır. Google sayfa deneyimini Core Web Vitals ölçümleriyle değerlendiriyor: ana içeriğin 2,5 saniyede görünmesi, dokunuşa 200 milisaniyede tepki ve yüklenirken düzenin kaymaması. Yükleme sırasında kayan bir buton yüzünden yanlış yere basmak, en can sıkıcı deneyimlerden biridir. Hızı nasıl ölçüp iyileştireceğinizi Core Web Vitals ve site hızı yazısında anlattık.

Sektörden kısa örnekler

• Otel: Ziyaretçi tarih seçip fiyatı görmek ister. Fiyatı görmek için önce e-posta isteyen bir form, en kötü UX'tir. Ana sayfada tarih seçici ve "Müsaitlik" butonu ilk ekranda olmalı. Örnek akışları otel web sitesi örneklerimizde görebilirsiniz.
• Diş kliniği: Hasta tedavi fiyatından önce güven arar. Hekim fotoğrafı, gerçek klinik görselleri ve "WhatsApp'tan sorun" butonu, uzun bir hakkımızda metninden daha çok işe yarar.
• Emlak: İlan listesinde filtreler telefonda tek elle kullanılabilmeli; her filtre değişiminde sayfa en üste atmamalı.
• Restoran: Menüyü PDF olarak açtırmak telefonda kötü bir deneyimdir. Menü normal bir sayfa olmalı, yakınlaştırma gerektirmemeli.

Erişilebilirlik: UX'in unutulan yarısı

Erişilebilirlik, sitenin görme, işitme veya hareket kısıtı olan kişiler tarafından da kullanılabilmesidir. Çoğu zaman "özel bir ihtiyaç" gibi görülür ama aslında herkesin deneyimini iyileştirir: güneş altında telefona bakan biri de yüksek kontrasttan, tek eliyle telefon kullanan biri de büyük butondan faydalanır. W3C'nin WCAG 2.2 rehberinden küçük bir işletme sitesinin kolayca uygulayabileceği maddeler:

• Normal metin için en az 4,5:1 kontrast oranı.
• Her görselde içeriği anlatan bir alternatif metin (alt etiketi).
• Form alanlarında, alanın içine yazılıp kaybolan ipucu yerine görünür bir etiket.
• Sitenin yalnızca klavyeyle (Tab tuşuyla) gezilebilmesi ve odaklanılan öğenin görünmesi.
• Bilginin sadece renkle verilmemesi: hatalı alanı yalnızca kırmızı çerçeveyle değil, bir metinle de belirtmek.

UI tarafında tutarlılık: küçük bir tasarım sistemi

Büyük şirketlerin "tasarım sistemi" dediği şeyin küçük bir sürümü, tek sayfalık bir stil rehberidir: bir ana renk, bir vurgu rengi, iki yazı tipi, üç başlık boyutu, tek bir buton stili ve sabit boşluk ölçüleri. Bu rehber, sitenize sonradan eklenen her sayfanın aynı aileden görünmesini sağlar. Kurallar yazılı olmadığında, iki yıl sonra her sayfanın farklı renkte bir butonu olur ve ziyaretçi neyin tıklanabilir olduğunu anlamakta zorlanır.

UX ile SEO arasındaki ilişki

Google, sıralamada kullanıcıya fayda sağlayan sayfaları öne çıkarmayı hedeflediğini açıkça söylüyor ve sayfa deneyimini Core Web Vitals, mobil uyumluluk ve HTTPS gibi sinyallerle değerlendiriyor. İyi UX tek başına ilk sırayı garanti etmez, ama kötü UX aramadan gelen ziyaretçinin boşa gitmesine yol açar: sıralamada yükselseniz bile ziyaretçi aradığını bulamayıp geri dönüyorsa, kazandığınız trafik işe dönüşmez. Bu yüzden SEO ve UX'i aynı çalışmanın iki yüzü olarak görmek daha doğrudur.

UX nasıl iyileştirilir? Küçük bütçeli yöntemler

1. Beş kişilik test: Çevrenizden beş kişiye telefonunuzu verin ve "Bu siteden fiyat teklifi isteyin" deyin. Konuşmadan izleyin. Takıldıkları her yer bir UX sorunudur.
2. Search Console ve analiz verisi: Hangi sayfalarda ziyaretçinin hemen çıktığını, hangi aramalarla geldiğini görün.
3. Form verisini sayın: Ayda kaç form geliyor, kaç telefon? Bir değişiklikten önce ve sonra karşılaştırın.
4. Müşterilerinize sorun: "Bizi nasıl buldunuz, sitede neyi aradınız?" Bu iki soru çok şey anlatır.
5. Bir seferde bir değişiklik: Formu kısaltın, iki hafta bekleyin, sonucu görün. Hepsini aynı anda değiştirirseniz neyin işe yaradığını bilemezsiniz.

Hızlı UX kontrol listesi

• [ ] Telefonda ana sayfanın ilk ekranında ne iş yaptığınız anlaşılıyor mu?
• [ ] Telefon numarasına dokununca arama başlıyor mu?
• [ ] Menü telefonda kolay açılıp kapanıyor mu?
• [ ] Butonlar en az 44 piksel yükseklikte mi?
• [ ] İletişim formu 3-5 alanla sınırlı mı?
• [ ] Hata mesajları ilgili alanın altında ve anlaşılır mı?
• [ ] Gönderim sonrası ne olacağı yazıyor mu?
• [ ] Sayfa yüklenirken butonlar yer değiştirmiyor mu?
• [ ] Metin ile zemin arasında yeterli kontrast var mı?
• [ ] Her sayfada tek ve belirgin bir ana eylem var mı?

UI/UX çalışması kime düşer?

Sitenizi yaptıran firmaya şu soruları sorun: Mobil tasarımı ayrıca gösterecek misiniz? Taslak aşamasında sayfa akışını onaylayabilecek miyim? Yayından önce gerçek bir telefonda test edecek misiniz? Bu soruların cevabı "evet" değilse, UX büyük ihtimalle şansa kalıyor demektir.

Grapyweb'de kurumsal web sitesi projelerinde taslakları masaüstü ve mobil için ayrı hazırlıyor, yayından önce gerçek cihazlarda test ediyoruz. Mevcut sitenizde nerede ziyaretçi kaybettiğinizi konuşmak isterseniz teklif sihirbazı üzerinden kısaca projenizi anlatabilirsiniz.