Kısa cevap
UI, bir kişinin dijital ürünle etkileşim kurduğu ekran, kontrol ve görsel geri bildirimlerin oluşturduğu arayüzdür.
Nerede işine yarar?
Hiyerarşi, bileşenler, durumlar ve etkileşim hedefleri birlikte tasarlanır. Düğmenin yalnız ilk görünümü değil; odak, yükleme, hata ve devre dışı durumları da düşünülür. Arayüz, içerikle birlikte kullanıcının ne yapabileceğini görünür kılar.
Tanımdan uygulamaya, kendi denemene.
Bir cümlede uygulaması
Bir formda alan etiketini, yardım metnini, hata durumunu ve gönderme düğmesini aynı sistem içinde tasarlamak.
Neyle karıştırılmamalı?
UI görsel ve etkileşim yüzeyidir; bütün kullanıcı deneyimini tek başına temsil etmez.
Arayüz, sistemin konuşan yüzü
Bir randevu ekranı düşün: tarih seçiliyor, uygun saatler listeleniyor ve kişi seçimini onaylıyor. UI tasarımı bu bilgilerin nasıl gruplanacağını, hangi kontrolün kullanılacağını, seçili durumun nasıl görüneceğini ve hata halinde ne söyleneceğini belirler. Güzel görünen bir takvim, uygun olmayan günleri ayırt ettirmiyorsa arayüzün temel görevi eksik kalır. Görsel karakter ile işlem açıklığı aynı kompozisyonda çözülmelidir.
İlk bakışta yalnız normal durum görünür. Gerçekte takvim yüklenir, bazı saatler dolar, seçim değişir ve bağlantı hatası yaşanabilir. Bu durumların her biri tasarımın parçasıdır. Bir alan pasifse bunun nedeni anlaşılmalı, hata yalnız kırmızı renkle anlatılmamalı ve kişinin seçimi mümkün olduğunca korunmalıdır. UI dosyası, ideal ekran görüntülerinin yanında bu davranışların da anlaşılır bir tarifini taşımalıdır.
Marka dili arayüzde renk kadar kelimelerle de görünür. 'Gönder' yerine işlemi anlatan bir eylem adı, kullanıcıya ne olacağını söyler. Fakat her düğmeye karakter göstermek için uzun veya kapalı ifadeler koymak yön bulmayı zorlaştırabilir. Androverse dilinde anlatı alanı ile işlem alanını ayırırız: fikir sıra dışı olabilir, bir seçimi onaylama davranışı ise açık kalmalıdır. Kullanıcı arayüzün niyetini çözmek zorunda bırakılmaz.
Arayüzdeki yoğunluğu değerlendirirken yalnız boş alan miktarına bakma. Bilgilerin ilişkisinin anlaşılması, bir ekranda ne kadar içerik bulunabileceğini etkiler. Aynı göreve ait parçalar birlikte durduğunda kişi onları daha rahat takip edebilir; birbirinden kopuk etiket ve açıklamalar ise az içerikle bile karmaşa yaratabilir. Bir formu sakin göstermek için gerekli yardım metnini saklamak yerine, ana bilgi ile destek bilgisinin ağırlığını ayır. Tipografi ve boşluk, içerik kararını görünür kılan araçlardır. Sadece daha fazla beyaz veya koyu boşluk eklemek, anlamı düzenleme işinin yerine geçmez.
Bileşenler arasında geçiş yaparken görsel davranışın tutarlılığını da incele. Bir filtre seçildiğinde kullanılan işaret ile başka sayfadaki seçili durum tamamen farklıysa kullanıcı yeniden öğrenmek zorunda kalabilir. Tutarlılık için bütün kontrolleri aynı biçimde çizmek gerekmez; aynı tür durumların benzer bir mantıkla ifade edilmesi gerekir. Tasarım dosyasında bu ilişkileri yan yana göstermek geliştiriciyle konuşmayı kolaylaştırır. Böylece arayüz, ayrı ayrı güzel görünen ekranlar toplamından çıkıp aynı dilin farklı cümlelerine dönüşür. Yeni sayfa da bu dilden devam edebilir.
Bir yüzey ile çalışan bir arayüz
Yalnız görünüm
Bileşenler dengeli yerleşmiş, renkler uyumlu ve görüntü sunumda etkileyici olabilir. Fakat bir alanın adı belirsizse, seçimin kaydedildiği anlaşılmıyorsa veya kontrol yalnız fareyle kullanılabiliyorsa görsel kompozisyon yeterli değildir. UI değerlendirmesi tek bir hareketsiz karede bitmez; insanların o kareyle nasıl etkileştiğine de bakar.
İşlevle birlikte ifade
Çalışan arayüz, doğru bilgiyi doğru anda sunar ve eyleme anlaşılır cevap verir. Odak, geri bildirim, hata ve boş durumlar aynı görsel dile bağlıdır. Renkler ve tipografi bu davranışları görünür kılar. Böylece marka karakteri yalnız süs olarak kalmaz; kişinin sistemle kurduğu ilişkinin bir parçası olur.
Arayüzü durumlarıyla tasarlamak
Bir arayüz yalnız boş olmayan, sorunsuz bir ekranın görseli değildir. Yüklenme, boş sonuç, doğrulama hatası ve başarı durumları da tasarlanmalıdır. Bileşenlerin davranışı bu durumlarda tutarlıysa kullanıcı yeni bir ekrana geçtiğinde yeniden öğrenmek zorunda kalmaz.
- Yazı hiyerarşisini ve kontrol boyutlarını ortaklaştır.
- Hover, odak, devre dışı ve hata durumlarını göster.
- Gerçek içerik ve farklı ekran genişlikleriyle kontrol et.
UI ile UX arasındaki fark nedir?
UI, kullanıcının etkileştiği arayüzün görsel ve davranışsal düzenidir. UX daha geniş deneyimi ele alır. İyi görünen bir arayüz belirsiz bir akışı tek başına düzeltemez; iyi planlanmış bir akış da anlaşılır bir arayüze ihtiyaç duyar.
İşin içinde sorulacaklar.
UI tasarımında önce renk mi seçilir?
Renk sistemi erken düşünülebilir, fakat içerik ve görev netleşmeden bütün kararı renge bağlamak doğru değildir. Önce ekranın amacı, bilgi sırası ve kullanılacak kontroller belirlenir. Ardından tipografi, boşluk, renk ve yüzeyler bu yapıyı ifade eder. Mevcut bir marka kimliği varsa kararlar onun sınırları içinde geliştirilir. Tasarım ilerlerken biçim ve işlev birbirini etkiler; süreç her zaman düz bir sıra izlemez.
Her sayfa aynı kart düzenini mi kullanmalı?
Ortak bileşenler tutarlılığı destekler, ancak her içerik aynı yapıya ihtiyaç duymaz. Bir hizmet kapsamı, uzun bir yazı ve sözlük tanımı farklı okuma davranışları doğurur. Paylaşılan düğme, başlık ve aralık sistemi korunurken sayfanın kompozisyonu amacına göre değişebilir. Aynı kartı her yere çoğaltmak tasarım sistemi kurmak değildir. Ortak kuralların hangi durumda nasıl esneyeceğini tarif etmek gerekir.
Tasarımın geliştirmeye hazır olduğunu ne gösterir?
Normal ekranın yanında gerekli durumlar, responsive davranış, içerik sınırları ve etkileşim açıklamaları bulunmalıdır. Geliştiricinin her boşlukta tahmin yapması gerekiyorsa teslim eksiktir. Bileşen adları ile kullanım koşulları tutarlı olmalı, görsel varlıklar doğru biçimde hazırlanmalıdır. Hazır olma kararı bütün ayrıntının sonsuza kadar kapanması demek değildir; temel davranışın uygulanabilir ve tartışılabilir kadar açık olmasıdır.
Bir bileşeni bütün halleriyle düşün
Kendi ürünündeki bir form alanını veya seçim kontrolünü al. Onu yalnız normal haliyle değil, gerçek kullanım sırasında geçeceği durumlarla incele. Amaç yeni bir tasarım dili icat etmek değil, mevcut dilin davranışını tamamlamak.
UI, kullanıcı ile sistem arasındaki görünür sözleşmedir. Yüzeyin güzel olması bu sözleşmeyi güçlendirebilir; fakat açıklık, erişilebilir durumlar ve tutarlı davranış olmadan tek başına yeterli olmaz.
Bağlantılı kavramlar
- UXUX, bir kişinin bir ürün, hizmet veya kurumla etkileşim kurarken yaşadığı deneyimin bütününü ele alan alandır.
- Tasarım sistemiTasarım sistemi, bir ürün ailesinin tutarlı geliştirilmesini sağlayan ilkeler, bileşenler, tasarım kararları ve kullanım rehberlerinin bütünüdür.
- Görsel hiyerarşiGörsel hiyerarşi, içerikte neyin önce ve neyin sonra fark edilmesi gerektiğini ölçek, renk, boşluk ve konumla düzenlemektir.