Butonun rengi değil, yeri

“Butonu kırmızı yapalım.” Neredeyse her projede bir kez duyuyorum. Arkasındaki düşünce anlaşılır: buton fark edilmiyorsa daha dikkat çekici bir renk onu kurtarır. Ama çoğu zaman sorun renk değil, yeridir.

Bir kullanıcı sayfayı açtığında gözü belli bir sırayla dolaşır: başlık, görsel, ilk paragraf. Buton bu yolun üzerinde değilse rengi ne olursa olsun görülmez. Butonu kullanıcının bakışının ve parmağının zaten gittiği yere taşıdığınızda, rengini değiştirmeden fark edilir hâle gelir.

Telefonda başparmağımın nereye ulaştığına. İnsanların büyük kısmı telefonu tek elle, başparmakla kullanıyor. Ekranın alt ve orta kısmı rahat ulaşılan bölge; üst köşeler ise zor. En önemli işlem, yani satın al, randevu al, mesaj gönder gibi düğmeler ekranın üst köşesinde duruyorsa kullanıcı her seferinde elini değiştirmek zorunda kalıyor.

İkinci baktığım şey, sayfanın ilk ekranında ne anlatıldığı. Kullanıcı kaydırmadan bu sayfanın ne olduğunu ve ne yapması gerektiğini anlayabiliyor mu?

Beş kişiye bir görev verip konuşmadan izlemek. “Bu sitede randevu alın” ya da “Bu ürünü sepete ekleyin” diyorum ve sonra susuyorum. Kullanıcının nerede durakladığını, nereye dokunup geri döndüğünü, hangi kelimeyi anlamadığını izlemek, aylarca süren tartışmaları birkaç dakikada bitiriyor.

Bu test pahalı değil; beş kişi, bir telefon ve bir ekran kaydı yeterli. Kullanılabilirlik sorunlarının büyük kısmı ilk birkaç kullanıcıda kendini gösteriyor.

Her şeyin hareket etmesi. Kayan başlıklar, beliren kartlar, imleci takip eden şekiller. Doğru kullanıldığında hareket kullanıcıya neyin değiştiğini anlatır; ama okumak isteyen kullanıcı için gereksiz hareket gürültüdür.

Hareketin bir maliyeti de var: yavaş telefonlarda ve zayıf internette sayfayı ağırlaştırıyor. Benim kuralım şu: hareket bir şeyi açıklamıyorsa, kaldırın.

Beğeninizi değil, kullanıcınızın davranışını ölçün. Toplantı odasında herkesin bir fikri var ve hepsi kendi zevkine göre konuşuyor. Ama sitenin gerçek sahibi onu kullanan kişi.

Tasarım kararlarını mümkün olduğunca veriye bağlayın: kullanıcılar sayfanın neresinde ayrılıyor, formun hangi alanında vazgeçiyor, hangi düğmeye hiç dokunmuyor? Bu sorulara cevap verdikçe tasarım tartışmaları kısalıyor.

Kâğıt ve kalem. İlk prototip her zaman kâğıtta. Kâğıtta çizilen bir ekranı atmak kolay; bilgisayarda saatlerce uğraştığınız bir tasarımı atmak zor. Bu yüzden fikirleri önce kâğıtta deniyor, en iyisini ekrana taşıyorum.

Çoğu zaman yolda çalıştığım için masam da değişiyor; ama kâğıt ve kalem her yerde benimle.

“Biraz daha pop olsun.” Ne demek istendiğini anlamak için genellikle üç soru daha sormam gerekiyor. Daha genç bir kitleye mi hitap etmek istiyoruz, daha enerjik bir his mi, yoksa rakip bir sitenin bir özelliğini mi beğendik?

Tasarım geri bildiriminde en işe yarayan cümle, his yerine sorunu anlatan cümle. “Kullanıcılar fiyatı bulamıyor” gibi bir cümleyle çözüm aramak, “daha pop olsun” ile aramaktan çok daha kısa sürüyor.

Altın Örümcek Web Ödülleri’nde emlak kategorisinde ikincilik alan bir site. Ödül güzel ama asıl öğrendiğim şey, kullanıcıların aradıkları bilgiye ne kadar az adımda ulaşabildiklerinin her şeyden önemli olduğuydu.

Mobil uygulama, duyarlı web ve meditasyon uygulaması gibi çok farklı projelerde çalıştım; hepsinde aynı ilke işe yaradı: kullanıcının yapmak istediği şeyi en kısa yoldan yapabilmesi.

Taslakları hızlandırdı. Karar vermeyi değil. Bugün birkaç dakikada onlarca ekran fikri üretmek mümkün; ama hangisinin kullanıcının sorununu çözdüğüne karar vermek hâlâ tasarımcının ve kullanıcı testinin işi.

Yapay zekâyı en çok metin denemelerinde, kullanıcı senaryolarını çeşitlendirmede ve tekrar eden işleri hızlandırmada kullanıyorum. Tasarımın neden öyle olduğunu açıklayamıyorsanız, onu kimin ürettiği fark etmez; iyi bir tasarım değildir.

Ekranın dışına çıkın. Kullanıcıyı izlemeden tasarım olmaz. İnsanların telefonlarını nasıl tuttuğunu, nerede ve hangi koşullarda kullandığını gözlemleyin: otobüste, kuyrukta, güneşin altında, yavaş internetle.

Orta Asya’da gezerken bunu çok net görüyorum: aynı uygulama farklı bir şehirde, farklı bir internet hızında ve farklı bir alışkanlıkla bambaşka deneyimlenebiliyor. Tasarımı yalnızca kendi ekranınızda test ederseniz, kullanıcınızın dünyasını kaçırırsınız.

