16 Couleurs

16 Couleurs – graphisme & jeu vidéo


Poster un commentaire

Comment identifier une fonte ?

Le supplice des 10 000 fontes

Il arrive parfois de se trouver en présence d’un document avec une typographie intéressante mais sans aucune indication de son origine. Que faire ?

La première option, l’attaque par force brute, consiste à consulter page après page de fontes de qualité variable sur dafont.com dans l’espoir un peu fou de trouver l’aiguille dans la botte de foin. C’est assez lent et le résultat le plus probable se limitera à une sérieuse fatigue occulaire (mais peut-être aussi la découverte de quelques polices sympas n’ayant généralement rien à voir avec celle recherchée).

Une autre solution consiste à avoir recours à WhatTheFont, l’outil de reconnaissance de police de caractère de MyFonts.com.

Après avoir fourni l’image en question à WhatTheFont, l’algorithme demande de confirmer la nature de chaque lettre, ce qui est important pour les typographies un peu originales pour lesquelles la reconnaissance de caractères est parfois un peu à la peine. Un choix de plusieurs fontes proches de l’originale est ensuite proposé, parmi lesquelles se trouvera rarement la fonte exacte, mais généralement quelque chose de suffisamment proche.

Visiter WhatTheFont sur MyFonts


Poster un commentaire

Les origines de l’interface utilisateur moderne : le Xerox Star

Le Xerox Star, conçu au centre de recherche Xerox de Palo Alto et disponible à partir de 1981, est considéré comme le premier micro-ordinateur commercialisé proposant une interface utilisateur moderne. Il emprunte de nombreux concepts au projet Xerox Alto commencé dès 1973 mais qui ne débouchera jamais sur un produit proposé à la vente.

 

Le Xerox Star utilisé par un sosie de Bernard Menez (source image : Digibarn.com)

Le Star fête donc ses 30 ans cette année et il est assez intéressant de constater que les paradigmes de l’interface utilisateur posés par les équipes de Xerox sont restés peu ou prou les mêmes jusqu’à aujourd’hui :

  • Un bureau sur lequel sont placées des icônes qui représentent des programmes, fichiers ou répertoires
  • Des programmes qui s’ouvrent dans leur propre fenêtre au dessus du bureau
  • Des fenêtres qui peuvent être redimensionnées dynamiquement et qui peuvent se chevaucherUn pointage et une sélection des éléments de l’interface réalisées avec une souris
  • Le support du WYSIWYG (What You See Is What You Get) qui permet en théorie une correspondance parfaite entre l’affichage à l’écran et le document imprimé.

Un article de 1989 écrit par une partie des concepteurs du Xerox Star présente certains des concepts qui guidèrent sa mise au point. Sa lecture est intéressante parce que ceux-ci sont toujours applicables aux interfaces utilisateur actuelles, y compris pour les jeux vidéo :

  • Progressive Disclosure (dévoilement progressif des informations) : plutôt que de noyer l’utilisateur sous un déluge de détails dont il n’a probablement pas besoin, mieux vaut lui présenter uniquement l’information de base et afficher le reste s’il en fait expressément la demande ou dans les situations où cela est nécessaire. Ceci a l’avantage de rendre l’interface à la fois facile à comprendre et élégante visuellement. Par exemple, inutile de présenter à l’utilisateur d’un logiciel de dessin les options du crayon lorsqu’il utilise le pot de peinture.
  • Consistent and appropriate graphic vocabulary (charte graphique cohérente et appropriée) : la charte graphique de l’interface doit définir un vocabulaire unifié pour communiquer avec l’utilisateur. Par exemple une fenêtre doit toujours être organisée de la même facon et toutes les icônes doivent avoir un style proche et se comporter de manière identique.
  • The illusion of manipulable objects (éléments manipulables clairement indiqués) : si l’interface offre à l’utilisateur la possibilité d’interagir avec certains éléments (presser un bouton, sélectionner une icône, redimensionner une fenêtre, etc.), elle doit communiquer clairement quels éléments sont concernés, l’état de ces éléments et la manière d’interagir avec ces éléments. On pense à la présence sur les fenêtres du Star d’une série de boutons standards et clairement étiquetés qui permettent de les fermer, de les redimensionner ou de faire défiler leur contenu.
  • Visual order and user focus (Hiérarchie visuelle et attention de l’utilisateur) : les variations de luminosité et de contraste des éléments de l’interface permettent de guider l’utilisateur dans ses démarches et d’attirer son attention sur les informations importantes. Ceci permet d’éviter le phénomène de « bruit » visuel lorsque les différentes informations ne sont pas hiérarchisées visuellement. Sur le Xerox Star, la couleur noire est réservée aux sélections, ce qui permet à celles-ci d’être beaucoup plus visibles que si le noir avait également été utilisé pour les en-têtes des fenêtres, par exemple.
  • Match the medium (prise en compte des contraintes techniques) : plutôt que de voir les contraintes techniques comme une entorse à la créativité, il vaut mieux les considérer comme un challenge et tâcher de les utiliser de manière optimale avec comme principal objectif la clarté de la communication avec l’utilisateur. Le style de l’interface du Xerox Star a été conçu en fonction de son affichage monochrome haute résolution ; les solutions retenues auraient été totalement différentes avec un autre type d’affichage. J’apprécie aussi le soin apporté à la conception graphique : la charte graphique explique comment placer les icônes vis à vis de la trame de fond pour éviter que les deux se mélangent.

Extrait de la charte graphique de l'interface du Xerox Star (source image : Digibarn.com)

Les résultats commerciaux du Xerox Star seront décevants, probablement à cause de son prix élevé (l’écran monochrome 1024×809 pixels de 17 pouces y étant probablement pour quelque chose !) et de la concurrence du Macintosh et des PC IBM quelques années après son lancement. Toutefois son impact sur l’aspect des interfaces utilisateur a été énorme, puisque toutes celles sorties par la suite s’en inspireront directement.

 

The Xerox « Star »: A Retrospective

Images en haute résolution

 


Poster un commentaire

Barre de chargement et illusion d’optique

Le New Scientist propose une petite vidéo qui suggère qu’ajouter des effets à une barre de chargement, telles que des bandes se déplaçant de droite à gauche, peut donner l’impression à un utilisateur qu’un téléchargement dure moins longtemps (jusqu’à 11% de gain !).

Ce genre de détail n’est pas à sous-estimer pour les titres free-to-play pour lesquels il est vérifié que chaque seconde de chargement supplémentaire se traduit par la perte de certains des joueurs potentiels les plus impatients. On peut donc supposer qu’un écran de chargement optimisé et peaufiné permettra de grapiller quelques points de rétention des utilisateurs et d’avoir un impact mesurable sur la rentabilité du titre.

La vidéo est visible sur le site du New Scientist: The progress bar illusion