Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Affordance dalam Desain Form

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Mari kita lihat affordance di dunia digital, khususnya bagaimana kita dapat mengambil prinsip-prinsip ini dan menerapkannya pada elemen UI sehari-hari kita dalam menciptakan seperti tombol, kolom formulir, ikon, metafora dan elemen visual lainnya.

Affor-apa itu?

Affordances adalah tindakan-tindakan yang mungkin antara objek dan individu. Sebagai contoh, tombol pintu affords gerakan memutar. Apakah individu mengakui kemungkinan tindakan itu tidak relevan--affordance masih ada

"Affordance dirasakan" di sisi lain berkomunikasi bagaimana pengguna harus terlibat dengan itu. Pengguna akan tahu apakah akan mendorong, menarik, memutar dan seterusnya. Dirasakan affordance harus kombinasi tindakan yang benar-benar mungkin dan orang-orang yang hanya dianggap sebagai mungkin.

Penanda menyarankan untuk individu tindakan apa mungkin. Dalam berbagai cara, Karakteristik dari sebuah objek menyarankan kepada individu tindakan apa mungkin. Sebagai contoh, kebulatan menandakan bahwa itu affords memutar.

Mengapa Apakah Affordance penting?

Ini mungkin tampak seperti akal sehat untuk mendiskusikan sesuatu seperti Handle pintu karena mereka begitu mana-mana di kehidupan sehari-hari. Tetapi berpikir tentang teknologi baru dan inovasi, seperti mobil keyless entry. Mereka adalah wilayah baru bagi banyak orang, karena itu penanda sangat penting. Tombol menonjol kecil mungkin menawarkan petunjuk untuk fungsinya.

  1. Satu Tekan buka pintu mobil pintu.
  2. Tahan tombol untuk mengunci mobil.

Daripada membaca manual, sebagai pengguna kita akan melihat isyarat dari masa lalu, produk analog, untuk menavigasi melalui dunia kita selalu berubah.

Desain Form

Affordances juga relevan dalam desain antarmuka pengguna. Dalam artikel ini cepat saya akan membahas aplikasi mereka dalam bentuk desain (kolom formulir, tombol, elemen-elemen navigasi dll) dengan beberapa contoh yang relevan, menyarankan perbaikan saat aku pergi. Karena mereka memiliki properti fisik yang sebenarnya tidak, seperti desain industri, apa yang akan saya merujuk kepada "dianggap affordances".

"Flat tombol" desain

Desain Flat tombol bermasalah. Mereka sering tersesat dalam desain, bukan diinterpretasikan sebagai grafis banner.

Bentuk (berdasarkan sebuah aplikasi yang akan tetap anonim) mendaftar berikut menunjukkan sejumlah elemen.

  1. Judul
  2. Field input
  3. Tombol utama CTA
  4. Tombol sekunder

Ada banyak elemen yang berbeda di sini, tapi sedikit untuk membedakan antara mereka, sehingga mereka semua berbaur. Ini adalah bentuk, yang menyarankan bahwa ada tombol dan Field input yang hadir, tetapi pengguna mungkin perjuangan untuk menganggap mereka sebagai "affording" tindakan tertentu.

Perbaikan utama CTA

Bagaimana kita mungkin meningkatkan desain sehingga pengguna lebih mudah merasakan direktif ke "Buat akun"? Dapat membantu untuk melakukan hal berikut:

  • Tambahkan halus drop shadow untuk mengekspresikan kedalaman mengisyaratkan gerakan "menekan". Saya bukan penggemar gradien dan bayangan, namun dilakukan dalam konteks yang tepat dapat meningkatkan affordance dirasakan.
  • Mungkin bulat tepi dan membuat tombol lebih kecil, sehingga tidak keliru sebagai header banner atau sub.
  • Pasti meningkatkan kontras. Saat ini, nuansa cahaya abu-abu dan putih sulit untuk membedakan terhadap satu sama lain. Abu-abu gelap akan benar-benar membawa keluar tombol dan berkendara tindakan pengguna.


Tombol Kedua

Tombol sekunder ini super minimal tersesat, dan penanda yang sebaliknya akan membedakannya dari kolom formulir (batin bayangan pada input, misalnya) hilang. Beberapa saran untuk perbaikan adalah sebagai berikut:

  • Sudut-sudut membulat untuk menandakan bahwa itu adalah sebuah tombol yang membutuhkan menekan.
  • Jarak: posisi tombol lebih dekat untuk opsi "Buat akun" akan lebih berkomunikasi dengan jelas bahwa itu adalah terkait dalam beberapa cara.
  • Label: bukan "sudah memiliki account", mempertimbangkan sesuatu yang lebih mudah seperti "login" untuk menandakan tindakan apa yang akan lakukan tombol.

Bidang formulir masukan kontrol

Contoh bentuk lain, kali ini untuk memasukkan rincian pengiriman. Affordances kolom formulir tampak mencolok, namun, mereka dapat memiliki dampak yang cukup besar.

Beberapa saran untuk perbaikan meliputi:

  • Mempertimbangkan fakta bahwa bidang kode pos adalah ukuran yang sama seperti semua bidang lainnya. Di Australia, kode pos adalah empat digit, di Belanda enam. Dalam setiap kasus, kode pos selalu lebih pendek dari baris alamat yang pertama, sehingga masukan lebih sesuai ukuran yang dapat membuat pengguna lebih nyaman.
  • Desain flat di sini dapat efektif, namun ini mungkin lebih akurat ditafsirkan sebagai serangkaian Field input jika kita menambahkan beberapa kedalaman. Beberapa orang mungkin menganggap bidang ini sebagai banner atau tombol berdasarkan desain dari halaman-halaman sebelumnya.
  • Kontras yang lebih besar akan meningkatkan keterbacaan bentuk secara umum, meskipun ini tidak langsung terhubung dengan affordances. ini

Kesimpulan

Pada artikel ini kami melihat beberapa contoh bentuk dan bagaimana UI mereka berhubungan dengan affordances yang dirasakan dalam desain UI. Memahami persepsi pengguna memberi Anda wawasan ke dalam bagaimana desain dalam cara yang jelas dan intuitif. Desain Anda akan kurang mungkin membingungkan pengguna, agak membantu mereka dalam menyelesaikan perjalanan pengguna dalam serangkaian langkah-langkah logis.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.