Mobil arayüz tasarımında en çok göz ardı edilen konu, ekranın hangi bölümüne kolay ulaşıldığı. Telefonu tek elle kullanan biri için ekranın alt ortası en rahat bölge; üst köşeler ise en zor. Bu yüzden birçok uygulama en önemli düğmeleri ekranın altına taşıyor: alt menüler, sabit satın alma düğmeleri, yüzen mesaj butonları.

Web sitelerinde de aynı ilke geçerli. Sabit bir alt çubukta duran “Randevu al” ya da “Mesaj gönder” düğmesi, sayfanın en üstündeki menüde saklanan aynı düğmeden çok daha sık kullanılıyor. Dokunma alanlarının yeterince büyük olması da önemli: küçük düğmeler yanlış dokunmaya ve vazgeçmeye yol açıyor.

Renk tabii ki önemli; düğme arka plandan yeterince ayrışmalı ve okunabilir olmalı. Ama rengi değiştirmeden önce yerine, boyutuna ve üzerindeki metne bakmak, çoğu zaman daha büyük fark yaratıyor.

Bir kullanıcı butona dokunduktan sonra çoğu zaman bir formla karşılaşıyor. Dönüşümün en çok kaybedildiği yer de burası. Kullanıcı karar vermiş, harekete geçmiş; ama uzun, karışık ya da hata veren bir form yüzünden vazgeçiyor.

İyi bir formun kuralları basit. Yalnızca gerçekten gereken bilgiyi isteyin; her ek alan, vazgeçme ihtimalini artırır. Alanların ne istediğini kutunun içine değil üstüne yazın; kullanıcı yazmaya başladığında ipucu kaybolmasın. Telefonda doğru klavyeyi açın: telefon numarası için rakam klavyesi, e-posta için @ işaretli klavye. Hata mesajlarını kullanıcı formu gönderdikten sonra değil, alanı doldururken ve anlaşılır bir dille gösterin.

Son olarak, form gönderildikten sonra ne olacağını söyleyin. “Size 24 saat içinde dönüş yapacağız” gibi bir cümle, kullanıcının aynı formu üç kez göndermesini de, başka bir yere yazmasını da engeller.

Kullanıcı deneyimi yalnızca ekranın nasıl göründüğü değil, ne kadar hızlı açıldığıdır. Yavaş açılan bir sayfa, en iyi tasarlanmış butonu bile görünmez kılar; çünkü kullanıcı ona ulaşmadan ayrılır.

Tasarımcı olarak hıza en çok görsel kararlarla etki ediyoruz. Büyük ve sıkıştırılmamış görseller, çok sayıda yazı karakteri, ağır animasyonlar ve her sayfada yüklenen gereksiz bileşenler sayfayı yavaşlatıyor. Tasarım aşamasında her görselin ve her hareketin bir maliyeti olduğunu bilmek, geliştirme ekibinin işini de kolaylaştırıyor.

Yolda çalışırken bunu çok net hissediyorum. Hızlı bir bağlantıda fark edilmeyen bir yükleme süresi, zayıf bir mobil bağlantıda sayfanın hiç açılmaması anlamına gelebiliyor. Bu yüzden tasarımlarımı mutlaka yavaş bağlantı koşullarında da deniyorum.

Erişilebilirlik çoğu zaman sonradan düşünülen bir konu; oysa iyi kullanıcı deneyiminin temelinde duruyor. Yeterli renk kontrastı, okunabilir yazı boyutu, dokunması kolay büyüklükte düğmeler, ekran okuyucuların anlayabileceği etiketler ve klavyeyle gezinilebilen menüler yalnızca engelli kullanıcılar için değil, güneşin altında telefonuna bakan, tek eliyle çocuğunu tutan ya da yorgun gözlerle gece ekrana bakan herkes için önemli.

Erişilebilir bir tasarım, arama motorları ve yapay zekâ araçları tarafından da daha kolay anlaşılıyor. Doğru başlık yapısı, açıklayıcı bağlantı metinleri ve görsellerin alternatif metinleri, hem kullanıcıya hem de makineye sayfanın ne anlattığını söylüyor.

Etkileyebilir ama çoğu zaman belirleyici değildir. Butonun yeri, boyutu, üzerindeki metin ve sayfadaki görsel hiyerarşi genellikle renkten daha büyük etki yaratır. Renk, düğmenin arka plandan ayrışmasını sağlayacak kadar güçlü olmalıdır.

Tek elle kolay ulaşılan bölgeye; genellikle ekranın alt ve orta kısmına. Sabit bir alt çubuk ya da sayfanın akışı içinde kullanıcının bakışının gittiği yer iyi bir başlangıçtır.

Birçok kullanılabilirlik sorununu görmek için beş kullanıcı iyi bir başlangıçtır. Kullanıcılara gerçek bir görev verin ve müdahale etmeden izleyin; testi düzenli aralıklarla tekrarlayın.

Bir şeyi açıklıyorsa evet: bir menünün açıldığını, bir işlemin tamamlandığını göstermek gibi. Süs için kullanılan hareket ise okumayı zorlaştırır ve sayfayı yavaşlatır.

Evet. Gereksiz her alan kullanıcının vazgeçme ihtimalini artırır. Yalnızca gerçekten ihtiyaç duyduğunuz bilgileri isteyin; ek bilgileri sonraki adımda toplayabilirsiniz.

Yavaş açılan sayfalarda kullanıcılar içeriğe ulaşmadan ayrılır. Görselleri sıkıştırmak, gereksiz animasyon ve bileşenleri azaltmak ve sayfayı yavaş bağlantılarda test etmek hem deneyimi hem dönüşümü iyileştirir.