AG-3: Icons

Everybody knows what is an icon, right? A simple button with an image or text. Icons make the application beautiful and easy for the users to navigate, but, sometimes, if used incorrectly, can cause confusion.

Icons are pictograph representations of something and are widely used in combination with UIDP. It carries meaning and its representation should be informative to users.

The problem

Sometimes, icons are not displayed correctly because the image or colour is not the best way to represent the meaning of it. This is a problem, because new users or users that have some kind of disease like colourblindness, for example, will have trouble using the application.

Some younger users don’t know or never saw a floppy disk, that is commonly used as a “save” icon. They just know it because all “save” icons are represented like it.

3d-model-of-the-save-icon

The recommendation

• It’s necessary to correctly choose meaningful icons that will actually help the user. One great way of doing this is choosing icons that are available in the mobile platform because it appears all the time when we are using an application, and it’s easy to associate the image with the meaning.

0 MqZQiPMgmDTNGEnD

• Always remember to put some text to explain what does the icon mean, because only an image, sometimes can cause confusion.

• Neutral colors are the best way to represent the icon too, because, most of the times, the color doesn’t mean anything, but for people that are colorblind can cause confusion if someone says, for example, “click in the red circle”. We can avoid that, right?