Glosari Web Design: Apa Itu "Affordance"?

Istilah "affordance" akan sering kamu dengar di dunia web design. Dia sering muncul di panduan pada Tuts+ juga. Sehingga artikel ini akan memberikan definisi untuk menghilangkan kebingungan apapun.

Definisi Umum

Terkadang ada sedikit kebingungan di sekitar affordance. Jado, mari lihat 3 istilah penting yang berhubungan dengannya berikut:

Affordance

Didefinisikan oleh Jame J. Gibson pada tahun 1970-an. Affordances adalah aksi yang mungkin di antara objek dan sebuah individu. Kenop pintu adalah salah satu contoh klasiknya; dia mendukung gerakan memutar. Baik dia mengenali maupun tidak kemungkinan dari aksi tersebut tidak mungkin-affordance-nya masih hadir.

Perceived Affordance

Istilah yang sering kita gunakan saat ini itu dibuat oleh Donald Norman dalam bukunnya The Design of Everyday Things (Aslinya "The Psychology of Everyday Things") dan sedikit konflik dengan milik Gibson. Norman mengambil ide konseptual dari affordance dan menambahkannya ke "human interpretation", memberi kita apa yang dia maksud sebagai "perceived affordance".

Kembali ke kenop pintu, dia adalah sebuah objek ywng memiliki bentuk yang mengomunikasikan cara pengguna berinteraksi dengannya. Jika didesain secara efektif pengguna secada insting akan tahu apakah perlu didorong, tarik, putar, dan lainnya,

Norman menyukai ide bahwa affordance haruslah sebuah kombinasi dari aksi yang sebenarnya mungkin dan mudah diterima.

Perceived affordance sangat relevan dengan desain antarmuka yang akan kita lihat nanti.

Signifiers

Signifiers memainkan peran penting dalam definisi Norman. Dalam berbagai cara, karakteristik dari sebuah objek mensuggestikan ke individu aksi apa yang mungkin. Signifiers adalah "bagian yang bisa diterima oleh sebuah affordance". Sekali lagi menggunakan contoh kenop pintu, kebulatannya menunjukkan bahwa dia bisa diputar.

Desain Interaksi

Sebagai pendesain situs, kita membangun cara antarmuka muncul dan berperilaku, mempengaruhi cara pengguna berinteraksi dengannya. Biasanya melalui elemen UI seperti tombol, kontrol input, komponen navigasi dan lainnya.

Kita menggunakan detil visual sebagai penanda yang akan membantu pengguna menerima cara seharusnya mereka beriteraksi dengan elemen UI.

Semua Hal "Datar" Itu

Apa yang layar komputer tampilkan tidak lebih dari sekoleksi piksel datar. Tapi dengan menyarankan kedalaman dan dimensi secara grafis kita bisa menerima affordances ke campurannya untuk membantu pengguna. Ambil tombol, sebagai contoh: Mana dari ini yang kamu terima sebagai tombol aksi yang lebih "affording"?

Ini mungkin argumen terbesar yang melawan pergerakan flat design; penghapusan detil terkadang bisa menghalangi affordance yang diterima. Contohnyam pernahkah kamu menghadapi formukir seperti ini?

Dengan menjadi super-minimal, tiap perubahan di antara tombol submit dan inputnya telah dilucuti. Signifiers (seperti inner shadows di input dan rounded corners di tombol) akan membanti komunikasi secara visual bahwa inoutnya ada kontainer dan tombolnya untuk "menekan".

"Desain yang baik memastikan bahwa aksi yang tepat bisa diterima dan yang tidak tepat tidak terlihat." - Donald Norman

Untuk Diingat

• Tidak semua pengguna sama! Affodances bisa diterima dan dterjemahkan tidak sama oleh tiap orang.
• Label dan instruksi sangat berguna dalam desain antarmuka, tapi dukung dia dengan indikasi visual.
• Dimana antarmuka grafis berfokus pada apa yang kita sebut sebagai "perceived affordance"; mereka tidak memiliki properti fisik aktual tidak seperti di desain produk.
• "Flat" design bisa menhomunikasikan affordance setara dengan skeumorphism-untuk memastikan aksinya bisa diterima saat mendesain.

Bacaan Lebih Jauh

• Affordances: Senjata Rahasia Desainer di Envato
• Desain dari Barang-barang Sehari-hari oleh Don Norman
  
• Dasar Desain Antarmuka di usability.gov
  
• Affordances dan Desain oleh Don Norman