Kullanıcı Arayüzü (UI) Nedir? UI ve UX Farkı

Kullanıcı arayüzü (UI, user interface), web sitenizde ya da uygulamanızda kullanıcının gördüğü ve dokunduğu her şeydir: butonlar, menüler, form alanları, renkler, yazı tipleri, ikonlar ve bunların sayfadaki yerleşimi. UI ile UX arasındaki fark kısaca şudur: UX, kullanıcının baştan sona yaşadığı deneyimin tamamıdır. UI ise bu deneyimin ekrandaki görünen yüzüdür. İyi bir arayüz, kullanıcıya neye bakacağını ve ne yapacağını söylemeden gösterir.

Kullanıcı arayüzü nedir?

Arayüz, insan ile dijital ürün arasındaki temas yüzeyidir. Bir web sitesinde bu yüzey şunlardan oluşur:

• Etkileşim öğeleri: Butonlar, bağlantılar, menüler, sekmeler, açılır listeler, form alanları.
• Görsel öğeler: Renk paleti, yazı tipleri, ikonlar, fotoğraf ve illüstrasyonlar.
• Yerleşim: Öğelerin ızgara (grid) üzerindeki konumu, aralarındaki boşluklar, hizalama.
• Durumlar ve geri bildirim: Butonun üzerine gelindiğinde, tıklandığında ya da devre dışıyken nasıl göründüğü; hata ve başarı mesajları.

Ancak son madde sık unutulur. Bu yüzden bir buton yalnız durduğu haliyle değil, her durumuyla tasarlanmalıdır. Kullanıcı bir şeye tıkladığında bir şey olduğunu görmelidir.

UI ve UX farkı

Kullanıcı deneyimi (UX) yazımızda bir mağaza benzetmesi yapmıştık: Reyon düzeni, tabelalar ve kasadaki bekleme süresi deneyimi (UX) belirler. Vitrin, raflar, tabelaların yazı tipi ve renkleri ise arayüzdür (UI).

İkisi ayrı uzmanlıklar olarak konuşulsa da pratikte iç içedir. Çünkü okunamayan bir arayüz mükemmel bir akışı bozar. Öte yandan kusursuz bir arayüz de yanlış kurgulanmış bir akışı kurtaramaz.

İyi bir arayüzün temel ilkeleri

Görsel hiyerarşi

Kullanıcı bir sayfaya baktığında gözü önce en önemli öğeye gitmelidir. Bunu boyut, renk, kalınlık ve konum belirler. Bu yüzden bir sayfada her şey kalın ve renkliyse, hiçbir şey öne çıkmaz. Pratik bir kural: Her ekranda tek bir ana eylem (birincil buton) olsun. Diğerleri ise daha sade görünsün.

Tutarlılık

Aynı işlevi gören öğeler her yerde aynı görünmeli ve aynı yerde durmalı. Jakob Nielsen'in kullanılabilirlik ilkelerinden biri de "tutarlılık ve standartlar"dır. Yani kullanıcı, farklı kelimelerin, durumların ya da eylemlerin aynı şeyi ifade edip etmediğini düşünmek zorunda kalmamalıdır. Bu yüzden arayüz öğelerini tek tek değil, bir bileşen sistemi (buton, kart, form alanı vb.) olarak tasarlamak işe yarar.

Okunabilirlik ve kontrast

Metin, zemininden net ayrılmalıdır. W3C'nin WCAG yönergeleri burada ölçülebilir bir eşik verir. Normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı gerekir. Örneğin açık gri zemin üzerine açık gri yazı şık görünebilir. Ama dışarıda, güneş altında bu yazıyı telefondan okuyamazsınız.

Dokunma alanları

Mobilde parmak, fare imleci kadar hassas değildir. Bu nedenle WCAG 2.2 (Ekim 2023) dokunma ve tıklama hedefleri için bir alt sınır koyar. AA düzeyindeki kriter, (bazı istisnalarla) en az 24×24 CSS piksel büyüklüğüdür. Birbirine çok yakın küçük bağlantılar, yanlış dokunuşlara ve hayal kırıklığına yol açar.

Boşluk (whitespace)

Boşluk, kullanılmamış alan değil, bir tasarım öğesidir. Öğeler arasında yeterli boşluk bırakmak, ilgili öğeleri gruplar ve sayfanın taranmasını kolaylaştırır.

