Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Human Computer Interaction, Iconography, Setka, and TinyMCE

Joe Robinson

September 22nd, 2021

Written by

Joe Robinson

Artwork by

Fakurian Design

Category

Tagged

In UX design producing accurate, meaningful, and visually striking icons represents a tough challenge. They’re often interpreted very quickly by end users, since they are small and uncomplicated representations of objects. This speed of interpretation, however, sometimes results in the work behind each icon being overlooked. 

In fact, iconography is a deep area of study that’s tied into the essential field of Human Computer Interaction (HCI). This post summarizes some of the HCI history, and shows how iconography works in both TinyMCE WYSIWYG and the Setka design tool features.

What makes the icon important for end users?

Computer interface icon designs are drawn directly from real-world objects. In the real world, if a user wanted to complete a procedure, they pressed a button or interacted with hardware. Objects and buttons are therefore defined by the response they produce, or the property they hold while the user interacts with the object.

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

Because they mean something and represent an action or a property, icons are metaphors. 

HCI hones in on the connections between objects and the metaphor (or cognitive concept) that the user has for those objects. HCI designers then place icons strategically within a Computer Interface. This is why it’s so important to get icons right – they need to be a relevant metaphor for the user to instantly understand.

But metaphors run the risk of becoming misconstrued or lost across cultures. Susan Kare ran into this problem when designing icons for the Copy feature. 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.

Looking at TinyMCE icons

To evaluate one of the icons TinyMCE uses, you first need to look more closely at what makes a strong metaphor using HCI theory. Experts in HCI define five distinct aspects of the experience of meaning:

  1. Connectedness: The icon can make some kind of connection with the audience.  
  2. Purpose: An end goal is clear or can be easily understood from the icon.
  3. Coherence: This means that there is a logical sense of cause and effect flowing from the icon into an action.
  4. Resonance: There should be a feeling attached to the icon – some kind of emotion or sense of an experience that the audience feels.
  5. Significance: There should be a sense that the icon matters to the audience.

Take a close look at the insert time icon: 

The TinyMCE icon for insert time

We can see the following: 

  • Connectedness: The connection between time passing and the clock face is clear.
  • 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.
  • Coherence: Clicking the icon has something to do with checking the time. You can see this through the connectedness and purpose. If you click the icon once, you get a sense of cause and effect – checking the time icon produces the current time.
  • Resonance: The feeling is time passing or time management, which fits the goal of inserting time.
  • Significance: There is a sense of significance, since time passing and time management are goals that make sense to an end user writing content.

Any time related iconography is dependent on culture, however, according to The Lewis Model:

"In countries inhabited by linear-active people, time is clock- and calendar- related, segmented in an abstract manner for our convenience, measurement, and disposal." 

- Richard Lewis, CrossCulture.com

If your audience is from a mono-active culture, however, the metaphor of the hours of a day passing in a linear fashion holds less connectedness, resonance, and significance. Depending on culture, time could also be more of a circle, or a shape to be observed and carefully interacted with rather than received with one moment arriving after another.

What becomes clear in light of information, are the challenges of an ongoing debate around content and design thinking, as well as how all iconography is affected by the different culturally lived experiences of people.

Setka and iconography

The previous example of the insert time TinyMCE icon shows just how much thought goes into iconography. TinyMCE allows you to easily change the icons displayed in the toolbar to suit your audience. But what if you just need a solution to publishing iconography when creating your content? And you’re building large-scale content?

Setka includes an open source icon library for the Starter membership plan. And with the Pro plan you can upload your own icons, and access the array of open source icons from the noun icon project, to help you quickly find the icon that connects with your audience.

You can select icons when designing a style in Setka

Setka offers a wealth of other features related to iconography, such as the enhanced symbols tool. This tool helps you manage and style the parts of your content that need to express something to the audience – like a metaphor to best tell your story.

Where to from here?

You can reach out to us if you have questions about iconography in Setka or TinyMCE. There are a lot of design options available when building content with Setka, and we’re ready to assist you in connecting with your audience.

UXSetka
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Design & UX

    Scroll Studio reduces project workflow time by 90%

    by Team Tiny in Design & UX
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing