Building a mobile app is a complicated process. However, designing the right icon for the app is crucial for the success of the app in the store. Icons provided important clues about using important features of the app including settings, lock, and many others. As the space on our mobile screens is limited, it is important for mobile app developers to design icons that provide an immediate clue about what to do with that specific icon or the next step. Icons make it easy for mobile app designers to fit in important features while keeping the design neat as a pin.
When it comes to app icon designing, designers first have two basic options to select from – Solid and Outline.
Designers can go for either outline design or solid design. However, what holds significant importance prior to selecting any one of these is the app design. The design of the icon should be created in a way that is easily comprehensible by the viewers.
Designing Characteristic Cues for an Icon:
Let’s take an example here:
This camera icon, sometimes used in apps, has to be designed with a circle in the center. On the right, we can see an example of how a badly designed icon looks like. Without the circle, it doesn’t convey what function the icon stands for. It depicts a suitcase, bag, or a purse. These are referred to as characteristic cues that are important for a viewer to understand the function of the icon.
Whether you are going for a solid or an outline design, what holds importance is giving characteristic cues so that users can identify its function at a single glance.
The tip here for icon designers is that if they have designed an icon and it’s not identifiable then it is suggested to add one more design cue to it to make it recognizable. This is because every icon has a cue which makes it unique and thus easy to be identified by users.
Relationship between Characteristics Cues and Design – When to Use Outline Style
Icon’s characteristics cues hold significant importance when deciding whether to choose a solid or outline design for the icon. If the chief characteristics cue of an icon appears on the edges of its shape then it is wise for you to go for an OUTLINE STYLE. This leads to quick recognition, at a single glance. Selecting a solid design where cues are on edges would be a blunder. Choosing a consistent style for a set of icons is important for sleek app design.
When To Use Solid Icons
Icons represent real objects. Some of the icons, when designed with a solid style, are faster to recognize. However, if the same icons are given an outline design, the viewer might get confused and might not understand the function of the icon in a single view.
It may be argued that users can also recognize icons with a solid design. However, the processing speed of the viewer is slower when for certain icons an outline design is chosen instead of a solid one. Certain icons, with a solid design, have an inner spacing which makes the viewers’ mind click and understand the function of the icon almost immediately.
Let us take an example of the cancel icon. Though it is popular that a cross sign is a sign of canceling or rejecting something, using a solid icon, in place of an outline one, is the right thing to do. It makes a viewer immediately understand that it’s for canceling and also it looks visually appealing. Take a look at the image below.
From the above two images, you can clearly view that a solid design works better for a cancel icon than an outline one. It is more understandable for the viewer. It can also be said that for icons having narrow inner spacing, solid design works better. The silhouetted form which the shapes assume makes it easier for the viewers to identify them.
When Style is Immaterial
There are cases where style doesn’t hold an important role in making an icon understandable for the user. It implies that no matter which style you use, solid or outline, it is easy for the user to recognize the function of the icon. For instance, for some of the icons like a star, and shopping cart, viewers took an equal time in recognizing them. This implies that no matter which style the viewer viewed the icon in they were able to identify them instantly.
Icon designers, when confused about the design, should go for a specific icon and design the icon both ways and view which one is not only quickly identifiable but also visually less straining for the viewer. This way they can get a clear idea about the icon visibility as well as usability.
Design For Active and Inactive Icons
The icons which have already established their identity needn’t be redesigned. For instance, the icon for messaging or phone call. They are popular and people will recognize them in an instant. New icons must definitely be designed meticulously to ensure fast recognition speed.
During the app functioning, where app design plays an important role, is in cases where the icon has not been selected yet. Recognition speed should be fast for options they are yet to select. This is why inactive buttons should be given a solid design whereas an outline button is perfect for active options or options which the user is already using.
Whenever it is significant for users to finish tasks quickly, it is important that the recognizing speed for icons should also be fast. Solid icons are usually preferred whenever app designers want app users to recognize a specific icon function without any delay. However, there are certain cases where it is fine to take exceptions and where outline styles are preferred to solid ones. Hence, it is fine to take exceptions wherever you feel that an outline icon would serve better.
All in all, it can be said that the following points should be kept in mind while designing icons within the app.
- Icons should possess specific clues which point towards their function
- If solid icons are designed carefully with cues then they are faster to get identified
- When using outline icons, ensure that they have wide inner spacing to make them quickly recognizable
- If it is not possible to create wide inner spacing for an outline design, then go for a solid version of the icon
- Use your own discretion, rather than strictly following guidelines, to help users identify the function of the icon easily.
Whatever the design, the function of the icon should be quickly comprehensible to the viewers. What impediments did you face while choosing between a solid and outline design? Please share your experiences in the comment section below.
