Icons, Logos, Buttons, and Calls to Action

1. Icons / Symbols: A graphic intended to convey an abstract or finite message as quickly and as simply as possible.

Concept – A (Seeing) to B (Interpretation). As we are presenting a general concept that is designed to reinforce its contextual surroundings it is important to find the quickest route from A-B. We must convey the concept as simply and as elegantly as possible given the confines of the chosen medium. Details – The trick is to figure out which details help users identify the concept, and which details distract from its intended meaning. In addition, the retention of juvenile characteristics or Neoteny suggests that retaining the basic look or shape of the child or immature version of the image has the outcome of making it more attractive to our visual brains. Boundary shapes or no? In testing there is a small difference between the two within individual icon recognition. It must be stated that it is best to avoid what a mentor once called “ducks in a row”. When we have too many items of similar representation our message can get lost in the fray. Text Use – It is well documented that icons with labels are more effective than icons alone. For crucial concepts that must be understood fast and also for abstract concepts, a combination of word labels and color is more effective than an icon by itself. However, it is important to note that the addition of text to the icon itself must be executed in a legible and visually divided manner.

2. Logos / Brand Graphics: A graphic representation of a product or theme designed to convey a specific singular identity.
Concept – A (Seeing) to B (Interpretation) to C (Long term recall). This is purely dictated by the overall message or feeling you are trying to convey.
From abstract to direct and every level in between the artistic relevance here is purely subjective. Details – Though best practices dictate simple and direct is best. There are times when colors textures and patterns may culminate in an overall feeling that the client feels truly represents their brand. Text Use – Text is not an after thought in this case. When words are integrated into a logo they become part of the brand. The combination of text with art should be demonstrated with respect to each other. Less is more. Space is key. Clear and simple. At the heart of great branding is respect. (See BMW’s annoying off white box as a key yet extreme example)

3. Buttons / UI Icons: A simple graphic representation of a single or multiple action or function.
Concept – A (Seeing) to B (Interpretation) to C (Action). Every second spent on processing individual elements can have a significant impact on the effectiveness of the overall interface. Typically UI icons are symbolic or iconic in nature. In usability testing it was not the style of the icon set but rather the individual icons, their shapes, and their position in relation to each other that made the most difference in the speed of recognition. Details – Graphical user interfaces are full of symbols. Symbols need to be reduced to their essence. This helps avoid cluttering the user interface with meaningless distractions, and makes it easier for people to figure out the meaning of an interface element. Realistic details can get in the way of what you’re trying to communicate to your users. Text Use – Only when absolutely needed to drive the point home. If this can be avoided please do. Integration of text should be limited to systems like “ON/OFF” or representations that have become more function then message.

4. Calls to Action / Banners: A graphic ranging from a simple button to a complex informational banner this item is designed to illicit a direct interactive response from the viewer.
Concept – A (Seeing) to B (Interpretation) to C (Reaction). The soul purpose of this element is to inspire action. Whether it’s as simple as the word NEXT with an arrow or a banner ad promoting the newest widgets. This “purpose” is the primary reason for being. That said we should avoid using tricks or cheap tactics in order to get a response. In the end it is important to be true to the audience or we will illicit an under current of negativity. Details – This can vary as much as any logo/brand. However, we must always be mindful of our surroundings (Batman Begins). The most common mistake appears to be a lack of usage awareness. When we are presenting our call… is our audience already looking at our site? Do you already have their attention? If you do not need to be there then perhaps you shouldn’t. Text Use – Less is more. I am not sure I have said this enough but in this case it is crucial. Assume that your audience has about a half a second to read what you wrote. If it doesn’t grab their attention then perhaps we should rethink the message. People love kittens.

Overall theme of current design trends
Flat Design – The web design community has been greatly influenced by the latest Windows, Android and iOS interfaces, which all utilize a “flat” design aesthetic. Flat design is devoid of things like drop shadows and gradients, and takes on a minimalist approach to fonts, icons and other graphical elements. The biggest challenge with flat design is that minimalism can be quite difficult to perfect. Bold fonts and simple icons on a white background, for example, must consist of carefully chosen typefaces, crisp visual hierarchy and perfect spacing in between elements. When not executed properly, a flat design will not translate into a good user experience.

Best practices for graphic integration
It is important that all elements in a body have a uniform cohesive feel. If any one item stands out as different then it should be intentional. When trying to determine if any of these elements can be used across platforms all of these guidelines should be considered. If I can’t read the icon/logo/banner on a mobile device then it MUST be changed to fit the environment. In the end it is all about the comprehension of your original intention.