UI (kullanıcı arayüzü) nedir?

UI ne demek

UI, İngilizce user interface ifadesinin kısaltmasıdır. Türkçede kullanıcı arayüzü ya da kısaca arayüz denir. Wikipedia arayüzü, insanla makine arasındaki etkileşimin gerçekleştiği alan diye tanımlar.

Bu alan her zaman bir ekran değildir. Interaction Design Foundation üç tür sayar: grafik arayüzler, sesle kullanılan arayüzler ve vücut hareketiyle kullanılan arayüzler. Siri ya da Alexa ile konuşmak da bir arayüz kullanmaktır.

Ekranlı arayüzün kökü epey eskiye uzanır. Wikipedia'daki zaman çizelgesine göre Xerox PARC araştırmacıları, 1970'te WIMP düzenini geliştirdi. Adı pencere, ikon, menü ve imlecin İngilizce baş harflerinden gelir.

Ben de grafik arayüzlerle çalışıyorum: web siteleri, mobil uygulamalar, yönetim panelleri. Bu yüzden bu sayfadaki örnek de bir ekran.

Bir ekranın parçaları

1. Gezinme

Nerede olduğunuzu ve nereye gidebileceğinizi gösterir. Seçili sekme kalın yazılır, böylece kullanıcı yerini kaybetmez.

2. Form alanı

Kullanıcıdan bilgi alır. Etiket alanın üstünde durur, yazmaya başlayınca kaybolmaz. Altındaki kısa ipucu, numaranın faturada nerede yazdığını söyler.

3. Buton

Bir eylemi başlatır. Üstündeki yazı, basınca ne olacağını söyler. "Devam" yerine tutarı ve eylemi yazmak, kullanıcının son kontrolünü kolaylaştırır.

4. Durum mesajı

Sistemin ne yaptığını bildirir. Kullanıcı, ödemenin alınıp alınmadığını ya da dekontun nereye gittiğini tahmin etmek zorunda kalmaz.

Neden önemli

Kullanıcı ürünü arayüz üzerinden tanır. Arka plandaki sistem ne kadar iyi çalışırsa çalışsın, buton bulunamıyorsa ya da mesaj anlaşılmıyorsa kullanıcının işi yarım kalır.

Jakob Nielsen'in 10 kullanılabilirlik ilkesinden ilki bunu söyler: tasarım, olup biteni kullanıcıya makul bir süre içinde ve uygun bir geri bildirimle haber vermelidir. Yukarıdaki dördüncü parça, bu ilkenin ekrandaki karşılığı. İlkelerin tamamını Nielsen'in 10 ilkesi sayfasında örnekleriyle anlattım.

Hata mesajları da arayüzün parçasıdır. Nielsen'in dokuzuncu ilkesine göre hata mesajı sade dille yazılır, hata kodu içermez ve çözüm önerir. "Hata 500" ile "Abone numarası 8 haneli olmalı" arasındaki fark, kullanıcının ikinci denemede başarıp başaramayacağını belirler.

Durum mesajları erişilebilirlik açısından da önemlidir. WCAG 2.2'deki 4.1.3 başarı ölçütü (AA düzeyi), bu mesajların odak taşınmadan ekran okuyucu gibi yardımcı teknolojilere iletilebilmesini ister.

Kontrolü basit: ekranda görünen "Ödemeniz alındı" yazısı ekran okuyucuda da duyuluyor mu? UX Audit bu tür WCAG 2.2 temel kontrollerini de içerir.

UX ile farkı

UI, kullanıcının dokunduğu yüzeydir. UX (kullanıcı deneyimi) ise kullanıcının şirketle, onun hizmetleri ve ürünleriyle yaşadığı her şeyi kapsar. Don Norman ve Jakob Nielsen bunu bir film sitesiyle anlatır: arama ekranı çok iyi olsa bile aradığınız film veritabanında yoksa deneyim kötüdür. İkisinin farkını UI/UX nedir rehberinde ayrıntılı anlattım.

İlgili terimler

Arayüz genelde kaba bir taslakla başlar. Buna wireframe denir. Taslak tıklanabilir hale gelince prototip olur.

Arayüzün ne kadar kolay kullanıldığını kullanılabilirlik ölçer. Kullanıcının bir ekrandan beklediği davranışı ise zihinsel model açıklar.