School of Information Systems

Konsep affordance dalam perancangan UI/UX

23 Aug 2023

Affordance diperkenalkan dalam ilmu design oleh Don Norman, teori ini merupakan turunan dari teori sosialnya Gibson. Teori ini menjelaskan mengenai setiap benda memiliki affordance dimana manusia dan hewan mengambil tindakan berdasarkan persepsi langsung dari fungsi komponen yang ada di lingkungan fisik mereka. Don Norman menggunakan affordances untuk membahas bagaimana alat dan dan objek perlu dirancang sedemikian rupa sehingga penggunaan yang dimaksudkan, kemampuan yang dimaksudkan jelas bagi pengguna. Hal ini diisyaratkan kepada pengguna melalui petunjuk perseptual. Contohnya pada gambar pintu dibawah ini, kita akan tahu bahwa itu adalah pintu dan bagaimana cara membukanya karena melihat adanya gagang pintu.  

Dengan semakin tergantungnya manusia kepada produk digital, para perancang produk digital seperti UI/UX designer harus mengerti mengenai konsep affordances. Dengan menerapkan konsep affordance kepada UI/UX, pengguna dapat lebih memahami cara kerja website atau apps, selain itu affordances dapat mengurangi kesalahan yang dapat dilakukan oleh pengguna. 

Beberapa jenis affordances: 

  1. Perceptible – Karakteristik perseptual dari objek itu sendiri menunjukkan kemungkinan tindakan apa yang tersedia dan diinginkan – misalnya, gagang pintu. 
  2. Hidden – Pada antarmuka yang tidak memiliki affordances yang jelas, pengguna sering kali harus mengandalkan pengalaman dan/atau coba-coba untuk menentukan tindakan yang mungkin dilakukan – misalnya, mereka mengarahkan kursor/klik pada menu yang diduga dapat berfungsi. 
  3. False – Karakteristik objek menunjukkan bahwa pengguna dapat melakukan sesuatu yang tidak dapat mereka lakukan – misalnya, teks yang digarisbawahi tetapi bukan merupakan tautan/link. 
  4. Physical – Karakteristik perseptual menunjukkan kepada pengguna apa yang harus dilakukan – misalnya, tombol “Tambahkan ke keranjang” yang besar dan sangat terlihat. 

Physical affordances pada tampilan pada aplikasi Spotify. Pada saat cursor diarahkan pada gambar tertentu, maka akan muncul icon play yang menunjukkan musik ini dapat dimainkan. 

  1. Cognitive – Fitur desain yang membantu pengguna memperhatikan atau mengetahui sesuatu – misalnya, teks yang diberi label dengan jelas untuk mengumumkan apa yang akan terjadi jika pengguna menekan tombol tertentu. 
  2. Sensory – Fitur desain yang membantu pengguna merasakan sesuatu – misalnya, suara ketikan ketika sedang mengetikkan sesuatu di mobile apps. 
  3. Functional – Fitur desain yang membantu pengguna mencapai tujuan – misalnya, sebuah barang muncul di keranjang belanja setelah pengguna mengeklik “Tambahkan ke keranjang”. 
  4. Pattern – Anda mengikuti ketentuan yang sudah lazim untuk meminta pengguna mengambil tindakan – misalnya, ikon hamburger menunjukkan menu. 
  5. Negative – Anda memblokir pengguna agar tidak melanjutkan ke tujuan ketika mereka harus memberikan lebih banyak data – misalnya, tombol “Buat akun” yang berwarna abu-abu tetap ada hingga pengguna melengkapi formulir. 

 

Referensi: 

RA Dyah Wahyu Sukmaningsih