Little Big Details, les détails qui font la différence

Le design d’interface (Web, applications diverses, intranet…), on le sait, est constitué de micro détails qui doivent former un tout cohérent. Ces détails font un bon design…

À l’initiative de Toni Romero, un jeune graphiste américain de 22 ans, voici un blog visuel qui parlera tout particulièrement à tous les UI designers : Little Big Details. On le sait, le design d’interfaces d’application est peu considéré dans la grande famille du Web design. Bien que cela évolue (un peu). Les web agencies qui en constituent le noyau dur, sont souvent nées d’anciennes anciennes agences de com voir de publicité, conservant au passage le pire de l’ancien monde : jeunes stagiaires au physique intelligent, directeur artistique senior d’au moins 22 ans, attitude, mépris et frime derrière des Ray-Ban Wayfarer II, total look noir. Octave, héro dandy de 99 francs, à la peau dure. Seuls les sites grands publics, façon communication de masse, trouvent grâce aux yeux de ces nouveaux créatifs de l’âge numérique. Laissant de côté les travaux ressentis de « labeur » aux laborieux de la création. 99% du design numérique implique pourtant une vraie connexion avec l’ergonomie, les usages et la technique. Tout ça pour dire que créer une interface « usable » n’est pas donnée à n’importe quel graphiste sorti d’école spécialisée. Il est aussi question de technicité, créativité et maturité. Le design d’interface d’applications, enfin, est affaire de détails. Et pour reboucler sur Little Big Details, ce blog américain met le focus sur une multitude de détails qui font la différence et –  tout en subtilité – amène de la plus-value aux interfaces qui nous entourent. En une image et un (petit) commentaire, tout est dit et l’on peut s’y approvisionner en bonnes idées pour ses futurs designs.

Logos adaptatifs

Les graphistes et développeurs ont depuis des années l’habitude d’adapter leurs productions aux dimensions variés des appareils. De plus, les sites non responsive (c’est à dire non compatibles avec les mobiles, smartphone ou tablette), sont pénalisés par Google depuis le 21 avril 2015.  Tout ce travail a permis de développer les fondamentaux du « design adaptatif » (responsive design en anglais).

Avec les sites web responsives, la charte graphique (comprenant le logo) doit évoluer. Un logo doit pouvoir conserver sa personnalité et transmettre l’identité de marque, dans différentes tailles.

blog ai3 responsive-logo Logos adaptatifs
Logo responsive

Joe Harrison, spécialiste en design digital et interactif nous explique dans son étude que des marques comme Coca Cola, Chanel ou Disney ont déjà des variantes de leur logo, qui s’adaptent et se modifient en fonction de l’utilisation.

Pour arriver à la plus petite forme d’un logo adaptatif, il faut :

  • Supprimer les détails
  • Supprimer les couleurs
  • Simplifier les formes
  • Empiler les éléments pour un rendu carré

En appliquant ces principes de conception, un logo plus lisible et approprié peut être affiché. Le concept vise à passer d’une image de marque de lignes directrices fixes et rigides à un système plus souple et plus contextuel.

blog ai3 logos-adaptatifs Logos adaptatifs
Logos adaptatifs de Coca-Cola, Chanel, Walt Disney et Heineken

Disney par exemple a simplifié progressivement son logo, faisant disparaître le château, jusqu’à ce qu’il ne reste plus que la première lettre du nom de la marque. Au contraire, Heineken ou Chanel suppriment le nom de la marque pour ne laisser qu’un pictogramme. Pour Coca Cola, le changement va jusqu’à changer le nom de la marque pour passer de Coca Cola à la version minimale « Coke ». Vous pouvez voir le résultat de cette étude en action : ResponsiveLogos.co.uk .

Aujourd’hui, il ne suffit donc plus de créer un simple logo mais de penser une gamme de logo avec des variantes de compositions pour s’adapter à différentes tailles ou résolutions d’écran.

La couleur Pantone 2019 : PANTONE 16-1546 Living Coral

Après l’Ultra-Violet, le Pantone Color of the Year de 2018, Pantone a annoncé mercredi 5 décembre que Living Coral est la couleur de l’année 2019.

