UI/UX Tasarım Nedir, Nasıl Yapılır? (2026 Rehber)

UI (User Interface / arayüz) bir ürünün gördüğünüz ve dokunduğunuz görsel katmanıdır: renkler, tipografi, butonlar, ikonlar, boşluklar, animasyonlar. UX (User Experience / kullanıcı deneyimi) ise kullanıcının ürünle yaşadığı bütün yolculuktur: akışın mantığı, bilgiye ulaşma kolaylığı, "ne yapacağımı anladım" hissi ve sonunda hedefe (satın alma, form doldurma, bilgi bulma) ne kadar sürtünmesiz ulaştığı. Kısacası UX iskelet ve mantık, UI ise o iskeletin üstündeki görünümdür. İkisi de kritiktir çünkü Nielsen Norman Group'un (NN/g) temel ilkesinde özetlendiği gibi iyi bir UI, kötü bir UX'i kurtaramaz: göz alıcı bir arayüz, kullanıcı aradığını bulamıyorsa ya da süreç kafa karıştırıcıysa hiçbir işe yaramaz. Tersi de geçerlidir; akışı mantıklı ama görsel olarak karmaşık, okunmayan, güven vermeyen bir arayüz kullanıcıyı daha eylemi tamamlamadan kaybeder. Bir web sitesinin gerçekten "iyi" olması için bu iki katmanın birbirine hizmetkâr biçimde çalışması gerekir; bu yüzden iyi web tasarımının nasıl olması gerektiğini konuşurken UI ile UX'i hiçbir zaman birbirinden koparmıyoruz.

Müşterilerimizde sık gördüğümüz bir yanılgı, UI/UX'i "sitenin güzelleştirilmesi" sanmaktır. Oysa bu disiplin, bir işletmenin web üzerinden ulaşmak istediği somut sonuca (daha çok teklif talebi, daha düşük sepet terk oranı, daha az destek çağrısı) doğrudan hizmet eden bir mühendislik işidir. Bu rehberde önce UI ve UX'i net biçimde tanımlıyor, aralarındaki farkı tablo ve örneklerle netleştiriyor, sonra ikisinin neden ayrılmaz biçimde birlikte çalışması gerektiğini erişilebilirlik ve performans boyutlarıyla birlikte ele alıyoruz.

UI ve UX Nedir? Net Tanımlar

İki kavramı somut bir örnekle ayırmak en hızlı yöntemdir. Bir e-ticaret sitesinde "Sepete Ekle" butonunu düşünün. Butonun rengi, köşe yuvarlaklığı, üzerine gelince verdiği renk değişimi, içindeki yazının puntosu ve ikonu UI meselesidir. Ama o butona basınca sepetin gerçekten güncellenmesi, kullanıcının kaç adımda ödemeye ulaşması, "kargo ne zaman gelir" sorusuna kaçıncı tıklamada cevap bulması UX meselesidir. UI "nasıl görünüyor", UX "nasıl çalışıyor ve nasıl hissettiriyor" sorusunun cevabıdır. Bir benzetmeyle: UX bir restoranın mutfak düzeni, menü mantığı ve servis akışıyken, UI sofranın görünümü, tabağın sunumu ve mekânın dekorudur. İkisi de eksik olduğunda müşteri bir daha gelmez.

UX (Kullanıcı Deneyimi) tam olarak neyi kapsar?

UX, kullanıcının ürünle ilk karşılaştığı andan hedefini tamamlayıp çıktığı ana kadar geçen bütün süreci tasarlamaktır. NN/g'nin kullanıcı odaklı tasarım (user-centered design) ilkesine göre bu sürecin kararları tasarımcının varsayımına değil, kullanıcı araştırmasına ve testine dayanmalıdır. Pratikte bu, "biz böyle güzel olur diye düşündük" yerine "kullanıcılar bu adımda neden takılıyor" sorusunu sormak demektir. UX'in başlıca bileşenleri şunlardır:

• Bilgi mimarisi (IA): İçeriğin mantıklı gruplanması, gezinme yapısı ve etiketleme. Hedef, kullanıcının her an "nerede olduğunu ve nereye gideceğini" bilmesidir. Menü etiketlerinin kullanıcının diliyle yazılması (örneğin "Hizmetler" yerine içeriği belirsiz "Çözümler" demekten kaçınmak) bu katmanın işidir.
• Kullanıcı akışları (user flow): Bir hedefe (örneğin teklif isteme) giden adımların en kısa, en az sürtünmeli halde tasarlanması. Hick Yasası gereği seçenek ve adım sayısı arttıkça kullanıcının karar süresi ve vazgeçme olasılığı yükselir; bu yüzden gereksiz adımlar elenir.
• Kullanılabilirlik (usability): İşlemlerin öğrenilebilir, hatasız ve verimli olması; hata olursa kullanıcının kolayca toparlanabilmesi. Örneğin bir form alanı yanlış doldurulduğunda, sayfayı baştan doldurtmak yerine sadece hatalı alanı işaretlemek bu ilkenin gereğidir.
• Geri bildirim: Nielsen'in sezgisel ilkelerinden biri olan "sistem durumunun görünürlüğü" — yükleniyor mu, başarılı mı, hata mı oldu, kullanıcı her an bilmeli. "Mesajınız iletildi" onayı görmeyen kullanıcı formu ikinci kez gönderir ya da sitenin bozuk olduğunu düşünür.

UX iyi tasarlandığında kullanıcı çoğu zaman bunu fark etmez bile; her şey "doğal" akar. Kötü UX ise hemen hissedilir: kaybolma, geri tuşuna basma, formu yarıda bırakma. Bu yüzden bir web sitesini sıfırdan yaparken hedef ve strateji adımını UX'in temeli olarak en başa koyuyoruz — tasarım ve görsel katman ondan sonra gelir. Aynı disiplin, satışa odaklı tek sayfalık bir akış kurarken dönüşüm odaklı landing page tasarımının da çekirdeğini oluşturur.

UI (Kullanıcı Arayüzü) tam olarak neyi kapsar?

UI, UX iskeletinin üstüne giydirilen görsel ve etkileşimsel katmandır. Kullanıcının doğrudan gördüğü ve etkileşime girdiği her görsel öğe UI'ın alanına girer:

• Tipografi: Okunabilirlik için gövde metni genelde ~16px tabanında, satır uzunluğu ~50-75 karakter, satır aralığı 1.4-1.6 ve en fazla 2-3 yazı tipiyle kurulur. Türkiye bağlamında ek bir kritik nokta vardır: seçilen font Türkçe karakterleri (ç, ğ, ı, İ, ö, ş, ü) ve özellikle noktalı/noktasız I ayrımını doğru göstermeli; bazı popüler fontlarda "İ/ı" sorunları çıkar, bu yüzden test şarttır.
• Renk ve kontrast: Marka kimliği kadar erişilebilirlik de önemlidir; WCAG AA standardı gövde metni için en az 4.5:1, büyük metin için 3:1 kontrast oranı ister ve renk tek başına bilgi taşımamalıdır (renk körlüğü olan kullanıcılar için "sadece kırmızı = hata" yetmez, metin ya da ikon da gerekir).
• Görsel hiyerarşi: Boyut, renk, kontrast, boşluk ve konum kullanılarak önem sırası kurulur; göz önce en önemli öğeye (genelde başlık ve ana çağrı butonu) gitmelidir. Sayfada her şey aynı anda bağırırsa hiçbir şey öne çıkmaz.
• Bileşenler ve mikro etkileşimler: Butonlar, formlar, ikonlar, hover ve geçiş animasyonları. İşlevsel mikro etkileşimler kullanıcıya "sistem dinliyor" hissi verir; sektör ölçümlerine göre işlevsel (dekoratif değil, rehberlik eden) mikro etkileşimler etkileşimi yaklaşık %45 artırabiliyor.

Önemli bir nokta: UI sadece "süsleme" değildir. İyi bir UI, UX'in kurduğu mantığı görünür kılar. Örneğin görsel hiyerarşi doğru kuruluysa kullanıcı düşünmeden ana eyleme yönlendirilir; tutarlı buton stili kullanıcıya neyin tıklanabilir olduğunu öğretir. Tutarlılık burada belirleyicidir: Jakob Yasası'na göre kullanıcılar diğer sitelerden öğrendikleri kalıpları sizden de bekler; sepet ikonunun sağ üstte, ana menünün üstte olması gibi alışkanlıklara saygı duyan bir arayüz "öğrenilmek" zorunda kalmaz. Bu yüzden UI kararları estetik kaygının yanı sıra dönüşüm odaklı tasarımın da doğrudan bir parçasıdır.

UI ve UX Arasındaki Fark Nedir?

İki kavram sık sık birbirinin yerine kullanılır ama farklı disiplinlerdir, farklı sorular sorar ve farklı çıktılar üretir. Aşağıdaki tablo temel ayrımı netleştirir:

Pratikte bu ayrım keskin bir duvar değildir; iyi tasarım ekiplerinde UX ve UI iç içe geçer. Bir UX kararı (örneğin "ödeme üç adıma insin") doğrudan UI'ı şekillendirir (her adımda ilerleme göstergesi, net buton hiyerarşisi). Yine de ayrımı bilmek önemlidir, çünkü bir sitedeki sorunun kaynağını doğru teşhis etmenizi sağlar: Kullanıcılar sayfada çok zaman geçiriyor ama dönüşmüyorsa sorun çoğu zaman UI'da değil, akışın mantığında — yani UX'tedir. Tersine, kullanıcılar daha ilk saniyede çıkıyorsa sorun büyük olasılıkla ilk izlenimi veren UI'dadır: okunmayan metin, dağınık düzen, güven vermeyen görünüm.

İkisini ayıran ünlü ilkeler nelerdir?

UI/UX tasarımının dayandığı bazı klasik kullanılabilirlik yasaları, iki katmanın neden birlikte düşünülmesi gerektiğini açıklar:

• Jakob Yasası: Kullanıcılar diğer sitelerden öğrendikleri kalıpları sizden de bekler. Bu hem bir UX kararıdır (alışılmış akış) hem de bir UI kararıdır (alışılmış buton, menü, sepet ikonu yerleşimi). Tutarlılık bu yüzden temel ilkedir; "özgün olalım" diye menüyü tanınmayan bir yere koymak yaratıcılık değil sürtünme üretir.
• Fitts Yasası: Bir hedefe ulaşma süresi, hedefin büyüklüğü ve uzaklığıyla ilişkilidir. Sonuç: önemli ve sık kullanılan butonlar büyük ve erişilebilir konumda olmalı — bu hem UI ölçüsü hem UX kararıdır. Mobilde başparmağın rahat ulaştığı bölgeye yerleştirilen büyük bir birincil buton bu yasanın doğrudan uygulamasıdır.
• Hick Yasası: Seçenek sayısı arttıkça karar süresi uzar. Menüleri ve seçenekleri sadeleştirmek karar yükünü azaltır; bu doğrudan dönüşümü etkiler. Bir sayfada tek net birincil çağrı butonu (CTA), beş rakip butondan her zaman daha iyi sonuç verir.
• Geri bildirim ve sistem durumu (Nielsen): Kullanıcı bir eylemin sonucunu her zaman görebilmeli; hata mesajları net ve çözüm önerili olmalı. Bu ilke UX'in mantığını UI'ın görünür öğeleriyle birleştirir.

Bu yasalar 2026'da hâlâ geçerlidir çünkü teknoloji değil insan algısı temelinde çalışırlar. Renk modaları, animasyon akımları ya da belirli tasarım stilleri gelip geçer; ancak hız, net hiyerarşi, kullanıcı odaklılık ve tutarlılık gibi ilkeler kalıcıdır. Bir trendi körü körüne takip etmek yerine bu ilkelere sadık kalmak, sitenin birkaç yıl sonra "eski" görünme riskini azaltır.

Neden İkisi de Kritik? Birini İhmal Edince Ne Olur?

Soruya net cevap: UI ve UX birbirini tamamlar; birini ihmal etmek diğerinin değerini de yok eder. Bunu üç tipik başarısızlık senaryosuyla görmek mümkün — ve dördüncü olarak hızın bu denklemde nasıl her şeyi belirlediğini de eklemek gerekir.

Güzel ama işe yaramaz: UI var, UX yok

Görsel olarak etkileyici ama akışı bozuk bir site, NN/g'nin uyardığı "güzel ama işe yaramaz" tuzağına düşer. Animasyonlar akıcıdır, fontlar şık seçilmiştir, ama kullanıcı aradığı bilgiyi bulamaz, iletişim formuna ulaşamaz ya da ödeme adımında takılır. Sonuç yüksek hemen çıkma oranı ve düşük dönüşümdür. Burada sorun renk veya tipografi değil, kullanıcı yolculuğunun yeterince düşünülmemiş olmasıdır. Sık karşılaştığımız örnekler: anasayfada değer önerisinin üst-katlamada (above the fold) net olmaması, iletişim bilgisine üç tık ötede ulaşılması, mobilde menünün dev bir görselin altında kaybolması. Çözüm baştan UX kurmaktan, gerektiğinde mevcut bir sitede yenileme (redesign) sürecinde akışı yeniden tasarlamaktan geçer; bu süreçte iyi performans gösteren mevcut sayfaları korumak ve URL değişiyorsa 301 yönlendirme kurmak SEO kaybını önler.

Mantıklı ama itici: UX var, UI zayıf

