Kullanıcı Odaklı Arayüz Tasarımı: UI Tasarımında En İyi Uygulamalar

Kullanıcı odaklı arayüz tasarımı, bir ekranın güzel görünmesinden çok, ziyaretçinin aradığını ilk bakışta bulmasıyla ilgilidir. Bu yazıda arayüz tasarımı yaparken 2012'den beri uyguladığım temel ilkeleri anlatıyorum: görsel hiyerarşi, tipografi, renk kontrastı, boşluk, tutarlılık ve dokunma hedefleri. Her başlıkta neyi, neden ve nasıl kontrol edeceğinizi bulacaksınız.

Arayüz tasarımı nedir ve kullanıcı odaklı olması ne anlama gelir?

Arayüz tasarımı (UI), kullanıcının bir web sitesi veya uygulamayla etkileşime girdiği ekranların görsel ve yapısal düzenidir. Kullanıcı odaklı yaklaşımda her karar, tasarımcının zevkinden değil, ziyaretçinin görevinden türer: okumak, karşılaştırmak, form doldurmak veya satın almak. Güzellik amaç değil, anlaşılırlığın bir sonucudur.

Burada önemli bir ayrım yapıyorum. UX, yani kullanıcı deneyimi, akışı ve kararları kapsar: ziyaretçi hangi adımdan geçecek, nerede duraksayacak, neyi soracak. UI ise o akışın ekrandaki yüzüdür. Başlığın boyutu, düğmenin rengi, iki kart arasındaki boşluk, hata mesajının yeri bu katmana aittir. Dolayısıyla iyi bir akış kötü bir arayüzle bozulabilir; tersi de geçerlidir.

UX tarafında satışı düşüren tipik hataları arayüz tasarımındaki UX hataları yazısında ayrıca ele aldım. Bu yazıda ise hataları değil, doğru uygulamaları konuşacağız. Yani elinizde bir ekran olduğunda onu hangi ilkelere göre kuracağınızı ve nasıl denetleyeceğinizi göstereceğim.

Kısacası, kullanıcı odaklı bir arayüz ziyaretçiye düşünme yükü bindirmez. Ziyaretçi neye tıklayacağını tahmin etmek zorunda kalmaz; ekran ona bunu sessizce söyler.

Arayüz tasarımında neden önce ilkeler, sonra estetik gelir?

Estetik kararlar zamanla eskir; ilkeler ise yıllarca aynı kalır. Bu nedenle ben bir projeye renk paleti seçerek değil, ekranın görevini yazarak başlarım. Örneğin bir hizmet sayfasının görevi "teklif formuna ulaştırmak" ise, sayfadaki her öğe bu göreve ya hizmet eder ya da onu geciktirir.

Sahada en sık gördüğüm tablo şudur: firma, beğendiği bir referans siteyi gösterir ve "bunun gibi olsun" der. Ancak o sitenin kitlesi, içeriği ve hedefi bambaşkadır. Görsel dili kopyalamak kolaydır; fakat o dilin arkasındaki kararları kopyalamak mümkün değildir. Sonuçta ortaya güzel ama yön göstermeyen bir ekran çıkar.

İlkeler bu riski azaltır. Çünkü ilkeler ölçülebilir: kontrast oranı hesaplanabilir bir sayıdır, dokunma hedefinin bir piksel değeri vardır, satır uzunluğu karakter olarak sayılır. Böylece tartışma "bence daha şık" seviyesinden "bu ekran şu kritere uyuyor mu" seviyesine iner. Üstelik ekip büyüdükçe bu ortak dil, tasarımcı ile yazılımcı arasındaki sürtünmeyi de ciddi biçimde azaltır.

Öte yandan estetik önemsiz değildir. Güven veren, marka kimliğiyle uyumlu bir görünüm ziyaretçinin kalma kararını etkiler. Yalnız sıralama doğru olmalıdır: önce işlev, sonra biçim.

Görsel hiyerarşiyi nasıl kurarsınız?