Chaque année depuis 20 ans, Pantone décerne le titre honorable de couleur de l’année, en tenant compte de la mode, de la décoration, du design et des tendances culturelles, ainsi que de « comment les couleurs peuvent incarner notre expérience collective et refléter ce qui se passe dans notre culture mondiale à un moment donné », selon le communiqué de presse de Pantone. Le processus de sélection de la couleur de l’année exige un examen approfondi et une analyse des tendances.

Le PANTONE 16-1546 Living Coral, est une nuance d’orange avec une nuance dorée. Cette couleur chaude nous transmet un sentiment de confort. Pantone note que la sélection de cette année symbolise un « besoin inné d’optimisme et d’activités joyeuses » et « des expériences authentiques et immersives qui permettent la connexion et l’intimité », ces dernières étant particulièrement émouvantes dans un paysage culturel qui est de plus en plus dominé par la technologie numérique et les médias sociaux.

Cette couleur vivifiante rappelle la nature sous-marine. Situé au centre de notre écosystème naturellement vivant et chromatique, PANTONE Living Coral évoque la façon dont les récifs coralliens abritent un kaléidoscope de couleurs diverses. La sélection de cette année met en avant l’urgence de 2019 : respecter et de préserver la nature et les ressources naturelles.

Les récifs coralliens sont un élément important de l’environnement mondial, à la fois pour protéger et entretenir les écosystèmes marins et aider à la filtration de l’eau et à la reproduction de la vie marine, entre autres choses. Avec le changement climatique, cette couleur (et son lien avec la nature) semble particulièrement pertinente, surtout si l’on considère que certaines espèces de corail sont inscrites comme « menacées » dans la Loi sur les espèces menacées d’extinction.

Expérience utilisateur : animation SVG d’un formulaire

Darin Senneff, un développeur qui habite à Washington DC, nous propose un formulaire animé très intéressant qui peut considérablement améliorer l’expérience utilisateur. Vous pourrez trouver son site ici. Cet élément UX a d’abord été partagé sur codepen.io le 16 décembre 2017 puis a été partagé en Inde et fait aujourd’hui le tour du monde.

L’animation réalisée en SVG met en scène un Yeti au-dessus d’un formulaire. Quand vous tapez vos informations, email et mot de passe, il suit la progression du remplissage. Par exemple, lorsque vous complétez le mot de passe, le Yéti réagit en se cache les yeux.

Plus précisément un jeu subtil entre le dessin SVG du yéti et la captation des actions de l’utilisateur en javascript. Le Yéti est réalisé avec de multiples vecteurs qui réagissent en interaction avec l’utilisateur. C’est le code javascript qui permet de l’animer selon l’action de l’utilisateur (détection du type de champ du formulaire) de façon fluide et naturelle et embellit l’expérience utilisateur.

Améliorer l’expérience utilisateur de son formulaire

De nos jours, même si l’on veut améliorer l’expérience utilisateur sur un site (qualité des visuels, travail éditorial, univers de marque…), l’étape du formulaire reste ennuyeuse.

Pour réaliser un formulaire qui fonctionne, vous pouvez à votre niveau, respecter certaines bonnes pratiques :

  • Ne collecter que les infos essentielles pour le client
  • Humaniser les messages d’erreurs
  • Créer une animation progressive qui signifie les étapes qui restent à accomplir et qui incite à passer à la suivante
  • Collecter les informations de manière détournée et séquencée sur le site

Cette animation ludique permet d’apporter de l’originalité lors de l’action récurrente de la connexion à un compte. Le yéti amuse l’utilisateur et détourne donc le sentiment négatif lorsque l’on complète un formulaire standard.

De plus, la curiosité incite l’utilisateur à terminer de remplir le formulaire. Sur des sites e-commerce, cela peut permettre d’augmenter le taux de conversion.

La typographie peut vous sauver la vie !

La typographie a plusieurs vertus : elle nous informe, nous met dans l’ambiance, nous donnes des indices temporels et nous donne (aussi) du plaisir. Mais la typographie peut aussi nous sauver la vie. Notamment quand elle peut réduire les risques de distraction des automobilistes.

C’est du moins le pari fait par le MIT qui, d’une façon très scientifique, a testé des typographies qui réduisent l’inattention des conducteurs. Tant au niveau des interfaces embarquées… qu’au niveau de la signalétique extérieure. Voici un petit film qui synthétise ce projet passionnant. Cette étude pourrait également « aider » le design d’application « critique » (dans le domaine militaire, médical… Etc.)

