UI/UX Tasarım

UI ve UX arasındaki fark nedir?

UX (Kullanıcı Deneyimi) tasarımı; kullanıcının hedefine ulaşırken yaşadığı tüm süreci inceler ve kolaylaştırır. Bilgi mimarisi, sayfa akışı, form sıralaması, menü yapısı, hata mesajları, onboarding adımları UX kapsamındadır. UI (Kullanıcı Arayüzü) tasarımı ise bu akışı renk, tipografi, boşluk, ikon ve bileşen sistemiyle görsel olarak hayata geçirir.

İkisi farklı disiplinlerdir ama birlikte çalışır. UX olmadan yapılan UI çalışması güzel ama kullanılması zor arayüzler doğurur. UI olmadan yapılan UX çalışması ise işlevsel ama görsel olarak zayıf sonuçlar üretir. Her iki katman da birlikte planlandığında en güçlü sonuç ortaya çıkar.

Kullanıcı deneyimi yatırımı neden geri döner?

Sepette ürün bırakan müşteri, formu yarıda terk eden ziyaretçi, menüde kaybolup sayfayı kapatan kullanıcı; bunlar çoğu zaman trafik sorunu değil, tasarım sorunudur. Aynı sayıda ziyaretçiyle daha fazla form gönderimi, daha fazla satış, daha fazla randevu almak mümkündür. Yapmanız gereken trafiği artırmak değil, mevcut trafiğin dönüşüm oranını yükseltmektir.

A/B testi verilerinde sıkça görülen sonuç: buton rengi değil, butonun sayfadaki konumu; form alan sayısı değil, alanların sıralaması; menü yapısı değil, menüdeki ifadelerin netliği dönüşümü değiştirir. Bu tür kararlar sezgiyle değil, kullanıcı araştırması ve test verisiyle alınmalıdır.

Samsun'daki işletmeler için somut bir örnek: İlkadım'daki bir klinik sitesinde randevu formu sayfanın en altında, 3 scroll sonra görünüyordu. Formu sayfanın ilk ekranına taşımak ve alan sayısını 6'dan 3'e düşürmek, form tamamlama oranını belirgin biçimde artırdı. Bu değişiklik reklam bütçesi artırmadan yapıldı; yalnızca UX kararıydı.

Tasarım süreci aşamaları

1. Kullanıcı araştırması: Hedef kullanıcı profilleri, mevcut site kullanım verileri (Analytics, ısı haritası), rakip analizi ve kullanıcı görüşmeleri (mümkünse). Bu aşama olmadan yapılan tasarım varsayıma dayanır.
2. Bilgi mimarisi: Site haritası, sayfa içi içerik hiyerarşisi, navigasyon yapısı. Kullanıcının aradığını kaç tıkta bulacağı bu aşamada planlanır. Kritik sayfalar (ürün, iletişim, randevu) maksimum 2 tıkta ulaşılabilir olmalıdır.
3. Wireframe: Düşük veya orta sadakatli iskelet düzenler. Renk ve görsel yok; içerik sıralaması, CTA konumu ve akış mantığı test edilir. Bu aşamada hata yapmak ucuzdur; kod aşamasında düzeltmek pahalıdır.
4. Görsel sistem (UI): Renk paleti, tipografi seti, ikon dili, boşluk değerleri, bileşen kütüphanesi. Her eleman tutarlı bir tasarım dili konuşur. Dark mode ve accessibility (erişilebilirlik) gereksinimleri bu aşamada değerlendirilir.
5. Prototip ve test: Tıklanabilir prototip hazırlanır. Gerçek kullanıcılar veya ekip üyeleriyle test edilir; sorunlar üretime girmeden tespit edilir. 5 kullanıcıyla yapılan test bile ciddi sorunların büyük bölümünü ortaya çıkarır.
6. Geliştirici geçişi: Figma dosyası, ölçü notları, bileşen belgesi ve responsive davranış açıklamalarıyla kod katmanına aktarılır. Geliştirici soruları önceden yanıtlanır.

