Icons are visual representation of actions, objects or concepts in an user interface. They make use of our ability to quickly recognize visual patterns and memorize them. It is not possible for us to not recognize a visual pattern that is stored in our memory.Icon is an commonly used term in user interface design field; a more generic term would be sign. Signs have been used and studied for a long time. Semiotics is the study of signs and how people interpret signs. Charles Sanders Pierce, regarded as the founder of Semiotics, classified signs into three types.

1. Icon, or likeness: This is a sign that is a direct imitation of the concept. For example, photograph of a person’s face in a contacts list would be a icon. Similarly a graphic of the iPhone is technically an icon. In user interface the term icon is used instead of a more accurate term signs because when signs were first used in user interfaces they were all mostly icons. Early icons were imitation of a objects in office environment like document, folder, printer.

2. Index or indications: This is a sign that shows a symptom or evidence of a concept. For example, emoticons :-) are an indication of emotions. While using index, designer has to make sure that the correlation between the index and the concept can be made by the user. Document and image editing programs use index signs (bold, right align) to represent the result of using a tool.

3. Symbols: This is a sign that becomes associated with the  concept by usage over time. Numbers and alphabets are the best examples of symbols. Icons and indices can become symbols over time by repeated usage. The floppy disk image is now commonly used to indicate save operation, although floppy disks are almost extinct.

It is not possible to represent any concept with a sign. Abstract concepts like Save as, Print preview that have no resemblance in real world are hard to represent visually. It is safer to use a symbol with a label to represent such operations.

One thought on “Icon Design: Three types of icons

    Leave a reply


    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>