Conférence donnée par Patrick Hofmann de Google Australie au salon Documation 2012

1. Patrick Hofmann
UX Designer • Sydney
phofmann@google.com
twitter: @phofmann
Icônes et images
gplus.to/pman Icons and images
1

2. Moi
Je m’appelle Patrick
Patrick Hofmann Hofmann
Mes parents sont
suisses. Je suis né au
Canada. Néanmoins,
mon français est
terrible.
Ma carrière :
rédacteur technique,
illustrateur, designer,
chercheur en
utilisabilité
Maintenant : un
designer à
Google Maps
2

3. Moi
Nous sommes des
triplés.
Si nous sommes
génétiquement,
démographiquement,
pratiquement
identiques, sommes
nous les mêmes
utilisateurs?
Ici nous sommes à un an, à deux ans, à quatre ans, à dix-sept ans. Désolé pour le
saut. Nous étions vraiment moche entre 5-16. Vingt-cinq ans. Vingt-neuf.
Et quarante ans! Comme nous avons grandi, bien sûr, nos caractéristiques, nos
intérêts, nos expériences, nos compétences ont augmenté.
Ma sœur est droitier. Mon frère et moi sommes gauchers.
Ma sœur est analytique. Mon frère et moi sommes créatifs.
Ma sœur est statisticienne. Mon frère est directeur de croisière. Je suis
designer.
Ma sœur est hétérosexuelle. Je suis gay. Mon frère: nous ne savons
pas.
Si nous sommes uniques dans nos expériences et nos intérêts, pouvons-
nous utiliser et interpréter les choses différemment? Oui and non.
Voyons, comment nous, nous comparons. Let’s see how we here at this
conference compare.
3

4. Agenda
1
Jeu de devinettes
2
Simplicité
3
Sites d’intérêt
4
Groupes d’âge
5
Questions
Un programme:
Je vais commencer par un jeu de devinettes. Voyons nos similitudes et les
différences dans notre interprétation des icônes et des images.
Puis, je vais parler de la Simplfication et simplicité. Aussi sur la Distinction.
Deux facteurs très importants pour les icônes.
je vais parler de mon iconographie à Google, en particulier sur les sites d'intérêt.
Alors, je vais terminer avec ma recherche de jeunes groupes d'âge, et pourquoi
cela est important pour la documentation technique.
Bien sûr, nous aurons un moment pour les questions à la fin. J'espère en anglais, à
moins que quelqu'un peut traduire.
4

5. 1
Jeu de
devinettes
Alors, le jeu de devinettes
5

6. Jeu de
devinettes
Pour chacune des
diapositives suivantes,
dites-moi ce que vous
voyez s'il vous plaît
Pour chacune des diapositives suivantes, dites-moi ce que vous voyez s'il
vous plaît
Ok? Trois, deux, un, voila!
6

7. Qu'est-ce
que c'est?
Que voyons-nous? Des yeux? Des seins? un poêle? Bob l'Eponge? Une vue
aérienne des deux Mexicains portant des sombreros?
Il est difficile pour beaucoup de raisons. Ces formes géométriques simples ne
fournissent pas suffisamment de détails.
Et pourtant, pour les icônes, il faut souvent utiliser des formes géométriques
simples pour les icônes. Pourquoi?
Parce que nous pouvons avoir beaucoup d'icônes sur une carte (aussi petit que
douze part douze pixels sur Google Maps).
Ou parce que nos icônes doivent être considérées sur de longues distances,
comme avec les panneaux routiers et panneaux directionnels.
La simplicité est importante pour la reconnaissance, mais peut conduire à des
interprétations erronées.
7

8. Qu'est-ce
que c'est?
Maintenant, il ressemble plus comme des yeux. Moins comme des seins. Moins
comme un poêle?
Seulement avec un changement de mouvement.
Pour les cartes Google, je dois créer ces icônes à un minimum de 12 par 12
pixels. Ce mouvement des cercles peuvent avoir deux pixels, mais il change la
signification potentielle considérablement.
En raison de ce changement, cette image ressemble moins à seins, moins comme
un poêle, et plus comme des yeux.
8