Görsel hiyerarşi, ekrandaki öğelerin önem sırasını boyut, ağırlık, renk, konum ve boşlukla göstermektir. Ziyaretçi bir sayfaya girdiğinde metni okumadan önce tarar. Bu yüzden ekranın ilk saniyede "en önemli şey bu, sonra şu" demesi gerekir.

Pratikte şu soruyla başlarım: bu ekranda yalnızca tek bir şey görülse, hangisi olmalı? Cevap genellikle sayfanın ana başlığı ve birincil eylem düğmesidir. Ardından ikinci ve üçüncü seviyeyi belirlerim. Her seviyeye tek bir görsel sinyal paketi atarım; böylece aynı seviyedeki öğeler hep aynı sinyali taşır.

• Boyut: Ziyaretçi büyük öğeyi önce fark eder. Ancak her şeyi büyütürseniz hiçbir şey öne çıkmaz.
• Ağırlık ve renk: Kalın yazı ve doygun renk dikkat çeker; bu nedenle vurgu rengini yalnızca birincil eyleme ayırın.
• Konum: Soldan sağa okuyan kitlede sol üst ve ekranın üst bölümü doğal başlangıç noktasıdır.
• Boşluk: Etrafında daha fazla boşluk olan öğe ziyaretçinin gözünde daha önemlidir.
• Yakınlık: Birbirine yakın duran öğeleri ziyaretçi aynı grup sayar.

Basit bir test önereyim: ekran görüntüsünü alın, bulanıklaştırın ve bir meslektaşınıza "ilk nereye baktın?" diye sorun. Cevap birincil eylem değilse, hiyerarşiyi yeniden kurmanız gerekir.

Tipografide hangi kurallar okunabilirliği belirler?

Tipografi, bir web sitesindeki içeriğin büyük kısmını taşır. Dolayısıyla font seçimi ve metin düzeni, arayüz tasarımı kararlarının belki de en etkili olanıdır. Ben burada gösterişten çok üç şeye bakarım: boyut, satır uzunluğu ve satır aralığı.

Gövde metninde tarayıcıların varsayılan boyutu olan 16 pikseli genellikle alt sınır kabul ederim. Mobilde bunun altına inmek, ziyaretçiyi yakınlaştırma yapmaya zorlar. Başlıklar için ise sabit bir ölçek kullanırım; örneğin her seviye bir öncekinin yaklaşık 1,25 katı olur. Bu oran bir kural değil, tutarlılık sağlayan bir tercihtir.

Satır uzunluğunda W3C'nin WCAG yönergesi, AAA seviyesindeki 1.4.8 başarı kriterinde metin bloklarının genişliğinin 80 karakteri geçmemesini öneriyor. Ayrıca 1.4.12 kriteri, kullanıcı satır yüksekliğini font boyutunun en az 1,5 katına çıkardığında içeriğin bozulmamasını istiyor. Bu yüzden gövde metninde satır yüksekliğini baştan 1,5 ile 1,7 arasında tutuyorum.

• En fazla iki font ailesi kullanın; biri başlık, biri gövde için yeterlidir.
• Tamamı büyük harfle dizdiğiniz uzun metinlerden kaçının; kısa etiketlerde sorun yoktur.
• Paragrafları kısa tutun ve iki yana yaslı metin kullanmayın, çünkü kelime aralıkları düzensizleşir.
• Türkçe karakterlerin (ğ, ş, ı, İ) seçtiğiniz fontta düzgün göründüğünü mutlaka test edin.

Metnin ne kadar kolay okunduğunu ölçmek için okunabilirlik analizi aracını kullanabilirsiniz.

Renk kontrastı hangi oranda olmalı?

WCAG 2.2'nin 1.4.3 başarı kriteri, AA seviyesinde normal metin ile arka plan arasında en az 4,5:1 kontrast oranı istiyor. Büyük metinde, yani yaklaşık 24 piksel ve üzeri ya da 18,5 piksel civarı kalın yazıda, bu eşik 3:1'dir. Ayrıntıları W3C'nin kontrast kriteri açıklamasında bulabilirsiniz.

