Icônes et images dans l'information - Google
Upcoming SlideShare
Loading in...5
×
 

Icônes et images dans l'information - Google

on

  • 1,352 views

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

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

Statistics

Views

Total Views
1,352
Views on SlideShare
863
Embed Views
489

Actions

Likes
0
Downloads
1
Comments
0

6 Embeds 489

http://www.documation.fr 305
http://www.scoop.it 178
http://www.franchiseparis.com 3
http://webcache.googleusercontent.com 1
http://lb7.reedexpo.fr 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Icônes et images dans l'information - Google Icônes et images dans l'information - Google Document Transcript

    • Patrick HofmannUX Designer • Sydney phofmann@google.com twitter: @phofmann Icônes et images gplus.to/pman Icons and images 1
    • Moi Je m’appelle Patrick Patrick Hofmann Hofmann Mes parents sontsuisses. 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
    • 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 lesaut. 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, 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 thisconference compare. 3
    • Agenda 1 Jeu de devinettes 2 Simplicité 3 Sites d’intérêt 4 Groupes d’âge 5 QuestionsUn programme:Je vais commencer par un jeu de devinettes. Voyons nos similitudes et lesdiffé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 dinté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. Jespère en anglais, àmoins que quelquun peut traduire. 4
    • 1 Jeu de devinettesAlors, le jeu de devinettes 5
    • Jeu de devinettes Pour chacune des diapositives suivantes, dites-moi ce que vous voyez sil vous plaîtPour chacune des diapositives suivantes, dites-moi ce que vous voyez silvous plaîtOk? Trois, deux, un, voila! 6
    • Quest-ce que cest?Que voyons-nous? Des yeux? Des seins? un poêle? Bob lEponge? Une vueaérienne des deux Mexicains portant des sombreros?Il est difficile pour beaucoup de raisons. Ces formes géométriques simples nefournissent pas suffisamment de détails.Et pourtant, pour les icônes, il faut souvent utiliser des formes géométriquessimples pour les icônes. Pourquoi?Parce que nous pouvons avoir beaucoup dicô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 à desinterprétations erronées. 7
    • Quest-ce que cest?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 12pixels. Ce mouvement des cercles peuvent avoir deux pixels, mais il change lasignification potentielle considérablement.En raison de ce changement, cette image ressemble moins à seins, moins commeun poêle, et plus comme des yeux. 8
    • Quest-ce que cest?Bob l’eponge!Cest fou comme une ligne peut renforcer le sens. 9
    • Quest-ce que cest?Un magnétophone.Encore une fois, le moindre changement de la position, influe sur la significationconsidérablement. 10
    • Quest-ce que cest?Je déplacer les cercles en dehors du carré. Voila! Nous avons des roues sous unpanier ou une boîte. Cest la première fois que le carré nest pas la cadre delimage, mais une partie de lobjet dans limage. Ce défi, le cadre ambigu, conduitsouvent à des interprétations erronées. 11
    • Quest-ce que cest?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
    • Quest-ceque cest? 13
    • Quest-ce que cest?Mais revenons aux seins. Cest clairementune image ras. Un élément du torsehumain. Cependant, si je retire le nombril et dajouter quelques lignes dans lescoins, que voyez-vous? 14
    • Quest-ce que cest?Qui voit encore un torse de femme? Qui voit le visage dun chien ou un mouton?Cest le défi dune icône recadrée. Elle se cache trop dinformations. 15
    • 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 limage est important pour agrandir limage. Mais quen est-il lamise en place de cette image? Ce change le sens aussi. 16
    • Le placementet le contexte Qu’est-ce que cela signifie? Dans un magasin de bricolage? Dans un manuel technique? Au-dessus de latête dans un bande dessinée? 17
    • Les facteurs importants pour les icônes Connaissance Placement Contexte SimplicitéJe vais parler plus sur la simplicité et distinction. 18
    • 2 SimplicitéLorsque le réseau routier national de lAllemagne simplifié leurs signes dans lesannées 1980, ils ont enlevé les détails inutiles.À la gauche, la vieille icône. Au droit, la nouvelle icône.Ils ont enlevé lunité de mesure. Pourquoi? Peut-être, à des distances lointaines, le«km», ajoute beaucoup à la complexité et lambiguïté. Et parce que tout le mondesait que cest 80 km. Sauf les Américains et les Britanniques, peut-être. 19
    • 2 SimplicitéIci, décrire le monsieur à gauche. Sil 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». Pasun 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 nouscommuniquons 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 lauditoire.la communication Pur Bio organique! 20
    • 2 SimplicitéMême ici.À gauche, un galant homme à cheval.A droite, une personne sur un cheval. 21
    • 2 SimplicitéÀ 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 pourque nous communiquons un message dans sa forme la plus pure. Pour les icônes,nous devons faire la même chose. 22
    • 3 Sites d’intérêtMaintenant, pour mon travail chez Google. Près de cinq ans, Google maembauché. Mon premier projet: pour visualiser les points dintérêt sur les cartes.Parce quil ya tant de points dintérêt, nous ne pouvons pas leur montrer tout letemps, et nous devons faire des petites icônes pour quils nencombrent pas lacarte. 23
    • Takeaways Never stop tweakingA Bangalore, en Inde, les points dintérêt sont très importants sur une carte, car laplupart des routes nont pas de noms ou de numéros. Alors, comment puis-jenaviguer de A à B si la route na pas de nom ou un numéro? Je dois utiliser unpoint dintérêt. Même dans notre conversation, nous donnons chaque directiondautres en utilisant des noms de rues, mais aussi points de repère. 24
    • Une banquePour concevoir ces icônes, jai 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 licône pour représenter une banque? Billets d’un dollar? Projetsde loi? Un coffre-fort?Jai créé une note de 100 centimes, unités, quelles que soient sur lui. 25
    • Un hôpitalComment créez-vous un symbole pour lhôpital?En Israël, nous utilisons létoile de David. Dans dautres domaines, nous avonsutilisé la croix et le croissant, mais jai appris que cela a été interdit parlorganisation 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.Jai 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, jai appris que cela était faux. Seuls quelques cartes imprimées utilisercette convention contraire. 26
    • Un stadeQuen est-il un stade?Si beaucoup de sports et dévénements se produisent dans un stade, commentpouvons-nous utiliser une icône pour représenter tous?Jai essayé différentes formes de lamphithéâtre et des sièges, mais ils ne vont pasbien au niveau des pixels 12x12.Donc, jai créé la bassine et le plat de chien. Nous utilisons actuellement unevariation de la bassine. Pourquoi? Parce quelle est simple. Deuxièmement, il a lenom du stade à côté delle. Donc, chaque fois quon voit une bassine à côté dunstade, on pense, oh que cest un stade bizarre,.Essentiellement, il est une icône appris. Pas intuitive, mais qui est appris, aprèsune ou deux fois. Même avec ce problème, nous navons aucun reproche à cesujet. 27
    • Un édifice religieuxEnfin, lieux religieux.Cest clairement le plus sensible.Si nous ne savons pas la religion de lendroit, comment pouvons-nous celasignifie?Jai vu les icônes de personnes à genoux. Toutefois, pas tous les sagenouillereligion quand ils prient, alors je suis venu avec une autre idée.Jai pris les onze premiers religions du monde, et ont combiné les stylesarchitecturaux 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 lamosquée, un peu de léglise, un peu de la synagogue, un peu de lorthodoxie, unpeu de peu orthodoxe, un peu de temple.Heureusement, rien à redire. Toutefois, nous avons maintenant localiser. Nousutilisons lensemble de ces images. Ils sont utiles en fournissant une texture dunerégion. Wow, ce quartier possède des temples et des mosquées et des églises.Allons-y! 28
    • 4Groupes d’âge 29
    • Pourquoi lesgroupes dâge? Lâge de linformation numérique a élargi notre public Un garçon de 6 ans et une femme de 96ans utilisent le même produit Nous utilisons des visuels qui nesatisfont pas tous les groupes dâge - enparticulier les jeunes 30
    • Etudier les jeunes utilisateurs Jai effectué une série de tests avec desenfants (5-15 ans) aux États-Unis, Canada, Suisse, Australie et Nouvelle-Zélande Jai demandé auxenfants de dessiner les éléments précisJai présenté un jeu de devinettes pour déterminer leur interprétation et leur préférences Voici les résultats 31
    • Un téléphoneLa plupart des enfants illustrés ou reconnu ce symbole que le téléphone.En Europe, beaucoup denfants a dit le vieux symbole était un «numéro detéléphone».Pourquoi? Parce quil se trouve souvent à côté dun numéro de téléphone, enparticulier dans les publicités, imprimée ou à la télévision.Quand jai demandé aux enfants de spéculer sur ce que lobjet était, certains ontdit quils ne savaient pas. Cétait juste un symbole à côté dun numéro detéléphone.Par ailleurs, pour certaines entreprises en Australie et en Nouvelle-Zélande, ilsutilisent ce symbole drôle de dire téléphone mobile. 32
    • Films, vidéosPour 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 dedivertissement, magazines, etcPour eux, cela signifie movies. Rien de plus, rien de moins. 33
    • Musique, chansonsWhich 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 stillwork for music, but it depends on the context. 34
    • Écrire 35
    • Enregistrer un fichier 36
    • Allumer / ÉteignerMais peut-être ici, cest le meilleur symbole appris.Les enfants de moins de deux ans sait ce que cela signifie. Ce est le premiersymbole disent-ils sur leurs jouets à piles, leurs jeux vidéo, les appareils de leursparents.Ce est un symbole traditionnel de lingénierie électrique. Ce signifie «circuitinterrompu". 37
    • L’impact des groupes d’âge Lorsque nous localison ouinternationalisons nos informations, nousdevons regarder l’âge de nos utilisateurs Comme nos utilisateurs, nos icônes vieillissent aussi Tester votre travail, de toutes les façons possibles 38
    • À emporter Icônes fournissentdes ancres visuelles dans votre information Icônes efficacespeuvent accélérer la recherche de linformation, et la mémorisation Plus une icône estcomplexe, plus il faut lire Plus il faut lire, moins l’icône est efficace 39
    • À 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 lesgroupes d’âge en tant que cultures, en tant que langues 40
    • À 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
    • À emporterSi vous ne pouvezpas les concevoir, aiga.org les trouver De nombreuses dafont.comicônes sont libres de droit public et commercial commons.wikimedia.org thenounproject.com images.google.com 42
    • À emporter Méfiez-vous de tomberI love this sign. 43
    • À emporter Méfiez-vous des vaches qui tombentThis is from Arizona. 44
    • À emporter Méfiez-vous des vaches souffrant de la faimWhy the crack in the window? If I crashed into a cow, I think more than thewindow would break!An unnecessary detail. 45
    • phofmann@google.com Merci! Des questions? @phofmann gplus.to/pmanThank you for listening!Any questions?Preferably in English. As my french is shit. 46