9. Qu'est-ce
que c'est?
Bob l’eponge!
C'est fou comme une ligne peut renforcer le sens.
9

10. Qu'est-ce
que c'est?
Un magnétophone.
Encore une fois, le moindre changement de la position, influe sur la signification
considérablement.
10

11. Qu'est-ce
que c'est?
Je déplacer les cercles en dehors du carré. Voila! Nous avons des roues sous un
panier ou une boîte. C'est la première fois que le carré n'est pas la cadre de
l'image, mais une partie de l'objet dans l'image. Ce défi, le cadre ambigu, conduit
souvent à des interprétations erronées.
11

12. Qu'est-ce
que c'est?
Et maintenant nous avons un poêle. Ou quatre mexicains portant des sombreros.
Pour vraiment ressembler à un poêle, on peut ajouter peut-être quatre pixels.
12

13. Qu'est-ce
que c'est?
13

14. Qu'est-ce
que c'est?
Mais revenons aux seins. C'est clairementune image ras. Un élément du torse
humain. Cependant, si je retire le nombril et d'ajouter quelques lignes dans les
coins, que voyez-vous?
14

15. Qu'est-ce
que c'est?
Qui voit encore un torse de femme? Qui voit le visage d'un chien ou un mouton?
C'est le défi d'une icône recadrée. Elle se cache trop d'informations.
15

16. Le placement
et le contexte
Qu’est-ce que
cela signifie?
Sur un drapeau?
Sur un calculatrice?
Sur un site web?
Sur un batiment?
Sur un flacon
de médicament?
Sur une carte?
Recadrage de l'image est important pour agrandir l'image. Mais qu'en est-il la
mise en place de cette image? Ce change le sens aussi.
16

17. Le placement
et le contexte
Qu’est-ce que
cela signifie?
Dans un magasin
de bricolage?
Dans un manuel
technique?
Au-dessus de la
tête dans un bande
dessinée?
17

18. Les facteurs
importants
pour les icônes
Connaissance
Placement
Contexte
Simplicité
Je vais parler plus sur la simplicité et distinction.
18

19. 2
Simplicité
Lorsque le réseau routier national de l'Allemagne simplifié leurs signes dans les
années 1980, ils ont enlevé les détails inutiles.
À la gauche, la vieille icône. Au droit, la nouvelle icône.
Ils ont enlevé l'unité de mesure. Pourquoi? Peut-être, à des distances lointaines, le
«km», ajoute beaucoup à la complexité et l'ambiguïté. Et parce que tout le monde
sait que c'est 80 km. Sauf les Américains et les Britanniques, peut-être.
19

20. 2
Simplicité
Ici, décrire le monsieur à gauche. S'il vous plaît me donner des adjectifs.
Homme? Milieu des années cinquante? Gallant? Déterminé?
A droite, pouvez-vous fournir ces mêmes adjectifs?
On pourrait dire que la vieille icône est esthétiquement mieux que le nouveau.
Cependant, pour moi, la nouvelle icône est mieux communiquer «piétons». Pas
un homme, pas 50 ans, pas galant, pas un piéton déterminée. Mais un piéton pur.
Comme les rédacteurs techniques, nous élaborer nos mots de sorte que nous
communiquons un message dans sa forme la plus pure. Sans les détails inutiles.
Sans décoration. Sans additifs. Afin que le message est pur. Alors que les besoins
Ce satisifes de l'auditoire.
la communication Pur Bio organique!
20

21. 2
Simplicité
Même ici.
À gauche, un galant homme à cheval.
A droite, une personne sur un cheval.
21

22. 2
Simplicité
À gauche, une voiture allemande ou américaine depuis les années 1950. Peut-être
une Opel? Une Chevrolet? Une voiture qui rit?
A droite, une voiture. Une voiture pure, sans adjectifs.
Encore une fois, nous, que rédacteurs techniques, nous élaborer nos mots pour
que nous communiquons un message dans sa forme la plus pure. Pour les icônes,
nous devons faire la même chose.
22