Metin dışı öğeler için de bir kural var. 1.4.11 kriteri, form alanlarının kenarlıkları, simgeler ve odak göstergeleri gibi anlamlı arayüz parçalarında komşu renklere karşı en az 3:1 oran bekliyor. Açık gri kenarlıklı, beyaz zemin üzerindeki form alanları bu testte sık sık kalır.

Sahada en çok karşılaştığım sorun, marka renginin olduğu gibi düğmeye taşınmasıdır. Örneğin açık turuncu bir marka rengi üzerinde beyaz yazı çoğu zaman 4,5:1 eşiğine ulaşmaz. Bu durumda markayı değiştirmek gerekmez; düğme için rengin bir ton koyusunu tanımlarsınız. Böylece marka hissini korursunuz, okunabilirliği de sağlarsınız.

Renk kodlarını karşılaştırırken HTML renk kodları aracı işinizi hızlandırır. Bir uyarı daha ekleyeyim: bilgiyi yalnızca renkle vermeyin. Kırmızı çerçeveli bir hata alanının yanına mutlaka bir metin ya da simge koyun, çünkü renk körlüğü olan ziyaretçi o farkı göremeyebilir.

Boşluk (whitespace) arayüz tasarımında neden bu kadar önemli?

Boşluk, ekranda "hiçbir şey olmayan" alan değil, öğeleri gruplayan ve ayıran sessiz bir yapıdır. Müşterilerden en sık duyduğum itiraz "burası boş kalmış, bir şey koyalım" cümlesidir. Ancak o boşluk çoğu zaman sayfanın nefes almasını sağlayan şeydir.

Boşluğu rastgele değil, bir ölçekle yönetirim. Genellikle 4 veya 8 pikselin katlarından oluşan bir dizi kullanırım: 4, 8, 16, 24, 32, 48, 64. Böylece tasarımcı ve yazılımcı "buraya biraz boşluk" yerine "buraya 24" der. Bu küçük disiplin, yüzlerce ekranlık bir projede tutarlılığı korur.

Yakınlık ilkesi burada devreye girer. Bir başlık ile altındaki paragraf arasındaki boşluk, o paragraf ile bir sonraki başlık arasındaki boşluktan küçük olmalıdır. Aksi hâlde ziyaretçi başlığın hangi metne ait olduğunu karıştırır. Aynı kural form etiketleri için de geçerlidir: etiket, ait olduğu alana yakın durmalıdır.

Üstelik boşluk mobilde daha da kritik hâle gelir. Dar ekranda her şeyi sıkıştırmak cazip gelir; fakat sıkışık bir ekran hem okunmaz hem de yanlış dokunmalara yol açar. Mobil taraftaki yaklaşımı mobil öncelikli tasarım yazısında ayrıntılı anlattım.

Tutarlılık kullanıcıya ne kazandırır?

Tutarlılık, aynı işi yapan öğelerin her yerde aynı görünmesi ve aynı davranmasıdır. Jakob Nielsen'in on kullanılabilirlik ilkesinden biri olan "tutarlılık ve standartlar", kullanıcıların farklı kelime, durum veya eylemlerin aynı şeyi ifade edip etmediğini merak etmemesi gerektiğini söyler. İlkelerin tamamını Nielsen Norman Group sayfasında okuyabilirsiniz.

Tutarlılığın iki katmanı vardır. İç tutarlılık, sitenizin kendi içinde aynı dili konuşmasıdır: birincil düğme her sayfada aynı renk, aynı köşe yuvarlaklığı ve aynı yükseklikte olur. Dış tutarlılık ise ziyaretçinin başka sitelerden alıştığı kalıplara uymaktır. Örneğin logo sol üstte ana sayfaya götürür; sepet simgesi sağ üstte durur.

Dış kalıpları kırmak için gerçekten iyi bir nedeniniz olmalı. Özgün görünmek uğruna menüyü alışılmadık bir yere taşımak, ziyaretçiye yalnızca öğrenme maliyeti yükler. Dolayısıyla yaratıcılığı içerikte, görsellerde ve anlatımda gösterin; gezinme kalıplarında değil.

