Kullanıcı arayüzü (UI), bir web sitesinde ziyaretçinin gördüğü ve dokunduğu tüm görsel öğelerin bütünüdür: butonlar, menüler, formlar, renkler, yazı tipleri ve boşluklar. UI, kullanıcı deneyiminin ekrana yansıyan yüzeyidir.
Kullanıcı arayüzü, sitenin görünen katmanıdır. Bir butonun rengi ve boyutu, bir formun etiketleri, bir menünün açılış biçimi, başlık ile metin arasındaki boşluk; hepsi UI kararlarıdır. İyi bir arayüz tutarlıdır: aynı işi yapan öğeler her sayfada aynı görünür, tıklanabilir olan şey tıklanabilir gibi durur, önemli olan öne çıkar. UI tasarımı genellikle wireframe aşamasından sonra gelir; yapı belli olduktan sonra o yapıya marka kimliği ve görsel hiyerarşi giydirilir.
İşletme sahibi için neden önemli
Ziyaretçi sitenizi gördüğü ilk saniyelerde firmanız hakkında bir izlenim edinir. Düzensiz boşluklar, birbirine benzemeyen butonlar, okunmayan yazılar güven eksiltir. Tutarlı ve sakin bir arayüz ise profesyonellik hissi verir ve kullanıcının nereye basacağını düşünmeden bulmasını sağlar. UI aynı zamanda marka tutarlılığının taşıyıcısıdır: kartvizitten web sitesine aynı renk ve yazı dili sürmelidir.
Örnek
Bir muhasebe bürosunun sitesinde iletişim butonu her sayfada farklı renk ve konumdaydı; bazı sayfalarda hiç yoktu. UI düzenlemesinde tek bir birincil buton stili tanımlandı, her sayfanın aynı noktasına yerleştirildi, yazı boyutları üç kademeye indirildi. Site yeniden tasarlanmadan yalnızca bu tutarlılıkla daha derli toplu göründü.
Sık yapılan hata
Arayüzü süsleme sanmaktır. Çok fazla renk, çok fazla yazı tipi, her yerde animasyon; bunlar dikkati dağıtır ve önemli olanı gizler. İkinci hata, UI'ı UX olmadan yapmaktır: güzel görünen ama kullanıcının aradığını bulamadığı siteler bu şekilde ortaya çıkar. Üçüncüsü, kontrast ve dokunma alanı gibi erişilebilirlik gereklerini estetik uğruna feda etmektir.
Teklif alırken sorulacak soru
Arayüz için buton, form ve başlık stillerini tanımlayan yazılı bir bileşen seti teslim edilecek mi? Marka renkleriniz ve yazı tipiniz siteye nasıl aktarılacak, kontrast kontrolü yapılacak mı?
Sık sorulanlar
UI tasarımı için hangi çıktılar alınır?
Genellikle sayfa tasarımları (Figma gibi bir araçta), renk ve yazı tipi tanımları, buton ve form gibi tekrar eden bileşenlerin stilleri teslim edilir.
Hazır bir UI kiti kullanmak sorun mu?
Kit hız kazandırabilir ancak markaya özgü hissi zayıflatır; kullanılıyorsa renk, yazı ve boşluk kurallarının markaya göre uyarlanması beklenir.
