3. Bad Icons: How to Identify and
Improve Them
The visual already has a different, established meaning
The reference is too esoteric and requires too many
inferences
Blurry
The icon is repeated for every item in a list
The icons only work as a set
1
2
3
4
5
What Makes an Icon “Bad”
4. The visual already has a different,
established meaning
A star icon, for example is for rating and bookmarking,
not to view “presentation templates.” The Internet
Explorer icon means “launch Internet Explorer,” not
“open a list of web links.”
1
5. The reference is too esoteric and
requires too many inferences
Resemblance Icons
Depicting a physical object which the icon is intended to
represent. Using a picture of an envelope to represent a
file of electronic mail would be a resemblance icon.
envelope
e-mail
2
6. The reference is too esoteric and
requires too many inferences
Reference Icons
Depicting some object which by reference or analogy
might represent the concept the icon is intended to
represent. For example, using a picture of a clamp to
represent a file-compression utility (because it
squeezes) would be a reference icon.
clamp zip
7. The reference is too esoteric and
requires too many inferences
Arbitrary Icons
Arbitrary shapes that only have meaning by convention.
Traffic signs are often arbitrary icons and may form a
good source of computer icons because of their fairly
standardized international use. For example, a warning
triangle might be used as the icon for a warning
message.
Warning sign
10. Clock as Resemblance or
Reference Icon
Ditinjau dari jenis “resemblance icon”, ikon “jam” ini lebih cocok untuk mewakili
fitur berorientasi jam seperti waktu, jam alarm, atau waktu mulai yang dijadwalkan
untuk suatu acara. Meskipun “jam” juga dapat berarti “waktu yang telah berlalu”,
berdasarkan jenis “reference icon”, tapi menggunakan ikon jam pada situs ini
digunakan untuk menyatakan “sejarah”. Sehingga mungkin analoginya terlalu
“jauh”, sehingga pengguna tidak memperhatikannya.
https://www.nngroup.com/articles/breaking-web-conventions/
11. Floppy disk as “save” icon
Awalnya, penggunaan floppy disk sebagai
ikon simpan, merupakan “resemblance icon”,
karena kemiripannya. Seiring dengan
perkembangan jaman, floppy disk telah
berubah ke hard disk, sehingga ikon simpan
dianggap sebagai “reference icon”.
Floppy disk digunakan untuk mewakili fungsi
umum menyimpan dokumen di berbagai
perangkat. Banyaknya pengguna yang belum
pernah melihat hard drive, membuat ikon
floppy disk terus dipakai pada saat peralihan
dari disket ke hard drive terjadi.
Saat ini, banyak pengguna muda belum pernah melihat floppy disk, dan ikonnya
telah menjadi “arbitrary icon” bagi para pengguna ini. Mengapa kotak kecil mewakili
simpan? Seperti yang ditunjukkan contoh ini, klasifikasi ikon dapat berubah
seiring waktu atau dengan perubahan lain dalam konteks.
12. Blurry
3
Assumedly because some intranet teams don’t
have graphic designers on staff or proper
software, some icons are produced with subpar
tools, and are thus grainy-looking, fuzzy,
and hard to make out.
13. The icon is repeated for every
item in a list4
Dewi
Riani
Budi
User
User
Dewi
Riani
Budi
Why add a silhouette icon next to every
user in a list of names, when the list
contains only names and nothing else
Bad Good
14. The icons only work as a set
5
Examples of intranet icons: without their labels, can
you tell what each one is for? The solution is shown
further down in this article.
Bad
Good
15. Tips for Designing with Icons
Keep the design simple and schematic.
Use the 5-second rule: if it takes you more than 5 seconds
to think of an appropriate icon for something, it is unlikely
that an icon can effectively communicate that meaning.
Test the icons for recognizability: ask people what they
expect the icons to stand for.
Test the icons for memorability: ask a repeat set of users if
they can remember the icon’s meaning after being told
what it represented a couple weeks earlier.
16. 4 quality criteria for icons
Findability: Can people find the icon on the page?
Recognition: Do people understand what the icon
represents?
Information scent: Can users correctly guess what will
happen once they interact with the icon?
Attractiveness: Is the icon aesthetically pleasing?
20. Hierarchy Button
Button Button Button
Primary Secondary Tertiary
Don’t use background for every button
Check out the button visual hierarchy
Hierarchy is the most important point that’s forgotten
@ux.cagla
22. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
As you browse the web every day, you likely stumble across
hundreds of buttons asking you to perform an action –
whether it’s to subscribe for instant news alerts via email, to
sign up for a gym membership TODAY, or to buy that new t-
shirt you’ve been waiting for. In the world of online
marketing, these buttons are often referred to as “Call-to-
Action buttons”.
23. Call To Action (CTA)
It’s worth remembering the easiest button for a
visitor to click is always the “Back” button.
https://www.gosquared.com/blog/call-to-action-buttons#intro
Buy Now Buy Now
Bad Good
Make your Call-to-Action buttons look like buttons
24. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Better
Combine a header with a button for clarity
Buy Now
Good
Buy Now
30 Day Money-Back Guarantee
25. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Good
Strive for concise copy
Join 10,000
business- start your
business here
Bad
Start Trial
Say goodbye to your low conversion rate!
26. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Good
Emphasise a sense of urgency
Free Trial
Bad
Start Free Trial
“Start your trial”
“Download for
free”
“Request a demo”
27. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Good
Choose a bold colour for your buttons
Get Started
Bad
Get Started
Get StartedGet Started
Get Started
28. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Good
Use a bigger font-size, and a legible font
Bad
Get StartedGet Started
Get Started
Get
Started
29. Call To Action (CTA)
https://www.gosquared.com/blog/call-to-action-buttons#intro
Good
Choose a solid, attractive shape for your buttons
Not So Good
Get StartedGet Started
Ikon Kemiripan
Menggambarkan objek fisik yang dimaksudkan untuk diwakili ikon. Menggunakan gambar amplop untuk mewakili file surat elektronik akan menjadi ikon kemiripan.
Tantangan kegunaan utama untuk ikon kemiripan adalah untuk merancang gambar yang benar-benar terlihat seperti objek yang dimaksudkan. Tidak begitu mudah mengingat ukurannya yang mungil.
Ikon Referensi/Rujukan
Menggambarkan beberapa objek yang dengan referensi atau analogi mungkin mewakili konsep ikon dimaksudkan untuk mewakili. Misalnya, menggunakan gambar klem untuk mewakili utilitas kompresi file (karena diperas) akan menjadi ikon referensi. Akan sulit untuk menghasilkan ikon kemiripan yang baik untuk kompresi file kecuali melalui penggunaan kombinasi sebelum dan sesudah dokumen besar dan kecil, tetapi ikon yang menunjukkan perubahan status sangat sulit untuk dipahami. Ikon referensi kadang-kadang juga disebut ikon simbolik atau ikon indeks.
Ikon Sewenang-wenang
Bentuk sewenang-wenang yang hanya memiliki makna berdasarkan konvensi. Rambu lalu lintas seringkali merupakan ikon yang sewenang-wenang dan dapat membentuk sumber ikon komputer yang baik karena penggunaannya yang berstandar internasional. Misalnya, segitiga peringatan dapat digunakan sebagai ikon untuk pesan peringatan. Jelas, ikon sewenang-wenang adalah yang paling sulit bagi pengguna untuk dipelajari, kecuali mereka digunakan secara luas sehingga konvensi menjadi kebiasaan. Misalnya, diragukan bahwa banyak orang khawatir bahwa bentuknya "?" sepenuhnya sewenang-wenang sebagai indikator pertanyaan. Jadi, ini adalah ikon yang baik untuk menunjukkan bantuan
Ikon Sewenang-wenang
Bentuk sewenang-wenang yang hanya memiliki makna berdasarkan konvensi. Rambu lalu lintas seringkali merupakan ikon yang sewenang-wenang dan dapat membentuk sumber ikon komputer yang baik karena penggunaannya yang berstandar internasional. Misalnya, segitiga peringatan dapat digunakan sebagai ikon untuk pesan peringatan. Jelas, ikon sewenang-wenang adalah yang paling sulit bagi pengguna untuk dipelajari, kecuali mereka digunakan secara luas sehingga konvensi menjadi kebiasaan. Misalnya, diragukan bahwa banyak orang khawatir bahwa bentuknya "?" sepenuhnya sewenang-wenang sebagai indikator pertanyaan. Jadi, ini adalah ikon yang baik untuk menunjukkan bantuan
Ikon Sewenang-wenang
Bentuk sewenang-wenang yang hanya memiliki makna berdasarkan konvensi. Rambu lalu lintas seringkali merupakan ikon yang sewenang-wenang dan dapat membentuk sumber ikon komputer yang baik karena penggunaannya yang berstandar internasional. Misalnya, segitiga peringatan dapat digunakan sebagai ikon untuk pesan peringatan. Jelas, ikon sewenang-wenang adalah yang paling sulit bagi pengguna untuk dipelajari, kecuali mereka digunakan secara luas sehingga konvensi menjadi kebiasaan. Misalnya, diragukan bahwa banyak orang khawatir bahwa bentuknya "?" sepenuhnya sewenang-wenang sebagai indikator pertanyaan. Jadi, ini adalah ikon yang baik untuk menunjukkan bantuan
Diasumsikan karena beberapa tim intranet tidak memiliki desainer grafis pada staf atau perangkat lunak yang tepat, beberapa ikon diproduksi dengan alat di bawah standar, dan karenanya tampak kasar, tidak jelas, dan sulit untuk dilihat.
Mengapa menambahkan ikon siluet di sebelah setiap pengguna dalam daftar nama, ketika daftar hanya berisi nama dan tidak ada yang lain? Mengapa menambahkan ikon rantai kecil dengan setiap tautan di daftar tautan? Mengapa menambahkan ikon kertas di sebelah setiap dokumen dalam daftar dokumen?
Pengguna tidak harus mempelajari semua ikon dalam satu set untuk menentukan arti dari ikon individual.
Jaga desain tetap sederhana dan skematis. Kurangi jumlah detail grafik dengan memfokuskan pada karakteristik dasar objek daripada menciptakan gambar yang sangat realistis untuk mempercepat pengenalan. (Detail rumit sulit dibedakan pada ukuran yang lebih kecil.)
Gunakan aturan 5 detik: jika Anda membutuhkan lebih dari 5 detik untuk memikirkan ikon yang sesuai untuk sesuatu, kecil kemungkinan ikon tersebut dapat mengomunikasikan makna itu secara efektif.
Uji ikon untuk dapat dikenali: tanyakan kepada orang-orang apa yang mereka harapkan dari ikon itu.
Uji ikon untuk diingat: tanyakan pengguna berulang apakah mereka dapat mengingat makna ikon setelah diberi tahu apa yang diwakilinya beberapa minggu sebelumnya.
Metode pengujian yang berbeda membahas berbagai aspek kegunaan ikon. Tapi apa yang membuat ikon bisa digunakan? Berikut adalah 4 kriteria kualitas untuk ikon:
Dapat ditemukan: Dapatkah orang menemukan ikon di halaman?
Pengakuan: Apakah orang-orang mengerti apa yang diwakili ikon itu?
Aroma informasi: Dapatkah pengguna menebak dengan benar apa yang akan terjadi setelah mereka berinteraksi dengan ikon?
Daya tarik: Apakah ikonnya indah secara estetika?
Semua masalah ini akan sangat penting untuk keberhasilan desain akhir, tetapi harus dipertimbangkan secara terpisah untuk menentukan cara meningkatkan ikon.
Untuk memastikan bahwa tombol Anda tidak dapat dihapus dan mudah diklik, pastikan itu terlihat seperti tombol - gunakan font yang tebal, ukuran font yang besar, beri jumlah ruang yang luas di sekitar teks, memiliki batas yang kuat di sekitar teks, dan idealnya memiliki latar belakang tebal yang kontras dengan warna teks.
Kita semua memiliki rentang perhatian yang pendek ketika kita menjelajah di web. Pengunjung jarang punya waktu untuk membaca setiap kata di halaman atau untuk sepenuhnya menghargai cerita lengkap yang Anda coba sampaikan. Jangan takut mengulangi pesan utama Anda di seluruh halaman Anda - saran yang terutama berlaku untuk tombol ajakan bertindak Anda.
Tepat di atas tombol ajakan bertindak Anda adalah tempat yang sempurna untuk mengingatkan pembaca untuk apa mereka berada di laman, dan untuk menambahkan sedikit kepastian tentang apa yang akan dilakukan tombol tersebut. Misalnya, jika Anda menjalankan toko e-niaga, teks Anda di atas "Beli sekarang" CTA bisa jadi "Beli hari ini untuk pengiriman gratis". Untuk produk SaaS, Anda bisa mengatakan "Coba gratis selama 14 hari" tepat sebelum tombol "Mulai uji coba".
Tombol Ajakan Bertindak terbaik cenderung memiliki sedikit kata, tetapi setiap kata sangat penting untuk memahami apa yang akan terjadi ketika tombol diklik.
Mungkin tergoda untuk menjelaskan secara terperinci apa yang akan dilakukan tombol Anda, tetapi ketika Anda menambahkan apa pun kecuali kata-kata penting, Anda akan menemukan CTA Anda akan menjadi begitu lama sehingga akan lari keluar halaman dan menjadi terlalu sulit untuk dibaca. Tombol yang tidak dapat dibaca juga cenderung tidak dapat diklik.
Warna tombol Ajakan Bertindak Anda jelas tergantung pada warna kunci yang Anda asosiasikan dengan merek Anda. Tetapi ada beberapa tips untuk memastikan Anda mendesain CTA yang efektif, dan terlihat cantik dengan menggunakan warna secara bijaksana.
Secara luas dilaporkan bahwa warna tebal hijau dan biru membuat warna yang bagus untuk kancing; warna yang terkait dengan tindakan negatif cenderung berkinerja lebih buruk - merah dan hitam umumnya dilaporkan kurang efektif. Kebenaran pada warna, adalah pilihan yang tepat benar-benar tergantung pada situs Anda, merek Anda, dan segala sesuatu yang mengelilingi tombol Anda.
Anda dapat menguji warna tombol Anda untuk menentukan apa yang paling sesuai untuk situasi spesifik Anda, tetapi jarang menggunakan waktu Anda untuk menguji seluas yang dilakukan Google beberapa tahun lalu dengan 41 warna biru yang berbeda.
Warna tombol Ajakan Bertindak Anda jelas tergantung pada warna kunci yang Anda asosiasikan dengan merek Anda. Tetapi ada beberapa tips untuk memastikan Anda mendesain CTA yang efektif, dan terlihat cantik dengan menggunakan warna secara bijaksana.
Secara luas dilaporkan bahwa warna tebal hijau dan biru membuat warna yang bagus untuk kancing; warna yang terkait dengan tindakan negatif cenderung berkinerja lebih buruk - merah dan hitam umumnya dilaporkan kurang efektif. Kebenaran pada warna, adalah pilihan yang tepat benar-benar tergantung pada situs Anda, merek Anda, dan segala sesuatu yang mengelilingi tombol Anda.
Anda dapat menguji warna tombol Anda untuk menentukan apa yang paling sesuai untuk situasi spesifik Anda, tetapi jarang menggunakan waktu Anda untuk menguji seluas yang dilakukan Google beberapa tahun lalu dengan 41 warna biru yang berbeda.
Tidak perlu menemukan kembali roda ketika datang ke desain tombol. Selalu ada aspek “fesyen” dalam hal mendesain tombol yang dikonversi dengan baik dan tampak hebat, tetapi berikut beberapa cara pintas untuk membantu Anda merancang tombol yang bagus:
Persegi panjang dengan bantalan besar di sekitar tombol adalah titik awal yang logis.
Membulatkan sudut tombol Anda membantu pengguna memvisualisasikan awal dan akhir tombol.
Menambahkan bayangan ke tombol dapat membantu bentuk "pop" dari halaman dan mengapung di atas latar belakang dengan jelas.
Latar belakang blok bukan hanya batas akan membantu tombol menonjol.
Pengunjung berharap menemukan navigasi horisontal di atas atau navigasi vertikal di sisi kiri. Menempatkan navigasi Anda di tempat-tempat standar membuat situs Anda lebih mudah digunakan. Itu berarti tingkat pentalan yang lebih rendah, lebih banyak halaman per kunjungan dan konversi yang lebih tinggi.
Diharapkan. Ya, pemasaran adalah tentang diferensiasi, tetapi gaya navigasi Anda bukan tempat untuk melakukannya. Tujuan Anda adalah membantu orang menemukan konten Anda, bukan menunjukkan kepada mereka cara baru untuk berkeliling situs web.
Navigasi harus deskriptif. Label seperti "Produk" atau "Layanan" bersifat umum untuk semua bisnis dan tidak melakukan apa pun untuk berkomunikasi dengan pengunjung. Ironisnya, "Apa yang kami lakukan" tidak mengatakan apa yang Anda lakukan. Simpan pengunjung klik (dan bantu kurangi rasio pentalan Anda) dengan membuat navigasi situs web Anda deskriptif.
Ketika navigasi Anda menunjukkan layanan atau produk utama Anda, situs Anda akan berkomunikasi secara instan.
Navigasi Anda juga merupakan peluang besar untuk menunjukkan relevansi Anda dengan mesin pencari. Karena audiens Anda tidak mencari "produk" atau "layanan," navigasi dengan label ini tidak akan membantu Anda menentukan peringkat. Gunakan label yang menyertakan frasa kunci populer sesuai dengan Alat Kata Kunci Google.
Kiat Pro! Navigasi di seluruh situs dan struktur situs itu sendiri harus direncanakan dengan mempertimbangkan mesin pencari.
Menu drop down buruk karena dua alasan. Bergantung pada bagaimana mereka diprogram, mesin pencari sulit dirayapi. Tapi ada alasan lain yang lebih besar ...
Menu drop-down sangat mengganggu, menurut studi kegunaan dari NN Group. Ini karena sebagai pengunjung, kami menggerakkan mata lebih cepat daripada menggerakkan mouse. Ketika kami memindahkan mouse ke item menu, kami telah memutuskan untuk mengklik ... dan kemudian drop down memberi kami lebih banyak opsi. Ini momen gesekan di benak kita sebagai pengunjung.
Lebih buruk lagi, drop down mendorong pengunjung untuk melewati halaman-halaman penting tingkat atas. Jika situs Anda menggunakan menu drop down, Anda dapat melihat masalah di sana dalam statistik Anda: kunjungan rendah pada halaman tinggi.
Pengecualian: mega drop down yang sangat besar dengan banyak opsi dapat diuji dengan baik dalam studi kegunaan. Jika Anda memiliki situs besar dengan banyak bagian, mereka dapat meningkatkan kegunaan.
Kiat Pro: Trik ini juga berfungsi untuk seluruh halaman, bukan hanya navigasi. Setiap elemen visual yang dihapus membuat semuanya tetap lebih menonjol. Anda dapat melakukan banyak hal "lebih keras" dengan membuat hal-hal lain "lebih tenang."
Navigasi ringkas juga penting untuk SEO. Karena pasti ada lebih banyak tautan ke halaman rumah Anda daripada halaman interior Anda, itu memiliki paling "otoritas" dengan mesin pencari. SEO menyebut otoritas ini "jus tautan" dan seperti cairan, itu mengalir dari halaman rumah ke halaman yang lebih dalam melalui navigasi.
Ketika navigasi Anda memiliki terlalu banyak tautan, otoritas dan kepercayaan yang lebih rendah diturunkan ke halaman interior. Jus tautan diencerkan. Semakin ringkas navigasi Anda, semakin banyak otoritas beranda akan mengalir ke halaman interior, membuatnya lebih mungkin untuk peringkat.
Gunakan Kalkulator Jus Tautan untuk menghitung jumlah item yang dapat diklik di halaman rumah Anda. Amazon memiliki sekitar 100 dan situs mereka lebih besar dari milik Anda, bukan?
Kiat Pro: Trik ini juga berfungsi untuk seluruh halaman, bukan hanya navigasi. Setiap elemen visual yang dihapus membuat semuanya tetap lebih menonjol. Anda dapat melakukan banyak hal "lebih keras" dengan membuat hal-hal lain "lebih tenang."
Navigasi ringkas juga penting untuk SEO. Karena pasti ada lebih banyak tautan ke halaman rumah Anda daripada halaman interior Anda, itu memiliki paling "otoritas" dengan mesin pencari. SEO menyebut otoritas ini "jus tautan" dan seperti cairan, itu mengalir dari halaman rumah ke halaman yang lebih dalam melalui navigasi.
Ketika navigasi Anda memiliki terlalu banyak tautan, otoritas dan kepercayaan yang lebih rendah diturunkan ke halaman interior. Jus tautan diencerkan. Semakin ringkas navigasi Anda, semakin banyak otoritas beranda akan mengalir ke halaman interior, membuatnya lebih mungkin untuk peringkat.
Gunakan Kalkulator Jus Tautan untuk menghitung jumlah item yang dapat diklik di halaman rumah Anda. Amazon memiliki sekitar 100 dan situs mereka lebih besar dari milik Anda, bukan?