Web sitesi veya uygulama form alanlarında genellikle "tamam" ya da "iptal" gibi buton seçenekleri yer alır. Çoğu durumda kullanıcılara iki seçeneği birden gösteririz. Peki bu formların sonunda kullanıcının karşısına hangi buton önce gelmeli? Bu yazımızda UX/UI alanında uzman yazılım geliştirici Nick Babich’in deneyimlerinden ve araştırmalarından yararlanarak, karar butonlarında kullanıcı deneyiminin önemini ele alacağız ve tasarımcılar arasında sıkça sorulan bu sorunun yanıtını vermeye çalışacağız.
Web sitesi veya uygulama form alanlarında genellikle “tamam” ya da “iptal” gibi buton seçenekleri yer alır. Çoğu durumda kullanıcılara iki seçeneği birden gösteririz. Peki bu formların sonunda kullanıcının karşısına hangi buton önce gelmeli? Bu yazımızda UX/UI alanında uzman yazılım geliştirici Nick Babich’in deneyimlerinden ve araştırmalarından yararlanarak, karar butonlarında kullanıcı deneyiminin önemini ele alacağız ve tasarımcılar arasında sıkça sorulan bu sorunun yanıtını vermeye çalışacağız.
Nielsen Norman Group başkanı ve kullanılabilirlik uzmanı Jakob Nielsen’ın dediği gibi “Dikkatli bir tasarım, ilk etapta, meydana gelen bir sorunu engeller.” Bir tasarımcı olarak, kullanıcılar farkında olmadan yanlış opsiyonu seçtiğinde çıkabilecek hata koşullarını ortadan kaldırmak için çalışmalısınız.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Kullanıcının, iki seçenek arasında net bir ayrım yapabilmesi için butonlarda farklı bir görsel ağırlık seçilmelidir. Ön plana çıkmasını istediğiniz butonun bir stile sahip görsel ağırlığı olmalıdır. Bu sayede kullanıcıya yol göstererek, soru işaretleri ortadan kaldırılabilir.
Açık ve belirgin etiket
İyi bir iletişim kutusunda tüm seçenekler mümkün olduğunca açık bir şekilde yer almalıdır. Her opsiyon için ayrı bir metin kullanmak bu yüzden önemlidir. Anlaşılır şekilde kullanılan buton metinleri kullanıcıya zaman kazandıracak ve hedefine ulaşması için yardımcı hizmet verecektir.
Buton metinlerinde sadece “Tamam” gibi genel ifadeler kullanmak yerine, burada kullanıcının nasıl bir hamle yapacağını alacağını açıklamak daha faydalı olabilir. Açıklayıcı bir başlık ve hedefe yönelik net metinlerle hazırlanmış butonlardan oluşan bir iletişim kutusu, kullanıcının karar deneyimini geliştirir. Kullanıcılara “Başla, Üye ol, Giriş Yap…” gibi ikna edici seçenekler sunun yani butonlarınız, kullanıcılarınıza bu seçim sonucunda nasıl bir içeriğe ulaşacaklarını söylesin.
Örneğin, Skype uygulaması tarafından verilen bu dosya iletimini iptal etme uyarı kutusu, “Tamam” ve “İptal” seçenekleriyle nereye ulaşılabileceğini tam olarak ifade edemiyor. Açıklama olarak verilen “İptal etmek istediğinize emin misiniz? Eğer iptal ederseniz dosyayı alamayacaksınız.” metni “İptal” seçeneğinin dosya iletimini iptal edeceğini ifade etse de aslında “İptal” butonuna tıklandığında başlıkta yer alan “İptal etme” işleminin iptal edileceği, kullanıcının kafasında büyük soru işaretleri yaratıyor. Burada çift olumsuz kullanmak yerine “Gönderime devam et” ve “Gönderimi iptal et” gibi açık seçik seçenekler sunmak kullanıcının yaptığı işlemden emin olmasını sağlar.
Birincil buton ne zaman olumludur?
Bir form ile ilişkili birincil buton daha güçlü bir görsel ağırlık taşımak zorundadır. İkincil butonların görsel ağırlığı, birincil butona göre daha zayıf olmalıdır. (hayalet butonlar, açık renkler vs.) İkincil butonlardaki görsel önemi azaltmak, olası hata riskini en aza indirir ve kullanıcıyı daha başarılı bir sonuca doğru yönlendirir. Aşağıdaki örnekte “Kaydet” pozitif birincil butondur.
Birincil buton ne zaman olumsuzdur?
Geri dönüş opsiyonu bulunmayan butona görsel ağırlık verilirse, hata riski tehlikeli derecede yükselecektir. Bu buton vurgulanarak güvenli bir seçenekmiş hissi yaratmamalıdır. Yapılan vurgu kullanıcının yanlışlıkla devam etmesine neden olabilir. Asıl önemli olan kullanıcıların etkileşim sürecinde gerçekleştirdiği eylemlerden ve kararlardan pişman olmasını engellemektir. Aşağıdaki örnekte “İptal” ikincil buton olmasına rağmen vurguludur. Bu sayede hata riskini önlenmeye çalışılmıştır.
İptal mi? Tamam mı?
“Tamam” veya “İptal” butonlarının konumlandırması tasarımcılar arasında popüler bir tartışma konusu olmuştur: Birincil eylem butonu mu, yoksa İkincil eylem butonu mu önce gelmeli? Aslında iki sıralama arasında önemli bir performans farkı bulunmaz. Her iki durumda da kullanıcının dikkatini yine de birincil eylem butonu çekecektir. Dolayısıyla sıralama duruma göre değişecektir. Deneyimlerimize göre birincil buton her zaman sağda kullanılmaktadır.
Apple, Google ve Microsoft Kullanım Kılavuzları
Platform kuralları ile tutarlılık, iletişim butonları tasarlarken dikkat edilmesi gereken en önemli prensiptir. “Tamam” ve “İptal” butonları ne yazık ki, Windows kullanıcı deneyimi yönergeleri, Apple kullanıcı arayüzü kuralları ve Google Android kullanım kurallarında farklıdır:
Microsoft Kullanım Kılavuzu aşağıdaki düzeni önerir. “İptal” butonu Windows platformlarında her zaman “Tamam” butonunun sağında konumlandırılır.
Apple MacOS Kuralları aşağıdaki örnekteki gibi “bir eylemi başlatan buton sağda kullanılır” der.
Google Android kuralları “Olumlu eylemler her zaman sağda konumlandırılır” cümlesiyle aşağıdaki gibi bir kullanımı tavsiye eder. Olumlu eylemler iletişimi tetikleyen kullanıcıyı hedefe doğru yönlendirir.
Bu platformlardan biri için uygulama tasarlıyorsanız, seçiminizi bu kurallara göre yapmanız işini kolaylaştıracaktır. Platformla tutarlı tasarımlar kullanıcılara alıştıkları bir deneyim sunar ve yeniden keşfetme zahmetinden kurtarır. Standart yapıyı kullanmak hataları engeller ve kullanıcıya değerli dakikalar, hatta kritik bir hata durumunda saatler kazandırır.
Kullanıcının seçeneklerini kullanıcı için seçin
Web sitenizde ya da uygulamanızda yer alacak karar butonları açık ve net; eyleme çağrı yapan CTA (Call to Action) butonları tıklamaya ikna edici olmalıdır. Butonların büyüklükleri ya da renklerine güvenmeyin, arayüz tasarımlarınızda daima birincil ve ikincil opsiyonlarınız, olumlu ve olumsuz eylemler ile tutarlı bir kurallar silsileniz olsun.
Kullanıcılarınızla etkileşime geçerken, butonlarınızı ikna edici cümlelerle konuşturun ki kullanıcıların anlamalarını, hissetmelerini ve hatırlamalarını sağlayın. Butonlarınız, kullanıcıya bu hamle sonucunda nasıl bir içeriğe ulaşacağını tastamam ifade etsin.
Peki, sizce, hangi button önce gelmeli? Yorumlarınızı bekleriz…
Sonuçta yine para (güç) kimdeyse o konuşur ve onun kurallarına göre tasarım yapmak zorunda kalırsınız. Bu her zaman böyle olmuştur, ne yazık ki olacak gibi görünüyor…..
Bunlar da ilgini çekebilir
Senin İçin Öneriyoruz
DAM BİLGİ TEKNOLOJİLERİ A.Ş. | SHERPA BLOG SİTE KULLANIM KOŞULLARI
Demek şifreni unuttun.
Olsun, hangimiz unutmuyoruz ki... Yeni bir şifre oluşturmak için e-posta adresini girmen yeterli.
Sonuçta yine para (güç) kimdeyse o konuşur ve onun kurallarına göre tasarım yapmak zorunda kalırsınız. Bu her zaman böyle olmuştur, ne yazık ki olacak gibi görünüyor…..