23. 3 Sites
d’intérêt
Maintenant, pour mon travail chez Google. Près de cinq ans, Google m'a
embauché. Mon premier projet: pour visualiser les points d'intérêt sur les cartes.
Parce qu'il ya tant de points d'intérêt, nous ne pouvons pas leur montrer tout le
temps, et nous devons faire des petites icônes pour qu'ils n'encombrent pas la
carte.
23

24. Takeaways
Never stop tweaking
A Bangalore, en Inde, les points d'intérêt sont très importants sur une carte, car la
plupart des routes n'ont pas de noms ou de numéros. Alors, comment puis-je
naviguer de A à B si la route n'a pas de nom ou un numéro? Je dois utiliser un
point d'intérêt. Même dans notre conversation, nous donnons chaque direction
d'autres en utilisant des noms de rues, mais aussi points de repère.
24

25. Une banque
Pour concevoir ces icônes, j'ai eu un défi: devons-nous internationaliser, ou
localiser?
Devons-nous créer une icône pour le monde entière, ou une icône pour chaque
région?
Nous avons cherché à internationaliser.
Alors, quel est l'icône pour représenter une banque? Billets d’un dollar? Projets
de loi? Un coffre-fort?
J'ai créé une note de 100 centimes, unités, quelles que soient sur lui.
25

26. Un hôpital
Comment créez-vous un symbole pour l'hôpital?
En Israël, nous utilisons l'étoile de David. Dans d'autres domaines, nous avons
utilisé la croix et le croissant, mais j'ai appris que cela a été interdit par
l'organisation de la Croix-Rouge et du Croissant-Rouge. Donc, nous avons
changé le symbole pour un grand H.
Cependant, en Corée, mes ingénieurs dit qu’un lit que représente un hôpital.
J'ai dit, non, un lit représente un hôtel. En Corée, quelle icône que vous utilisez
pour les hôtels?
Les ingénieurs coréens dit, la lettre H.
Plus tard, j'ai appris que cela était faux. Seuls quelques cartes imprimées utiliser
cette convention contraire.
26

27. Un stade
Qu'en est-il un stade?
Si beaucoup de sports et d'événements se produisent dans un stade, comment
pouvons-nous utiliser une icône pour représenter tous?
J'ai essayé différentes formes de l'amphithéâtre et des sièges, mais ils ne vont pas
bien au niveau des pixels 12x12.
Donc, j'ai créé la bassine et le plat de chien. Nous utilisons actuellement une
variation de la bassine. Pourquoi? Parce qu'elle est simple. Deuxièmement, il a le
nom du stade à côté d'elle. Donc, chaque fois qu'on voit une bassine à côté d'un
stade, on pense, oh que c'est un stade bizarre,.
Essentiellement, il est une icône appris. Pas intuitive, mais qui est appris, après
une ou deux fois. Même avec ce problème, nous n'avons aucun reproche à ce
sujet.
27

28. Un édifice
religieux
Enfin, lieux religieux.
C'est clairement le plus sensible.
Si nous ne savons pas la religion de l'endroit, comment pouvons-nous cela
signifie?
J'ai vu les icônes de personnes à genoux. Toutefois, pas tous les s'agenouille
religion quand ils prient, alors je suis venu avec une autre idée.
J'ai pris les onze premiers religions du monde, et ont combiné les styles
architecturaux en une silhouette unique. En effet, la plupart des bâtiments
religieux ont une façade bonne, une silhouette bien. Celui-ci: il est un peu de la
mosquée, un peu de l'église, un peu de la synagogue, un peu de l'orthodoxie, un
peu de peu orthodoxe, un peu de temple.
Heureusement, rien à redire. Toutefois, nous avons maintenant localiser. Nous
utilisons l'ensemble de ces images. Ils sont utiles en fournissant une texture d'une
région. Wow, ce quartier possède des temples et des mosquées et des églises.
Allons-y!
28

29. 4
Groupes
d’âge
29

30. Pourquoi les
groupes d'âge?
L'âge de
l'information
numérique a élargi
notre public
Un garçon de 6 ans
et une femme de 96
ans utilisent le même
produit
Nous utilisons des
visuels qui ne
satisfont pas tous les
groupes d'âge - en
particulier les jeunes
30

