The document discusses icons, what they are, and their pictograms. It describes how pictograms combined with style and context can create icons. Icons can accelerate understanding, aid memorization, and facilitate navigation by making interfaces more homogeneous. However, too many icons or those that are inconsistent or illegible can be problematic. Choosing icons requires considering their meaning, testing, and ensuring global style coherence. Standards help, but context and users are most important.

1. Les icônes
Qui sont-elles ? Quels sont leurs pictos ?
Sébastien Desbenoit

2. « Bon jour ! »
Réagissez sur Twitter Desbenoit
Sunrise designed by Adam Whitecroft from The Noun Project

3. Il était une fois

4. Les horribles Cernettes designed by Tim Berners-Lee

5. Et ils furent heureux tout
au long de leur vie.
Merci Denise Jacobs

6. Favicon Paris Web designed by Association Paris-Web

7. Folder designed by Sergio Calcara from The Noun Project

8. Floppy disk designed by Venkatesh Aiyulu

9. ?

10. pictogramme
+ style
+ contexte
= icône
Light bulb designed by The Noun Project

11. pictogramme
+ style
+ contexte
= icône
Light bulb designed by Jean-Philippe Cabaroc

12. pictogramme
+ style
+ contexte
= icône
Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation

13. Les pictogrammes
mais qu’est-ce que c’est ?

14. Des formes

15. qui transmettent des idées
Cardiology designed by Luis Prado from The Noun Project

16. Les pictogrammes
& l’histoire

19. Heraldic Eagle designed by David Liuzzo

21. Athletitcs pictogram - Tokyo 1964 designed by Yoshiro Yamashita

22. Emergency exit - ISO 7001 designed by Yukio Ota

23. Les pictogrammes
& la qualité

24. Équilibre graphique
Sècheresse designed by United Nation OCHA

25. Cohérence
Femme enceinte, Famille designed by United Nation OCHA

26. Identifiable
Energie renouvelable designed by Luis Prado from The Noun Project

27. Lisibilité
Avalanche designed by United Nation OCHA

28. (Contexte)
Death Star designed by Andrew Forrester from The Noun Project

29. pictogramme
+ style
+ contexte
= icône
Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation

30. Retour
vers le web

31. Les icônes,
c’est bien.
Angel designed by Luis Prado from The Noun Project

32. Accélérer la compréhension
Angel designed by Luis Prado from The Noun Project

33. « Reconnaître une image
est plus facile
que de lire un texte »
Norman (celui qui ne fait pas de vidéos), 1990
Angel designed by Luis Prado from The Noun Project

34. Favoriser la mémorisation
Memory designed by Anne-Marie Nguyen from The Noun Project & Angel designed by Luis Prado from The Noun Project

35. Faciliter la navigation
Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project

36. Homogénéiser l’interface
designed by UN - OCHA & Angel designed by Luis Prado from The Noun Project

37. « Trop bien, mettons
plein d’icônes ! »
Quelqu’un, quelque part, un jour, mais ce
n’est pas la peine qu’il se dénonce.

39. Les icônes,
c’est mal
Devil designed by Luis Prado from The Noun Project

40. « Mettons encore
plus de contenu ! »
Devil designed by Luis Prado from The Noun Project

43. Attention aux raccourcis
(conceptuels)
Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project

44. Ceci n’est pas une licorne
Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project

45. Le contexte, ce parachute
Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci from The Noun Project & Angel & Devil designed by Luis Prado from The Noun Project

46. Cupcake Cookies Meringue Pain d’épices
Les étiquettes,
ces parachutes (bis)
Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci from The Noun Project & Angel & Devil designed by Luis Prado from The Noun Project

47. Placer les étiquettes

48. étiquette

49. étiquette

50. étiquette

51. Rythmer : oui !
Illustrer : non !
Paycheck from Iconfinder & Devil designed by Luis Prado from The Noun Project

52. « Il y a quelqu’un ?
quelqu’un ?
quelqu’un ?
quelqu’un ? »
Devil designed by Luis Prado from The Noun Project

