Web Projelerinde Kullanıcı Deneyimi: İşe Yarayan Beş Karar

Bir web projesinde kullanıcı deneyimi tartışması çoğu zaman renk ve boşluk üzerinden yürür. Oysa kullanıcıyı asıl yoran şeyler daha sıkıcı yerlerde duruyor: sayfanın ne zaman kullanılabilir hale geldiği, formun doğru klavyeyi açıp açmadığı, dün bildiği menünün bugün nereye gittiği. Aşağıdakilerin çoğu tasarım tercihi değil, ölçülebilir mühendislik kararı.

Değişikliği duyurmak, kullanıcıyı yeniden eğitmek değil

Bir arayüzü öğrenen kullanıcı onu okuyarak kullanmaz, kas hafızasıyla kullanır. Menüdeki üçüncü sırayı bilir ve bakmadan tıklar. Siz o sırayı değiştirdiğinizde kaybettiği şey bir buton değil, o refleks.

Yaygın tavsiye sayfanın üstüne bir bilgilendirme şeridi koymaktır. Bunun işe yaradığından emin değilim. Şerit çoğunlukla okunmadan kapatılır, çünkü kullanıcı oraya başka bir iş için gelmiştir ve önündeki ilk engeli refleksle kaldırır. Daha ucuzu, değişikliği tam eski yerinde anlatmak: ayarları taşıdıysanız eski konumda tek satır bırakın, yeni yere götürsün, iki hafta sonra kaldırın.

Sürüm notlarını da kullanıcının diliyle yazmak gerekiyor. "Fatura modülü refactor edildi" değil, "fatura ekranı artık sipariş numarasıyla da arıyor".

Hız değil, içeriğin ne zaman kullanılabildiği

"Sayfa kaç saniyede yükleniyor" sorusu tek başına bir şey söylemez. Kullanıcı için anlamlı an, aradığı şeyin ekranda belirdiği ve tıklamaya cevap verdiği andır. Bakılacak yer bu yüzden toplam yükleme süresi değil, en büyük içeriğin boyanma süresi (LCP) ile etkileşim gecikmesi (INP).

Bu konuda sık tekrarlanan bir tavsiye var: "ilk ekranda görünen içeriği lazy loading ile öncelikli yükleyin." Cümle kendi içinde çelişiyor. loading="lazy" tarayıcıya "bu görsel şimdi gerekmiyor" demenin yoludur; ilk ekrandaki en büyük görsele koyduğunuzda LCP'yi bilerek geciktirmiş olursunuz. Ayrım yapmak lazım: kapak görselinde loading="eager" ve fetchpriority="high", katlamanın altındaki her şeyde lazy. Önbellek ve CDN bunun üstüne gelir, yerine değil.

Hız iddialarını genelde saha verisiyle doğrularım, laboratuvar skoruyla değil. Test makinesi hızlı bağlantıda ve boş CPU'yla çalışıyor; kullanıcının telefonu ikisine de sahip değil.

Eski tarayıcı desteği bir bütçe kararı

"Eski cihazlarda da sorunsuz çalışsın" tavsiyesi maliyetini söylemediği için kolay kabul ediliyor. Oysa geriye dönük destek bedava değil: bir polyfill paketi tüm ziyaretçilere iniyor, yani ziyaretçilerin yüzde birine hizmet etmek için kalan yüzde doksan dokuza ek yük bindiriyorsunuz.

Doğru soru şu: bu tarayıcıdaki kullanıcı ne kadar ve size ne getiriyor? Kendi trafiğinize bakmadan verilecek bir cevap yok. Payı ihmal edilebilir çıkarsa hedef "aynı görünsün" değil, "çalışsın" olmalı. Sayfa temel HTML'iyle okunabiliyor, form gönderilebiliyor, satın alma tamamlanabiliyorsa gölge ve animasyonun eksikliği kimsenin işini bozmuyor.

Duyarlı tasarım nerede biter

Mobilin masaüstünü geçtiği doğru, ama bu genel bir istatistik ve sizin projeniz için geçerli olmayabilir. Kurumsal panellerde tablo mobile hiç uğramadan masaüstünde açılır. Bu yüzden kırılma noktalarını moda listelerden değil, kendi ölçümünüzden çıkarın.

Mobile taşırken asıl iş sıkıştırmak değil, elemek. Masaüstünde yan yana duran altı filtreyi küçük ekrana katlamak yerine, hangi ikisinin gerçekten kullanıldığına bakıp gerisini bir panelin arkasına almak daha iyi sonuç veriyor. Dokunma hedeflerini de unutmayın: parmak imleç kadar hassas değil, iOS'un 44 puanlık önerisi keyfi bir sayı değil.

Formlar: en ucuz kazanç

Kullanıcı deneyimi iyileştirmelerinin en ucuzu formlarda. Doğru type ve autocomplete değerleri birkaç dakikalık iş, karşılığı ise mobilde açılan doğru klavye ve otomatik dolan alanlar.

• type="email", type="url", type="tel", type="date": klavye ve seçici cihazdan geliyor, siz yazmıyorsunuz.
• autocomplete="one-time-code": SMS ile gelen doğrulama kodu klavyenin üstünde önerilir.
• inputmode="numeric": sayısal giriş isteyip type="number"'ın yan etkilerinden kaçınmanın yolu.

Telefon ve kart numarasında type="number" kullanmak yaygın bir hata. Alan sayı olarak yorumlandığı için baştaki sıfır kaybolabiliyor, ok tuşları değeri değiştiriyor ve bazı tarayıcılarda spinner çıkıyor. Hata mesajlarını da tarayıcının varsayılan metnine bırakmayın; "lütfen bu alanı doldurun" kullanıcıya hangi alanın hangi biçimi beklediğini söylemiyor.

Sırayı doğru kurmak

Bu beş başlığı aynı anda yapmaya çalışan ekip genelde hiçbirini bitiremiyor. Sıralamayı maliyet ve etki oranına göre kurun: önce form alanları ve otomatik doldurma, sonra ilk ekranın yükleme önceliği, sonra mobil eleme, en son eski tarayıcı desteği. Sonuncusu listede en gösterişli, etki başına maliyeti en yüksek olan da o.