Petites « nouveautés » SharePoint Online

J’espère que vos vacances ont été ensoleillé et des plus reposante, alors un petit post de nouveautés sur SharePoint Online pour bien commencer sa rentrée ?

Personnalisation de l’entête de site #branding en 4 options

None – Affiche l’en-tête avec la couleur blanche par défaut
Neutral – Affiche l’en-tête avec un fond gris clair
Soft – Affiche l’en-tête avec une version claire de la couleur principale en arrière-plan
Strong – Affiche l’en-tête avec la couleur principale comme arrière-plan

blog ai3 Modern-header-Change-look-header-choice-300x191 Petites "nouveautés" SharePoint Online

Menu de navigation #MegaMenu #MegaMenuEnabled

Cette navigation permet de diviser en blocs (Menu A, Menu B, …) les liens de navigation.

blog ai3 Modern-site-MegaMenuEnable-300x105 Petites "nouveautés" SharePoint Online

 

Vous pouvez l’activer via un script standard Microsoft :

Ou via les librairies PnP

On peut créer des sous-sites « Modern UI »

Certes, il n’est pas conseillé de créer des sous-sites. On le sait tous, mais n’empêche que c’est plus simple à gérer quand on en a des centaines, voir des milliers, avec des templates de sites et / ou une architecture de groupes d’accès particuliers identiques à appliquer.

blog ai3 Modern-subsites-300x237 Petites "nouveautés" SharePoint Online

Un event sur les nouvelles méthodes collaboratives

En Avril dernier, Ai³ Sud-Ouest et So-youz organisaient un afterwork autour du collaboratif. Quand on parle de méthodologie et de collaboratif, 2 grosses tendances ressortent : côté développement, la Méthode Agile et côté conception le Design Thinking. La Méthode Agile (d’après le blog Quality Street) « est une approche itérative et incrémentale, qui est menée dans un esprit collaboratif avec juste ce qu’il faut de formalisme. Elle génère un produit de haute qualité tout en prenant en compte l’évolution des besoins des clients ». Tandis que le Design Thinking « est une approche de l’innovation et de son management qui se veut une synthèse entre la pensée analytique et la pensée intuitive. Il s’appuie beaucoup sur un processus de co-créativité impliquant des retours de l’utilisateur final. » (d’après Wikipedia). Pendant cet event, deux de nos clients (Air France – KLM et Pierre Fabre) ont eu la gentillesse de témoigner quant à l’efficacité de ces 2 approches ! Voici une vidéo qui reprend les moments forts de cet événement.

Vous souhaitez en savoir plus ? Contactez-nous ! Nos experts sont à votre disposition pour vous accompagner et répondre à toutes vos questions !

Révolution Russe

Ce n’est pas un scoop, la plupart des Aicubien(ne)s sont branchés foot. Il suffit de venir entre 13 et 14 pour assister à des joutes FIFA endiablées et le Mondial russe qui approche ne risque pas d’atténuer cette tradition. Comme avant tout Mondial, chaque fan en puissance commence à jauger les forces en présence et à guetter les « affiches » qui s’annoncent. France/Brésil en quart, Argentine/Espagne en 1/8e… Il y en a une qui a déjà fait parler d’elle : l’affiche « officielle » de l’événement.

Depuis le début des 2000, les agences de com. sollicitées pour l’occasion nous avaient plutôt habitué à des formes enfantines, toutes en rondeurs, étoiles ou silhouettes plus ou moins humaines se donnant la main, avec ici où là un grand sourire rassurant, sorte d’immense farandole des peuples et des continents. La palette colorimétrique étant bien-sûr dans le même tempo, avec ces explosions de jaune vif, de bleu, de rouge et de vert ! Il suffit de jeter un oeil aux opus « Allemagne 2006 », « Afrique du Sud 2010 » ou « Brésil 2014 » pour s’en convaincre.

Quand soudain…

