Working with Icons
Always put labels to your most important Icons.
The size needs to be large enough to be activated (48 px).
Icons save space and after a time you start associating the icon with its content.
Icons are quick to recognize. They should clearly convey meaning.
Four Core Types of Icons
Similar icons - useful for simple, easily understood actions and concepts. (don’t smoke signal)
Symbolic icons - represent an action object, or concept at high abstraction. (a printer)
Example icons - use images of things that exemplify or are commonly associated with an action, object or concept. (a plane)
Arbitrary icons - they bear no resemblance to the represented concept. Their meaning is learned through repeated exposure (bluetooth icon)
Icon choice starts with their environment
App Icons should be based on commonly used Android or iOS icons.
Laptop software icons should be based on commonly used Windows or Mac OS icons or commonly used software on those platforms.
Website icons should be based on commonly used icons, along with those used by competing or complementary sites.
If you spend more than 15 minutes trying to choose an icon to represent something, an icon probably won’t work in that instance.
Label + icon is hard to beat
A text label goes a long way in properly setting user expectation and enabling them to predict the result of the interaction.
Don’t asume by default that everyone knows what your icon means.
Five Rules for Effective Icon Design
- Keep visual or perceived size consistent. Even if two icons have the same total size, they may have a different perceived size. Check the width of rules (strokes) used in the icon. When rule width varies at the same overall pixel dimension, icons will be perceived as being different sizes.
- Keep the level of detail consistent. More detailed icons will attract the user’s attention first, because they appear to have more visual weight than the others.
- Eliminate unnecessary detail. Extra visual elements only make the icon more difficult to perceive, even if it’s composed of recognizable obecjts. Think context.
- Don’t mix and match styles. For example, don’t mix outline and fill styles in the same app or site. Changing from outline to fill for a hover or active state, however, is OK.
- Don’t reinvent the wheel. If the concept or action depicted is common, near-universal, stick with the established icon used to represent it. Anything else invites confusion and becomes a cognitibe obstacle.
Five Rules for Great Data Design
- Data is only useful if it can be understood. If I don’t understand it or I can’t act on it, it’s practically worthless. Data isn’t the goal, it’s a tool. Data without design is noise.
- You’re deisgning for other people. They’re not you. You have to design for their identity / motivation / language.
- You’re deisgning for their context of use. What amount of information does the user need in order to understand or act? How much time does s/he have to spend with this information.
- The usefulness of data decreases when its volume increases. The more information in any given view, the harder it’s for viewers to find what they care most about. Reveal knowledge and facilitate insight instead of overwhelming with volume.
- The more brainpower required to decode your visualization, the less that’s available for understanding it. Every lavel, shade and dimension of data that doesn’t directly contribute to your main message or to the viewer’s core goal is noise.
Simplifying visual information
- Remove backgrounds
- Remove redundant labels
- Remove unnecessary borders and containers
- Reduce colors; highlight most important data
- Remove all effects (3D, shadows, etc)
- Visually separate labels / lines from data
- Remove extraneous lines and labels
Separate content from control
“When there’re too many choices on screen it’s easier for people to choose nothing”
“When everything is interactive, nothing is interactive”
Content should be separated from control. If you have the same style for button labels and content, the brain interprets them as being equal. Interactive elements should always be distinct from their content counterparts.
Separate primary + secondary actions
Economy, clarity and focus is created by differentiating primary actions. For example, for a Save and a cancel button set the primary action (save) filled with a color and set the secondary action (cancel) as a label instead of a button to differentiate them.
The same applies when there are tertiary actions. Differentiate them.