The document discusses good and bad design practices for icons and web navigation. For icons, it provides examples of bad icons such as those that use visuals with different established meanings, references that are too obscure, blurry images, and icons that only work as a set. It then discusses design tips for icons including keeping them simple, testing for recognizability and memorability, and meeting criteria for findability, recognition, information scent, and attractiveness. For web navigation, it cautions against non-standard styles, generic labels, overuse of drop down menus, and including too many items. Overall it emphasizes the importance of usability testing and providing clear, intuitive interfaces.

1. Good vs
Bad Design
in HCI
Tenia
Wahyuningrum

2. Icons

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

8. Warning sign

9. 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?

17. Button

18. Elevator
Button
Bad design

19. Keyboard
Button
Bad design

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

21. Hierarchy Button
Sign In
Sign Up
Forgot Password?
Sign In
Sign Up
Forgot Password?
Bad Good

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

30. Web
Navigation

31. Non-Standard Style
https://neilpatel.com/blog/common-website-navigation-mistakes/

32. Using Generic Labels
https://neilpatel.com/blog/common-website-navigation-mistakes/

33. Drop Down Menus
https://neilpatel.com/blog/common-website-navigation-mistakes/

34. Too many items in your navigation
https://neilpatel.com/blog/common
-website-navigation-mistakes/

35. Too many items in your navigation
https://neilpatel.com/blog/common
-website-navigation-mistakes/

36. Good

37. Tenia Wahyuningrum
Tenia_W
Tenia Wahyuningrum