4

A friend of mine currently is going through process of face-lifting existing application and it's nightmare when it comes to icons for buttons.

For example there are five different icons for "information". Similar situation is with other actions.

Is there any best practices/recomendations on creating list of assets which can be used in development for representing particular actions? Like - for "save" you use only this icon.

4 Answers 4

1

Guidelines

Documents similar to Microsoft's guide on creating the best user experience / Ux.stackexchange theme

How to develop an effective gui standard / PDF book by Eric M. Schaffer

Color codes

color codes

Icon design

silhouettes

Visual information is perceived much quicker when instead of the same objects you see distinct silhouettes.

Why Distinct Icon Outlines Help Users Scan Faster

In situations when it is impossible to create a clear mental model visualization use the text description. For example is quite problematic to represent a condition "It is occupied" on the telephone line.

9 rules for clear and intuituve icons

2
  • Re the distinct icon outlines helping users scan faster - it's not necessarily so. Mar 15, 2012 at 5:21
  • Very nice resources and I'll definately pass them to her. Unfortunately seems that sample how to define asset catalog doesn't exist. So bycicle must be invented :)
    – PiRX
    Mar 15, 2012 at 9:30
5

As far as I know, there is no such a thing.

However, you must make one yourself, specific for your application, your set of applications, or your company, depending on how far you want to be consistent. It's called a UX Style Guide. If it's just for one application you may also include it in the functional specifications of the UI for that application.

The reason why you ended up in that situation is because different developers are only looking for a solution within their own work, without caring what other developers do. If you ask 1 developer "put a button here with an information icon on it", he will just use Google to find a suitable icon. If you ask another developer to "put a button there with an information icon on it" he will do the same, and it would be a very lucky coincidence if both programmers would end up using the same icon.

A style guide, or a clear functional specification is a good way to deal with this. This will make sure you will have a consistent UI style throughout the entire application. Mind that these guidelines can describe many aspects of the UI, not just usage of icons. If you say that the icons are inconsistent within your application, I bet other things are also inconsistent.

2
  • I understand very clear, why such situation has arised :) And even have some ideas how this should be approached. Main reason why I'm asking this is to "don't invent bycicle"
    – PiRX
    Mar 14, 2012 at 12:27
  • Of course, this is a very legitimate question (which is why I upvoted it). But I don't think there is such a thing as a 'universal style guide'. The only thing close is the MS UX Interaction Guidelines (msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx), but that will not go into the detail of giving icon-suggestions. Mar 14, 2012 at 12:32
1

If you have the resources, ability, and buy-in...

Skip the documentation and create a reusable library of UI components that provides all the common elements developers need.

This is not easily accomplished, but it actually makes developers lives easier in the long run (and it's harder to ignore than StyleGuide.pdf on the company intranet).

0

Every major development platform has a corresponding style guide that fills some or all this purpose.

They are variously referred to as UX Guidelines, Human Interface Guidelines, Style Manual and Usage Guides. Exact naming varies mostly by scope. These documents usually are available as part of the platform's developer documentation.

1
  • 1
    That's how it should be. Most UI developers however have never even heard of this. Therefor it is useful to refer to such documents when handing over UI programming work to a developer. Mar 14, 2012 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.