Header
We have launched our new Privacy Policy. You can read more about it here.
Advertisement

Making Web Icons Smarter

by

This article is the first in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this article, please consider backing Iconic on Kickstarter.


What Exactly is a Smart Icon?

A smart icon is designed so that elements within it to adjust to input, interaction or associated data. In short, it's dynamic. Smart icons are SVG-based and controlled with a combination of Javascript and CSS.


Why This is Relevant

Web icons up to this point have been static—primarily due to limitations in technology. Different states or variations of an icon would be created simply through providing individual files of each permutation. For example, a battery icon would come in four different versions: charging, full-charge, half-charge and no-charge. Not exactly an optimal approach.

A whole new set of possibilities are now viable with mainstream browser adoption of SVG 1.1. Due to SVG's semantic structure, a smart icon can display its full range of states and variations. This removes the need for image swapping and allows transitions between states to occur fluidly.

Smart icons also give designers the option to display relevant contextual information within an icon. A well designed icon is already a relatively informationally dense object. By adding contextual information to an icon, its informational density is even greater without considerable increased cognitive load. In theory, these types of icons will be able to take on the heavy-lifting of communication, thus reducing the amount of other elements on the screen.


Use-cases for Smart Icons

There are many different directions smart icons can go—some being easier to implement than others. We're still in the discovery process, but so far we've come up with three primary use cases:

Providing contextual information

There are plenty of icons which could provide another layer of information, but simply have not up to this point, due to their static display method. Examples include icons such as the clock, thermometer, aperture, WIFI signal and battery charge.

clock

Acting as simple data-vis elements (when d3.js is too much)

One of the best use-cases for smart icons is simple data visualization. Icons that fit in this category are the audio spectrum, gauge/meter and loading indicator. Smart icons could dramatically simplify the process of building dashboard displays—think of simply adding four or five icons to your HTML and adjusting the gauge value with a data attribute.

audio-spectrum-analyzer

Displaying various states

Many icons often come in a series of variations to convey all their different states. Examples include the battery, WIFI, media playback (e.g., play, pause, etc.) and power (e.g., on, off, standby). Another potential application for smart icons is to roll all of an icon's states into a single SVG. So instead of swapping out image assets when a subject's state changes, you simply change a data attribute to the appropriate state.

battery

Nuts and Bolts

Note: Before going into details, it's important to note that the examples we're showing are simply proof-of-concept prototypes. These prototypes are intended to communicate the functionality we'll be building. None of the following code is final, let alone beta. We're still in the R&D phase of this method and we know there are many issues that still need to be addressed. We will be working on a more concrete direction for this method after the Kickstarter campaign is complete.

Smart icons consist of SVG, Javascript and CSS. Our current thinking is to treat each icon like a small self-contained app with a simple API to adjust elements within the icon. To achieve this reliably, this approach requires the SVG markup to be included in the DOM.

Keep in mind that the SVG mark up needs to be appropriately structured for this approach to work. This is what we feel makes Iconic unique. The icons are being designed and crafted with new concepts in mind. These concepts rely on clear semantics and a well thought out markup structure to work correctly. This is no different from appropriately structured HTML—if your markup is gobbleygoop, it's going to be difficult to do anything sophisticated.

A lot of compelling things can happen once well structured SVG markup is in the DOM. The problem is that adding SVG markup into HTML is a pain. The SVG markup can add a considerable amount of bloat to your code and it becomes harder to distinguish between structural HTML and vector imagery. In order to remove this friction, we suggest injecting SVG markup in the DOM at runtime.

We've made a simple prototype SVG injector which replaces all specified img tags with the markup from the referenced SVG file. So this...

Turns into this:

Note: Keep in mind, this injector approach certainly feels like a stopgap measure and we're hoping our work will help push a browser-native standard. Until then, our current thinking is that this is the best approach.

Once the SVG is injected in the DOM, the JavaScript encapsulated within it is executed and it's ready to be used. Some icons will run on their own (like a clock) whereas others will need input to adjust.

Self-running Icon

The clock is a perfect example of an icon that runs on its own. Once injected, it will just go. See it in action

HTML

JS

SVG: clock.svg

Input-based Icon

When an icon is responding to input or data, it requires a little more work, but the basics are unchanged. See it in action

HTML

JS

SVG: audio-spectrum-analyzer.svg

Adding motion (the icing on the cake)

A smart icon becomes even better with motion. There are many ways to do this. We're currently using SVG animation elements as this allows considerable functionality built right into the browser—meaning less code in the SVG. Support is still a little wonky (we ran into issues in Safari 6), but it's getting better by the day. See it in action

HTML

JS

SVG: themometer.svg


Conclusion

Iconography has a significant role to play in interface design. The more relevant information our icons can provide, the more powerful they become. We truly believe that smart iconography can be a compelling tool for designers to add another layer of meaning to their icons. Not every icon is suited for this approach—like all good things it requires moderation. However, when used appropriately, it can be a tremendous new tool.


Back Iconic on Kickstarter

The goal of Iconic is to help provide new approaches to iconography. There's a lot more to Iconic than just smart icons and we're looking forward to sharing another interesting feature with you next week.

iconic-logo

Please consider backing Iconic on Kickstarter.

Advertisement