Pratikte tutarlılığı korumanın en iyi yolu, bileşenleri tek bir kaynaktan yönetmektir. Figma'da bileşen kütüphanesi kurmak bu işin temelidir; süreci Figma ile web arayüz tasarımı yazısında adım adım anlattığım için burada tekrar etmiyorum.

Dokunma hedefleri kaç piksel olmalı?

WCAG 2.2 ile gelen 2.5.8 başarı kriteri, AA seviyesinde tıklanabilir hedeflerin en az 24x24 CSS pikseli olmasını istiyor. Kriterin istisnaları da var: etrafında yeterli aralık olan küçük hedefler, metin içindeki bağlantılar ve tarayıcının varsayılan kontrolleri bunlardan bazıları. Açıklamanın tamamı W3C'nin hedef boyutu sayfasında yer alıyor.

Platform rehberleri daha cömert rakamlar öneriyor. Apple'ın İnsan Arayüzü Yönergeleri en az 44x44 punto, Google'ın Material Design rehberi ise en az 48x48 dp dokunma alanı tavsiye ediyor. Ben pratikte mobil düğmeleri ve menü öğelerini 44 ile 48 piksel arasında tutuyorum. 24 piksel bir alt sınırdır; hedef değildir.

Burada sık yapılan bir hata var: simge küçük olunca tıklama alanını da küçük bırakmak. Oysa 20 piksellik bir simgenin etrafına iç boşluk ekleyerek tıklama alanını 44 piksele çıkarabilirsiniz. Görsel olarak hiçbir şey değişmez, fakat parmakla dokunmak çok daha kolay hâle gelir.

Ayrıca hedefler arasındaki mesafeye dikkat edin. Birbirine yapışık iki küçük bağlantı, özellikle "sil" ve "kaydet" gibi zıt işlevlerde, ciddi hatalara yol açar. Mobil ekranınızı bu açıdan kontrol etmek için mobil uyumluluk testi rehberindeki adımları izleyebilirsiniz.

Düğme ve bağlantıları nasıl tasarlamalısınız?

Düğme bir eylemi, bağlantı ise bir yeri temsil eder. Bu ayrımı korumak, ziyaretçinin neye tıklarsa ne olacağını tahmin etmesini sağlar. "Formu gönder" bir düğmedir; "Hizmetlerimizi inceleyin" ise çoğu zaman bir bağlantıdır.

Düğmelerde üç seviye kullanmayı öneriyorum. Birincil düğme dolgulu ve vurgu rengindedir; ekranda genellikle bir tane olur. İkincil düğme çerçevelidir. Üçüncül eylem ise sade bir metin bağlantısı olarak durur. Böylece ziyaretçi ekrandaki en önemli eylemi düşünmeden bulur.

Düğme metni fiille başlamalı ve sonucu söylemelidir. "Gönder" yerine "Teklif iste", "Tıklayın" yerine "Fiyatları gör" yazın. Bu konuyu dönüşüm açısından CTA butonu örnekleri yazısında ayrıca işledim.

Her düğmenin durumlarını da tasarlayın: normal, üzerine gelme, basılı, odak, devre dışı ve bekleme. Özellikle odak durumu klavye kullanıcıları için hayati önemdedir. Tarayıcının varsayılan odak çerçevesini kaldırıp yerine hiçbir şey koymamak, sahada gördüğüm en yaygın erişilebilirlik hatalarından biridir.

Form alanlarında hangi arayüz kuralları geçerli?

Formlar, bir sitenin para kazandığı ya da kaybettiği yerdir. Bu nedenle form arayüzünde küçük detaylar büyük fark yaratır. İlk kuralım şudur: her alanın gözle seçilen, kalıcı bir etiketi olmalıdır.

Yer tutucu metni (placeholder) etiket yerine kullanmak cazip gelir, çünkü ekran daha sade durur. Ancak ziyaretçi yazmaya başladığında o metin kaybolur ve alanın ne istediğini unutur. Ayrıca yer tutucu metinler genellikle açık gri olduğu için kontrast eşiğini de karşılamaz.

1. Etiketi alanın üstüne yerleştirin; mobilde en okunaklı düzen budur.
2. Alanları tek sütunda dizin; iki sütunlu formlar okuma sırasını bozar.
3. Zorunlu ve isteğe bağlı alanları açıkça belirtin.
4. Hata mesajını alanın hemen altına, ne yapması gerektiğini söyleyen bir cümleyle yazın.
5. Telefon ve e-posta alanlarında uygun klavye türünü (inputmode) tanımlayın.

Alan sayısını azaltmak ve hangi bilgiyi hangi aşamada isteyeceğinizi belirlemek ise ayrı bir karardır. Bu tarafı randevu, teklif ve demo formu tasarımı yazısında ayrıntılı ele aldım.

Geri bildirim ve durum mesajlarını nasıl göstermelisiniz?

Nielsen'in ilk ilkesi "sistem durumunun görünürlüğü"dür. Yani ziyaretçi bir işlem yaptığında sistemin ne yaptığını makul bir süre içinde görmelidir. Form yerine ulaştı mı, ürün sepete girdi mi, arama sürüyor mu? Sessiz kalan bir arayüz, ziyaretçiye aynı düğmeye tekrar tekrar bastırır.

Ben durum mesajlarını dört türe ayırırım: başarı, uyarı, hata ve bilgi. Her türün kendine ait bir rengi ve simgesi olur; ancak metin her zaman tek başına anlam taşır. Örneğin "Mesajınız elime ulaştı, bir iş günü içinde dönüş yapacağım" cümlesi, yeşil bir tik simgesinden çok daha fazla güven verir.

Hata mesajlarında suçlayıcı dil kullanmayın. "Geçersiz giriş" yerine "Telefon numarası 10 haneli olmalı" yazın. Böylece ziyaretçi sorunu anlar ve nasıl düzelteceğini bilir.

Öte yandan boş durumları da unutmayın. Arama sonucu çıkmadığında ya da sepet boş olduğunda ekran bembeyaz kalmamalı. Bunun yerine ziyaretçiye bir sonraki adımı önerin: popüler kategorilere bir bağlantı ya da aramayı genişletmesi için kısa bir ipucu yeterlidir.

Arayüz tasarımı ile marka kimliğini nasıl dengelersiniz?

Marka kimliği, sitenin kişiliğini; arayüz kuralları ise kullanılabilirliğini belirler. İkisi çatıştığında genellikle kullanılabilirliği korurum, fakat markayı da feda etmem. Çözüm çoğu zaman bir ara yoldadır.

Örneğin marka fontunuz dekoratif bir yazı tipiyse, onu yalnızca büyük başlıklarda kullanır, gövde metninde sade ve okunaklı bir font seçerim. Marka renginiz kontrast eşiğini tutturmuyorsa, rengi dolgu yerine vurgu çizgisi veya simge rengi olarak değerlendiririm. Böylece marka sahnede kalır, metin de rahat okunur.

Bu dengeyi kurmanın en sağlıklı yolu, marka rehberine dijital kuralları baştan eklemektir: hangi renk hangi zemine uyar, düğme rengi nedir, en küçük font boyutu kaçtır. Basılı kimliğin dijitale aktarılması sırasında çıkan sorunları basılı kurumsal kimliğin dijitale taşınması yazısında anlattım. Daha kapsamlı bir çalışma gerekiyorsa marka kimliği hizmeti sayfasına göz atabilirsiniz.

Simge ve görselleri arayüzde nasıl kullanmalısınız?

Simgeler, doğru kullanıldığında ekrandaki metin yükünü azaltır ve taramayı hızlandırır. Ancak her simge herkes için aynı anlamı taşımaz. Büyüteç arama, çarpı kapatma, çöp kutusu silme demektir; bunlar yerleşik kalıplardır. Buna karşılık soyut bir simge, yanında metin olmadan çoğu ziyaretçiye hiçbir şey anlatmaz.

Bu nedenle kuralım basit: yerleşik bir anlamı olmayan her simgenin yanına kısa bir etiket koyarım. Menüdeki "hamburger" simgesi bile, özellikle yaşça büyük kitlelerde, yanına "Menü" yazısı eklendiğinde daha kolay fark ediliyor; en azından sahada gözlemlediğim tablo bu yönde, garanti değil. Ayrıca bütün sitede tek bir simge setini kullanın. Farklı çizgi kalınlıklarına sahip simgeleri karıştırmak, tutarlılığı sessizce bozar.

