Kullanıcı Arayüzü (UI) nedir?

Arayüz ne işe yarar?

Bir arabanın direksiyonu, pedalları ve göstergeleri onun arayüzüdür. Motorun nasıl çalıştığını bilmeseniz de sürebilirsiniz, çünkü kontroller anlaşılır yerdedir. Web sitesinde de durum aynıdır: arka planda veritabanları ve sunucular çalışır, ziyaretçi ise yalnızca ekrandaki düğmeleri, alanları ve yazıları görür. UI tasarımı bu görünen katmanı düzenler.

Bir arayüz tasarımcısı şu sorulara cevap arar: Ana buton hangi renkte olmalı? Başlıklar hangi boyutta? Form hatası nasıl gösterilmeli? Bir öğeye tıklanabileceği nasıl anlaşılır?

İyi bir arayüzün yapı taşları

Görsel hiyerarşi

Göz önce en önemli şeyi görmelidir. Boyut, renk kontrastı ve konum farkıyla "önce bunu oku, sonra şuna tıkla" sırası kurulur.

Tutarlılık

Bir sayfada yeşil olan "Gönder" butonu, başka sayfada gri ve farklı biçimde olmamalıdır. Tutarlı bileşenler, kullanıcının öğrendiğini tekrar öğrenmesini engeller. Bu yüzden profesyonel projelerde renkler, yazı boyutları ve buton türleri bir bileşen kütüphanesinde tanımlanır.

Geri bildirim

Butona basıldığında bir şey olduğunu belli etmek gerekir: renk değişimi, yükleniyor simgesi ya da "Mesajınız alındı" yazısı. Sessiz kalan bir arayüz, kullanıcının butona üç kez basmasına yol açar.

Okunabilirlik

Yeterli yazı boyutu, arka planla güçlü kontrast ve satırlar arası nefes payı. Gri zemin üzerine açık gri yazı şık görünebilir ama okunmaz. Özellikle güneş altında telefondan bakan bir kullanıcı için düşük kontrast, metnin hiç görünmemesi demektir. Okunabilirlik aynı zamanda web erişilebilirliği kurallarının da temelidir.

Durumlar

Bir buton tek bir görüntüden ibaret değildir: normal, üzerine gelinmiş, basılı, pasif ve yükleniyor halleri ayrı ayrı tasarlanır. Bu durumların unutulması, geliştirme aşamasında herkesin kendi bildiği gibi doğaçlama yapmasına yol açar.

İşletmeniz için örnek: Bir diş kliniğinin randevu formu

Zayıf arayüzde form; aynı boyutta on iki alan, küçük bir "Gönder" bağlantısı ve hatalı doldurulduğunda yalnızca sayfanın yenilenmesinden oluşur. Güçlü arayüzde ise:

1. Yalnızca gerekli üç dört alan vardır: ad, telefon, tercih edilen gün.
2. Alan etiketleri kutunun içinde kaybolmaz, üstünde kalıcı olarak durur.
3. Telefon alanına dokunulduğunda telefonda rakam klavyesi açılır.
4. Büyük, kontrastlı bir "Randevu İste" butonu bulunur.
5. Hata olursa ilgili alanın altında ne yanlış olduğu açıkça yazar.

Sık yapılan hatalar

• Her şeyi vurgulamak: Beş farklı renkte buton, hiçbirinin öne çıkmaması demektir.
• Moda uğruna simgeyi açıklamasız bırakmak; herkes her ikonu tanımaz.
• Tıklanabilen ve tıklanamayan öğeleri aynı görünümde sunmak.
• Marka renklerini kontrastı düşünmeden metin rengi olarak kullanmak.

UI ile UX farkı

İki terim sık karıştırılır. UI, ürünün nasıl göründüğü ve elle tutulur kontrollerle ilgilidir. Kullanıcı deneyimi (UX) ise kullanıcının hedefine ne kadar kolay ve memnun ulaştığıyla, yani sürecin bütünüyle ilgilidir. Göz alıcı bir arayüz, yanlış kurgulanmış bir alışveriş akışını kurtaramaz; iyi kurgulanmış bir akış da özensiz bir arayüzle zayıflar. Bu yüzden ikisi çoğu projede birlikte ele alınır ve tasarım süreci genellikle wireframe aşamasıyla başlar.