I am working on creating an icon that depicts active/inactive state.

On this system the user will be working with a number of people records. There is a list with various peoples names and an indicator/icon to say whether the person has 'active' documents attached to his/her record.

By active I mean, the documentation is still being worked on and not complete. Record that have been complete are closed and made inactive.

For a record we already are using a small 16x16 icon which is like a little word doc or page - so my thinking is that the solution will have to be an indicator or icon that sits over it.

Has anyone any suggestions or seen any good examples of something similar?

  • 1
    Why are you showing the completed records at all, if they are closed and inactive? For overview? Can they still be edited, or re-opened?
    – JOG
    Dec 28 '11 at 10:58

As you have already pointed out, the "active document" icon should be a variation of the "document" icon. If you take Famfamfam's Silk iconset as an example, you can see how most of icons have a number of overlapping micro-icons to indicate the "add", "substract", "link", "expand", etc. options of the icon.

In this case, you could use one of various techniques:

  • A lock with open/close states: icon document lock. Although this normally conveys that the document is editable/non-editable.

  • An animation, such as lines being written, a moving pen or a dot flashing. Although this is for short-time temporary states. If most documents were active, the screen would be full of flashing (distracting) icons.

  • Try instead of defining a "closed document" icon, such as the lock or, say, a "finished" stamp, and leave the "active document" with the regular document icon.

  • @downvoter - why? This answer makes sense...
    – Anonymous
    Dec 22 '11 at 16:45
  • -1 for the animation point. Never use animation for an icon. Dec 22 '11 at 16:54
  • @Matt - That's a fair enough point - if you were the original downvoter I might suggest commenting or editing the answer next time, since the rest of the answer was good. :-)
    – Anonymous
    Dec 22 '11 at 16:58
  • It was me. I don't think it's right to edit someones answer in that way. I only edit to clarify a point, fix grammar, or occasionally to make a question that has better potential to be more on track. Dec 22 '11 at 17:02
  • 1
    @MattRockwell "never say never". An animated element (an icon or any other thing) has its right place if used wiselly, and the caveat is mentioned. Dec 22 '11 at 17:24

Here's my thoughts, although your use case is not totally clear to me. =)

  • Disabled items. If a record or person that is disabled cannot even be opened for editing, a disabled icon (gray/watery/disabled button) kind should be used.

  • Discouraged to open. Example: Showing hidden folders in Windows Explorer makes them look watery, kind of saying "don't go here".

    It's almost not there, don't go there unless you know what you are doing

  • Under construction or draft can be visualised in many ways, if that is what you are looking for. For example a dotted silhouette of the icon, or a pencil sketch of the icon, is kind of saying "fill in here" or "we are working on this one".

  • micro-icons, overlaying the original icon, can make the icon meaning conceptually very clear, but I would not recommend them. Being so small they force you into a trade off between cluttering your visuals to make them stand out, or marginalizing them to make your GUI nice to the eye.

  • Record rows - if you got it all in a table with texts and stuff along with the icon - can be made looking inactive or disabled in many other ways, like gray background, lower-contrast text, or lack of frame. Example: Two trains have already left. Their entire rows are watered out.

    Don't focus on these two rows, they are long gone, www.sj.se


In the cms-system Silverstripe, web pages that has been changed and are not publiced and updated on the site and marked with the color orange. Publiced pages are marked in green and drafts are marked with the color red. The people I have instructed seem to have no problem with understanding that concept so maybe that could be used? The only problem with that solution is that colorblind people could be having a problem with spotting the difference. Maybe you could add a filter option as well?

Not the answer you're looking for? Browse other questions tagged or ask your own question.