Published on <a href="http://ift.tt/2pK9lk1">| Prototyping: From UX to Front End &mdash; Medium</a> Adrian Narloch <img alt="" src="http://ift.tt/2qCaLuP">
When it comes to design more complex interfaces, sometimes we encounter a very curious obstacle:
<blockquote>If I place here an icon, will it be easy to understand what it does? Maybe adding a label would make it more clear?</blockquote>
And there is no simple answer. All depends on the project’s assumptions like target device or specific users group but we can stress good practises in designing both forms.
<h3>“Picture is worth a thousand words.”</h3>
<img alt="" src="http://ift.tt/2q1dhhn">Android Navigation Buttons
The first problem with iconic label is quite predictable, we can’t control how the end-user interprets the meaning of used symbol. According to the <a href="http://ift.tt/2qBPeT6">fourth phase of visual perception</a>, various symbols may mean completely different things, depends on language, culture or context. Before we choose an icon for specified action, we should make sure there are no multi-meanings.
Icons also uses more of our operational memory, we need more time to scan a shape and its visual features to find the existing “meaning” pattern for the current case. Creating a navigation system which consist of dozens of custom icons may be confusing for the first time and little overwhelming.
<img alt="" src="http://ift.tt/2q1eQMj">Material UI Icons
A moment which changes the situation is when user starts remember meaning behind every icon by using our product regularly. Through repeated exposure he can create relations between elements in his “mind-map”. We can accelerate this process by applying <a href="http://ift.tt/22o5B21">design language</a> and assigning unique icons for primary actions in our app. Design language will facilitate users to recognize shapes and points which are characteristic for specified symbol and its meaning features. Defining unique icons for specified functionalities makes the navigation fast and intuitive.
Applying these guidelines could make the iconic navigation a really shorthand tool for navigate.
<h3>“One day I will find the right words, and they will be simple.”</h3>
<img alt="" src="http://ift.tt/2qBILYt">GOV.UK Navigation
Designing good text labels could be difficult as with icons, even if used form is brief and succinct in your opinion, it can be still too ambiguous for part of your audience. If you have extended budget, you can use professional research methods, like <a href="http://ift.tt/1UqDYCw">card sorting</a> but there are a few good practises which you can apply now:
<ol>
<li>Narrow the scope. Reduce meaning possibilities. Double-check that after immersion in context, the significance is tough and clear on the background of content.</li>
<li>Avoid explaining. Label is not a paragraph, it should signify in short way what it represents.</li>
<li>Keep consistency. Choose one grammatical form which you want to use in all labels inside your project and be consequent with keeping it, don’t mix them by placing somewhere a verb-based label like “Charging you account” and noun-based labels like “Account charges”.</li>
<li>Adjust terminology. Make sure that you are using correct and not too difficult words for your target audience. It also works in both ways, if your project is dedicated for specialists in some area, avoid using too common language.</li>
</ol>
<h3>Icons paired with labels</h3>
Additional labels for existing icons may take a complementary form and be a good “backup” if their meaning could still remain unclear.
<img alt="" src="http://ift.tt/2qBPEsv">Toolbar in Pages ( macOS text editor )
This combination can be used in two ways — for decoration or navigation. If navigation icon is too ambiguous, before you add a label, try to go back to the project assumptions and validate icon features with previously established design language.
Some iconic labels can lose their influence on interface’s complexity if they need to be explained by label everywhere.
<h4>Tooltip — best solution?</h4>
Tooltip is a well-known pattern for interface designers, it allows to present iconic interface with tips inside the boxes which appears on hover. It seems to be a great tool for explaining any doubts but it has one big disadvantage: touchscreens doesn’t support hover state. It disqualifying this pattern from usage in mobile versions.
<img alt="" src="http://ift.tt/2q17NmF">
<h3>Conclusion</h3>
Iconic labels are good for being a shortcut for primary actions or indicators of state. We can learn users how to recognise our design language and let them navigate faster with saving space.
Text labels are useful with dealing a lot of content and forms but used everywhere forces users to read instead of letting them “flowing” through the app.
Combining icons and labels together allows us to take advantages from both approaches so if we don’t have ( or we don’t need ) regular, loyal audience it could be the best solution.
Thanks for reading! If you have any suggestions, feel free to write it down. You can also catch me at <a href="http://narloch.eu">narloch.eu</a>
<img alt="" src="http://ift.tt/2qBW1fv"><img src="http://ift.tt/2q1djpv" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qBHXCZ">Icon or label?</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Icon or label?

Top Stories