31. Etudier les
jeunes
utilisateurs
J'ai effectué une série
de tests avec des
enfants (5-15 ans) aux
États-Unis, Canada,
Suisse, Australie et
Nouvelle-Zélande
J'ai demandé aux
enfants de dessiner les
éléments précis
J'ai présenté un jeu de
devinettes pour
déterminer leur
interprétation et leur
préférences
Voici les résultats
31

32. Un téléphone
La plupart des enfants illustrés ou reconnu ce symbole que le téléphone.
En Europe, beaucoup d'enfants a dit le vieux symbole était un «numéro de
téléphone».
Pourquoi? Parce qu'il se trouve souvent à côté d'un numéro de téléphone, en
particulier dans les publicités, imprimée ou à la télévision.
Quand j'ai demandé aux enfants de spéculer sur ce que l'objet était, certains ont
dit qu'ils ne savaient pas. C'était juste un symbole à côté d'un numéro de
téléphone.
Par ailleurs, pour certaines entreprises en Australie et en Nouvelle-Zélande, ils
utilisent ce symbole drôle de dire téléphone mobile.
32

33. Films, vidéos
Pour les films, les enfants choisissent quelle icone?
Une majorité a choisi la bande de celluloïd. Encore, ils ne savaient pas que c'était
une bande de celluloïd. Ils ont appris ce motif de cinémas, des programmes de
divertissement, magazines, etc
Pour eux, cela signifie 'movies'. Rien de plus, rien de moins.
33

34. Musique,
chansons
Which one did they pick?
This one.
They recognised it from their laptops, mobile phones, and digital devices.
Some knew it was a microphone because they have seen it in music videos.
The musical notatiion: for many of the children, this was a ringtone! It would still
work for music, but it depends on the context.
34

35. Écrire
35

36. Enregistrer
un fichier
36

37. Allumer /
Éteigner
Mais peut-être ici, c'est le meilleur symbole appris.
Les enfants de moins de deux ans sait ce que cela signifie. Ce est le premier
symbole disent-ils sur leurs jouets à piles, leurs jeux vidéo, les appareils de leurs
parents.
Ce est un symbole traditionnel de l'ingénierie électrique. Ce signifie «circuit
interrompu".
37

38. L’impact des
groupes d’âge
Lorsque nous
localison ou
internationalisons nos
informations, nous
devons regarder l’âge
de nos utilisateurs
Comme nos
utilisateurs, nos
icônes vieillissent
aussi
Tester votre travail,
de toutes les façons
possibles
38

39. À emporter
Icônes fournissent
des ancres visuelles
dans votre
information
Icônes efficaces
peuvent accélérer la
recherche de
l'information, et la
mémorisation
Plus une icône est
complexe, plus il faut
lire
Plus il faut lire,
moins l’icône est
efficace
39

40. À emporter
Icônes devrait être
instantanément
reconnues, pas lues
et analysées
Sur une carte ou
dans une série, les
icônes doivent être
distinctes
Considérons les
groupes d’âge en tant
que cultures, en tant
que langues
40

41. À emporter
Une question
de taille
Votre icône doit
être reconnaissable
même si elle est
très petite
Concevez votre
icône à sa
taille réelle
41

42. À emporter
Si vous ne pouvez
pas les concevoir, aiga.org
les trouver
De nombreuses dafont.com
icônes sont libres
de droit public et
commercial commons.wikimedia.org
thenounproject.com
images.google.com
42

43. À emporter
Méfiez-vous
de tomber
I love this sign.
43

44. À emporter
Méfiez-vous
des vaches qui
tombent
This is from Arizona.
44

45. À emporter
Méfiez-vous des
vaches souffrant
de la faim
Why the crack in the window? If I crashed into a cow, I think more than the
window would break!
An unnecessary detail.
45

46. phofmann@google.com
Merci!
Des questions? @phofmann
gplus.to/pman
Thank you for listening!
Any questions?
Preferably in English. As my french is shit.
46