Icons, Icons, Icons | Part 2: Useless Icons

Icons are images meant to represent a concept more simply. Sometimes they are very useful in UIs and sometimes they are not. Here are two cases we often run into with our user interfaces at Informatica. 

Icon Overload
When are icons not useful? Try when there are just too many. We have a term here at Informatica called "icon overload". It's when there are too many icons in an interface for them to be at all useful to the user. The user ends up being visually overloaded with imagery and the interface can get bogged down with distraction instead of production. Putting every possible action into a toolbar seems as if you are providing the user with options, but when it's too many it often creates frustration. Depending on a toolbar to solve all your UI needs is the easy way out for you, but hard for the user. We ran into this issue in a few of our products and we worked on several different approaches to get away from icon overload. First, we now use a single action menu which can contain all available actions and is available to the user to peruse as needed. If we find that certain actions are used over and over and a user identifies with the image then we push those actions out onto the toolbar as an icon. Second, we use contextual tool bars. The icons on the tool bars change according to what is selected or in focus as opposed to being disabled. Third, we use icons altogether outside of tool bars. We provide icons for actions directly in table rows or associated with objects so the user has quick access to actions as opposed to select then act from a toolbar.

Complex Concepts
Icons are ultimately meant to be a quick visual reference to an action or an object. If the visual reference is incomprehensible - it's useless. In these cases, users spend too much time hovering and tool tip reading as opposed to quickly visually finding their needed action and one-clicking to make it happen. I am often faced with creating a 16x16 icon for actions such as "restore default value" and "set WHERE class". In these cases, we have moved more in the direction of not using icons and being more direct with things called words. We are trying out buttons with actions written on them and using the action menu with words and no icons. If the concept is not something that is easily recognizable visually, we won't visualize it.

 Happy designing!

Icons, Icons, Icons | Part 1: Production

Working as the UX Visual Designer for Informatica the last 6 years I have created a lot of icons, over 1000 to be exact. Some of the first products I worked on required creating icons in BMP format with a HEX value background for transparency which was a complete time suck. I'd rather be focusing on great design rather than fussing with 256 pixels. Luckily, there have been many advancements in icon production over the years and the use of icons and graphics on the web.

Currently, the majority of Informatica products are web apps developed mostly with HTML 5. This has brought about a huge shift in how we use graphics and icons in our products. We spent many years with GIFs, and quickly jumped over PNGs and now we are focused on SVG formats and icon fonts.

Using SVG file formats has been a huge leap in icon production for us ( I mean me. I am the only designer). Now, I am able to make one vector image in one size and alter it's color and size directly in the code. As well as provide hover and select variations in the code. What use to require creating 4-5 various graphics for one icon now only requires one. Editing the icon also proves incredible easy. You only need to update a single file as the attributes to the file are code based. The only drawback we have found is that if you repeat an SVG icon in say a table, there is a processing lag, as the HTML works to read the icon image code over and over and over. In those cases, it actually is better to have a single PNG file which the code only refers to once.

With the advent of SVG icons, I discovered Icon Fonts! I think these are just awesome. I have been using a site called Fontastic.me which makes it super easy to create icon fonts, especially if you have all those SVG files ready to go. With an icon font you can put all the necessary icons for a product into a single resource. The names are there, the key commands are there and then send it off to your happy developers. We have been working on a new product called Project Springbok which uses the icon font in HTML to draw all the icons in the web app. It has gone smashingly well. The font is also a single resource in the code which cuts down on processing and the code as well defines all the attributes of the icons - color, size, and interaction.

Another benefit of the icon font is that I can give the font to UI designers, they can install it and then they have easy access to put icons into their wireframes. No more emails requesting a "delete" icon for the umpteenth time.

Have any questions? Let me know.

Designing with Objectivity

Everyone has an opinion. Especially when it comes to the arts. I have worked as a graphic designer for over 20 years. I have been a book designer, advertising designer, web designer, print designer and now I focus on the visual design of user interfaces for enterprise software.

In my current position as Staff Visual Designer (that's just a corporate name for Creative Director) at Informatica Corp., I am often up against opinion and it is primarily my job to mold opinion into constructive criticism. I also consistently advise that we don't make final design decisions on being subjective, especially in user experience design. The ultimate goal of product visual design is to allow the visual design to enhance the user interface design. We never want the visual design to get in the way of user productivity. 

This of course seems obvious, but the best way to control subjectivity in design and design reviews is to focus on the objective aspects of design and those aspects can be defined in visual design goals. Does the design meet said goals? Great. Could the designs meet them in a different way? Even better. You say you just don't like yellow because it reminds you of butter? Oh well. I usually spend some time at the beginning of every project identifying the goals of the visual design.

Some Common Visual Design Goals

• Follow the font and color specs from the corporate brand guidelines.
• Follow corporate logo guidelines.
• Don't use extra graphics/colors or elements that don't provide a use or context.
• Bring the data to the forefront (our users read data, let them read the data).
• Create visualizations of data that enhance the users understanding of the data.

Although design goals help to produce design and provide a context for the reviewers, there is a bigger aspect that provides context for visual design and that is Design Principles. I work within the R&D department at Informatica in the UX Team. I currently am the only visual designer but I work with researchers and UI designers and together we are the UX Team. We have a set of overriding Design Principles we use for all our designs.

Some of our Design Principles

• Help Users Maximize their Productivity
• Design Based on Real-world Needs
• Mind the Details
• Work to Simplify
• Strive for Aesthetic Quality

Using visual design goals on a project basis and using design principles in all your work, you can achieve design results which are engaging, enhance usability, solve problems and hopefully pleases everyone (fingers crossed).