53. Différencier les icônes
des illustrations
Paycheck from Iconfinder & Angel & Devil designed by Luis Prado from The Noun Project

54. Différencier les icônes
des illustrations
Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project

55. Ce n’est pas le visuel qui
fait l’icône, c’est l’usage
Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project

56. Incohérence : acte I
Devil designed by Luis Prado from The Noun Project

57. Partager
« - Je t’aime.
- Ce n’est pas réciproque. »
Share designed by Thomas Le Bas from The Noun Project & Devil designed by Luis Prado from The Noun Project

58. 1. Signification
2. Choix
3. Test
4. Go / No Go
L’art de choisir ses icônes
Share designed by Thomas Le Bas from The Noun Project & Devil designed by Luis Prado from The Noun Project

59. Les « packs » d’icônes

60. IT’S A TRAP

61. Les « packs » d’icônes

62. Incohérence : acte II
Devil designed by Luis Prado from The Noun Project

63. « Un hipster dans
mon peplum ?
mais pourquoi ?»
Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado

64. Pensez au style global !
Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado

65. Des icônes illisibles
Paycheck from Iconfinder & Devil designed by Luis Prado from The Noun Project

66. Travaillez en taille réelle !
Paycheck from Iconfinder & Angel & Devil designed by Luis Prado from The Noun Project

67. Les polices d’icônes

68. Le SVG

69. Et pour les petits ?
Share designed by Thomas Le Bas from The Noun Project

70. Universalité
Angel designed by Luis Prado from The Noun Project

71. Barrière de la langue
Translation designed by Jeremy Good from The Noun Project

72. Contexte socio-culturel
Gangnam style designed by Arjun Mahanti from The Noun Project

73. Contexte psychique
Mental health designed by Jack Biesek, Gladys Brenner, Margaret Faye, Healther Merrifield, Kate Keating, Wendy Olmstead, Todd Pierce, Jamie Cowgill & Jim Bolek

74. Une icône
“forever alone” ?
pensez alternatives
Angel designed by Luis Prado from The Noun Project

75. Après
l’orage
Éclair designed by Riyalazi from The Noun Project

76. Home - page d’accueil

77. Rechercher
Research designed by John Caserta from The Noun Project

78. < >
Zoom ?
Research designed by John Caserta from The Noun Project

79. +
Zoom ?
Research designed by John Caserta from The Noun Project

80. Listes ?

81. Paragraphe justifié ?

82. Montrer la navigation ?

83. Cheeseburger ?

84. Montrer la navigation ?

85. Géolocalisation

86. Télécharger ?
Download designed by Unknown designer, Pedro Lalli, Cody Lawson, Adam Whitecroft from The Noun Project

87. Enregistrer ?
Floppy disk designed by Venkatesh Aiyulu & Download designed by Pedro Lalli, Cody Lawson, Adam Whitecroft from The Noun Project

88. Ce qui compte,
ce sont les
utilisateurs

89. Nous avons besoin
de standards.

90. ISO : 65+ / 10-

91. ANSI : 80+ / 10-

92. W3C : Ø

93. « Merci ! »
Quelques sources
> Cognitive artifacts. DA Norman - 1991
> The design, understanding and usage of pictograms, Tijus, Barcenilla, Cambon de Lavalette and Meunier - 2007
> Pictograms – The New Sliced Bread in Icon Design, Jenny Gemmell - 2012
> We need a standard show navigation icon for responsive web design, Andy Clarke - 2012
Crédits
> Texture de fond : Subtle Dark Vertical par Cody L. disponible sur subtlepatterns.com
> Police : Rooney par Jan Fromm
> Marie-Cécile Paccard, Nathalie Rosenberg pour la relecture & Thomas Zilliox pour le test dans le TGV
Sébastien Desbenoit

94. « Des questions ? »
Sébastien Desbenoit

95. Les icônes
Qui sont-elles ? Quels sont leurs pictos ?
Sébastien Desbenoit