Cette fois, le pays organisateur a décidé de casser ces codes et de rendre hommage au Constructivisme autant qu’au légendaire gardien soviétique Lev Yachine (qui est à ce jour le seul à ce poste à avoir obtenu le Ballon d’or). En s’appuyant sur sa gloire nationale décédée en 1990 à 60 ans, la Russie fait le pari d’une affiche « rétro » avec un style qui colle parfaitement à celui de son identité. Bien joué ! Le résultat est on ne peut plus graphique et, d’une certaine manière, replace le football au centre de la carte. «Le style des affiches soviétiques post-constructivistes des années 20 et 30, leur langage visuel très particulier, cette nouvelle poésie des images figuratives constituent l’un des éléments les plus importants et les plus appréciés de la culture russe», a de son côté expliqué Igor Gurovich, l’auteur qui rend ici un bel hommages à l’héritage de son pays.

La Russie, et l’URSS avant elle, a toujours été une terre de design. Avec cette affiche, elle prouve encore qu’elle tient son rang (à défaut d’autre chose) et envoie un message clair : retour aux basiques. Le temps de quelques semaines. Le temps d’adoucir les mœurs autour d’une boule de cuir.

Un article de Guillaume Boitelle (Directeur Artistique / So-youz)

« Elle » est d’ailleurs

L’Intelligence Artificielle, vendue comme une Force obscure qui pourrait rapidement dominer la planète, est au cœur de toutes les attentions. L’Intelligence Artificielle suppose nos itinéraires, « elle » nous bat au jeu de Go, elle compose les prochains hits, elle grignote les emplois de nos chômeurs, elle nous écoute à travers nos enceintes connectées, elle nous regarde via nos caméras de surveillance et, lorsqu’elle le décidera, elle finira bien par lancer une traque planétaire pour exterminer ces fourmis humaines à coup de robot-chiens tueurs…

Mais qui est-« elle » ?

Derrière cet acronyme d’IA, de San Francisco à la Station F, se cachent pourtant des Humains, plus ou moins bien intentionnés mais des Humains quand même. « Mal nommer un objet, c’est ajouter au malheur de ce monde » disait Camus. Le pouvoir des mots est silencieux mais puissant. L’« IA », c’est froid et impersonnel, sorte de bouillie numérique protéiforme qui nomme tout et rien en même temps. Il s’agirait plutôt de parler des entreprises de l’IA, des codeurs de l’IA, des femmes et des hommes de l’IA. C’est à ces professionnels que nous confions, et que nous allons confier d’avantage encore nos données.

Commander en 1 clic ? C’est eux. Estimer un itinéraire ? C’est eux. Proposer la nouvelle série ? C’est eux. Allumer la lumière par la voix ? C’est eux. Piloter par la pensée ? C’est eux, et personne d’autre. Ne nous laissons pas endormir par un nouveau mot-valise qui pourrait rapidement perdre de sa saveur. Car une chose parait implacable : nous n’arrêterons pas la machine. Et… tout comme l’intelligence artificielle… c’est parfaitement humain.

17 ressources gratuites sur l’expérience utilisateur et le design d’interface !

So-youz, le Cabinet de conseil en transformation digitale du groupe Ai3 intervient parfois dans le domaine de l’UX et du design d’interfaces. L’idée est de faciliter la relation homme/machine grâce à une interface graphique adaptée, agréable et facile à utiliser. Il faut avant tout penser à l’utilisateur, à sa façon d’interagir, à sa façon d’être, à son niveau de maturité numérique … Etc. Si le sujet vous intéresse le blog de Paul Olyslager propose 17 e-books (en anglais) à télécharger gratuitement qui couvre complétement le sujet. Le tout regroupé dans un seul article. « Designing Interfaces – Patterns for Effective Interaction Design » (de Jenifer Tidwell) est tout à fait intéressant et illustre parfaitement notre quotidien graphique. D’autres titres son aussi essentiels et on ne maquera pas de les lire pour parfaire notre culture web et notre passion pour l’expérience utilisateur. Belle initiative qui ravira les designers qui par essence ou par passion sont fauchés (et qui malheureusement parle souvent mal l’anglais). Complétons nos bibliothèques virtuelles, avec ces précieux volumes. Bien sûr, on pourra également explorer le dit blog (celui de Paul Olyslager), moult sujets d’intérêts UX ET UI  y sont abordés avec âme et brio. Intéressant !