Geri bildirim

Her eylemin görünür bir sonucu olmalı. Örneğin buton tıklanınca durum değiştirmeli, form gönderilince onay mesajı çıkmalı. Hata olduğunda da ekran neyin yanlış olduğunu ve nasıl düzeltileceğini söylemeli.

İşinize etkisi: arayüz, markanızın ekrandaki yüzüdür

Arayüz, kurumsal kimliğinizin dijitaldeki uygulamasıdır. Renk paletiniz, yazı tipleriniz ve görsel diliniz arayüzde vücut bulur. Burada iki risk vardır:

1. Kimlikten kopuk arayüz: Hazır bir temanın renkleriyle bırakılmış bir site, basılı malzemelerinizle bağ kurmaz.
2. Kimliği ekrana zorlayan arayüz: Basılı işte güzel duran bir renk ya da ince bir yazı tipi ekranda okunmayabilir. Bu yüzden iyi bir UI tasarımcısı, kimliği bozmadan ekran için uyarlamalar yapar. Örneğin metin için kimlik renginin daha koyu bir tonunu kullanır.

İşletme açısından iyi bir arayüz şunları sağlar:

• Güven: Düzenli, tutarlı bir arayüz profesyonellik algısı yaratır.
• Hız: Kullanıcı neye tıklayacağını düşünmeden bulur.
• Daha az hata: Net etiketler ve geri bildirimler, yanlış doldurulan formları azaltır.
• Kolay büyüme: Bileşen sistemiyle tasarlanmış bir arayüze yeni sayfa eklemek, her seferinde sıfırdan tasarım yapmaktan daha hızlıdır.

Sık yapılan UI hataları

• Her şeyi vurgulamak: Birden fazla parlak buton, her yerde kalın yazı; sonuçta hiçbir şey öne çıkmaz.
• Yalnız renkle bilgi vermek: "Kırmızı alanlar zorunludur" gibi ifadeler renk algısı farklı kullanıcılara yetmez. Bu yüzden renk yanında simge ya da metin kullanın.
• Çok sayıda yazı tipi: İki yazı ailesi çoğu site için yeterlidir; fazlası hem dağınık görünür hem sayfayı yavaşlatabilir.
• Bağlantı ile düz metni ayırt edilemez yapmak: Kullanıcı neyin tıklanabilir olduğunu anlamalıdır.
• Yalnız masaüstü ekranında tasarlamak: Arayüzü mobilde ayrıca kontrol edin. Çünkü menü, tablo ve formlar küçük ekranda farklı davranır.
• Durumları tasarlamamak: Boş liste, yükleniyor, hata ve başarı durumları unutulduğunda kullanıcı ne olduğunu anlamaz.

Bizim deneyimimiz

Grafik tasarım ve illüstrasyon geçmişimiz nedeniyle arayüz tasarımına kimlikten başlıyoruz. Markanın renklerini, yazı tiplerini ve görsel dilini ekran için uyarlıyoruz. Ayrıca kontrast ve okunabilirlik kontrollerini tasarım aşamasında yapıyoruz. Arayüzü sayfa sayfa değil, buton, kart ve form gibi tekrar kullanılabilen bileşenler olarak tasarlıyoruz. Böylece site ya da uygulama ileride daha kolay büyüyor. Her tasarımı masaüstünün yanı sıra farklı telefon boyutlarında da kontrol ediyoruz.

Sık sorulan sorular

Sonuç

Kullanıcı arayüzü, sitenizin ya da uygulamanızın görünen ve dokunulan yüzüdür. UX deneyimin bütününü kurgular. UI ise bu kurguyu net bir hiyerarşi, tutarlı bileşenler, okunaklı metinler ve anlaşılır geri bildirimlerle ekrana taşır. İkisi birlikte düşünüldüğünde ortaya hem güzel hem işe yarayan bir ürün çıkar. Yeni bir site planlıyorsanız kurumsal web sitesi yaptırmadan önce dikkat edilecekler rehberimize de göz atabilirsiniz.

Web siteniz ya da uygulamanız için arayüz tasarımını konuşmak isterseniz web tasarım ve mobil uygulama geliştirme hizmetlerimizi inceleyebilir ya da bize yazabilirsiniz.