1

Icônes et imagesIcons and images

Patrick HofmannUX Designer • Sydney

phofmann@google.comtwitter: @phofmann

gplus.to/pman

2

Moi

���� Je m’appelle Patrick 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

Patrick Hofmann

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, noscaractéristiques, nosinté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 suisdesigner.

���� Ma sœur est hétérosexuelle. Je suis gay. Mon frère: nous ne savonspas.

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.

4

Agenda

1Jeu de devinettes

2Simplicité

3Sites d’intérêt

4Groupes d’âge

5Questions

Un programme:

Je vais commencer par un jeu de devinettes. Voyons nossimilitudes 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 pourquoicela 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.

5

Jeu dedevinettes

1

Alors, le jeu de devinettes

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'ilvous plaît

Ok? Trois, deux, un, voila!

7

Qu'est-ce que c'est?

Que voyons-nous? Des yeux? Des seins? un poêle? Bob l'Eponge? Une vueaé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 utiliserdes formes géométriquessimples pour les icônes. Pourquoi?

Parce que nous pouvons avoir beaucoup d'icônes sur une carte (aussi petit quedouze 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.

8

Qu'est-ce que c'est?

Maintenant, il ressemble plus comme des yeux. Moins comme des seins. Moinscomme 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 commeun poêle, et plus comme des yeux.

9

Qu'est-ce que c'est?

Bob l’eponge!

C'est fou comme une ligne peut renforcer le sens.

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.

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.

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.

13

Qu'est-ce que c'est?

14

Qu'est-ce que c'est?

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

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.

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.

17

Le placement et le contexte

Qu’est-ce que cela signifie?

���� Dans un magasin de bricolage?

���� Dans un manueltechnique?

���� Au-dessus de latête dans un bande

dessinée?

18

Les facteursimportants

pour les icônes

���� Connaissance

���� Placement

���� Contexte

���� Simplicité

Je vais parler plus sur la simplicité et distinction.

19

Simplicité

2

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.

20

Simplicité

2

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étiquementmieux 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 besoinsCe satisifes de l'auditoire.

la communication Pur Bio organique!

21

Simplicité

2

Même ici.

À gauche, un galant homme à cheval.

A droite, une personne sur un cheval.

22

Simplicité

2

À gauche, une voiture allemande ou américaine depuis les années 1950. Peut-êtreune 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.

23

Sites d’intérêt

3

Maintenant, pour mon travail chez Google. Près de cinq ans, Google m'aembauché. 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.

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.

25

Une banque

Pour concevoir ces icônes, j'ai eu un défi: devons-nous internationaliser, oulocaliser?

Devons-nous créer une icône pour le monde entière, ou une icône pour chaquerégion?

Nous avons cherché à internationaliser.

Alors, quel est l'icône pour représenter une banque? Billets d’un dollar? Projetsde loi? Un coffre-fort?

J'ai créé une note de 100 centimes, unités, quelles quesoient sur lui.

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 avonsutilisé 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 avonschangé 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 utilisezpour 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 utilisercette convention contraire.

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 unevariation 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 à cesujet.

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 celasignifie?

J'ai vu les icônes de personnes à genoux. Toutefois, pas tous les s'agenouillereligion quand ils prient, alors je suis venu avec une autre idée.

J'ai pris les onze premiers religions du monde, et ontcombiné les styles architecturaux en une silhouette unique. En effet, la plupart des bâtimentsreligieux 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'unerégion. Wow, ce quartier possède des temples et des mosquées et des églises. Allons-y!

29

4Groupes

d’âge

30

Pourquoi les groupes d'âge?

���� L'âge de l'information

numérique a élarginotre public

���� Un garçon de 6 anset une femme de 96

ans utilisent le mêmeproduit

���� Nous utilisons des visuels qui ne

satisfont pas tous les groupes d'âge - en

particulier les jeunes

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

32

Un téléphone

La plupart des enfants illustrés ou reconnu ce symbole quele 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 ontdit 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 Australieet en Nouvelle-Zélande, ilsutilisent ce symbole drôle de dire téléphone mobile.

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'étaitune 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.

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.

35

Écrire

36

Enregistrerun fichier

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 leursparents.

Ce est un symbole traditionnel de l'ingénierie électrique. Ce signifie «circuit interrompu".

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

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

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

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

42

aiga.org

dafont.com

commons.wikimedia.org

thenounproject.com

images.google.com

À emporter

���� Si vous ne pouvez pas les concevoir,

les trouver

���� De nombreuses icônes sont libresde droit public et

commercial

43

À emporter

���� Méfiez-vous de tomber

I love this sign.

44

À emporter

���� Méfiez-vous des vaches qui

tombent

This is from Arizona.

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.

46

Merci!Des questions?

phofmann@google.com

@phofmann

gplus.to/pman

Thank you for listening!

Any questions?

Preferably in English. As my french is shit.