Screen Control, Icon

Definisi

Icon merupakan representasi visual dari sebuah objek, action, atau ide. Salah satu hal terpenting dari icon adalah kemampuannya untuk menggantikan teks. Hasil penelitian menunjukkan bahwa penggunaan icon yang mudah dikenali dan jelas, memiliki potensi yang besar dalam memudahkan navigasi pengguna karena banyak orang cenderung menangkap gambar lebih cepat dibandingkan kata-kata. Namun, kesalahan persepsi sedikit pun dapat menyebabkan UX menjadi buruk sehingga penggunaan icon harus dites secara hati-hati untuk memaksimalkan penggunaannya terhadap target pengguna tertentu.

Ragam/Tipe

Menurut Babich(2016), terdapat tiga tipe icon yaitu universal, conflicting, dan unique icon.

Universal Icons

Ada beberapa icon yang telah dikenali secara universal oleh pengguna. Beberapa diantaranya adalah icon home, print, shopping cart, dan search.

Home, Print, and Search icon

Universal icon sangatlah jarang. Selain dari beberapa contoh yang telah disebutkan, kebanyakan icon bersifat ambigu. Icon dapat memiliki makna yang berbeda tergantung pada interface.

Confusing dan Conflicting Icons

Masalah datang ketika mengimplementasi pictogram yang sering digunakan dengan makna yang kontradiksi. Salah satu contohnya adalah penggunaan icon Heart dan Star. Kedua icon ini bersaing satu sama lain, karena fungsionalitasnya bervariasi antara app yang satu dengan yang lain.

Heart and Star icon

Icon ini sangat sulit untuk diinterpretasi dengan tepat. Dalam konteks individual app, icon ini dapat membingungkan ketika pengguna mengharapkan suatu outcome namun mendapat hasil yang lain.

Unique Icons

Terkadang sebuah produk memiliki sebuah unique function. Mendeskripsikan konsep yang lebih abstrak dengan sebuah pictogram tidaklah mudah. Banyak designer yang mencoba dan banyak pula designer yang gagal. Kegagalan terjadi karena fungsionalitas ikon yang sangat sulit untuk dikenali. Representasi simbol dari beberapa icon terkadang terlalu simpel dan tidak bermakna.

Apple iOS Game Center icon. Adakah hubungan antara icon tersebut dengan gaming?

Icon dapat memberikan experience yang sangat berbeda pada first-time user. Masalah lain yang muncul adalah first-time user cenderung menghindari element interface yang mereka tidak pahami.

Anatomi

Menurut material.io, sebuah icon terdiri dari:

1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area

Penempatan

Icon biasanya terdapat pada bagian app bar. Icon harus dikelilingi oleh space yang cukup untuk memudahkan sentuhan. Penambahan label pada icon membuatnya lebih aman walaupun menggunakan standard icon sekalipun. Icon juga dapat digunakan bersama dengan button labels dan data tables.

Icons dan Button Labels

Menurut Anthony(2014), terdapat dua faktor penting dalam menentukan lokasi icon:

1. Agar icon berfungsi sebagai visual scanning aid, user harus melihat icon sebelum melihat label yang mengiringi. Tempatkan icon di sebelah kiri label sehingga user melihat icon terlebih dahulu.
2. Posisikan icon dengan label’s heading, jangan meletakkannya sejajar dengan heading dan body. Melihat icon terlebih dulu akan membantu user untuk melakukan scan lebih mudah.

Icons pada Data Tables

Icon di sebelah kiri angka biasanya mengindikasikan maksud (intent) dari data, sedangkan icon di sebelah kanan angka biasanya menunjukkan kualitas data.

Terdapat dua kemungkinan untuk menempatkan icon pada data tables (Babich, 2016):

1. Status icon akan muncul di akhir baris. User akan melihat subjeknya terlebih dahulu, lalu value yang berasosiasi dengan subjek, dan status valuenya di akhir.
2. Jika icon berperan sebagai subjek, maka icon akan muncul di awal baris.

Penggunaan

Menurut Babich(2016), ada banyak manfaat yang dapat diperoleh dari penggunaan icon pada desain diantaranya:

1. Icon merupakan sasaran yang bagus (good targets). Ukuran icon cukup besar untuk dapat disentuh dengan mudah menggunakan jari atau mouse cursor
2. Icon menghemat ruang layar. Icon memungkinkan untuk menampilkan lebih banyak konten pada ruang yang relatif kecil
3. Icon dapat dikenali dengan cepat, terutama untuk standard icon yang pernah dilihat dan digunakan oleh user
4. Icon tidak butuh diterjemahkan untuk international users. Contoh yang bagus adalah amplop (envelope) yang terlihat sama di berbagai negara
5. Icon meningkatkan tampilan estetika dari sebuah desain karena membawa visual yang menyenangkan pada user experience.

Spesifikasi

Menurut Yalanska(2018), Beberapa spesifikasi yang harus dimiliki oleh icon adalah:

1. Clear, makna dari icon haruslah dapat dipahami dan diakses oleh target pengguna
2. Meaningful, icon memberikan value yang informatif
3. Recognizeable, simbol visual pada icon harus ditampilkan dalam bentuk yang dapat dikenali dan diartikan dengan benar oleh user
4. Simple, icon tidak dipenuhi dengan graphic element yang tidak dibutuhkan dan dapat dipahami dengan mudah
5. Scalable dan flexible, icon menyimpan unity, integrity, dan legibility nya dalam ukuran dan resolusi yang berbeda
6. Attractive, icon memenuhi aesthetic expectation dan menimbulkan harmoni dengan tampilan visual
7. Non-offensive, icon tidak memiliki makna tersembunyi atau persepsi yang dapat mengganggu target pengguna
8. Consistent, icon sesuai dengan konsep style dari layout yang digunakan.

Implementasi

IPB Scientific Repository merupakan situs web untuk menyimpan berbagai dokumen milik IPB secara online. Saat melakukan pencarian dokumen, user akan menemui gear icon. Apabila gear icon tersebut diklik, maka akan tampil pilihan seperti pada gambar berikut.

Banyak user yang tidak menyangka/mengharapkan jika fungsi sort option diasosiasikan dengan icon tersebut. Gear icon pada umumnya diasosiasikan dengan settings, sehingga penggunaan gear icon untuk melakukan sorting dokumen dianggap kurang sesuai. Fungsi sort option pada situs tersebut, lebih baik dipisah dengan fungsi results per page. Fungsi sort option kemudian diasosiasikan dengan icon sort yang lebih mudah dikenali oleh user seperti icon di bawah ini.

Referensi

1. Anthony. (2014, May 16). Where to Place Icons Next to Button Labels. Retrieved from http://uxmovement.com/buttons/where-to-place-icons-next-to-button-labels/
2. Babich, N. (2016, March 06). Icons as Part of an Awesome User Experience — UX Planet. Retrieved from https://uxplanet.org/icons-as-part-of-an-awesome-user-experience-e468e16b206b
3. Babich, N. (2016, October 20). Icons As Part Of A Great User Experience. Retrieved from https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
4. Material.io. (n.d.). System icons. Retrieved from https://material.io/design/iconography/system-icons.html#
5. Yalanska, M. (2018, October 01). Iconic Simplicity. The Vital Role of Icons. Retrieved from https://tubikstudio.com/iconic-simplicity-the-vital-role-of-icons/