Bu hizmet kimlere yönelik?

Yeni dijital ürün veya web sitesi tasarlayan girişimler. Mevcut sitesinin dönüşüm oranı düşük olan ve nedenini anlamak isteyen firmalar. Marka kılavuzu ve görsel sistem oluşturmak isteyen işletmeler. Uygulama, özel panel veya e-ticaret arayüzü geliştirecek ekipler. E-ticaret ve landing page projeleri için UX sürecini atlamak, sonradan maliyetli düzeltmelere yol açar.

Marka sistemi ve tutarlılık

Bir kez doğru kurulan görsel sistem (design system); yeni sayfa, kampanya görseli, sosyal medya paylaşımı ve basılı materyal için referans noktası olur. Her yeni tasarım ihtiyacında rengi, fontu ve boşluk değerlerini yeniden tartışmak yerine sisteme bakılır. Geliştiriciler de aynı token'lara (renk kodu, font boyutu, boşluk değeri) referans vererek tutarlı kod üretir.

Bu temeli olmayan projeler zamanla yamalı bir görünüm alır. Her sayfada farklı ton, farklı buton boyutu, farklı boşluk marka algısını zayıflatır. Web tasarım ve özel yazılım projelerinde UI/UX aşaması baştan planlandığında yeniden iş sayısı ciddi biçimde azalır.

Erişilebilirlik (accessibility) de tasarım sisteminin parçası olmalıdır. Renk kontrastı WCAG standartlarına uygun mu, form alanları ekran okuyucu ile kullanılabilir mi, klavye navigasyonu düzgün çalışıyor mu; bunlar hem etik bir sorumluluk hem de potansiyel kullanıcı kitlesini genişletme fırsatıdır. Özellikle kamu kurumları ve sağlık sektöründe erişilebilirlik yasal zorunluluk olabilir.

Fiyatı belirleyen etkenler

Araştırma derinliği, ekran ve akış sayısı, prototip sadakati (düşük/orta/yüksek), bileşen kütüphanesi kapsamı ve geliştirici desteği fiyatı belirler. Sadece wireframe, sadece görsel sistem veya uçtan uca UI/UX paketi olarak farklı kapsam seçenekleri sunulur. Keşif sonrası yazılı teklif hazırlanır.

Mevcut bir site veya uygulama için UX audit (kullanılabilirlik denetimi) de ayrı bir hizmet olarak sunulabilir. Bu denetim, mevcut akıştaki darboğazları, kullanıcı terk noktalarını ve iyileştirme fırsatlarını belirler. Tam yenileme yerine hedefli iyileştirmeler yaparak dönüşüm oranını artırmak çoğu zaman daha hızlı ve ekonomik bir yoldur.

UX projelerinde sık karşılaşılan tuzaklar

• Kullanıcı araştırmasını atlayıp doğrudan görsel tasarıma geçmek. Güzel ama işlevsiz arayüzler ortaya çıkar.
• Tüm paydaşları memnun etmeye çalışarak tasarımı tavizlerle doldurmak. Her şeyi gösteren sayfa hiçbir şeyi göstermez.
• Wireframe aşamasını atlamak. Renkler ve görseller geldikten sonra yapısal sorunları fark etmek çok geç olur.
• Geliştirme ekibini tasarım sürecine dahil etmemek. Teknik kısıtlamalar göz ardı edilince tasarım koda uyarlanamaz.
• Testten kaçınmak. "Ben kullanıcıyı tanıyorum" yaklaşımı çoğu zaman yanıltıcıdır; test verileri şaşırtabilir.
• Erişilebilirliği (accessibility) ihmal etmek. Renk körü kullanıcılar, ekran okuyucu kullananlar ve motor engelli kullanıcılar da hedef kitlenizin parçasıdır.

İlgili sayfalar

Web tasarım | Web yazılım | Landing page | Mobil uyumlu web | Özel yazılım | İlçeler