Dalam User Interface (UI), ikon berfungsi menambahkan bentuk dan fungsi pada desain saat digunakan. Ikon dapat mempercepat interaksi pengguna yang dengan mudah dikenali, dan juga dapat menambahkan gaya dan minat visual pada desain antarmuka pengguna.

Penggunaan ikon tidak perlu yang terlalu komplek. Bahkan beberapa ikon yang ditempatkan dengan baik dapat meningkatkan pengalaman pengguna jika dilakukan dengan benar. Berikut tips dan praktik terbaik ikonografi sebelum diterapkan dalam desain UI.

1. Membuat ikon sederhana

Jangan membuat desain ikon yang terlalu rumit. Buat sesederhana mungkin, terutama pada ukuran yang kecil. Ikon yang baik adalah bentuk dan piktogram sederhana yang dapat langsung dikenali pengguna.

2. Membuat ikon yang mudah dikenali

Ikon harus dengan mudah dikenali. Jika pengguna bertanya-tanya arti ikon berarti tujuan dari ikon gagal. Jangan membiarkan pengguna menebak-nebak, karena hal itu hanya akan membuat mereka bertanya-tanya apa tujuan ikon itu, merusak pengalaman pengguna secara keseluruhan.

3. Memberi makna ikon

Gambar yang digunakan untuk ikon harus memiliki makna yang mudah dipahami. Makna harus langsung dikaitkan dengan fungsi ikon, contohnya seperti ikon rumah digunakana untuk beranda. Ketika metafora terkadang mudah dipahami oleh pengguna, ikon yang harfiah umumnya lebih cepat dikenali.

4. Ikon yang terukur

Ikon seringkali digunakan dalam ukuran kecil, tetapi juga terkadang ditemukan kasus untuk digunakan dalam ukuran yang lebih besar (atau bahkan yang lebih kecil). Oleh karena alasan itu pastikan bahwa ikon tetap terlihat bagus terlepas dari ukuran tampilannya. Anda dapat menggunakan ikon yang terlihat komplek saat ukurannya semakin besar tetapi pastikan juga bahwa tidak terlalu rumit.

5. Ikon dapat diakses

Jika Anda tidak menggunakan label teks untuk menyertai ikon, pastikan menerapkan deskripsi (tag alt) yang tepat sehingga fungsi ikon tetap dapat diakses oleh orang yang membacanya lewat komputer.

Sejalan dengan itu, pastikan ikon memiliki kontras yang cukup dan ukurannya cukup untuk dapat diakses. Selain itu juga pastikan bahwa target sentuh di sekitar ikon cukup bagi pengguna yang mungkin memiliki masalah kontrol motorik untuk tetap dapat mengklik area yang dimaksud.

6. Berhati-hati dengan permainan warna

Dalam aturan umum, ikon haruslah satu warna. Selain itu jangan menggunakan warna yang berbeda untuk setiap ikon kecuali jika itu secara langsung berkontribusi untuk membuatnya lebih bermanfaat. Dalam banyak kasus, menggunakan warna berbeda untuk mengindikasikan bahwa ikon aktif, sedangkan sisanya menggunakan warna lain.

7. Ikon Vektor

Ketika membuat ikon custom, buat selalu dalam bentuk vektor. Jadi akan lebih mudah untuk diubah dimensinya dan hasilnya tetap jelas. Ketika disimpan untuk digunakan pada produk digital, format SVG menjadi pilihan tepat untuk mempertahankan skalabilitas ikon serta transparansi.

8. Menjaga ikon konsisten

Ikon harus konsisten dalam gaya dan ukuran. Menggunakan ikon yang todak konsisten akan membuat bingung pengguna dan membuat antarmuka terlihat berantakan. Begitu pula menggunakan ikon yang ukurannya tidak sama akan memiliki efek yang serupa.

Namun dalam hal ukuran, bobot visual menjadi fokus utama daripada dimensi piksel itu sendiri. Untuk itu, Anda dapat mendesain ikon yang memiliki bobot visual rendah sedikit lebih besar daripada ikon yang lebih berat.

Sebagai contoh dengan membandingkan ikon bintang dan kotak. Jika membuatnya dengan dimensi piksel yang sama persis, bujur sangkar akan tampak lebih besar karena tampilannya yang lebih solid. Dengan cara merentangkan sisi kiri dan kanan bintang sedikit melebihi dimensi bujur sangkar, membuat ikon terlihat berukuran sama. Pastikan juga untuk memasukkannya ke dalam wadah dengan dimensi yang sama sehingga penempatan dan jarak yang tepat tetap terjaga.

9. Memprioritaskan kejelasan

Pengguna tidak boleh dibiarkan bertanya-tanya mengenai fungsi dari ikon. Pastikan bahwa citra yang digunakan segera dapat dicerna oleh pengguna dan mereka tidak mencoba untuk mencari tahu ikon tentang apa.

Pastikan juga bahwa fungsi yang diwakili ikon harus jelas. Kapan pun ketika menggunakan selain ikon universal dapat menjadi pertimbangan untuk menambahkan label teks untuk menjelaskan fungsi ikon tersebut. Hal ini sangat membantu pengguna baru dan memastikan bahwa pengguna tidak bingung.

10. Menggunakan ikon universal

Ketika berbicara tentang ikonografi, jangan mencoba untuk menciptakan kembali yang sudah ada. Tentu saja hal ini unik, ikon yang kreatif dapat menambah daya tarik visual ke antarmuka. Tetapi jika pengguna tidak memahaminya atau sulit untuk menguraikannya akan merusak pengalaman pengguna secara keseluruhan.

Untuk fungsi secara umum, tetap pada ikon yang dikenal orang. Berikut adalah beberapa contoh ikon yang diakui secara universal:

  • Ikon rumah untuk halaman beranda
  • Tiga garis horizontal untuk menunjukkan hamburger menu
  • Kaca pembesar untuk pencarian
  • Pensil untuk mengedit atau memodifikasi konten
  • Acungan jempol atau hati untuk menyukai sesuatu
  • Hati atau bintang untuk menyukai sesuatu
  • Bookmark untuk menyimpan website yang disukai
  • Panah keluar dari atas kotak untuk membagikan sesuatu
  • Panah menunjuk ke bawah ke kotak untuk mengunduh sesuatu
  • Sebuah gigi atau roda gigi untuk pengaturan
  • Ikon kunci untuk menunjukkan keamanan

Jika menggunakan fungsi yang disebutkan dalam daftar, biasanya yang terbaik adalah menggunakan ikon yang dikenal secara universal. Jika menyimpang dari yang sudah ada, pastikan untuk menambahkan label teks untuk membantu pengguna.

Tidak semua desain UI perlu menyertakan ikon, tetapi bila digunakan dengan benar, ikon tersebut dapat meningkatkan pengalaman pengguna sekaligus memberikan daya tarik estetika tambahan untuk situs web dan produk digital lainnya.

Source : https://dribbble.com/stories/2021/09/15/ui-icon-tips

Photo by : Balázs Kétyi