Ne anlama gelir?
Buton Hiyerarşisi (Button Hierarchy), bir sayfadaki eylemleri önem sırasına göre görsel olarak ayırmaktır. Birincil eylem (asıl istediğiniz) baskın; ikincil eylemler daha silik gösterilir.
Neden gerekli?
Her buton aynı derecede dikkat çekerse, kullanıcı hangisine basacağını bilemez ve karar felci yaşar. Net bir hiyerarşi, gözü asıl eyleme yönlendirir.
Uygulama
- Birincil CTA: dolgun, kontrast renk, belirgin
- İkincil eylem: çizgili (outline) veya soluk
- Her ekranda tek bir baskın birincil eylem
Ne yapmalı?
Her sayfada asıl istediğiniz tek eylemi belirleyin ve onu görsel olarak baskın kılın. Rakip butonların dikkati bölmesine izin vermeyin; net yönlendirme, dönüşümü artırır.
Ne anlama gelir?
Buton hiyerarşisi (button hierarchy / primary-secondary CTA), bir arayüzdeki butonların önem derecesine göre görsel olarak ayrılmasıdır. Birincil buton (primary CTA), sayfada istenen ana eylemi temsil eder ve en belirgin biçimde tasarlanır; ikincil butonlar (secondary CTA) ise daha az önemli eylemleri temsil eder ve daha az vurgulu görünür. Buton hiyerarşisi, kullanıcının dikkatini en önemli eyleme yönlendirerek dönüşümü artıran temel bir tasarım ilkesidir.
Buton hiyerarşisi seviyeleri
- Birincil: Ana istenen eylem (dolgu renkli, belirgin)
- İkincil: Alternatif eylemler (daha az vurgulu)
- Üçüncül: Küçük veya bağlantı biçiminde eylemler
Neden önemli?
Buton hiyerarşisi, bir sayfada birden fazla eylem seçeneği olduğunda kullanıcının kafasının karışmasını önler ve onu en önemli eyleme yönlendirir. Eğer bir sayfada tüm butonlar aynı görsel ağırlığa sahipse, kullanıcı hangisinin ana eylem olduğunu bilemez ve karar felci yaşar; bu, bilişsel yükü artırır ve dönüşümü düşürür. İyi bir buton hiyerarşisi, en istenen eylemi (örneğin "Satın Al" veya "Kaydol") görsel olarak öne çıkararak (dolgu renk, daha büyük boyut, belirgin konum) net bir yol gösterir; ikincil eylemler ise (örneğin "Daha Fazla Bilgi" veya "İptal") daha az vurgulu (çerçeveli, gri veya bağlantı biçiminde) sunulur, böylece mevcut ama dikkat dağıtmayan bir seçenek olarak kalır. Bu ayrım, kullanıcının gözünü doğal olarak ana eyleme yönlendirir ve onu düşünmeden doğru yola sokar. Buton hiyerarşisinin altın kuralı, genellikle bir ekranda tek bir baskın birincil buton bulunmasıdır; çok sayıda eşit derecede belirgin buton, hiyerarşiyi bozar ve kararı zorlaştırır. Renk, boyut, kontrast ve konum, buton hiyerarşisini oluşturan araçlardır. Buton hiyerarşisi ayrıca marka tutarlılığı sağlar; birincil ve ikincil buton stilleri site genelinde tutarlı kullanıldığında, kullanıcılar sezgisel olarak hangi butonun ana eylem olduğunu öğrenir. SEO ile getirilen trafiğin dönüşüme çevrilmesinde, net bir buton hiyerarşisi kullanıcıyı istenen eyleme yönlendirerek önemli rol oynar. Doğru buton hiyerarşisi, kullanıcı deneyimini netleştirir ve dönüşümü artırır.
Gerçek örnek
Bir sayfada "Satın Al" ve "Sepete Ekle" gibi birden fazla buton eşit vurgu taşıyordu; kullanıcılar hangisine tıklayacağını bilemiyordu. Buton hiyerarşisi oluşturulup ana eylem birincil (dolgu renkli, belirgin), diğerleri ikincil (daha az vurgulu) yapıldığında, kullanıcının dikkati ana eyleme yönlendi ve dönüşüm arttı.
Özet
Buton hiyerarşisi, butonların önem derecesine göre görsel olarak ayrılmasıdır; birincil buton ana eylemi belirgin biçimde, ikincil butonlar daha az vurgulu sunar. Kullanıcının dikkatini en önemli eyleme yönlendirir ve karar felcini önler. Genellikle bir ekranda tek baskın birincil buton olmalıdır; dönüşümü artırır.