Affordance (sağlarlık): bir arayüz neye tıklanacağını nasıl anlatır?
Bir düğmenin tıklanabilir, bir alanın yazılabilir göründüğünü sağlayan ilkeyi; affordance ile signifier farkını ve arayüzde nasıl kullanıldığını öğrenirsiniz.
Bir bakışta
- Affordance, bir nesnenin kullanıcıya sunduğu eylem olanağıdır. Kapı itmeye, düğme basmaya, kaydırma çubuğu sürüklemeye imkân verir.
- Signifier, bu olanağı fark ettiren görünür ipucudur. Kapıdaki düz levha itmeyi, düğmedeki gölge ya da çerçeve basılabilirliği haber verir.
- Arayüzlerde asıl iş algılanan affordance'tır. Ekran fiziksel değildir; kullanıcı neyin tıklanabilir olduğunu görsel ipuçlarından çıkarır.
- Yanlış ipucu, kullanıcıyı bilinçsizce yanlış yere yöneltir. Düz metne benzeyen bir düğme ya da düğme gibi görünen bir başlık kafa karıştırır.
Affordance nedir?
Affordance (sağlarlık), bir nesnenin ya da arayüz öğesinin kullanıcıya sunduğu eylem olanağıdır. Bir kapı kolu çekmeye, bir düğme basmaya, bir giriş kutusu yazmaya olanak verir. Terim, algı psikoloğu J. J. Gibson'dan gelir; Donald Norman onu tasarım alanına taşırken algılanabilir olanakları kastetmiştir.
Tasarımcı açısından önemli olan, olanağın var olması kadar kullanıcının onu fark etmesidir. Kullanıcı bir öğenin ne işe yaradığını açıklama okumadan, ilk bakışta anlıyorsa tasarım bu işini yapıyor demektir.
Affordance ile signifier farkı
Norman, affordance kavramının tasarımda yanlış anlamda, yani tıklanacak yeri gösteren her ipucu için kullanıldığını belirtmiş ve bu işi karşılamak için signifier terimini önermiştir. Buna göre affordance eylem olanağının kendisidir; signifier ise o olanağın nerede ve nasıl kullanılacağını haber veren algılanabilir işarettir.
Kapı örneği ayrımı açıklar: bir kapının itilebilmesi affordance'tır, üzerindeki düz metal levha ise itmeyi söyleyen signifier'dır. Arayüzde, bir bağlantının altının çizilmesi ya da bir düğmenin dolgu rengi ve gölgesi birer signifier'dır. Çoğu UX tartışmasında söylenen affordance aslında signifier tasarımıdır.
Arayüzde algılanan affordance
Fiziksel nesnelerde olanağı malzeme ve biçim sağlar. Ekranda ise her şey düz bir yüzeydir; kullanıcı tıklanabilirliği yalnız görsel ipuçlarından ve alışkanlıklarından çıkarır. Bu yüzden arayüz tasarımında algılanan affordance önem kazanır.
Kullanıcıyı yönlendiren yaygın ipuçları şunlardır: • Düğmelerde dolgu rengi, çerçeve, gölge ve yuvarlatılmış köşe • Bağlantılarda altı çizili ya da belirgin renkli metin • Giriş alanlarında çerçeveli kutu ve içinde yer tutucu metin • Sürüklenebilir öğelerde tutamaç işareti • Fare ile üzerine gelindiğinde imleç ve renk değişimi
İpucunun gücü tutarlılıkla artar: aynı eylem türü uygulamanın her yerinde aynı görünürse kullanıcı bir kez öğrenip her yerde uygular.
Olanak, ipucu ve eylem arasındaki zincir
Bir etkileşimin başarılı olması, birkaç şeyin birbirine bağlanmasına dayanır. Önce öğenin gerçekten bir eylem sunması gerekir. Sonra bu olanak bir ipucuyla görünür kılınmalıdır. Kullanıcı ipucunu fark ederse eylemi yapar.
Zincirin herhangi bir halkası kopunca sorun çıkar. Olanak var ama ipucu yoksa kullanıcı özelliği bulamaz. İpucu var ama olanak yoksa, örneğin düğme gibi görünen ama tıklanmayan bir etiket varsa, kullanıcı boşuna dener ve güveni zedelenir.
Eylem olanağı ipucuyla görünür olur, kullanıcı da eyleme geçer
Etkileşimin zinciri
- AffordanceÖğenin sunduğu eylem olanağı
- SignifierOlanağı fark ettiren görünür ipucu
- Kullanıcı eylemiİpucunu fark eden kişinin tıklaması ya da yazması
Sık görülen tasarım hataları
En yaygın hata, tıklanabilir bir öğeyi düz metin gibi göstermektir. Şık görünmesi için çerçevesi ve rengi silinen bir düğme, kullanıcıda ne yapacağını anlamama hissi yaratır. Tersi de aynı derecede sorunludur: düğme görünümlü ama bir şey yapmayan başlıklar ve etiketler kullanıcıyı yanıltır.
Bir diğer hata, tutarsızlıktır. Aynı işlevi sayfadan sayfaya farklı biçimde sunmak kullanıcının her seferinde yeniden düşünmesine yol açar. Son olarak, yalnız renge dayalı ipuçları renk körlüğü yaşayan kullanıcılar için yetersiz kalır; çerçeve, ikon ya da alt çizgi gibi ek bir ipucu eklemek gerekir.
Affordance nasıl sınanır?
En doğrudan yöntem kullanılabilirlik testidir. Kullanıcıdan bir görevi yapmasını isteyip nerelere tıklamaya çalıştığını gözlemlersiniz. Tıklanabilir sanılan ama tıklanmayan öğeler ile fark edilmeyen asıl eylemler hemen ortaya çıkar.
Hızlı bir ön kontrol için ekran görüntüsü birkaç kişiye kısa süre gösterilir ve nelere tıklayacaklarını söylemeleri istenir. Beklentiyle sonuç arasındaki fark, ipucu tasarımındaki eksiği gösterir.
UX programlarında yeri
Affordance ve signifier, arayüz tasarımının temel kavramlarındandır. UX/UI Bootcamp, kullanıcı deneyimi ve etkileşim tasarımı ile UI tasarım temellerini, kullanılabilirlik ve erişilebilirliği ele alır. UX / UI Uzmanlığı Sertifika Programı ise etkileşim tasarımı, düşük doğruluklu prototip ve kullanılabilirlik testi başlıklarıyla bu kavramı çalışma akışına bağlar.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Affordance ile signifier aynı şey mi?
Hayır. Affordance eylem olanağıdır, signifier ise bu olanağın nerede ve nasıl kullanılacağını gösteren algılanabilir ipucudur. Gündelik UX konuşmasında ikisi karıştırılır; tasarımcı çoğunlukla signifier tasarlar.
Düz (flat) tasarım affordance'ı bozar mı?
Sadeleştirme, ipucunu da silerse bozar. Gölge, çerçeve ve dolgu gibi işaretler kalkınca bir öğenin tıklanabilir olduğu anlaşılmayabilir. Düz tasarımda bile renk, boşluk ve metin biçimiyle tıklanabilirlik belli edilmelidir.
Mobil arayüzlerde affordance nasıl farklılaşır?
Mobilde fare ile üzerine gelme durumu olmadığından ipucu daha çok görünümden gelir. Parmakla dokunma hedefinin yeterince büyük olması ve kaydırma, sürükleme gibi hareketlerin görsel olarak önerilmesi önem kazanır.
Kullanıcı ipucunu fark etmiyorsa ne yapılır?
Önce gözlemle sorunun nerede olduğu bulunur. İpucu belirginleştirilir, eylem daha tutarlı gösterilir ya da etiket netleştirilir. Değişiklikten sonra aynı görev yeniden test edilir; iyileşme ancak kullanıcı davranışında görülürse kalıcı kabul edilir.