Görsellerde ise asıl soru şudur: bu görsel ziyaretçiye bir bilgi veriyor mu, yoksa yalnızca boşluğu mu dolduruyor? Hazır stok fotoğraflar çoğu zaman ikinci gruba girer. Oysa gerçek ürün, gerçek ekip ya da gerçek bir ekran görüntüsü güven üretir. Üstelik her görselin boyutunu HTML içinde tanımlamak, yükleme sırasında düzen kaymasını da önler.

Son olarak, anlam taşıyan görsellere açıklayıcı bir alternatif metin yazın. Süs amaçlı görsellerde ise alternatif metni boş bırakın; böylece ekran okuyucu kullanan ziyaretçi gereksiz bilgiyle uğraşmaz. Görsel dosyalarını yayına almadan önce resim küçültme aracıyla hafifletmek de sayfa hızına doğrudan katkı sağlar.

Hangi ilke hangi sorunu çözer? Özet tablo

Aşağıdaki tablo, bu yazıdaki ilkeleri tek bakışta toplamak için hazırladım. Sayısal eşiklerin kaynağı W3C, Apple ve Google rehberleridir; pratik aralıklar ise saha tecrübeme dayanan başlangıç değerleridir, garanti değildir.

Tablodaki eşikleri bir kez belirleyip unutmamanızı öneririm. Örneğin yeni bir kampanya sayfası eklediğinizde, o sayfa da aynı font ölçeğini, aynı boşluk dizisini ve aynı düğme stillerini kullanmalı. Aksi hâlde birkaç ay içinde site, farklı dönemlerde farklı kişilerin eklediği parçalardan oluşan bir yamaya dönüşür. Bunu önlemenin yolu, kuralları yazılı hâle getirip ekipteki herkesle paylaşmaktır. Ayrıca bu kuralları sayfa şablonlarına gömerseniz, içerik ekleyen kişinin hata yapma ihtimali de azalır. Kısa bir stil rehberi bile, hiç rehber olmamasından çok daha iyidir.

Kısacası, tabloyu bir kontrol listesi gibi kullanabilirsiniz. Yeni bir ekranı yayına almadan önce her satırı tek tek sorgulamak, sonradan çıkacak pek çok düzeltmeyi baştan önler.

Arayüz tasarımı SEO ve dönüşümü nasıl etkiler?

Arayüz tasarımı doğrudan bir sıralama faktörü değildir; ancak Google'ın sayfa deneyimi sinyalleri ve ziyaretçi davranışı üzerinden dolaylı bir etkisi vardır. Örneğin sonradan yüklenen bir banner'ın içeriği aşağı itmesi, Core Web Vitals içindeki CLS (düzen kayması) metriğini bozar. Bu da hem kullanıcıyı hem de sayfa deneyimi değerlendirmesini etkiler.

Dönüşüm tarafında etki daha görünürdür. Birincil eylemi belirgin, formu net, metni okunaklı bir sayfa, aynı trafikle daha fazla talep üretir. Bu yüzden arayüz kararlarını her zaman ölçümle birlikte değerlendiririm. Bir değişiklik yaptığımda, öncesi ve sonrası için aynı dönüşüm hedefini izlerim.

SEO ile kullanıcı deneyimi arasındaki ilişkiyi UX ve SEO dengesi yazısında, dönüşüm odaklı yaklaşımın bütününü ise dönüşüm odaklı web tasarım yazısında ele aldım. Burada vurgulamak istediğim nokta şu: iyi bir arayüz, reklam ve SEO bütçenizin boşa gitmesini engelleyen son halkadır.

Arayüz tasarımını nasıl test edersiniz?

Test, arayüz tasarımı sürecinin sonunda değil, her aşamasında yer almalıdır. Ben üç katmanlı bir yaklaşım kullanıyorum: otomatik kontroller, uzman değerlendirmesi ve gerçek kullanıcı gözlemi.