Tersine, akışı son derece mantıklı kurgulanmış ama görsel katmanı zayıf bir site de başarısız olur. Düşük kontrastlı metinler okunmaz — WebAIM'in yıllık "Million" raporlarına göre tespit edilen en sık erişilebilirlik hatası tam da düşük metin kontrastıdır; bunu alt-metni olmayan görseller, boş bağlantılar ve etiketsiz form alanları izler. Tutarsız buton stilleri kullanıcının neye güveneceğini bilememesine yol açar; görsel hiyerarşi olmadığı için göz hangi öğeye odaklanacağını şaşırır. Mantık doğru olsa bile kullanıcı bu arayüze güvenmez ve terk eder. Özellikle kurumsal ve B2B sitelerde güven sinyalleri (net hiyerarşi, profesyonel görünüm, okunaklı içerik, gerçek ekip ve açık iletişim bilgisi) doğrudan lead üretimini etkiler; B2B'de karar süreci uzun ve çok kişilidir, bu yüzden site "eğitim ve güven" rolünü ancak güçlü bir UI ile oynayabilir.

Erişilebilirlik: UI ve UX'in kesiştiği zorunlu zemin

2026 itibarıyla erişilebilirlik (a11y) artık "özellik" değil "altyapı" olarak ele alınıyor ve UI ile UX'in tam ortasında duruyor. WCAG 2.2, 5 Ekim 2023'te resmî W3C standardı (Recommendation) oldu ve WCAG 2.1'e göre 9 yeni başarı kriteri getirdi: minimum dokunmatik hedef boyutu (SC 2.5.8, AA için en az 24x24 CSS piksel), odak görünürlüğü, erişilebilir kimlik doğrulama, tutarlı yardım ve gereksiz tekrar girişin önlenmesi gibi. Uygunluk seviyeleri A (asgari), AA (yasal ve sektör standardı, çoğu projenin hedefi) ve AAA (en yüksek) olarak sıralanır; çoğu düzenleme AA seviyesini hedefler.

Bu artık yalnızca iyi niyet meselesi de değil: Avrupa Erişilebilirlik Yasası (EAA) 28 Haziran 2025'te yürürlüğe girdiğinden, EN 301 549 ve dolayısıyla WCAG 2.1 AA uyumu AB pazarındaki birçok dijital ürün/hizmet için zorunlu hale geldi. AB'ye ürün veya hizmet satan (e-ticaret, bankacılık, e-kitap, ulaşım gibi) Türkiye firmaları da kapsama girebiliyor; ihlal cezaları ülkeye göre 100.000 EUR'a kadar çıkabiliyor. Erişilebilir tasarım hem bir UI işidir (yeterli kontrast, görünür odak halkası, renk dışı işaretleme) hem de bir UX işidir (klavyeyle tam gezilebilirlik, anlamlı/semantik HTML, etiketli form alanları, çözüm önerili hata mesajları). Üstelik bu uygulamalar SEO ve dönüşüme de yarar — anlamlı yapı ve net içerik hem arama motorlarına hem ekran okuyuculara aynı anda hizmet eder; web erişilebilirliğinin nasıl sağlandığını ayrı bir rehberde derinlemesine ele alıyoruz.

Mobil-öncelik: çoğu kullanıcı arayüzü ilk kez telefonda görür

UI ve UX kararlarının çoğu, 2026'da öncelikle mobil ekranda sınanmalıdır. Mobil cihazlar küresel web trafiğinin yaklaşık %60'ını oluşturuyor (kaynak ve döneme göre değişir); Türkiye gibi pazarlarda bu oran daha da yükseliyor. Üstelik Google artık varsayılan olarak "mobil öncelikli indeksleme" yapıyor, yani sitenizin mobil sürümünü indeksleyip sıralıyor — mobilde eksik içerik doğrudan SEO kaybı demektir. Doğru yaklaşım, masaüstünü küçültmek değil önce küçük ekranı tasarlayıp büyük ekrana genişletmektir (progressive enhancement). Pratik sonuçlar: dokunmatik hedefler rahat basılabilir olmalı (Apple 44x44 pt, Google Material 48x48 dp önerir; pratikte en az 44-48px iyi bir taban), formlar doğru klavye tipini açmalı ve otomatik doldurmaya izin vermeli, içerik tek elle erişilebilir olmalı. Bu konunun tüm ayrıntısını mobil uyumlu responsive web tasarım rehberinde bulabilirsiniz.

Performans: görünmeyen ama belirleyici deneyim katmanı

UX'in çoğu zaman atlanan ama belirleyici bir boyutu da hızdır. Bir arayüz ne kadar güzel tasarlanırsa tasarlansın, geç açılıyor veya tıklamaya geç yanıt veriyorsa deneyim çöker. Google'ın Core Web Vitals metrikleri bunu ölçer ve "iyi" eşikleri (75. yüzdelik saha verisi) şöyledir:

• LCP (Largest Contentful Paint) <= 2,5 sn: En büyük içeriğin görünme süresi. Tasarımcı açısından hero görseli, yazı tipi yükleme ve sunucu yanıtı belirleyicidir; LCP görselini önceden yüklemek (preload) ve fontu font-display: swap ile sunmak doğrudan etkiler.
• INP (Interaction to Next Paint) <= 200 ms: Etkileşime yanıt hızı. INP, 12 Mart 2024'te FID'in (First Input Delay) yerini alarak resmî bir Core Web Vital oldu ve FID'den farklı olarak tüm etkileşimlerin tam yaşam döngüsünü ölçer. Ağır JavaScript ve gereksiz animasyon ana iş parçacığını bloke edip yanıtı geciktirdiği için, INP doğrudan tasarımcı ve geliştirici kararlarının sonucudur.
• CLS (Cumulative Layout Shift) <= 0,1: Beklenmedik düzen kayması. En yaygın kök neden görsele yer ayrılmamasıdır; her görsel, video, iframe ve reklam alanına açık genişlik/yükseklik (veya aspect-ratio) vermek, fontta size-adjust kullanmak kaymayı önler.

Yani performans, UI ve UX kararlarının görünmeyen ama her zaman hissedilen sonucudur ve aynı zamanda bir SEO sıralama sinyalidir. Bu üç metriği geçen siteler genelde daha düşük hemen çıkma ve daha yüksek etkileşim gösterir; konunun derinine inmek için site hızı ve Core Web Vitals rehberimize bakabilirsiniz.

Sonuç olarak UI ve UX, aynı amacın iki yüzüdür: kullanıcıyı en az sürtünmeyle hedefine ulaştırmak. İkisini birlikte kurgulamak; erişilebilirlik, mobil-öncelik ve performansı da denkleme katmak; sonra gerçek kullanıcı davranışıyla ölçüp iyileştirmek profesyonel bir iştir. Markanıza özgü, dönüşüm odaklı ve erişilebilir bir arayüz tasarımı için web ve mobil UI/UX tasarımı hizmetimizi inceleyebilir, mevcut sitenizin nerede aksadığını görmek için ücretsiz bir analiz talep edebilirsiniz.

UX İlkeleri Nedir? Kullanıcı Odaklılık ve Kullanılabilirlik Neden Her Şeyin Önünde Gelir?

UX ilkeleri, bir web sitesinin "güzel görünmesinden" önce "işe yaramasını" sağlayan kuralların bütünüdür. Kısa cevap şudur: iyi UX, kullanıcının ne aradığını, nerede olduğunu ve sonraki adımda ne yapacağını hiç düşünmeden bilmesidir. UX (User Experience), kullanıcının ürünle kurduğu bütün yolculuktur — akış, mantık, kullanılabilirlik; UI (User Interface) ise bunun görsel katmanıdır (renk, tipografi, buton, ikon). UX iskelet, UI görünümdür. Bu ayrım kritik çünkü iyi bir UI, kötü bir UX'i kurtaramaz: göz alıcı bir tasarım, kullanıcı hedefine ulaşamıyorsa hızla terk edilir. Bu ayrımın görsel/arayüz tarafını ayrıntılı işlediğimiz UI/UX tasarım rehberimizin diğer bölümlerini ve iyi web tasarımının nasıl olması gerektiğini de incelemenizi öneririz.

Müşterilerimizde en sık gördüğümüz hata, tasarımı bir "estetik" sorunu sanmaktır. Oysa kullanılabilirlik ölçülebilir bir mühendislik disiplinidir ve dayandığı ilkelerin çoğu (NN/g'nin kullanıcı odaklı tasarım yaklaşımı, Nielsen'in sezgisel ilkeleri, Fitts ve Hick yasaları) on yıllardır geçerlidir. 2026'da bile değişmeyen şey budur: trend gelir geçer, kullanıcı odaklılık kalır. Bir başka deyişle UX, "bir tasarımcının zevki" değil, kullanıcının davranışıyla doğrulanan bir karar zinciridir.

Bu ilkeleri tek bir zihinsel modelde toplamakta fayda var. Biz UX'i dört katmanlı bir piramit gibi düşünüyoruz: en altta strateji (kim, neden, hangi hedef), onun üstünde bilgi mimarisi (içerik nasıl gruplanır), onun üstünde akış ve kullanılabilirlik (kullanıcı hedefe nasıl gider), en üstte ise UI (bu yapı nasıl görünür). Üstteki her katman, altındakine dayanır. İşe en üstteki görsel katmandan başlamak — yani strateji ve mimari kurulmadan "ekran tasarlamak" — müşterilerimizde gördüğümüz en pahalı hatadır, çünkü görsel cila yanlış bir iskeletin üzerine konulduğunda sorunu gizler ama çözmez.

Kullanıcı Odaklı Tasarım (User-Centered Design) Nedir?

Kullanıcı odaklı tasarımın özü tek cümlede şudur: tasarım kararları varsayıma değil, gerçek kullanıcı araştırması ve testine dayanmalıdır. Bu, NN/g'nin (Nielsen Norman Group) temel ilkesidir. "Bana göre bu buton burada güzel durur" yaklaşımı yerine, "kullanıcılar bu butonu burada arıyor mu, bulabiliyor mu, tıklıyor mu" sorusunu sorar. Aradaki fark, "fikir temelli tasarım" ile "kanıt temelli tasarım" arasındaki farktır.

Biz projelerde şu somut adımları işletiyoruz:

• Hedef kitle tanımı: Siteyi kim kullanacak? Bir B2B karar verici ile bir e-ticaret son kullanıcısının beklentileri, dili ve davranışı bambaşkadır. B2B'de ziyaretçi genelde araştırma modunda, birden çok sayfa gezen, "kanıt ve güven" arayan bir kişidir; e-ticarette ise hızlı karar veren, fiyat ve teslimatı önceleyen bir alıcıdır. Bu yüzden B2B web sitesi tasarımı ile son kullanıcıya dönük tasarımı ayrı ele alıyoruz.
• Dönüşüm hedefi: Site ne için var — lead (potansiyel müşteri) toplamak mı, satış mı, bilgilendirme mi? Bu hedef tüm tasarımın çıpasıdır. Hedef adımı atlanan projelerde sonuç hep aynıdır: "güzel ama işe yaramaz" site. Tek bir sitede aynı anda üç farklı birincil hedef tanımlamak (hem satış, hem üyelik, hem bülten) çoğu zaman hiçbirini iyi yapmamak demektir.
• Rakip analizi ve KPI tanımı: Kullanıcının başka sitelerden öğrendiği kalıpları ve ölçeceğimiz başarı metriklerini baştan belirleriz. Ölçmediğiniz şeyi iyileştiremezsiniz: form gönderim oranı, sayfa başına dönüşüm, tamamlanma oranı gibi KPI'lar tasarımdan önce tanımlanır.
• Kullanıcı testi: Tasarımı varsayımla değil, gerçek kullanıcıların davranışıyla doğrularız. NN/g'nin yıllardır vurguladığı bir gerçek vardır: birkaç kullanıcıyla yapılan basit bir görev testi bile (örneğin "şu üründen iki adet sipariş edin" deyip izlemek) çoğu büyük kullanılabilirlik sorununu erken yakalar. Bu testlerin pahalı laboratuvar gerektirmediğini, küçük bir kullanıcı grubuyla bile değerli olduğunu defalarca gördük.

Kullanıcı odaklılığın bir başka önemli boyutu varsayımları yazıya dökmektir. Ekip "kullanıcı şunu ister" dediğinde, bunu bir hipotez olarak kaydeder ve test ederiz. Doğrulanmamış varsayım üzerine kurulan tasarım, sahaya çıktığında sürpriz dönüşüm kayıplarıyla geri döner. Strateji adımının neden her şeyin başında durması gerektiğini ayrıca web sitesi nasıl yapılır rehberimizde adım adım anlatıyoruz; orada gördüğünüz gibi içerik ve dönüşüm hedefi sonradan eklenen değil, gün-1 planlanan unsurlardır.

Bilgi Mimarisi (IA): Kullanıcı "Nerede Olduğunu" Biliyor mu?

Bilgi mimarisi (Information Architecture, IA), içeriğin mantıklı gruplanması, gezinme yapısının kurulması ve doğru etiketlenmesidir. Tek bir kullanılabilirlik kuralına indirgenebilir: kullanıcı her an nerede olduğunu, nasıl geldiğini ve nereye gidebileceğini bilmelidir. IA bozuksa, en şık tasarım bile kullanıcıyı kaybeder. Pratikte IA, bir sitenin "şehir planı" gibidir: caddeler mantıklıysa kullanıcı kaybolmaz; cadde isimleri tutarsızsa en güzel binalar bile işe yaramaz.

İyi bir bilgi mimarisinde dikkat ettiğimiz noktalar şunlardır:

• Mantıklı gruplama: İçerik kullanıcının zihnindeki kategorilere göre düzenlenir, firmanın iç organizasyon şemasına göre değil. Kullanıcı "fiyatlandırma"yı ararken onu "Kurumsal Çözümler > Ticari Politikalar" altında bulmamalıdır. Müşterilerimizde sık rastladığımız hata, menünün şirketin departman yapısını yansıtmasıdır; oysa kullanıcı sizin departmanlarınızı tanımaz, kendi ihtiyacını tanır.
• Net etiketleme: Menü ve bağlantı isimleri jargonsuz, beklenen ve tutarlı olmalıdır. Aynı şeye bir yerde "Hizmetler", başka yerde "Çözümler", üçüncü bir yerde "Neler Yapıyoruz" demek kafa karıştırır. İçeride anlamlı görünen yaratıcı başlıklar ("Yolculuğunuz", "Evrenimiz") çoğu zaman kullanıcının ne bulacağını anlamasını zorlaştırır — açık ve tahmin edilebilir etiket, yaratıcı etiketi yener.
• Gezinme tutarlılığı: Ana menü, alt menü ve breadcrumb (içerik haritası) her sayfada aynı mantıkla çalışmalıdır. Breadcrumb özellikle derin yapılı sitelerde (çok kategorili e-ticaret, kurumsal hizmet ağacı) kullanıcının konumunu görmesini sağlar ve geri dönüşü kolaylaştırır.
• Derinlik ve genişlik dengesi: Çok derin bir yapı (kullanıcıyı hedefe ulaştırmak için 5-6 tıklama) yorucudur; aşırı geniş bir yapı (tek menüde onlarca başlık) ise Hick Yasası gereği karar yükünü artırır. İkisi arasında, çoğunlukla iki-üç tıklamada hedefe ulaştıran bir denge ararız.

Bilgi mimarisini kâğıt üstünde doğrulamanın pratik yöntemleri vardır: kart sıralama (card sorting) ile kullanıcılara içerikleri kendi mantıklarına göre gruplatırız; ağaç testi (tree testing) ile de "şunu bulun" deyip menü iskeletinde kaybolup kaybolmadıklarına bakarız. Bunlar görsel tasarımdan önce, sadece yapıyı sınamak için yapılır. Bilgi mimarisi, içeriğin yenilenmesi gereken durumlarda en kritik aşamadır; bu yüzden bir web sitesi yenileme (redesign) projesinde tasarımdan önce IA'yı yeniden kurarız. Doğru kurgulanmış bir bilgi mimarisi yalnızca kullanıcıyı değil, arama motorlarını da memnun eder — net hiyerarşi hem UX hem SEO için kazançtır.

Kullanılabilirlik Nedir? Nielsen'in Geri Bildirim İlkesi

Kullanılabilirlik, kullanıcının bir hedefe ne kadar kolay, hızlı ve hatasız ulaştığının ölçüsüdür. Nielsen'in sezgisel kullanılabilirlik ilkelerinden en temel olanı şudur: sistem durumu her zaman görünür olmalıdır. Kullanıcı bir butona bastığında, formu gönderdiğinde veya bir şey yüklendiğinde, sistemin "dinlediğini" görmelidir. Görünmez bir sistem, kullanıcıyı tedirgin eder; tedirgin kullanıcı çift tıklar, formu iki kez gönderir veya pes edip ayrılır.

Pratikte bu şu anlama gelir:

• Görünür durum: Yükleme göstergesi, ilerleme çubuğu, "kaydedildi" onayı. Kullanıcı boşluğa bakıp "tıkladım mı, çalışıyor mu?" diye düşünmemeli. Örneğin bir ödeme formunda "Ödeme işleniyor..." mesajı ve butonun pasifleşmesi, hem belirsizliği kaldırır hem mükerrer gönderimi önler.
• Net hata mesajları: Hata mesajları yalnızca "bir şeyler ters gitti" demez; sorunun ne olduğunu ve nasıl çözüleceğini söyler. "Geçersiz giriş" yerine "E-posta adresi @ işareti içermeli" gibi. İyi bir hata mesajı kullanıcıyı suçlamaz, ona yol gösterir; mümkünse hatayı oluştuğu alanın hemen yanında, kırmızı renk yanı sıra metinle de gösterir (renk tek başına bilgi taşımamalı).
• Geri alınabilirlik: Kullanıcı yanlış bir adım attığında geri dönebilmeli, kapana kısılmamalıdır. "İptal et", "geri al", "önceki adıma dön" gibi çıkışlar, kullanıcının korkmadan denemesini sağlar. Nielsen bunu "kullanıcı kontrolü ve özgürlüğü" ilkesiyle anlatır.
• Hata önleme: En iyi hata mesajı, hiç oluşmayan hatadır. Tarih seçicide geçmiş tarihi tıklanamaz yapmak, telefon alanında yalnızca rakam kabul etmek gibi tasarım kararları, hatayı baştan engeller.

Bu geri bildirim ilkesi, özellikle mikro etkileşimlerde hayata geçer: hover durumları, buton tıklama geri bildirimi, başarı işaretleri. Müşterilerimizde gördüğümüz kadarıyla işlevsel mikro etkileşimler — dekoratif olanlar değil — etkileşimi belirgin biçimde artırır; sektör çalışmaları bu artışı yaklaşık %45 düzeyinde gösteriyor (rakam çalışmaya göre değişir, kesin bir garanti değil yön gösterici bir bulgudur). Buradaki anahtar kelime "işlevsel"dir: animasyon kullanıcıya rehberlik etmiyorsa yalnızca dikkat dağıtır, performansı düşürür ve INP gibi etkileşim metriklerini olumsuz etkiler.

Hick Yasası: Seçenek Çoğaldıkça Karar Yavaşlar

Hick Yasası net bir gerçeği söyler: seçenek sayısı arttıkça kullanıcının karar verme süresi artar. Tasarımdaki sonucu basittir — menüyü, seçenekleri ve karar yükünü sadeleştir. Kullanıcıya aynı anda 14 menü başlığı, 6 farklı CTA ve sayfa boyunca dört ayrı yöne giden bağlantılar sunarsanız, karar veremez ve çoğu zaman hiçbir şey yapmadan ayrılır. Bu durumu "karar felci" diye adlandırırız: çok seçenek, paradoksal biçimde, hiç seçim yapılmamasına yol açar.

Hick Yasası'nı uyguladığımız tipik kararlar:

• Menü sadeleştirme: Ana navigasyonda mümkün olan en az başlık. İkincil bağlantılar alt menülere veya footer'a iner. Pratikte üst menüyü genellikle beş ila yedi ana başlıkla sınırlı tutmaya çalışırız; geri kalanı bağlama göre alt menü, mega menü veya footer'a yerleşir.
• Tek birincil CTA: Her ekranda gözün gideceği tek net birincil eylem olur (teklif al, demo iste, sepete ekle). İkincil eylemler görsel olarak daha sönük kalır — örneğin birincil buton dolu/renkli, ikincil buton yalnızca çerçeveli olur. İki butonu da eşit ağırlıkta vurgularsanız, ikisini de zayıflatırsınız.
• Form alanlarını azaltma: Her ekstra form alanı bir karar ve bir sürtünme noktasıdır. Sadece gerçekten gereken bilgiyi isteriz. "İleride lazım olabilir" diye eklenen alanlar, dönüşümü düşürür; o bilgiyi sonradan, kullanıcı dönüşüm yaptıktan sonra istemek genelde daha sağlıklıdır.
• Aşamalı açığa çıkarma (progressive disclosure): Karmaşık bir süreci tek ekranda yüzlerce seçenekle göstermek yerine, kullanıcıya adım adım yalnızca o an gerekli olanı sunarız. Uzun bir formu mantıklı adımlara bölmek, hem Hick yükünü azaltır hem tamamlanma oranını artırır.

Bu ilke, dönüşüm odaklı sayfalarda hayati önemdedir. Tek net değer önerisi, tek birincil CTA ve sadeleştirilmiş seçenek setiyle kurulan sayfaların neden daha iyi dönüştüğünü dönüşüm odaklı landing page rehberinde ayrıntılı ele alıyoruz. Hick Yasası'nın altın kuralı şudur: her öğeyi eklemeden önce "bu, kullanıcıyı hedefe yaklaştırıyor mu yoksa kararını mı geciktiriyor" diye sorun.

Fitts Yasası: Önemli Butonlar Büyük ve Yakın Olmalı

Fitts Yasası, bir hedefe ulaşma süresinin hedefin uzaklığı ve büyüklüğüyle ilişkili olduğunu söyler. Sade sonucu şudur: sık kullanılan ve önemli butonlar büyük ve kullanıcının eline/imlecine yakın olmalıdır. Küçük, sıkışık ve sayfanın uzak köşesine atılmış bir "Satın Al" butonu, kullanıcıyı yorar ve dönüşümü düşürür.

Bu yasa özellikle mobilde belirleyicidir. Dokunmatik ekranda parmak bir imleçten kalındır; küçük hedefler yanlış dokunmaya yol açar. WCAG 2.2'nin getirdiği yeni başarı kriteri SC 2.5.8 (AA seviyesi) minimum dokunmatik hedef boyutunu 24x24 CSS pikseli (veya yeterli boşluk) olarak belirler; Apple Human Interface Guidelines 44x44 pt, Google Material 48x48 dp önerir, WCAG'nin daha yüksek AAA kriteri (2.5.5) ise 44x44 pikseli işaret eder. Bu farklı eşikleri tek bir karar tablosunda toplamakta fayda var:

Pratikte biz, AA tabanını (24px) "yasal asgari" kabul ediyor, ama gerçek dünyada en az 44-48px dokunmatik hedef kullanmayı standart benimsiyoruz; çünkü asgariyi geçmek "iyi" değil yalnızca "uygun" demektir. Hedefleri büyütürken aralarındaki boşluğa da dikkat ederiz: iki buton yeterince büyük ama bitişikse, yanlış dokunma yine kaçınılmazdır. Bu konuyu mobil bağlamında derinleştirdiğimiz mobil uyumlu responsive web tasarım rehberini incelemenizi öneririz.

Fitts Yasası'nın bir diğer pratik sonucu, ekran kenarları ve köşelerinin masaüstünde "sonsuz büyüklükte" hedefler gibi davranmasıdır (imleç oraya kolayca dayanır, çünkü kenardan dışarı kaçamaz). Bu yüzden masaüstünde önemli kalıcı eylemleri kenar/köşe bölgelerine yerleştirmek erişimi kolaylaştırır. Mobilde ise bunun karşılığı başparmak bölgesidir: kullanıcı telefonu tek elle tuttuğunda ekranın alt-orta kısmı en kolay erişilen alandır; bu yüzden mobilde birincil eylemleri çoğu zaman ekranın altına, başparmağın doğal yörüngesine yerleştiririz. Üst köşeye atılmış kritik bir buton, mobilde gerçek bir erişim sorunudur.

Kullanıcı Akışı (User Flow): Hedefe Giden Yolu Kurmak

Kullanıcı akışı, bir kişinin siteye girdiği andan hedefini tamamladığı (veya bıraktığı) ana kadar izlediği adımların tümüdür. İyi UX, bu yolu mümkün olan en az adımda, en az kafa karışıklığıyla ve en az sürtünmeyle kurar. Her gereksiz adım, her belirsiz buton, her beklenmedik soru kullanıcıyı bir miktar kaybettirir. Akışı tasarlarken "kullanıcı en iyi senaryoda ne yapar" sorusunun yanında, "yolda nerede tereddüt eder, nerede vazgeçer" sorusunu da sorarız.

Akış tasarımında dayandığımız ilkeler birbirini tamamlar:

• Görsel hiyerarşi: Boyut, renk, kontrast, boşluk ve konum ile önem sırası kurulur. Göz önce en önemli öğeye gitmelidir — genelde başlık ve ana CTA. Bu hiyerarşi, kullanıcının akışta "sonraki adımı" sezgisel bulmasını sağlar. Hiyerarşi yoksa her şey eşit derecede önemli görünür; her şeyin önemli olduğu yerde aslında hiçbir şey önemli değildir.
• Tutarlılık ve Jakob Yasası: Aynı eylem her yerde aynı görünmeli; çünkü kullanıcılar diğer sitelerden öğrendikleri kalıpları sizin sitenizde de bekler (Jakob Yasası). Sepet ikonunu sağ üstte, menüyü üst barda, logoyu sol üstte (ve ana sayfaya götürmesini) aramak gibi. Kalıbı kırmak "yaratıcılık" değil çoğu zaman sürtünme üretir; özgünlük markanın sesinde ve içeriğinde olmalı, kullanıcının ezbere bildiği gezinme kalıplarında değil.
• Sürtünmeyi azaltma: Gereksiz adımları, zorunlu kayıt duvarlarını ve uzun formları akıştan çıkarırız. Örneğin e-ticarette "misafir olarak satın al" seçeneği sunmak, kullanıcıyı sepette üyelik zorunluluğuyla durdurmaktan çok daha iyi dönüşür. Mobilde sürtünme azaltmak; otomatik doldurma (autofill), doğru klavye tipi (e-posta alanında @ klavyesi, telefon alanında numara klavyesi) ve tek elle erişilebilir buton konumu demektir.
• Güven öğeleri akış üzerinde: Referanslar, müşteri logoları, sertifikalar ve sosyal kanıt, kullanıcının karar anında tereddüt ettiği noktalara yerleştirilir. Güven sinyalini yanlış yere koymak — örneğin yalnızca anasayfaya koyup ödeme adımında hiç vermemek — etkisini zayıflatır; güven, tereddüdün yaşandığı yerde, yani genelde ödeme/form adımında en çok işe yarar.

Akışın somut bir örneği faydalı olur. Bir kurumsal teklif formu akışını üç kötü ve iyi karar üzerinden karşılaştıralım:

Bu küçük kararların toplamı, aynı trafikten gelen sonucu kökten değiştirir. Akıştaki sürtünmeyi azaltmanın ölçülebilir karşılığı dönüşüm oranıdır; e-ticarette bu yolculuğun nasıl optimize edileceğini dönüşüm oranı artırma (CRO) rehberinde derinlemesine işliyoruz. Unutulmaması gereken nokta şudur: hız da bir UX ilkesidir. Bir sayfa yavaş açılıyorsa, en kusursuz akış bile boşa gider; LCP yavaşsa kullanıcı daha hedefini görmeden gider, INP yüksekse butona bastığında "tepki yok" sanır. Bu yüzden Core Web Vitals (LCP, INP, CLS) ile kullanıcı akışını birlikte düşünmek gerekir; performansı ihmal eden bir UX tasarımı eksiktir.

Erişilebilirlik de Bir UX İlkesidir, Ayrı Bir Lüks Değil

Sık yapılan bir ayrım hatası, erişilebilirliği (accessibility / a11y) UX'ten ayrı, "engelli kullanıcılar için ekstra bir özellik" sanmaktır. Oysa erişilebilirlik, kullanıcı odaklılığın doğal bir uzantısıdır: klavyeyle gezilebilen, yeterli kontrasta sahip, anlamlı etiketli bir arayüz herkes için daha kullanılabilir bir arayüzdür. Yeterli kontrast yalnızca görme güçlüğü çekenlere değil, güneş altında telefonuna bakan herkese yardımcı olur; net form etiketleri yalnızca ekran okuyucu kullananlara değil, aceleyle dolduran herkese yardımcı olur.

2026 itibarıyla erişilebilirlik artık bir tercih değil, çoğu bağlamda altyapı haline geldi. Avrupa Erişilebilirlik Yasası (EAA) 28 Haziran 2025'te yürürlüğe girdi ve EN 301 549 üzerinden WCAG 2.1 AA uyumunu birçok dijital hizmet için zorunlu kıldı; AB'ye ürün veya hizmet satan Türkiye firmaları da (e-ticaret dahil) kapsama girebilir. Bunun UX kararlarına yansıması nettir: gövde metni için en az 4.5:1 kontrast oranı, görünür odak halkası, renk tek başına bilgi taşımaması, her görsele anlamlı alt metni, klavyeyle tam gezilebilirlik artık "iyi tasarım"ın değil "geçerli tasarım"ın parçasıdır. Bu konunun tüm yasal ve teknik çerçevesini web erişilebilirliği rehberimizde ayrıntılı ele alıyoruz. Kısa not olarak şunu ekleyelim: erişilebilir bir site genellikle daha iyi semantik HTML'e sahip olduğundan SEO açısından da kazançlıdır — yani a11y, UX ve SEO çoğu zaman aynı yöne çeker.

İlkeleri Sahaya İndirmek: Nereden Başlamalı?

Bu ilkeler kulağa soyut gelebilir, ama hepsi tek bir pratik soruya hizmet eder: kullanıcı hedefine ulaşabiliyor mu? Bir mevcut siteyi değerlendirirken biz şu sırayla bakarız: önce strateji ve hedef net mi, sonra bilgi mimarisi kullanıcının zihnine uygun mu, ardından akış sürtünmesiz mi, sonra performans ve erişilebilirlik bu deneyimi destekliyor mu, en son görsel katman (UI) bu yapıyı güçlendiriyor mu. Bu sıralamayı tersine çevirmek — yani işe görsellerle başlamak — en sık karşılaştığımız ve en pahalıya mal olan hatadır, çünkü cila yanlış bir iskelet üzerinde sorunu örter ama düzeltmez.

Hızlı bir öz değerlendirme için bu sorulara dürüst yanıt vermek iyi bir başlangıçtır: Yeni bir ziyaretçi anasayfada ilk beş saniyede ne yaptığınızı ve ne yapması gerektiğini anlıyor mu? Aradığı bilgiyi en fazla iki-üç tıklamada buluyor mu? Mobilde butonlarınız tek elle, yanlış dokunmadan basılabiliyor mu? Bir form hatasında ne yapacağını biliyor mu? Bu soruların herhangi birine "emin değilim" diyorsanız, orada ölçülebilir bir dönüşüm kaybı yaşıyor olma ihtimaliniz yüksektir.

Sitenizin kullanıcı odaklılık, bilgi mimarisi ve kullanılabilirlik açısından nerede durduğunu somut olarak görmek isterseniz, ücretsiz analiz ve teklif sihirbazımızla başlayabilir veya bu ilkeleri baştan sona uyguladığımız web ve mobil UI/UX tasarımı hizmetimizi inceleyebilirsiniz. Doğru kurulmuş bir UX, yalnızca daha hoş bir site değil; daha çok lead, daha yüksek dönüşüm ve daha az terk demektir.

UI İlkeleri Nelerdir? Görsel Hiyerarşi, Tipografi ve Renk

UI ilkeleri, bir arayüzün görsel katmanını öngörülebilir ve kullanılabilir kılan kurallardır: kullanıcının gözünü doğru sıraya yönlendiren görsel hiyerarşi, metni okunabilir kılan tipografi, hem estetik hem erişilebilir olması gereken renk ve kontrast, tahmin edilebilirliği sağlayan tutarlılık, nefes aldıran boşluk ve tüm bunları ölçeklenebilir kılan bileşen sistemi. Kısaca UI, kullanıcının ne göreceğine değil, neyi önce göreceğine ve nasıl anlamlandıracağına karar verir. Burada altını çizmek gerekir: iyi UI, kötü bir UX akışını kurtaramaz; UI görünüm, UX iskelettir. Ama doğru kurgulanmış UI, sağlam bir UX'in dönüşüme dönüşmesini sağlayan katmandır. Bu yazıda altı temel UI ilkesini somut metrikler ve uygulanabilir kararlarla ele alıyoruz. UI ile UX arasındaki farkı daha temelden okumak isterseniz UI/UX tasarım nedir, nasıl yapılır yazısının başına dönmek faydalı olacaktır.

Bu altı ilkeyi tek bir cümlede çerçevelersek: hiyerarşi önceliği, tipografi okunabilirliği, renk anlamı, tutarlılık öngörülebilirliği, boşluk nefesi ve bileşen sistemi de bunların ölçeklenebilirliğini kurar. Tek tek güzel görünen ama birbiriyle konuşmayan ekranlar değil, bu altı ilkenin tutarlı uygulandığı bütünsel bir sistem kullanıcıyı dönüşüme taşır. Aşağıdaki tabloda her ilkenin neyi çözdüğünü, somut ölçütünü ve atlandığında ortaya çıkan tipik hatayı bir arada veriyoruz.

Görsel hiyerarşi: göz önce nereye gitmeli?

Görsel hiyerarşi, bir sayfadaki öğelerin önem sırasını boyut, renk, kontrast, boşluk ve konum aracılığıyla kurma sanatıdır. Amaç nettir: kullanıcının gözü sayfaya düştüğünde ilk olarak en önemli öğeye gitmeli — bu çoğu zaman ana başlık ile birincil eylem çağrısıdır (CTA). Müşterilerimizde sık gördüğümüz hata, her şeyi vurgulamaya çalışmaktır; her şey vurgulanınca hiçbir şey vurgulanmamış olur ve kullanıcı nereden başlayacağını bilemez. Hiyerarşinin sağlamasını yapmanın hızlı bir yolu vardır: ekrana üç saniye bakıp gözünüzü kapatın; aklınızda kalan ilk öğe, sayfanın sizi yönlendirmek istediği yer olmalıdır. Aklınızda hiçbir şey kalmıyorsa ya da yanlış öğe kalıyorsa hiyerarşi kurulmamış demektir.

Hiyerarşiyi kuran araçları somut olarak ele alalım:

• Boyut ve ağırlık: Daha büyük ve daha kalın öğeler daha önemli okunur. Bir H1 başlık gövde metninden belirgin biçimde büyük, ana CTA butonu ikincil butonlardan daha iri olmalıdır. Tipik bir ölçek mantığı, başlıktan gövdeye doğru azalan ve birbiriyle orantılı (örneğin 1.25 veya 1.333 katsayılı bir tip ölçeği) bir basamak dizisidir; rastgele boyutlar yerine bu kademeli yapı, göze düzen hissi verir.
• Renk ve kontrast: Yüksek kontrastlı, marka vurgu rengindeki bir buton göze ilk çarpan öğe olur. Bu yüzden bir ekranda tek bir baskın "aksiyon rengi" olmalı; her butonu renklendirirseniz öncelik kaybolur. İkincil eylemleri "hayalet buton" (yalnızca kenarlıklı, dolgusuz) ya da metin bağlantısı olarak vermek, birincil CTA'nın baskınlığını korur.
• Boşluk (negatif alan): Bir öğenin etrafındaki boşluk arttıkça o öğe daha önemli ve "premium" algılanır. Boşluk, içeriği gruplamanın ve nefes aldırmanın en güçlü ama en az kullanılan aracıdır. Pahalı markaların sayfalarındaki ferahlık tesadüf değildir; boşluk, ürünü değerli gösterir.
• Konum: Batı dillerinde göz genelde sol-üstten başlar ve F ya da Z deseninde tarar. Kritik mesajı ve birincil CTA'yı üst-katlamaya (above the fold) yerleştirmek bu yüzden önemlidir. Uzun metin ağırlıklı sayfalarda göz F desenini, görsel ve kısa bloklardan oluşan açılış sayfalarında ise Z desenini izleme eğilimindedir; tasarımı içeriğin türüne göre bu doğal tarama yoluna oturtmak gerekir.

Görsel hiyerarşi yalnızca estetik bir tercih değil, doğrudan dönüşümü etkileyen bir karardır. Net bir değer önerisi, tek baskın CTA ve sayfanın geri kalanından açıkça ayrışan bir aksiyon alanı, ziyaretçinin "ne yapmam gerekiyor?" sorusunu saniyeler içinde yanıtlar. Burada Hick Yasası da işin içine girer: kullanıcıya aynı anda sunulan seçenek arttıkça karar süresi uzar; bu yüzden üst-katlamada tek bir net birincil eylem bırakmak, ikincil yolları (telefon, demo, blog) görsel olarak geriye çekmek dönüşümü kolaylaştırır. Bu mantığın derinlemesine uygulanışını dönüşüm odaklı landing page rehberi yazısında inceleyebilirsiniz; orada görsel hiyerarşinin tek bir hedefe nasıl odaklandığını adım adım gösteriyoruz. Hiyerarşinin yanlış kurulduğu en yaygın belirti yüksek hemen çıkma oranıdır; ziyaretçi ne yapacağını anlayamadığında en kolay eylemi seçer ve sekmeyi kapatır.

Tipografi: metni nasıl okunabilir kılarsınız?

Tipografi, bir arayüzdeki metnin okunabilirliğini ve görsel düzenini belirleyen kurallar bütünüdür; çoğu web sitesinde içeriğin neredeyse tamamı metin olduğu için tipografi, UI'ın en çok hissedilen ama en az fark edilen katmanıdır. İyi tipografi görünmez: kullanıcı yorulmadan okur. Kötü tipografi ise her satırda kendini hatırlatır. Tipografiyi "yazı tipi seçmek" sanmak yaygın bir yanılgıdır; asıl iş, ölçek, ritim ve boşluk kararlarındadır.

Pratik referans değerlerimiz şunlardır (yaklaşık, içeriğe ve fonta göre ayarlanır):

• Gövde metni boyutu: Taban olarak yaklaşık 16px önerilir. Daha küçük gövde metni, özellikle mobilde okunabilirliği düşürür ve kullanıcıyı zoom yapmaya zorlar. Mobilde tarayıcının istenmeyen otomatik yakınlaştırma davranışını önlemek için form alanlarında da en az 16px taban yazı boyutu pratik bir kuraldır.
• Satır uzunluğu: Satır başına yaklaşık 50-75 karakter ideal kabul edilir. Çok uzun satırlar gözün bir sonraki satırı bulmasını zorlaştırır; çok kısa satırlar okuma ritmini bozar. Geniş ekranlarda metin sütununa bir maksimum genişlik vermek (örneğin içerik bloğunu sınırlamak), satırların aşırı uzamasını engeller.
• Satır aralığı (line-height): Gövde metni için yaklaşık 1.4-1.6 değeri metne nefes aldırır ve okuma akışını kolaylaştırır. Başlıklarda satır aralığı daha sıkı (1.1-1.25) tutulabilir; büyük puntoda gevşek satır aralığı başlığı dağıtır.
• Yazı tipi sayısı: En fazla 2-3 yazı tipiyle sınırlı kalın — genellikle bir başlık fontu, bir gövde fontu yeterlidir. Fazlası tutarsızlık ve görsel kirlilik üretir. Tek bir aileyi farklı kalınlık ve boyutlarıyla kullanmak, çoğu projede iki ayrı fonttan daha temiz sonuç verir.
• Hizalama ve vurgu: Uzun gövde metnini sola yaslı bırakmak (iki yana yaslamaktan kaçınmak) Türkçede oluşan düzensiz kelime boşluklarını önler. Vurgu için her cümleyi koyu yapmak yerine yalnızca anahtar terimleri öne çıkarmak, vurgunun anlamını korur.

Tipografi aynı zamanda bir performans ve erişilebilirlik konusudur. Yazı tipi yükleme, en büyük içeriğin görünme süresini (LCP) doğrudan etkiler; bu yüzden kritik fontu preload etmek ve font-display: swap kullanmak önerilir; böylece metin font yüklenene kadar gizli kalmaz, hemen görünür. Üstelik fontun yüklenmesiyle değişen satır metrikleri beklenmedik düzen kaymasına (CLS) yol açabilir; bu durumda @font-face üzerindeki size-adjust descriptor'ı kaymayı örneğin 0,15'ten 0,02'ye kadar düşürebilir. Çok sayıda font ağırlığı yüklemek hem LCP'yi geciktirir hem aktarım boyutunu büyütür; gerçekten kullanılan kalınlıklarla sınırlı kalmak ve mümkünse modern, alt küme (subset) edilmiş font formatları kullanmak gerekir. Core Web Vitals eşiklerini hatırlatmak gerekirse: LCP için 2,5 saniye, CLS için 0,1, INP için 200 milisaniye "iyi" sınırlarıdır (75. yüzdelik). Tipografinin hız tarafını derinleştirmek için site hızı ve SEO: Core Web Vitals rehberi yazısına göz atabilir, ölçüm tarafını da PageSpeed Insights nedir, nasıl iyileştirilir yazısıyla tamamlayabilirsiniz.

Türkiye bağlamında tipografinin özel bir boyutu daha var: Türkçe karakter desteği. Seçtiğiniz font, ç, ğ, ı, İ, ö, ş, ü karakterlerini ve özellikle noktalı/noktasız I ayrımını doğru göstermelidir. Bazı popüler fontlarda "İ/ı" sorunları yaşanır; bu yüzden font seçimini gerçek Türkçe metinle test etmek şarttır. Test ederken büyük harfli başlıklara özellikle dikkat edin: noktalı büyük İ'nin yanlış küçültülmesi (örneğin "İstanbul" yerine "Istanbul") hem marka algısını hem erişilebilirliği zedeler. Sayfanın lang="tr" tanımı, hem erişilebilirlik (ekran okuyucunun doğru telaffuzu) hem de doğru büyük/küçük harf dönüşümü için gereklidir; ayrıca karakter kodlamasının UTF-8 olması zorunludur. Bu küçük ama kritik ayrıntılar, yerel kullanıcıya "bu site bizim için yapılmış" hissi verir.

Renk ve kontrast: erişilebilir bir palet nasıl kurulur?

Renk, bir arayüzde marka kimliğini taşır, hiyerarşi kurar ve duygu yaratır; ancak rengin en kritik UI sorumluluğu okunabilirlik, yani kontrasttır. Burada öznel beğeni değil, ölçülebilir bir standart devreye girer: WCAG AA kriterine göre gövde metni ile arka planı arasındaki kontrast oranı en az 4.5:1, büyük metin için en az 3:1 olmalıdır. Bu eşiğin altında kalan açık gri üzerine açık gri gibi "şık" görünen kombinasyonlar, düşük görüşlü kullanıcılar ve parlak güneş altındaki mobil ekranlar için okunamaz hale gelir. Kontrast yalnızca metni değil; buton kenarlarını, form alanı sınırlarını ve odak halkalarını da kapsar — kullanıcı bir alanın tıklanabilir olduğunu görebilmelidir.

İkinci temel kural, rengin tek başına bilgi taşımamasıdır. Bir formda hatalı alanı yalnızca kırmızıyla, geçerli alanı yalnızca yeşille işaretlerseniz, renk körü kullanıcılar (erkeklerin önemli bir bölümü kırmızı-yeşil ayrımında zorlanır) bu bilgiyi alamaz. Çözüm: renge ek olarak bir ikon, metin etiketi ya da desen kullanmak. "Hata" durumunu kırmızı çerçeve + uyarı ikonu + açıklayıcı metinle birlikte vermek, hem erişilebilir hem daha net olur. Aynı ilke grafiklerde de geçerlidir: çizgileri yalnızca renkle değil, desen veya doğrudan etiketle ayırmak gerekir.

Müşteri projelerimizde uyguladığımız pratik palet mantığı şöyledir:

• Tek baskın aksiyon rengi: Birincil CTA için ayrılmış, yüksek kontrastlı tek bir renk. Bu renk "tıkla" demektir; başka yerde dekoratif amaçla kullanılmaz ki anlamı aşınmasın. Marka rengi düşük kontrastlıysa, aynı tonun daha koyu bir varyantını "aksiyon" rengi olarak ayırmak iyi bir çözümdür.
• Nötr taban: Arka plan, metin ve kenarlıklar için bir gri/nötr skala. Arayüzün büyük çoğunluğu bu nötrlerden oluşur. Saf siyah (#000) yerine çok koyu bir gri, parlak ekranlarda gözü daha az yorar.
• Anlamsal renkler: Başarı (yeşil), uyarı (sarı), hata (kırmızı), bilgi (mavi) için tutarlı ve her zaman metin/ikonla desteklenen renkler. Bu renkler her ekranda aynı anlama gelmeli; bir yerde yeşil "başarı", başka yerde "indirim" olursa anlam bulanır.
• Koyu mod uyumu: 2026'da açık/koyu tema desteği artık beklenen bir özellik. Koyu modda da aynı kontrast kurallarının korunması gerekir; OLED ekranlarda koyu arayüz, açık temaya göre bir miktar daha az enerji tüketebilir. Koyu modda doğrudan açık paleti tersine çevirmek yetmez; renkleri ayrı ayrı kalibre etmek, özellikle aksiyon ve anlamsal renkleri koyu zeminde tekrar kontrast testinden geçirmek gerekir.

Kontrast ve renk seçimleri tahmine değil ölçüme dayanmalıdır; tasarım aşamasında kontrast oranını araçlarla doğrulamak, sonradan erişilebilirlik denetiminde sürpriz yaşamaktan iyidir. Erişilebilirlik standartlarının tamamını — kontrast, alt metni, klavye gezilebilirliği, görünür odak halkası — ve EAA (28 Haziran 2025'te yürürlüğe giren Avrupa Erişilebilirlik Yasası) gibi yasal çerçeveyi web erişilebilirliği nedir, nasıl sağlanır yazısında derinlemesine işliyoruz. Renk ve kontrast, o standartlar bütününün belki de en görünür ama en sık ihmal edilen parçasıdır; WebAIM'in yıllık taramalarında düşük metin kontrastı yıllardır en sık rastlanan erişilebilirlik hatası olarak öne çıkıyor. AB'ye ürün veya hizmet satan e-ticaret firmaları için bu artık yalnızca iyi tasarım değil, doğrudan bir uyum yükümlülüğüdür.

Tutarlılık: aynı şey her yerde aynı görünmeli

Tutarlılık, aynı eylemin ve aynı bilginin arayüzün her noktasında aynı biçimde sunulması ilkesidir: butonlar aynı görünür, renkler aynı anlama gelir, terimler değişmez. Bunun arkasında Jakob Yasası vardır: kullanıcılar zamanlarının çoğunu başka sitelerde geçirir ve sizin sitenizin de o sitelerde öğrendikleri kalıplar gibi davranmasını bekler. Yani alışılmış kalıpları yeniden icat etmek değil, onlara saygı göstermek daha kullanılabilir bir arayüz üretir. Sepet ikonunun sağ üstte olması, altı çizili mavi metnin bağlantı olması, logoya tıklanınca ana sayfaya dönülmesi gibi kalıplar "yaratıcılık adına" bozulmamalıdır; bu kalıpları kırmak özgünlük değil, sürtünme üretir.

Tutarlılığı somutlaştıran alanlar:

• Görsel tutarlılık: Birincil buton sitenin her yerinde aynı renk, köşe yuvarlaklığı ve dolguya sahip olmalı. Aynı işlevin bir sayfada yeşil, diğerinde mavi buton olması kullanıcıyı duraksatır.
• Davranışsal tutarlılık: Aynı eylem her yerde aynı sonucu vermeli. Bir yerde "Kaydet" anında kaydederken başka yerde onay penceresi açıyorsa güven sarsılır.
• Terim tutarlılığı: Aynı kavrama bir yerde "Sepet", başka yerde "Çanta" demek bilişsel yük yaratır. Tek bir terminolojiye bağlı kalın. Bu özellikle çok yazarlı kurumsal sitelerde ve e-ticarette önemlidir.
• İç ve dış tutarlılık dengesi: İç tutarlılık sitenizin kendi içindeki birliktir; dış tutarlılık ise sektörün yerleşik kalıplarına uyumdur. İkisi çatışırsa, çok güçlü bir gerekçeniz yoksa yerleşik kalıbı korumak daha güvenlidir.

Tutarlılık aynı zamanda bir geri bildirim meselesidir. Nielsen'in sezgisel ilkelerinden biri sistem durumunun her zaman görünür olmasıdır: kullanıcı bir butona bastığında yükleme göstergesi, başarıda onay işareti, hatada net ve çözüm önerili bir mesaj görmelidir. "Bir hata oluştu" gibi içi boş mesajlar yerine, ne olduğunu ve kullanıcının ne yapması gerektiğini söyleyen mesajlar yazmak gerekir. Bu mikro etkileşimler kullanıcıya "sistem seni dinliyor" hissi verir — araştırmalar işlevsel mikro etkileşimin etkileşimi yaklaşık %45 artırdığını gösteriyor — ama dekoratif değil işlevsel olmalıdır. Tutarlı butonlar ve hedefler ayrıca Fitts Yasası ile birleşir: bir hedefe ulaşma süresi, hedefin uzaklığı ve büyüklüğüyle ilişkilidir; bu yüzden sık kullanılan, önemli butonlar büyük ve kolay ulaşılır olmalı; mobilde başparmağın doğal eriştiği alt bölge bu açıdan değerlidir. Hick Yasası da tabloyu tamamlar: seçenek sayısı arttıkça karar süresi uzar, bu yüzden menüleri ve seçenekleri sadeleştirmek tutarlılığın doğal uzantısıdır.

Boşluk ve bileşen sistemi: arayüzü ölçeklenebilir kılmak

Boşluk (whitespace / negatif alan), öğeler arasındaki ve etrafındaki kasıtlı boşluktur; "boş" görünse de aslında en aktif tasarım araçlarından biridir. Boşluk üç işi birden yapar: ilişkili öğeleri gruplar (yakındaki şeyler birlikte algılanır — Gestalt yakınlık ilkesi), önemli öğelere vurgu kazandırır (etrafı ferah olan öğe öne çıkar) ve metne okuma rahatlığı verir. Müşterilerimizde sık gördüğümüz "her piksele bir şey sığdırma" eğilimi, kullanıcının gözünü yorar ve hiyerarşiyi yok eder; oysa stratejik boşluk, içeriği daha değerli ve daha okunur gösterir. Boşluğu "kaybedilen alan" gibi görmek yerine, içeriği yöneten görünmez bir ızgara gibi düşünmek gerekir.

Boşluğun tutarlı olması için bir aralık skalası (spacing scale) kullanmak gerekir — örneğin 4 veya 8 piksel tabanlı bir sistem (4, 8, 16, 24, 32...). Rastgele "şuraya 13px, buraya 19px" demek yerine sınırlı ve katlanan değerlerden seçim yapmak, tüm arayüzde görsel ritmi tutarlı kılar. Aynı mantık modern CSS ile fluid (akışkan) hâle de getirilebilir: clamp() ile tipografi ve boşluk, ekran genişliğine göre alt ve üst sınır arasında yumuşakça ölçeklenir; container queries ise bir bileşenin, sayfanın değil içinde bulunduğu kabın genişliğine göre yeniden düzenlenmesini sağlar. Bu, boşluğun tipografinin satır aralığı ve dokunmatik hedef boyutlarıyla da uyum içinde çalışmasını kolaylaştırır: WCAG 2.2'nin SC 2.5.8 kriteri dokunmatik hedefler için minimum 24x24 CSS piksel (veya yeterli boşluk) ister; pratikte parmak dostu deneyim için en az 44-48px hedeflemek doğru olur (Apple 44x44 pt, Google Material 48x48 dp önerir). Boşluk, işte bu hedeflerin birbirine yapışmadan, yanlış dokunmaya yol açmadan yerleşmesini sağlar. Mobil-öncelikli düzenin nasıl kurulduğunu ve breakpoint mantığını mobil uyumlu responsive web tasarım rehberi yazısında ayrıntılı ele alıyoruz.

Tüm bu ilkeleri tek tek, sayfa sayfa uygulamak ölçeklenmez. İşte burada bileşen sistemi (design system) devreye girer. Bileşen sistemi, butonlar, form alanları, kartlar, başlıklar, renk token'ları, tipografi ölçeği ve boşluk skalasının tek bir merkezi kaynakta tanımlandığı, yeniden kullanılabilir bir kütüphanedir. Faydaları somuttur:

• Tutarlılık otomatik gelir: Buton bir kez doğru tanımlandığında, her sayfada aynı görünür; tutarsızlık ihtimali baştan ortadan kalkar.
• Erişilebilirlik bir kez çözülür: Kontrast, odak halkası, hedef boyutu bileşen düzeyinde doğru kurulursa, o bileşenin her kullanımı erişilebilir olur. Bir kez doğru yapılan erişilebilir form alanı, yüzlerce sayfada tekrar tekrar doğru olur.
• Hız ve bakım: Marka rengini değiştirmek mi gerekti? Token'ı güncellersiniz, tüm site uyum sağlar. Bu, web sitesi yenileme süreçlerini de hızlandırır.
• Tasarım-geliştirme ortak dili: Tasarımcı ve geliştirici aynı bileşen ve aynı token'lar üzerinden konuşur; "az daha sola" gibi belirsizlikler yerine "spacing-16" gibi net referanslar kullanılır. Bu ortak dil, teslimat sürtünmesini ve "tasarımda başka, kodda başka" sorununu büyük ölçüde ortadan kaldırır.

Bileşen sistemi yaklaşımı, modern framework'lerle (React/Next.js, Vue, Astro) doğal olarak örtüşür; çünkü bu framework'ler zaten bileşen temelli düşünür. Bir tasarım sistemi her projede aynı ağırlıkta gerekmez: hızlı yayına çıkacak küçük bir tanıtım sitesinde hafif bir stil rehberi yeterken, çok sayfalı, çok ekipli, dönüşüm-kritik ve uzun ömürlü projelerde tam bir bileşen kütüphanesi yatırımı kendini fazlasıyla geri öder; başlangıçta zaman alsa da uzun vadede hem tutarlılığı hem hızı garanti eder. Hangi altyapının bu ölçek için doğru olduğunu değerlendirirken hazır site mi özel yazılım mı karşılaştırmamız yol gösterici olabilir. Bu noktada ilkeleri stratejiyle birleştiren profesyonel bir bakış değer katar; web ve mobil UI/UX tasarımı hizmetimiz tam olarak bu bütünlüğü — hiyerarşi, tipografi, renk, tutarlılık ve ölçeklenebilir bileşen sistemini — kurmaya odaklanır. Mevcut arayüzünüzün bu ilkelere ne kadar uyduğunu görmek isterseniz ücretsiz analiz üzerinden bir değerlendirme talep edebilir; iyi bir UI'ın temel kriterlerini ise iyi web tasarımı nasıl olmalı yazısında bütüncül olarak bulabilirsiniz.

Dönüşüm Odaklı UI/UX Tasarımı Nedir?

Dönüşüm odaklı UI/UX tasarımı, bir sayfanın yalnızca güzel görünmesini değil; ziyaretçiyi tanımlı bir hedefe (form doldurma, teklif isteme, satın alma, demo planlama) en az sürtünmeyle ulaştırmasını amaçlayan tasarım yaklaşımıdır. Kısacası estetik bir araçtır, amaç değil: ölçtüğümüz şey dönüşüm oranıdır. Müşterilerimizde sık gördüğümüz tablo, tasarımı "beğenilen" ama "iş yapmayan" bir vitrin gibi kurmaktır. Oysa dönüşüm odaklı tasarımda her bileşen, "bu öğe kullanıcıyı hedefe yaklaştırıyor mu, uzaklaştırıyor mu?" sorusuyla yerleştirilir. Bu, UI ve UX'in birlikte çalıştığı en kritik alandır: UX akışı ve mantığı, UI ise o akışı görsel olarak yönlendiren katmanı kurar. İyi bir UI, kötü kurgulanmış bir akışı kurtaramaz; bu yüzden işe önce yolculuktan, sonra görselden başlanır.

Bu yaklaşımın temelinde, tasarım kararlarının varsayıma değil kullanıcı davranışına dayanması ilkesi yatar (kullanıcı odaklı tasarım, NN/g). Bir butonun rengini, bir formun alan sayısını ya da CTA metnini "bize güzel geldiği için" değil; ölçüm, test ve yerleşik kullanılabilirlik ilkeleri doğrultusunda belirleriz. Pratikte dönüşüm meselesini dört eksende ele alırız ve bu rehberin geri kalanı bu dört ekseni tek tek açar:

• CTA (eylem çağrısı): Kullanıcının atacağı tek net adımı görünür, ayrışan ve erişilebilir kılmak.
• Form tasarımı: Dönüşümün gerçekleştiği son adımdaki sürtünmeyi en aza indirmek.
• Güven öğeleri: "Bu butona basacak kadar güveniyor muyum?" tereddüdünü gidermek.
• Mikro etkileşim ve performans: Sistemin "dinlediğini" anında hissettirip bunu hızdan ödün vermeden yapmak.

Bu dört kaldıracın hepsi tek bir ortak ilkeye dayanır: sürtünmeyi azalt, netliği artır. Daha derin landing-page kurgusu için dönüşüm odaklı landing page rehberimiz, e-ticaret özelindeki oran iyileştirme taktikleri için e-ticarette dönüşüm oranı (CRO) rehberimiz bu bölümü tamamlar. Bütünsel olarak iyi tasarımın neye benzediğini ise iyi web tasarımı rehberimizde ele alıyoruz.

CTA (Eylem Çağrısı) Nasıl Tasarlanır?

CTA (call to action / eylem çağrısı), kullanıcıdan beklenen tek net adımı temsil eden butondur. Dönüşüm odaklı tasarımın merkezi öğesidir, çünkü sayfanın bütün hiyerarşisi o butona doğru akar. Temel kural: bir görünüm alanında (ekranın o anki kesiti) tek bir birincil CTA olmalı. Birden fazla eşit ağırlıkta çağrı, Hick Yasası gereği karar süresini uzatır; seçenek arttıkça kullanıcı karar vermek yerine sayfayı terk eder. İkincil eylemler (ör. "Daha fazla bilgi") varsa, görsel olarak zayıflatılmalı (outline buton, link görünümü) ki birincil eylemle yarışmasın.

Görsel hiyerarşi burada belirleyicidir: göz, boyut, renk, kontrast ve boşluk yoluyla en önemli öğeye önce gitmeli; bu öğe genelde başlık (değer önerisi) + ana CTA'dır. Pratikte uyguladığımız ilkeler şöyle:

• Kontrast: Birincil CTA, sayfanın geri kalanından net ayrışan bir renkte olmalı. Renk seçiminde WCAG AA kontrast kuralı geçerli: buton metni ile arka plan arasında en az 4.5:1 kontrast oranı (büyük metin için 3:1). Hem dönüşüm hem erişilebilirlik aynı yöne çalışır; düşük kontrastlı "şık" buton hem görülmez hem WCAG'a aykırıdır. Ayrıca rengi tek ayırt edici sinyal yapmayın: renk körü kullanıcılar için CTA, konum ve boyutla da öne çıkmalı, çünkü renk tek başına bilgi taşımamalı.
• Boyut ve konum (Fitts Yasası): Bir hedefe ulaşma süresi, hedefin büyüklüğü ve uzaklığıyla ilişkilidir. Sonuç: birincil CTA büyük ve kullanıcının doğal bakış/dokunuş yörüngesine yakın olmalı. Mobilde bu, baş parmak erişim alanına yerleştirme demektir; masaüstünde ise içeriğin okuma akışının doğal bitiş noktasına.
• Dokunmatik hedef boyutu: Mobilde CTA'lar WCAG 2.2 SC 2.5.8 gereği en az 24x24 CSS piksel olmalı; pratikte Apple HIG (44x44 pt) ve Google Material (48x48 dp) referanslarına uyarak en az 44-48px hedefliyoruz. Küçük, birbirine yapışık butonlar mobilde yanlış dokunma ve terk üretir.
• Metin: CTA metni belirsiz ("Gönder", "Tıkla") değil, eylem ve değer içermeli ("Ücretsiz teklif al", "Demo planla"). Kullanıcı tıkladığında ne olacağını metinden bilmeli; bu, geri bildirim ve güven ilkesinin parçasıdır. Birinci tekil ("Teklifimi al") gibi sahiplik bildiren ifadeler de tereddüdü azaltır.
• Üst-katlama (above the fold): Net değer önerisi ve birincil CTA, sayfa açıldığında kaydırma gerektirmeden görünür olmalı; uzun sayfalarda CTA mantıklı aralıklarla tekrar edilmeli. CTA bir kez gözden çıktıktan sonra kullanıcının onu yeniden bulmak için yukarı kaydırmak zorunda kalması bir sürtünme noktasıdır.

CTA hiyerarşisini somutlaştırmak için aşağıdaki tabloyu kullanabilirsiniz; her CTA bir "ağırlık" taşır ve aynı görünüm alanında ağırlıkların çakışmaması gerekir:

B2B bağlamında CTA genelde "satın al" değil "teklif iste / demo planla / iletişime geç"tir; çünkü satış döngüsü uzundur, çok karar vericilidir ve site eğitim-güven rolü oynar. Bu yüzden CTA metnini satış aşamasına göre seçeriz: üst-huni içeriğinde "Rehberi indir" gibi düşük taahhütlü bir mikro-dönüşüm, alt-huni sayfasında ise "Danışmanlık planla" gibi doğrudan bir adım daha iyi çalışır. B2B sitelere özel CTA kurgusunu B2B web sitesi tasarımı rehberimizde derinleştiriyoruz. Sürecin tamamını dönüşüm hedefiyle kurgulamak isterseniz teklif ve analiz sihirbazımız üzerinden bir başlangıç noktası çıkarabilir, kapsamlı tasarım desteği için web ve mobil UI/UX tasarımı hizmetimize bakabilirsiniz.

Dönüşüm İçin Form Tasarımı Nasıl Olmalı?

Form, çoğu sitede dönüşümün gerçekleştiği son adımdır ve aynı zamanda sürtünmenin en yoğun olduğu yerdir. Temel ilke: her ek alan, terk oranını artıran bir maliyettir. Bu yüzden formu "ne sorabilirim" değil "hedef için gerçekten ne gerekli" diye kurarız. Bir lead formunda ad, telefon veya e-posta çoğu zaman yeterlidir; gereksiz alanlar (firma büyüklüğü, sektör, "nereden duydunuz") dönüşüm sonrası süreçte de toplanabilir. Bu kademeli toplama yaklaşımına progressive profiling denir: kullanıcıyı ilk temasta yormaz, ilişki ilerledikçe ek bilgi istersiniz.

Dönüşüm odaklı form tasarımında uyguladığımız somut kurallar:

• Alan azaltma: Sürtünmeyi azaltan en güçlü kaldıraç, alan sayısını düşürmektir. Zorunlu olmayanı kaldırın ya da ikinci aşamaya bırakın. Pratik bir kontrol: her alan için "bu bilgi olmadan ilk teması kuramaz mıyız?" diye sorun; cevap "kurabiliriz" ise alan formdan çıkar.
• Etiketli alanlar: Her form alanının görünür, programatik bir etiketi (label) olmalı. Placeholder'ı etiket yerine kullanmak hem erişilebilirlik hatasıdır (WebAIM Million raporunda etiketsiz form alanları en sık karşılaşılan hatalardan biridir) hem de kullanıcı yazmaya başlayınca bağlamı kaybettirir; girilen değeri kontrol etmek isteyen kullanıcı alanın ne olduğunu artık göremez.
• Net hata yönetimi: Nielsen sezgisel ilkelerine göre hata mesajları net ve çözüm önerili olmalı; "Hatalı giriş" değil, "Telefon numarasını 05XX XXX XX XX biçiminde girin". Hatayı, ilgili alanın yanında ve renk dışında bir işaretle (ikon/metin) gösterin; renk tek başına bilgi taşımamalı (renk körlüğü). Doğrulamayı mümkünse alandan çıkışta (anlık) yapın, kullanıcıyı tüm formu doldurup gönderdikten sonra baştan hata avına göndermeyin.
• Sistem durumu görünürlüğü: Gönderim sırasında buton "yükleniyor" durumuna geçmeli, başarıdan sonra net bir onay görünmeli. Kullanıcı "tıkladım, bir şey oldu mu?" belirsizliğinde kalırsa formu tekrar gönderir (çift kayıt) ya da terk eder.
• Doğru girdi tipleri: E-posta, telefon, sayı gibi alanlarda doğru girdi tipini kullanın; mobilde bu, alana uygun klavyenin (telefon için sayısal tuş takımı) açılmasını sağlar ve yazım hatasını azaltır.
• Mobil form akışı: Mobilde dönüşüm masaüstünden düşük olabildiği için form akışını ayrıca optimize ederiz: doğru klavye tipleri, tarayıcı otomatik doldurma (autocomplete) desteği, tek elle erişilebilir alanlar, gönder butonunun baş parmak erişim alanında konumu. Mobil trafiğin küresel olarak yaklaşık %60 (Türkiye gibi pazarlarda %80'e çıkan, 2026 itibarıyla ve döneme göre değişebilir) olduğu düşünülürse, mobil form deneyimi doğrudan gelir kalemidir.
• Gereksiz tekrarın önlenmesi: WCAG 2.2 ile gelen ilkelere paralel olarak, daha önce girilen bilgiyi kullanıcıya tekrar girdirmeyin (ör. fatura adresini teslimat adresinden otomatik doldurma seçeneği). Tekrar giriş hem erişilebilirlik (SC 3.3.7 Redundant Entry) hem dönüşüm sorunudur.

Sürtünmenin nerede biriktiğini görmek için tek alanlı bir kontrol mantığı kuruyoruz; aşağıdaki tablo, sık karşılaştığımız sürtünme kaynaklarını ve dönüşüm dostu karşılıklarını özetliyor:

Türkiye bağlamında forma eklenmesi gereken yasal katman da dönüşümü etkiler: KVKK aydınlatma metni ile ticari ileti (ETK) açık rızası AYRI AYRI sunulmalı; KVKK'nın güncel İlke Kararıyla pekiştirildiği üzere tek kutuda "hepsini kabul ediyorum" hukuken sakıncalıdır. Tasarımda bunu, aydınlatma metnine link + ayrı bir opsiyonel onay kutusu olarak çözeriz; bu hem uyumu sağlar hem de zorunlu olmayan onayı opsiyonel tutarak dönüşümü düşürmez. Burada ince bir denge vardır: yasal metinleri formu boğacak kadar uzun göstermek de terk üretir, bu yüzden uzun metinleri linke taşıyıp formda yalnızca kısa onayı tutarız. Mobil uyumun form deneyimine etkisini derinleştirmek için mobil uyumlu responsive web tasarım rehberimizi inceleyebilirsiniz.

Güven Öğeleri Dönüşümü Nasıl Artırır?

Güven öğeleri, kullanıcının "buradan teklif istesem / satın alsam riskli olur mu?" tereddüdünü azaltan görsel ve içeriksel sinyallerdir. Dönüşüm, çoğu zaman tek bir butonun renginde değil; kullanıcının o butona basacak kadar güven duyup duymamasında kopar. Özellikle kurumsal ve B2B sitelerde, satış döngüsü uzun ve çok karar vericili olduğu için site tek başına satış değil "güven inşası" rolü oynar. Bu yüzden güven öğelerini dekoratif değil, dönüşüm bileşeni olarak konumlandırırız.

Dönüşüm için kullandığımız temel güven sinyalleri:

• Sosyal kanıt: Müşteri logoları, gerçek referanslar, vaka çalışmaları (case study), sayısal sonuçlar. Genel ifadeler ("memnun müşteriler") yerine somut, doğrulanabilir kanıt dönüşümü besler. "%X dönüşüm artışı sağladık" gibi sayısal ve isim verilebilen bir referans, anonim bir övgüden çok daha güçlüdür.
• Güvenilirlik sinyalleri: Gerçek ekip görselleri, açık adres ve telefon, sertifikalar. Kurumsal sitelerde estetik kadar bu güvenilirlik sinyalleri belirleyicidir; "iletişim" sayfasında somut bilgi (gerçek bir adres, çalışan bir telefon) olması bile dönüşümü artırır. Yerel SEO açısından da firma adı-adres-telefon (NAP) bilgisinin tüm dijital varlıklarda birebir aynı olması önemlidir.
• Teknik güven: HTTPS artık opsiyonel değil zorunlu. SSL/TLS olmayan sitede tarayıcı "Güvenli değil" uyarısı çıkar; bu, kullanıcının veri girmeden kaçtığı doğrudan bir dönüşüm katilidir. Güncel protokol teknik olarak TLS'tir (SSL terimi yaygın kullanılsa da); Let's Encrypt ile ücretsiz sağlanabilir, çoğu hosting otomatik sunar. Altyapı tarafını domain, hosting ve SSL altyapı rehberimizde ele alıyoruz.
• Net değer önerisi: Üst-katlamada (above the fold) ne sunduğunuzu, kime ve ne fayda sağladığınızı belirsizliğe yer bırakmadan söylemek başlı başına bir güven öğesidir. Kullanıcı "burası benim için mi?" sorusuna saniyeler içinde yanıt alamazsa terk eder.
• Yasal şeffaflık: KVKK aydınlatma metni, çerez politikası, gizlilik politikası ve e-ticarette mesafeli satış sözleşmesi/ön bilgilendirme formu/iade koşullarının açıkça erişilebilir olması, hem yasal zorunluluk hem de güven sinyalidir. Eksik ya da gizlenmiş yasal metinler, dikkatli kullanıcıda güvensizlik yaratır; e-ticarette ödeme adımında görünür iade/teslimat koşulu, sepet terkini azaltır.
• Güvenlik algısı: Ödeme ve form adımlarında veri güvenliği vurgusu (KVKK ibaresi, güvenli ödeme rozeti) tereddüdü düşürür. Bu yalnızca görsel bir rozet değil, arkasında gerçek güvenlik (HTTPS, sunucu tarafı doğrulama, rate-limit) olan bir vaattir.

Güven öğelerini yerleştirirken yer kritiktir: en yüksek tereddüdün oluştuğu noktada (CTA'nın hemen yanında, form üstünde, ödeme adımında) konumlandırılmalı. Bir formun hemen altına "Bilgileriniz KVKK kapsamında korunur" gibi bir mikro güven mesajı koymak, tereddüdü tam karar anında giderir. Bunu "doğru sinyal, doğru yer" mantığıyla eşleştiririz:

Bu yaklaşımın e-ticaretteki uygulamasını CRO rehberimizde, kurumsal sitelere uyarlamasını ise kurumsal web sitesi rehberimizde daha derin işliyoruz. Sitenizdeki güvenlik temelini sağlamlaştırmak içinse web sitesi güvenliği rehberimiz başvurabileceğiniz bir kaynaktır.

Mikro Etkileşimler Dönüşüme Nasıl Katkı Sağlar?

Mikro etkileşim, kullanıcının bir eyleme karşılık aldığı küçük, anlık geri bildirimlerdir: buton hover (üzerine gelme) tepkisi, tıklama durumu, form alanında doğrulama işareti, yükleme animasyonu, başarı/onay göstergesi. Bunların dönüşümle ilişkisi doğrudan: kullanıcıya "sistem seni duydu, işlem ilerliyor" hissini verirler. Geri bildirim, Nielsen sezgisel ilkelerinin temelinde yer alır; sistem durumu her zaman görünür olmalıdır. Belirsizlik, terk üretir.

Sektör verileri işlevsel mikro etkileşimin etkileşimi yaklaşık %45 artırdığını gösteriyor (kaynak ve bağlama göre değişir, kesin bir garanti değildir). Ancak kritik ayrım şudur: mikro etkileşim işlevsel olmalı, dekoratif değil. Kullanıcıya rehberlik etmeyen, yalnızca "gösteriş için" konan animasyonlar hem dikkat dağıtır hem performansa zarar verir. 2026 tasarım ekseninde kalıcı ilke, gösterişli efekt değil; hız, sadelik ve performans-öncelikli tasarımdır. Glassmorphism ya da aşırı parallax gibi geçici modalar markaya uyuyorsa kullanılır ama dönüşüm ilkesinin yerini almaz. Dönüşüm odaklı mikro etkileşimde uyguladığımız kurallar:

• Geri bildirim odaklı: Her etkileşim noktasında (buton, link, form) anlık görsel tepki olmalı; kullanıcı eyleminin algılandığını görmeli. Bir butonun tıklanınca hiçbir tepki vermemesi, kullanıcıyı "çalışmıyor mu?" tereddüdüne sokar.
• Durum görünürlüğü: Form gönderiminde "yükleniyor" durumu, başarıda net onay, hatada açık uyarı. Bu, hem mikro etkileşim hem hata yönetimi ilkesidir.
• Performansı bozmamak: Mikro etkileşimler ağır JavaScript ya da büyük animasyon yükü getirmemeli. INP (Interaction to Next Paint), 12 Mart 2024'te FID'in (First Input Delay) yerini alan Core Web Vital'dır ve iyi eşiği 200 ms'dir (75. yüzdelik saha verisi). Ana iş parçacığını (main thread) bloke eden ağır script, hem INP'yi bozar hem mikro etkileşimi gecikmeli ve "kırık" hissettirir. Kötü uygulanmış bir animasyon, dönüşüm artırmak yerine sayfayı yavaşlatarak düşürür. Çözüm: az script, kod bölme (code splitting), uzun görevleri parçalama.
• Layout kaymasını önlemek: Mikro etkileşim sırasında içerik yer değiştirmemeli. CLS (Cumulative Layout Shift) iyi eşiği 0,1'dir; dinamik öğelere (uyarı, açılan kutu, banner) önceden yer rezerve edilmeli (açık width/height veya aspect-ratio) ki kullanıcının tıklamak üzere olduğu hedef kaymasın. Yanlış konuma tıklama, hem dönüşüm hem güven kaybıdır.
• Erişilebilir hareket: Animasyonlar kullanıcının "azaltılmış hareket" (prefers-reduced-motion) tercihine saygı göstermeli; hareket hassasiyeti olan kullanıcılar için aşırı geçiş efektleri rahatsızlık verir. Erişilebilirliği bir altyapı meselesi olarak ele almak, 2026 tasarım anlayışının kalıcı ilkelerindendir.

Mikro etkileşimi performansla birlikte düşünmek, dönüşüm odaklı tasarımın 2026'daki ayırt edici noktasıdır. Bunu somut bir karar tablosuyla özetleyebiliriz: her etkileşim, dönüşüme katkısı ile performans maliyeti dengesinde değerlendirilir.

Hızlı yüklenen, etkileşime anında yanıt veren bir site, gösterişli ama yavaş bir siteden daha yüksek dönüşür. Bu nedenle Core Web Vitals'ı yalnızca SEO değil, dönüşüm meselesi olarak ele alırız; tüm eşikleri (LCP ≤ 2,5 sn, INP ≤ 200 ms, CLS ≤ 0,1) geçen siteler hem organik trafikte hem etkileşim ve dönüşümde ölçülebilir iyileşme görür. Hız ve dönüşüm ilişkisini derinleştirmek için site hızı ve Core Web Vitals rehberimizi, sitenizin mevcut hız durumunu ölçmek için PageSpeed Insights rehberimizi öneririz. Tüm bu dönüşüm kaldıraçlarını markanıza özel kurgulamak isterseniz UI/UX tasarımı hizmetimiz üzerinden başlangıç yapabilirsiniz.

Tasarım Süreci Nasıl İşler ve Hangi Hatalardan Kaçınmalı?

İyi bir UI/UX tasarımı doğrusal değil, döngüsel bir süreçtir: araştırma → bilgi mimarisi → wireframe (tel kafes) → prototip → kullanılabilirlik testi → uygulama → ölçüm ve iyileştirme. Bu sıra atlanmadan işletildiğinde tasarım varsayıma değil kanıta dayanır; atlandığında "güzel görünen ama dönüşmeyen" siteler ortaya çıkar. Müşterilerimizde defalarca gördüğümüz kalıp şudur: ekipler doğrudan görsel tasarıma (renk, font, buton) atlar; oysa bu UI katmanıdır ve UX iskeleti hazır olmadan yapılan UI, kötü bir akışı kurtaramaz. UI ile UX arasındaki ilişkiyi en yalın haliyle şöyle özetleyebiliriz: UX iskelet, UI görünümdür. UX kullanıcının ürünle bütün yolculuğunu, akışı, mantığı ve kullanılabilirliği; UI ise görsel katmanı (renk, tipografi, buton, ikon) tarif eder. İyi UI, kötü UX'i kurtaramaz. Aşağıda süreci adım adım açıyor, her aşamanın somut çıktısını veriyor, ardından en sık tekrarlanan UI/UX hatalarını kök nedenleri ve çözümleriyle birlikte tabloya döküyoruz.

1. Araştırma ve keşif: tasarımın temeli

Her tasarım, kullanıcıyı ve hedefi anlamakla başlar. Nielsen Norman Group'un (NN/g) temel ilkesi olan kullanıcı odaklı tasarım (user-centered design), kararların varsayım yerine kullanıcı araştırması ve testine dayanmasını söyler. Bu aşamada cevaplanması gereken sorular nettir:

• Hedef kitle kim? Yaş, cihaz alışkanlığı, teknik yetkinlik, hangi cihazdan ve hangi bağlamda (yolda, masada, acele mi) geldikleri. Trafiğin büyük kısmı mobilden geleceği için (2026'da küresel web trafiğinin yaklaşık %60'ı mobil; kaynak ve döneme göre %52-64 arası değişebilir, Türkiye gibi pazarlarda bu oran %80'e çıkabilir) tasarım küçük ekran gerçeğiyle başlamalı.
• Dönüşüm hedefi ne? Lead toplama mı, satış mı, bilgilendirme mi? Bu hedef olmadan tasarım pusulasız ilerler; "güzel ama işe yaramaz" siteyi üreten en yaygın eksik tam da budur. Stratejinin nasıl kurulacağını web sitesi nasıl yapılır rehberimizde adım adım ele alıyoruz.
• Rakipler ne yapıyor? Jakob Yasası burada devreye girer: kullanıcılar diğer sitelerden öğrendikleri kalıpları sizin sitenizde de bekler. Rakip ve sektör kalıplarını incelemek, gereksiz yere "yeniden icat" etmenin önüne geçer. Sepet ikonunu sol üste koymak ya da menüyü dikey hamburger yapmak gibi alışılmamış tercihler, özgünlük değil sürtünme üretir.

Keşif çıktıları genelde kullanıcı personaları, kullanıcı yolculuğu haritası ve net bir KPI tanımıdır. Pratik bir örnek: kurumsal bir hizmet sitesinde KPI "iletişim formu doldurma oranı" ise, tüm tasarım kararları bu metriği yükseltmeye hizmet eder; gösterişli bir kayan slayt gösterisi yerine üst-katlamada net bir teklif çağrısı önceliklenir. Bu adımın atlanması, ileride pahalıya patlayan tasarım değişikliklerinin en yaygın sebebidir; çünkü kullanıcının ne istediğini bilmeden çizilen her ekran, sonradan baştan çizilme riski taşır.

2. Bilgi mimarisi (IA): içeriği mantıklı kurgulamak

Görsel hiçbir piksel çizilmeden önce, içeriğin nasıl gruplanacağı ve gezinmenin nasıl kurulacağı belirlenir. Bilgi mimarisi, kullanıcının her an "nerede olduğunu ve nereye gideceğini" bilmesini sağlar. NN/g'ye göre iyi IA üç şeyi kapsar: etiketleme (menü adları), hiyerarşi (neyin neyin altında olduğu) ve gruplama (ilişkili içeriğin bir arada durması). Pratik araç genellikle bir site haritası ve menü yapısıdır; daha büyük sitelerde içerik envanteri ve kart sıralama (card sorting) çalışması da bu aşamaya girer.

Burada Hick Yasası önemli bir rehberdir: seçenek sayısı arttıkça karar süresi uzar. Bu yüzden ana menüyü sadeleştirmek, kullanıcının bilişsel yükünü düşürür. 15 maddelik düz bir mega menü yerine, mantıklı gruplara ayrılmış 5-7 ana başlık çoğu kurumsal sitede daha iyi çalışır. Etiketleme de en az yapı kadar önemlidir: "Çözümler" mi "Hizmetler" mi, "Bize Ulaşın" mı "İletişim" mi sorusu, kullanıcının zihnindeki kelimeyle örtüşmelidir; jargon değil, ziyaretçinin kullandığı dil kazanır. İyi kurgulanmış bir bilgi mimarisi aynı zamanda SEO'ya da hizmet eder, çünkü mantıklı URL ve iç link yapısı arama motorlarının siteyi anlamasını kolaylaştırır.

3. Wireframe (tel kafes): renksiz iskelet

Wireframe, sayfanın renk ve görsel olmadan, sadece yerleşim ve hiyerarşi düzeyindeki düşük çözünürlüklü taslağıdır. Amaç dikkati estetikten uzaklaştırıp yapı üzerine odaklamaktır; renk ve marka tartışması bu aşamada bilinçli olarak ertelenir, çünkü paydaşlar bir kutunun gri mi mavi mi olacağını konuşmaya başladığı an yerleşim kararları gözden kaçar. Bu aşamada şu kararlar verilir:

• Görsel hiyerarşi: Boyut, renk, kontrast, boşluk ve konumla önem sırası kurulur. Göz önce en önemli öğeye gitmeli; bu genellikle başlık ve ana CTA'dır. Bir sayfada her şey "önemli" ise hiçbir şey önemli değildir; hiyerarşi, neyin geri çekileceğine karar vermektir.
• Üst-katlama (above the fold): Net değer önerisi ve birincil eylem çağrısı kaydırmadan görünmeli. Dönüşüm odaklı tasarımda tek net birincil CTA ilkesi buradan başlar; ziyaretçi ilk ekranda "bu site ne yapıyor, benden ne bekleniyor?" sorusuna yanıt alabilmeli.
• Mobil-öncelik: Wireframe önce küçük ekran için çizilir, sonra büyük ekrana genişletilir (progressive enhancement). Tersini yapmak, yani masaüstünü küçültmek, neredeyse her zaman bozuk bir mobil deneyim üretir. Üstelik Google'ın mobil öncelikli indeksleme (mobile-first indexing) yaklaşımı varsayılan olduğu için, mobilde eksik kalan içerik doğrudan SEO kaybına dönüşür. Bu konuyu mobil uyumlu responsive tasarım rehberimizde derinlemesine işliyoruz.

Wireframe aşamasında dokunmatik hedef boyutlarını da planlamak gerekir: WCAG 2.2 SC 2.5.8 (AA) minimum 24x24 CSS piksel ister (veya yeterli boşluk); Apple HIG 44x44 pt, Google Material 48x48 dp önerir; WCAG 2.5.5 (AAA) ise 44x44 px der. Pratik öneri en az 44-48 pikseldir. Bu, parmakla rahat tıklanabilir butonlar ve birbirine yapışmayan link grupları demektir. Breakpoint mantığını da burada düşünmek faydalıdır: sabit cihaz boyutlarına değil, içeriğin bozulduğu noktaya kırılım koyun. Yaygın referanslar ~360-480px (telefon), ~768px (tablet) ve ~1024px+ (masaüstü) olsa da, modern CSS'te container queries ve clamp() ile akışkan tipografi sayesinde tasarım belirli ekranlara değil, içeriğe göre uyum sağlar.

4. Prototip: tıklanabilir senaryo

Prototip, wireframe'lere etkileşim ve akış eklenmiş, gerçek kullanıma yakın bir simülasyondur. Figma gibi araçlarda sayfalar birbirine bağlanır; kullanıcı gerçekten tıklayıp "ödeme adımına" ya da "iletişim formuna" gidebilir. Prototipin değeri, daha tek satır kod yazılmadan akıştaki tıkanıklıkları görünür kılmasıdır. Bir form çok uzunsa, bir adım belirsizse ya da CTA kayboluyorsa, bunu burada ucuza fark edersiniz; aynı sorunu yayından sonra fark etmek hem itibar hem para kaybıdır.

Bu aşamada mikro etkileşimler de tanımlanır: hover geri bildirimi, buton tıklama yanıtı, yükleme animasyonu, başarı ve onay işaretleri. Nielsen'in sezgisel ilkelerinden biri olan sistem durumu görünürlüğü tam da budur; kullanıcı her an "sistem beni dinliyor mu?" sorusuna görsel yanıt almalı. Bir butona basıldığında hiçbir şey olmuyorsa kullanıcı ya tekrar basar (çift gönderim hatası) ya da vazgeçer. Araştırmalar işlevsel mikro etkileşimlerin etkileşimi yaklaşık %45 artırdığını gösteriyor; ancak kritik kural şu: mikro etkileşim dekoratif değil işlevsel olmalı, kullanıcıya rehberlik etmeli. Sayfayı süsleyen ama anlam taşımayan animasyonlar, mobilde hem dikkat dağıtır hem de performansı (INP) düşürür. Bu aşamada açık/koyu tema (dark mode) desteği gibi 2026'da standartlaşan beklentileri de prototipe dahil etmek, sonradan eklemekten çok daha ucuzdur.

5. Kullanılabilirlik testi: varsayımı kanıtla çürütmek

Tasarım sürecinin belki en sık atlanan ama en değerli adımı budur. Prototip, gerçek kullanıcılara (ya da temsili kullanıcılara) verilir ve onlardan belirli görevleri tamamlamaları istenir: "Teklif alın", "Şu hizmeti bulun", "İletişime geçin". İzlenen şey, kullanıcının nerede tereddüt ettiği, nerede yanlış yere tıkladığı, nerede vazgeçtiğidir. NN/g'nin sürekli vurguladığı gibi, az sayıda kullanıcıyla yapılan test bile büyük tasarım hatalarını ortaya çıkarır; mükemmel bir laboratuvar düzeneği şart değildir, beş kişiyle yapılan basit bir görev testi bile çoğu kritik sorunu yakalar.

Test, kullanıcıya "bu tasarımı beğendin mi?" diye sormak değildir; insanlar ne yaptıklarını değil, ne yaptıklarını sandıklarını anlatır. Bu yüzden değer, kullanıcıya görev verip onu sessizce izlemekten ve "nereye tıklarsın?" diye sormaktan gelir. Test bulguları wireframe veya prototipe geri beslenir; süreç doğrusal değil döngüseldir. Bu döngü, yayından sonra "neden kimse form doldurmuyor?" sorusuyla aylarca uğraşmaktan çok daha ucuzdur. Yayına çıkmış sitelerde ise testin yerini gerçek kullanıcı davranışı alır: ısı haritaları, oturum kayıtları ve dönüşüm hunisi analizi, hangi adımda kaç kullanıcının düştüğünü gösterir.

6. Uygulama ve devir: tasarımdan koda

Onaylı prototip geliştirmeye devredilir. Burada tasarımcı-geliştirici uyumu kritiktir; çünkü tasarımın performans kararları doğrudan Core Web Vitals'a yansır. Tasarım tarafında alınan kararların ölçülebilir teknik karşılığı vardır ve bu üç metrik bir sıralama sinyali olduğu için hem deneyimi hem SEO'yu aynı anda etkiler:

• LCP (Largest Contentful Paint) ≤ 2,5 sn: En büyük içeriğin görünme süresi. Hero görseli, font yüklemesi ve sunucu yanıtı belirleyici. Çözüm: LCP görselini preload etmek, kritik CSS'i satır içi vermek, fontu font-display: swap ile yüklemek ve preload etmek. Tasarımcının ekranı dolduran dev bir karşılama görseli istemesi, optimize edilmediğinde LCP'yi tek başına bozabilir.
• CLS (Cumulative Layout Shift) ≤ 0,1: Beklenmedik kaymanın ölçüsü. En yaygın kök neden, görsele yer ayrılmamasıdır. Her görsel, video, iframe ve reklam alanına açık genişlik/yükseklik (veya aspect-ratio) verilmeli; dinamik içeriğe (banner, çerez bandı, reklam) baştan yer rezerve edilmeli. Font kaynaklı kaymayı azaltmak için @font-face üzerindeki size-adjust descriptor'ı CLS'yi örneğin 0,15'ten 0,02'ye düşürebilir.
• INP (Interaction to Next Paint) ≤ 200 ms: 12 Mart 2024'te FID'in (First Input Delay) yerini alan bu metrik, tek bir etkileşimi değil tüm etkileşimleri ve giriş gecikmesi + işleme + sunum aşamalarının tamamını ölçtüğü için çok daha kapsamlıdır. Ağır JavaScript ana iş parçacığını bloke ettiğinde bozulur; az script, kod bölme (code splitting) ve uzun görevleri parçalama gerekir.

Bu metriklerin tasarım kararlarıyla nasıl iç içe olduğunu Core Web Vitals rehberimizde ve ölçüm tarafını PageSpeed Insights rehberimizde ayrıntılandırıyoruz. Devir aşamasında bir başka kritik nokta, tasarımın bir tasarım sistemine (renk değişkenleri, tipografi ölçeği, yeniden kullanılabilir bileşenler) oturtulmasıdır; bu sistem hem tutarlılığı garanti eder hem de ilerideki güncellemeleri hızlandırır.

Süreç aşamaları ve çıktıları: tek bakışta

Aşağıdaki tablo, sürecin her aşamasını ana sorusu, somut çıktısı ve atlanırsa oluşan riskle birlikte özetliyor. Bu disiplin, "güzel ama işe yaramaz" siteler ile dönüşüm üreten siteler arasındaki farkın büyük kısmını açıklar.

UI/UX tasarımında en sık yapılan hatalar

Müşteri sitelerini denetlerken aynı hataları tekrar tekrar görüyoruz. Aşağıdaki tablo, en yaygın hataları kök nedenleri ve çözümleriyle birlikte özetliyor; çoğu, yukarıdaki sürecin bir aşamasının atlanmasından doğar.

Bu hataların ötesinde, daha derin yapısal sorunlar da var. En tehlikelisi tutarsızlık: aynı eylemin sayfadan sayfaya farklı görünmesi. Butonlar, renkler ve terimler her yerde aynı davranmalı; tutarlılık hem öğrenmeyi kolaylaştırır hem güven verir. Bir sayfada "Teklif Al", diğerinde "Fiyat İste", üçüncüsünde "Bize Ulaşın" yazan butonlar kullanıcının zihninde aynı eylemi farklı şeyler gibi gösterir. İkinci sık görülen sorun, erişilebilirliği sonradan eklenecek bir özellik sanmak. 2026'da doğru yaklaşım, erişilebilirliği bir altyapı olarak baştan kurgulamaktır; hem 28 Haziran 2025'te yürürlüğe giren Avrupa Erişilebilirlik Yasası (EAA) ve dayandığı WCAG 2.1 AA zorunluluğu (AB'ye ürün/hizmet satan Türk firmalarını da kapsayabilir) hem de SEO ve dönüşüm faydası bunu zorunlu kılıyor. WebAIM'in yıllık raporunda en sık görülen hatalar (düşük kontrast, alt-metni olmayan görseller, etiketsiz form alanları, boş bağlantı ve butonlar, eksik dil tanımı) aslında tasarım sürecinde küçük disiplinlerle kolayca önlenebilen hatalardır. Erişilebilirliği baştan kurmanın yöntemlerini web erişilebilirliği rehberimizde bulabilirsiniz.

Süreç hatası: testi ve bakımı atlamak

Son olarak iki "süreç" hatasından bahsetmek gerekir. Birincisi, kullanıcı testini hiç yapmadan yayına çıkmaktır; bu, tüm araştırmanın hâlâ varsayım olarak kalması demektir. Bir sonraki en pahalı hata, ekibin "biz nasılsa anlarız" diyerek kendi sitesini test etmesidir; tasarımı yapan kişi, akışı zaten ezbere bildiği için gerçek bir kullanıcının yaşadığı tereddüdü asla yaşamaz. İkincisi, tasarımı "bitmiş bir iş" sanmaktır. İyi UI/UX süreklidir: gerçek kullanıcı davranışı ölçülür (hangi butona tıklanıyor, nerede çıkılıyor), bulgular tasarıma geri beslenir, küçük iyileştirmeler yapılır. Bu yaklaşım hem deneyimi hem de teknik sağlığı korur; çünkü bakımsız bir site sadece eskimekle kalmaz, güvenlik ve SEO açısından da hızla değer kaybeder. Dönüşüm oranını sistematik artırmanın yöntemlerini CRO rehberimizde ele alıyoruz. Tasarımın bütününe dair ilkeler için iyi web tasarımı nasıl olmalı yazımız da iyi bir tamamlayıcıdır.

Doğru süreç, ölçülebilir sonuç demektir

Özetle: araştırmadan başlayan, bilgi mimarisiyle iskeletini kuran, wireframe ve prototiple test edilen, ölçülebilir performans hedefleriyle (LCP ≤ 2,5 sn, INP ≤ 200 ms, CLS ≤ 0,1) hayata geçen bir tasarım süreci, "güzel ama işe yaramaz" siteler ile dönüşüm üreten siteler arasındaki farkı belirler. Bu süreç, her aşamada kanıta dayandığı için sürprizleri ve pahalı geri dönüşleri en aza indirir; bir hatayı wireframe aşamasında yakalamak, yayından sonra düzeltmekten kat kat ucuzdur. Geçici tasarım modalarını (belirli renk akımları, glassmorphism, brutalism) körü körüne takip etmek yerine, kalıcı ilkelere (hız, erişilebilirlik, mobil-öncelik, net hiyerarşi, kullanıcı odaklılık, güvenlik) yaslanmak da bu disiplinin parçasıdır; trend, ilkenin yerini almaz. Sitenizin UI/UX tasarımını bu disiplinle kurmak ya da mevcut sitenizi bu kriterlere göre denetlemek isterseniz, web ve mobil UI/UX tasarım hizmetimizi inceleyebilir veya ücretsiz analiz formumuz üzerinden ihtiyaçlarınıza özel bir değerlendirme talep edebilirsiniz. Mevcut bir siteyi yenilemeyi düşünüyorsanız, süreci SEO değeri kaybetmeden yürütmenin yolunu web sitesi yenileme rehberimizde bulabilirsiniz.