
Resonance: The feeling is time passing or time management, which fits the goal of inserting time.If you click the icon once, you get a sense of cause and effect – checking the time icon produces the current time.

You can see this through the connectedness and purpose. Coherence: Clicking the icon has something to do with checking the time.Purpose: An end goal may not be as clear – what is clear, however, is that the metaphor of a clock face involves checking the time.Connectedness: The connection between time passing and the clock face is clear.Take a close look at the insert time icon: We can see the following: Significance: There should be a sense that the icon matters to the audience.Resonance: There should be a feeling attached to the icon – some kind of emotion or sense of an experience that the audience feels.Coherence: This means that there is a logical sense of cause and effect flowing from the icon into an action.Purpose: An end goal is clear or can be easily understood from the icon.Connectedness: The icon can make some kind of connection with the audience.Experts in HCI define five distinct aspects of the experience of meaning: To evaluate one of the icons TinyMCE uses, you first need to look more closely at what makes a strong metaphor using HCI theory. The initial plan was to use a cat (a "copycat"), which made sense to English speaking users, but had a less clear meaning for other cultures around the globe. Susan Kare ran into this problem when designing icons for the Copy feature. But metaphors run the risk of becoming misconstrued or lost across cultures. This is why it’s so important to get icons right – they need to be a relevant metaphor for the user to instantly understand. HCI designers then place icons strategically within a Computer Interface. HCI hones in on the connections between objects and the metaphor (or cognitive concept) that the user has for those objects. Because they mean something and represent an action or a property, icons are metaphors. The actions and properties associated with these real world objects clearly held intense meaning for the end user, and as a result proved to be timeless choices to represent save and delete actions. Graphic designer and visual artist Susan Kare worked on iconography for the Apple IIe computer in 1983, and introduced the garbage can to represent delete and a computer disk for saving files. Objects and buttons are therefore defined by the response they produce, or the property they hold while the user interacts with the object. In the real world, if a user wanted to complete a procedure, they pressed a button or interacted with hardware. What makes the icon important for end users?Ĭomputer interface icon designs are drawn directly from real-world objects. This post summarizes some of the HCI history, and shows how iconography works in both TinyMCE WYSIWYG and the Setka design tool features.


In fact, iconography is a deep area of study that’s tied into the essential field of Human Computer Interaction (HCI). This speed of interpretation, however, sometimes results in the work behind each icon being overlooked. They’re often interpreted very quickly by end users, since they are small and uncomplicated representations of objects. In UX design producing accurate, meaningful, and visually striking icons represents a tough challenge.