• Otomatik kontroller: Kontrast, font boyutu ve eksik etiket gibi hataları tarayıcı araçlarıyla yakalarsınız. Google Lighthouse erişilebilirlik raporu iyi bir başlangıçtır.
• Uzman değerlendirmesi: Nielsen'in on ilkesini bir kontrol listesi olarak kullanıp her ekranı tek tek gezersiniz.
• Kullanıcı gözlemi: Beş kişiye gerçek bir görev verip ekranı nasıl kullandıklarını izlersiniz. Söylediklerinden çok yaptıklarına bakın.
• Klavye testi: Fareyi bir kenara bırakıp yalnızca Tab tuşuyla sayfayı gezersiniz; odak çerçevesini her an görmelisiniz.

Otomatik araçlar sorunların yalnızca bir kısmını yakalar. Örneğin bir aracın kontrast hatası bulmaması, düğmenin net olduğu anlamına gelmez. Bu nedenle insan gözünü süreçten asla çıkarmayın. Performans tarafındaki ölçümler için Google Lighthouse rehberine bakabilirsiniz.

Kurumsal projelerde hangi arayüz hataları en pahalıya patlar?

Küçük sitede bir tutarsızlık birkaç sayfayı etkiler; kurumsal projede ise yüzlerce ekrana sıçrar. Bu yüzden büyük projelerde hataların maliyeti katlanarak artar. Sahada en pahalıya patladığını gördüğüm üç durumu paylaşayım.

Birincisi, kuralsız büyüyen bileşenlerdir. Her ekip kendi düğmesini çizer ve bir süre sonra sitede on farklı düğme stili oluşur. Bunu toparlamak, baştan kural koymaktan çok daha fazla emek ister.

İkincisi, erişilebilirliğin sona bırakılmasıdır. Kontrast ve odak durumları tasarım aşamasında birkaç saatlik iştir. Oysa yayındaki bir sitede aynı düzeltme, onlarca şablonun yeniden elden geçmesi demektir.

Üçüncüsü ise masaüstü ekranda tasarlayıp mobili sonradan "sığdırmaya" çalışmaktır. Ziyaretçilerin büyük bölümü mobilden geliyorsa, önce dar ekranı çözmek hem daha ucuz hem de daha doğru bir yoldur. Kurumsal bir proje planlıyorsanız bu kararları baştan konuşmak için web tasarım hizmeti sayfama göz atabilirsiniz.

İyi bir arayüz tasarımı için kısa kontrol listesi

Yazının sonunda, yeni bir ekranı yayına almadan önce kullandığım kısa listeyi paylaşıyorum. Bu liste bir tasarım sistemi yerine geçmez; ancak en yaygın sorunların büyük bölümünü yakalar.

1. Ekranın tek bir birincil görevi var mı ve bu görev ilk bakışta öne çıkıyor mu?
2. Gövde metni en az 16 piksel ve satır yüksekliği yeterli mi?
3. Metin kontrastı 4,5:1, form kenarlıkları ve simgeler 3:1 eşiğini geçiyor mu?
4. Boşluklar sizin ölçeğinizden mi geliyor?
5. Aynı işi yapan bileşenler her sayfada aynı mı görünüyor?
6. Mobilde dokunma hedefleri rahatça seçilebiliyor mu?
7. Her eylemden sonra ziyaretçi bir geri bildirim alıyor mu?
8. Sayfa yalnızca klavyeyle gezilebiliyor mu?

Sonuç olarak, kullanıcı odaklı arayüz tasarımı bir sanat gösterisi değil, bir dizi bilinçli karardır. Bu kararları ölçülebilir ilkelere bağladığınızda hem ekibiniz daha hızlı çalışır hem de ziyaretçiniz aradığını daha kolay bulur. Takıldığınız bir nokta olursa, ekranlarınızı birlikte değerlendirebiliriz. İlk adım olarak en çok trafik alan üç sayfanızı bu listeyle kontrol etmenizi öneririm; bulduğunuz sorunlar, sitenin geri kalanı için de iyi bir yol haritası çıkarır.