Dealing with Complicated Meaning Icons in Surveillance Product

Hank Liu
Hank Liu
Dec 2, 2014 · 3 min read

Yes, yes, I know if a function is too complicated to be conveyed by a icon, it shouldn’t be conveyed by a icon. But there are times when using icons is inevitable.

Using icons have advantages. First, it saves space. Second, it doesn’t have translation problems. Third, it is visually attractive than plain text. Due to these advantages, company that do business internationally and provides many functions for user tend to use a lot of icons in its interface.

However, using icon may bring some downside, such as abstruse meaning to users, unclear interaction(can’t tell if it can be clicked or not), and performance issue (loading text is faster than loading image.) In the surveillance industry icons are used a lot, such as events types, function, and status. Many of these have not yet reached an universal design, different company uses different icon for the same function, take the live view for example, Axis Camera Station uses a monitor, Vivotek Vast uses a camera, and GeoVision VMS 9.0 uses an eye, which makes it
harder to deliver a clear meaning when designing icons.

Under these circumstances, here are things I’ve learned when designing icons for surveillance products.

Use Tool-tip
Even if the icon is used commonly, always use tool-tip. The tool-tip sensitive area should be a bit larger than the icon itself, so that the cursor doesn’t overlap and block the icon. Some designers like to add a animation effect when tool-tip appears, I prefer not. When user hover over an icon for information, animation will slow the speed.

Consistent Symbol
Be consistent when designing icons. Surveillance products tend to have many sub-functions in functions, if the icons are somewhat related, try to encompass the main icon symbol. Below is a motion area icon for example.

Add States
Some icons serves just as an symbol, others means function. For those that have a function, always add states to the icon, treat the icon like a button. The sensitive area of the icon should also be larger than the icon itself.

Animation Helps
This is a technique that is handy for me. Surveillance products have many event, and most of them are hard to express. Using animation to express these event can make the icon clearer. For example, “people count” is a function that can detect people entering the view, most surveillance products illustrates it as people with numbers, which is confusing for many people, especially if the icon is little. By adding an animated sequence it would be much clearer. However, too many animation in the screen may be a mess, make the animation play only when events activate, and also remember to make it stop at some point.

People count icon — still image
People count icon — animated image

These are things I’ve learned about when designing icons for surveillance
products, so what do you think? What’s your technique?

Originally published at on December 2, 2014.

    Hank Liu

    Written by

    Hank Liu

    Design Mgr at LexisNexis, from Taiwan lives in Shanghai, have 2 cats, learning Processing and Blender, watch movies, enjoy travel, amateur writer, love design