[TIPS UI]Daftar Periksa untuk Menggunakan Ikon Di UI

on

|

views

and

comments

Ikon adalah salah satu elemen yang paling sering digunakan dalam antarmuka pengguna grafis. Apa yang membuat ikon bagus?

Pada artikel ini, saya ingin membagikan daftar periksa sederhana yang dapat Anda gunakan untuk memastikan bahwa ikon yang Anda gunakan berfungsi untuk pengguna Anda.

1. Mudah dikenali

Kejelasan adalah karakteristik terpenting dari antarmuka yang hebat. Sayangnya, kejelasan ikon sering rusak.

Ikon harus pertama-tama dan terutama mengomunikasikan makna. Ketika tidak jelas apa yang diwakili ikon, ikon itu langsung kehilangan maknanya dan menjadi tidak lebih dari gangguan visual.

APA YANG MEMBUAT IKON BESAR ADALAH FAKTA BAHWA MAKNANYA DAPAT DILAKUKAN TANPA MEMBACA LABEL

Beberapa aturan sederhana akan membantu Anda menghindari menggunakan ikon yang tidak menyampaikan artinya.

Coba gunakan ikon yang akrab bagi pengguna Anda

Pemahaman pengguna akan suatu ikon didasarkan pada pengalaman sebelumnya. Karena itu lebih baik menggunakan ikon yang sudah dikenal daripada unik.

Andalkan ikon universal. Ikon seperti rumah, cetak, main, dan pencarian adalah sangat umum sehingga mereka tidak memerlukan penjelasan apa pun.

Ikon yang memiliki makna universal
Melakukan penelitian. Periksa ikon yang digunakan oleh pesaing Anda.
Jangan gunakan ikon dengan makna yang saling bertentangan

Ikon yang bisa mewakili banyak hal harus dihindari. Misalnya, ikon ‘Hati’ dan ‘Bintang’ dapat berarti menyukai atau meletakkan item ke favorit. Saat digunakan bersama-sama mereka dapat membingungkan pengguna.

Image for post

Image for post

Ikon Heart and Start adalah ikon dengan makna yang saling bertentangan
Arti ikon uji

Jangan dengarkan frasa seperti “Orang akan menggunakan aplikasi kami setiap hari; mereka akan belajar arti dari ikon kita. ” Uji ikon Anda!

Aturan 5 detik adalah cara yang efektif untuk menguji ikon Anda. Tanyakan kepada orang-orang apa yang mereka harapkan dari ikon itu.

JIKA ITU MENGAMBIL LEBIH DARI 5 DETIK UNTUK BERPIKIR DARI IKON YANG SESUAI UNTUK SESUATU, ITU TIDAK AKAN BAHWA ICON BISA SECARA EFEKTIF BERKOMUNIKASI MAKNA

Skalabilitas uji

Uji apakah ikon Anda masih dapat dikenali dalam ukuran kecil seperti 15 x 15 px.

Image for post
Ikon musik berskala baik
Pasangkan ikon yang tidak dikenal dengan label

Jika Anda masih ingin menggunakan ikon unik, pertimbangkan untuk menggunakan label teks di sampingnya.

Ikon dipasangkan dengan label teks
Jangan mendefinisikan kembali arti ikon

Cukup mudah untuk membingungkan pengguna dengan mengubah arti ikon. Ketika fungsi ikon berbeda dari yang diharapkan, Anda membingungkan pengguna.

JANGAN KEMBALI RODA THE!

Bahkan sedikit perbedaan dalam arti menghalangi kemampuan pengguna untuk memahami ikon.

Untuk waktu yang lama, Google Documents menggunakan ikon yang terlihat hampir seperti hamburger. Mayoritas antarmuka menggunakan ikon yang sama untuk mewakili menu navigasi utama. Tetapi Google mendefinisikan kembali maknanya dan menggunakannya sebagai tindakan ‘Kembali’. Ketika pengguna mengklik ikon ini, mereka diarahkan ke beranda Google Documents.

Image for post
Ikon di sudut kiri atas Google Doc dapat membingungkan pengguna
2. Menyenangkan secara visual

Dimungkinkan untuk menyampaikan kepribadian merek melalui ilustrasi, warna, dan ikon. Dilakukan dengan benar, ikon tentu dapat meningkatkan daya tarik estetika desain.

Kurangi jumlah detail grafik

Prinsip KISS berfungsi untuk semua elemen UI termasuk ikon. Simpan ikon sesederhana mungkin, dan hindari kompleksitas yang tidak perlu dengan mengikuti dua aturan:

Batasi jumlah warna yang digunakan. Gunakan tidak lebih dari 3 atau 4 warna untuk menjaga desain tetap bersih.
Kurangi jumlah detail grafik dengan berfokus pada karakteristik dasar objek. Usahakan untuk menjaga skema desain karena desain skema diterjemahkan dengan baik pada layar dan resolusi yang berbeda.

Image for post

Jangan terlalu mewah. Hindari mendesain ikon dengan terlalu banyak detail grafis.
Ciptakan kesenangan dengan menambahkan efek animasi

Animasi keduanya dapat memiliki tujuan fungsional yang jelas dan menyenangkan pengguna. Untuk kasus seperti perubahan status, dimungkinkan untuk menggunakan animasi untuk membuat pengalaman yang lebih dinamis.

Image for post
Gambar: Helen Tran
3. Ukurannya benar

Ikon harus menjadi target yang baik bagi pengguna. Meninggalkan terlalu sedikit ruang untuk ikon di ponsel adalah salah satu kesalahan paling umum di kalangan desainer. Saat Anda mendesain untuk sentuhan, pastikan bahwa ikon berukuran cukup besar untuk mudah disentuh dengan jari. Ukuran target yang disarankan untuk objek layar sentuh adalah 7-10mm. Juga, pastikan untuk menambahkan padding di antara target untuk mencegah ketukan yang salah.

Image for post
Ukuran target aktual = ukuran target visual + bantalan. Gambar: Microsoft
4. Konsisten

Konsistensi adalah prinsip utama dalam desain.

DESAIN KONSISTEN ADALAH DESAIN INTUITIF

Baik kegunaan dan kemampuan belajar meningkat ketika elemen serupa memiliki tampilan dan fungsi yang konsisten dengan cara yang sama.

Konsistensi internal

Set ikon harus memiliki penyatuan visual. Ikon yang Anda putuskan untuk digunakan untuk produk Anda harus memiliki gaya yang sama. Idealnya, mereka semua harus terlihat seperti dirancang oleh orang yang sama. Berikut adalah beberapa aturan yang perlu Anda ikuti untuk menciptakan rasa persatuan:

Gunakan skema warna atau warna yang sama untuk semua ikon Anda.
Gunakan bentuk yang sama dan atribut penataan lainnya (seperti ukuran batas) untuk semua ikon Anda.

Image for post
Ikon yang tidak memiliki cukup kohesi terlihat salah
Konsistensi dengan platform

Pastikan gaya ikon konsisten dengan platform yang Anda targetkan. Mereka akan paling dikenali oleh pengguna Anda.

Image for post

Ikon Apple iOS dan Google Android
Konsistensi dengan keluarga produk

Jika Anda memiliki rangkaian produk, pastikan gaya ikon yang sama (atau setidaknya serupa) digunakan di semua produk.

 

 

 

sumber:uxplanet.org

Share this
Tags

Must-read

Mantaflow Creating Fire

Menciptakan efek api? Mudah dengan Mantaflow! https://www.youtube.com/watch?v=lR9vjaYzeYQ
spot_img

Recent articles

More like this