Arayüz tasarımı, yani UI tasarım, ziyaretçinin ekranda gördüğü ve dokunduğu her şeyin planlanmasıdır: düğmeler, menüler, yazılar, renkler ve formlar. İyi bir arayüz, ziyaretçinin ne yapacağını düşünmeden anlamasını sağlar.
Bu yazıda UI ile UX farkını, arayüzün hangi adımlarla çizildiğini ve hangi ilkelerin ziyaretçiyi doğru yere yönlendirdiğini anlatıyoruz. Arayüzü baştan planlatmak isterseniz web tasarım hizmeti sayfamıza bakabilirsiniz.
UI tasarım ile UX tasarımı arasındaki fark nedir?
UI, kullanıcı arayüzü demektir ve sitenin görünen yüzünü anlatır. UX, kullanıcı deneyimi demektir ve ziyaretçinin siteyi kullanırken yaşadığı bütün akışı anlatır. UI “nasıl görünüyor” sorusunu, ux tasarımı ise “kolay mı, anlaşılır mı” sorusunu cevaplar. İkisi birbirinden ayrı düşünülemez.
Bir örnekle açalım. Denizli’deki bir diş kliniğinin sitesinde “Randevu al” düğmesi var diyelim. Düğmenin rengi, boyutu ve yazısı UI işidir. Düğmeye basınca ziyaretçinin üç adımda randevuyu tamamlaması ise UX işidir. Düğme çok güzel olsa da form beş sayfa sürüyorsa deneyim kötüdür.
Pratikte iki alan aynı kişilerin masasında birleşir. Bu yüzden “ui ux ajansı” diye aranan hizmet, çoğu zaman hem görünümü hem akışı planlayan bir ekip anlamına gelir. Biz burada ajans seçimini değil, işin kendisini anlatıyoruz. Ajans seçerken nelere bakılacağını web tasarım ajansı seçimi yazısında topladık.
Kısaca ayırmak gerekirse:
- UI: renk, yazı tipi, düğme, ikon, boşluk, sayfa düzeni.
- UX: sayfalar arası akış, hız, anlaşılırlık, hata anında ne olduğu.
- Ortak amaç: ziyaretçinin hedefine en az çabayla ulaşması.
Web arayüz tasarımı hangi adımlarla yapılır?
Web arayüz tasarımı sırayla ilerler: hedefi belirleme, sayfa akışını çıkarma, tel kafes çizme, görsel dili seçme, mobili planlama ve test etme. Her adım bir sonrakinin zeminidir. Sıra atlanırsa tasarım güzel görünür ama işe yaramaz.
- Hedefi yazın. Sitenin tek cümlelik amacı ne? “Müşteri teklif formunu doldursun” gibi net bir hedef, bütün kararları kolaylaştırır.
- Ziyaretçiyi tanıyın. Siteye kim, hangi cihazla, hangi soruyla geliyor? Bir kuru temizlemeciye gelen kişi çoğunlukla telefondan adres ve saat arar.
- Sayfa akışını çizin. Ana sayfadan hizmet sayfasına, oradan iletişime giden yol kaç tıklama sürüyor? Akış kâğıtta bile kısa olmalı.
- Tel kafes (wireframe) hazırlayın. Tel kafes, sayfanın renksiz ve süssüz iskelet taslağıdır. Hangi blok nerede duracak, burada karar verilir.
- Görsel dili seçin. Renkler, yazı tipleri ve ikonlar markaya uygun biçimde belirlenir.
- Prototip ve test. Taslağı birkaç kişiye gösterip nerede tereddüt ettiklerini izleyin.
Tel kafesi renkten önce çizmek önemlidir. Renk ve fotoğraf, yapısal bir hatayı örter. Gri bir taslakta bile anlaşılan bir sayfa, süslenince de anlaşılır.
Test adımı da atlanmamalı. Taslağı üç beş kişiye gösterin ve “Bu sayfada ne yapabilirsiniz?” diye sorun. Cevap yanlışsa ya da kişi tereddüt ediyorsa, sorun kişide değil arayüzdedir. Bu küçük deneme, yayından sonra yapılacak pahalı düzeltmeleri azaltır.
Sitenin genel iskeleti için web tasarım nedir yazısına, kurumsal sitelerin sayfa planı için kurumsal web sitesi yazısına bakabilirsiniz. Biz burada yalnızca arayüz katmanına odaklanıyoruz.
Yazı tipi, renk ve boşluk nasıl seçilir?
Yazı tipi okunabilir, renk uyumlu ve boşluk yeterli olmalıdır. Gövde metni için sade bir yazı tipi, tek bir vurgu rengi ve geniş satır aralığı çoğu işletme sitesinde yeterlidir. Süsleme arttıkça okunabilirlik azalır.
Yazı tipi. En fazla iki aile kullanın: başlık için bir tane, gövde için bir tane. Gövde metni telefonda rahat okunacak boyutta olmalıdır. Satırlar çok uzarsa göz yorulur; uzun metinlerde satırları rahat takip edilebilecek genişlikte tutun. 60–70 karakteri başlangıç tasarım hedefi olarak alabilirsiniz; yazı boyutu ve ekrana göre test edin.
Renk. Renk uyumu, güzellikten önce okunabilirlik meselesidir. Açık gri zemin üstüne açık gri yazı güzel görünebilir ama okunmaz. Bu yüzden yazı ile zemin arasındaki kontrast, yani açıklık farkı yeterli olmalıdır. W3C’nin erişilebilirlik yönergesi WCAG, normal metin için en az 4,5’e 1 oranını önerir. Ayrıntıyı WCAG kontrast açıklamasında görebilirsiniz.
Renk seçerken pratik bir yol: markanın ana rengini bir vurgu için, yani düğmeler ve bağlantılar için ayırın. Geri kalan her şey nötr kalsın. Her şey vurgulanırsa hiçbir şey öne çıkmaz.
Boşluk. Boşluk boş yer değildir, görsel bir ayırıcıdır. Bloklar arasında yeterli boşluk bırakılınca ziyaretçi hangi yazının hangi başlığa ait olduğunu hemen anlar. Sıkışık sayfa ise telaşlı görünür ve güveni azaltır.
Düğme, form ve menü tasarımında nelere dikkat edilir?
Düğme ne yapacağını yazıyla söylemeli, form yalnızca gerekli alanları istemeli, menü ise az seçenekli ve tutarlı olmalıdır. Ziyaretçi bu üç öğede takılırsa siteyi terk eder. Bu yüzden arayüz çalışmasının büyük kısmı bu öğelere gider.
Düğmeler. “Gönder” yerine “Teklif iste” ya da “Randevu al” gibi sonucu anlatan yazılar daha açıktır. Sayfada birincil düğme bir tane olmalı; ikincil eylemler daha sönük görünmelidir. Aynı ekranda üç parlak düğme varsa ziyaretçi hangisine basacağını bilemez.
Formlar. Her ek alan, formu bırakma ihtimalini artırır. Ad, telefon ve kısa bir mesaj çoğu işletme için yeterlidir. Hata mesajı da arayüzün parçasıdır: “Hatalı giriş” yerine “Telefon numarası 10 haneli olmalı” demek ziyaretçiyi yönlendirir. Etiketler alanın içine değil üstüne yazılmalıdır; yazmaya başlayınca kaybolan ipucu kullanıcıyı şaşırtır.
Menü. Ana menüde beş, yedi öğeyi aşmamak iyi bir kuraldır. Menü adları, sektörün kullandığı kelimelerle yazılmalıdır. “Çözümlerimiz” gibi belirsiz bir ad yerine “Hizmetler” daha anlaşılırdır. Menü her sayfada aynı yerde durmalı; yer değiştiren menü ziyaretçiyi yorar.
Mobil arayüz tasarımı neden ayrı düşünülmeli?
Mobil arayüz tasarımı, sitenin telefonda ve küçük ekranda parmakla kullanıma göre planlanmasıdır. Masaüstü tasarımı küçültmek yeterli olmaz; dokunma alanı, yazı boyutu ve menü yapısı baştan düşünülmelidir. Çünkü fare ile parmak aynı hassasiyette çalışmaz.
Mobilde dikkat edilecekler:
- Dokunma alanı. Düğme ve bağlantılar parmakla rahat basılacak büyüklükte olmalı, birbirine yapışmamalı.
- Tek sütun. Yan yana bloklar telefonda alt alta dizilir; sıralama önem sırasına göre kurulmalı.
- Telefon ve harita kısayolu. Bir Denizli esnafı için telefondan ara düğmesi, çoğu zaman en değerli öğedir.
- Hafif sayfa. Büyük görseller mobil bağlantıda sayfayı yavaşlatır.
Bu başlığı kısa tutuyoruz çünkü teknik ayrıntısı ayrı bir konu. Ekran boyutuna göre uyum sağlayan yapıyı responsive web tasarım yazısında ayrıca anlattık. Google’ın web.dev sitesindeki duyarlı tasarım temelleri yazısı da teknik tarafa bakmak isteyenler için iyi bir kaynak.
Kullanıcıyı yönlendiren tasarım ilkeleri nelerdir?
Ziyaretçiyi yönlendiren ilkeler şunlardır: görsel hiyerarşi, tutarlılık, geri bildirim ve erişilebilirlik. Hiyerarşi önemli olanı öne çıkarır, tutarlılık öğrenmeyi kolaylaştırır, geri bildirim yapılan işlemin sonucunu gösterir, erişilebilirlik ise herkesin siteyi kullanabilmesini sağlar.
Görsel hiyerarşi. Sayfada en büyük ve en kontrastlı öğe, en önemli mesajdır. Ziyaretçi sayfaya bakınca önce başlığı, sonra alt metni, sonra düğmeyi görmelidir. Hepsi aynı boyutta olursa göz dolaşır ve karar vermez.
Tutarlılık. Aynı işi yapan öğe her yerde aynı görünmelidir. Bir sayfada mavi bağlantı, öbüründe kırmızı bağlantı varsa ziyaretçi bağlantının ne olduğunu her seferinde yeniden öğrenir.
Geri bildirim. Form gönderilince “Mesajınız alındı” demek, düğmenin üstüne gelince rengi değişmek küçük ama güven verici ayrıntılardır. Ziyaretçi bir şeye bastığında bir karşılık görmelidir.
Erişilebilirlik. Görme, işitme ya da hareket zorluğu olan kişiler de siteyi kullanabilmelidir. Görsellere açıklayıcı alt metin yazmak, klavyeyle gezilebilmek, yeterli kontrast sağlamak buna girer. Standart kaynak, W3C’nin WCAG yönergeleridir. Bu yönergeleri baştan okumak zorunda değilsiniz; ajansınıza hangi seviyeye göre çalıştığını sormanız yeterli.
Bu ilkelerin hiçbiri sıralama vaadi değildir. Ancak Google da sayfa deneyimini değerlendirmede göz önünde bulundurduğunu söyler. Kullanılabilir bir site, ziyaretçiyi tutmak için de doğru zemindir. Arayüzün SEO ile ilişkisini SEO uyumlu web sitesi yazısında ele aldık.
Sık sorulan sorular
UI tasarım ile grafik tasarım aynı şey mi?
Hayır. Grafik tasarım çoğunlukla sabit bir görseli, örneğin afişi ya da logoyu hazırlar. UI tasarım ise etkileşimli bir ekranı planlar: tıklanan düğmeler, açılan menüler, doldurulan formlar. İkisi benzer araçlar kullanır ama UI, kullanımı da hesaba katar.
Site arayüz tasarımları tek seferde mi yapılır?
Genellikle hayır. İlk sürüm yayına çıkar, ziyaretçilerin davranışı izlenir, takıldıkları yerler düzeltilir. İyi bir arayüz zamanla iyileşir. Hangi sayfanın terk edildiğini görmek için Google Analytics gibi bir ölçüm aracı kullanılabilir.
Arayüz tasarımı ne kadar sürer?
Süre, sayfa sayısına ve sitenin karmaşıklığına göre değişir. Basit bir tanıtım sitesinin arayüzü ile çok sayfalı bir kurumsal sitenin arayüzü aynı sürede bitmez. Kesin süreyi, kapsam netleşince ajansınız söyleyebilir; baştan sabit bir gün sayısı vaat eden teklife temkinli yaklaşın.
Hazır şablon kullanırsam arayüzü yine de düşünmem gerekir mi?
Evet. Şablon bir başlangıç iskeleti verir ama içeriği, düğme yazılarını, renk ve sayfa sırasını sizin işinize göre düzenlemeniz gerekir. Şablon ile özel tasarım arasındaki karar için hazır site mi özel tasarım mı yazısını okuyabilirsiniz.
Arayüzü yenilemek gerektiğini nasıl anlarım?
Ziyaretçiler siteye giriyor ama formu doldurmuyor ya da telefonda çok çabuk çıkıyorsa arayüz sorunu olabilir. Müşterilerin “bunu nereden yapacağım” diye sorması da işarettir. Sitenizi birlikte gözden geçirmek isterseniz bize yazabilirsiniz.