© Raphaël pour Le bloc-notes ; ergonomie & UX, 2011. | Permalink | Un commentaire |

Depuis une vingtaine d’années que les interfaces graphiques existent, non seulement leurs fonctionnalités se sont enrichies, mais leurs graphismes ont évolués en même temps que la puissance des machines.

L'interface de l'OS du LISA (Apple, 1983)

Les tendances

Deux OS (Operating system ou système d’exploitation en français) « majeurs » ont été mis sur le marché cette année : Mac os X et Windows Xp (Voir leurs guides de l’interface utilisateur). Il est intéressant de voir ce qui caractérise leurs looks et ce que cela peut apporter aux utilisateurs. En regardant ces OS on trouve quatre grandes tendances actuelles qui sont aussi présentes sur certains sites Web.

• La transparence
• Les rainures
• Les effets de reliefs complexes
• Les icônes réalistes

Raynure et transparence sous Mac OS X

Icônes réalistes sous Mac OS X

Effets de relief complexes sous XP

La transparence est initialement apparue avec l’iMac qui présentait une coque translucide, ce style, ainsi que les rainures, ont été repris dans l’interface Aqua de Mac OS X.

Les rainures se sont en suites répandues (avec différentes variantes) dans des logiciels comme la suite office pour Mac OS, ou des sites web comme celui d’IBM.

Des effets d’ombrage et de lumière sont venus compléter les effets de transparence afin de donner un aspect plus souple et plus rond aux boutons, fenêtres et aux différents éléments de l’interface. On est passé de la simple ligne claire en haut, ligne foncé en bas qui donnait une petite impression de volume, à un effet de reliefs complexes basé non seulement sur l’ombrage, mais aussi sur la « brillance » des objets.

Les icônes ont gagné en taille et donc réalisme. sur Mac OS X c’est flagrant, on ne peut plus vraiment parler d’icônes mais plus de photo pour certains éléments comme les disques durs. Sous XP, les icônes gagnent en détail et les effets sont plus travaillés.

Exemple d'icônes sous XP

Cette évolution a été permise par la montée en puissance des machines qui supportent ces interfaces. Il y a 5 ans les performances des PC ne permettait pas de tel raffinement aussi au niveau de la puissance qu’au niveau de la taille des écrans. On peut donc penser que dans les années avenirs ce souci du détail se renforcera.

La technique d’affichage a aussi changé, par exemple l’interface de Mac OS X est basée sur Quark : un module d’affichage vectoriel, ce qui permet plus de liberté, mais demande plus de ressources de la part de la machine.

Quels avantages pour l’utilisateur ?

Outre l’aspect esthétique, on peut se demander quels avantages l’utilisateur peut tirer de ces changements. Ces avantages ne sont pas évidents, mais par exemple la taille des icônes leur permet d’être plus explicites, ou plus lisible. On voit aussi que certaines animations peuvent faciliter la compréhension, ou inciter l’utilisateur à faire des actions (exemple : les boutons qui « pulsent » sur Mac OS X). Mais fondamentalement c’est toujours les mêmes principes de « sélection – action » qui sont a la base de l’interaction. Je dirai donc que les avancées sont plus en termes de confort qu’en termes d’une augmentation de l’utilisabilité.

A l’avenir…

A l’avenir, les interfaces vont continuer à évoluer vers un graphisme plus fouillé, avec par exemple des textures plus complexes comme le « métal brossé » que l’on voit déjà apparaître sur certaines applications. La technique va aussi évoluer vers des interfaces basées sur des vecteurs et non plus sur des bitmaps, ce qui permettra plus de souplesses mais nécessitera aussi plus de puissance de la part des machines. Enfin les effets et les animations calculées en temps réel vont se multiplier pour donner un aspect plus vivant et dynamique à l’interface.

© Raphaël pour Le bloc-notes ; ergonomie & UX, 2010. | Permalink | Pas de commentaire |

Depuis quelque temps on voit fleurir des écrans, sur les téléphones, les smartphones, les ordinateurs portables ou encore sur les tablettes PC, avec des résolutions toujours plus importantes. Alors quand est-il de la lisibilité et de la fatigue visuelle sur ces écrans ?

Définition, résolution et lisibilité.

Pour commencer, précisons deux termes, qui ne sont pas synonymes, et qu’il ne faut pas confondre : la définition, et la résolution.

Définition : nombre de points ou de lignes affichées. Le Robert donne l’exemple suivant : « La télévision couleur classique a une définition de 625 lignes en Europe.  »
Résolution : c’est la finesse du point d’affichage moyen à l’écran, elle se mesure classiquement en dpi ou ppp (points par pouce : un pouce = 25,4 mm). Exemple : une imprimante Laser à 300 dpi ou 600 dpi, un écran à 72 dpi (en théorie).

Rappelons aussi la norme ISO 9241 qui précise que : « l’angle de vue doit être situé au minimum entre 0°16’et 0°22’ soit 3 et 4 millimètres à 60 cm de l’écran pour une lettre capitale* »

A partir de là, calculons sa résolution maximum et minimum : Si on prend une fonte qui fait 12 pixels** de haut, il faut que sa hauteur minimum soit de 3 mm et maximum de 4 mm donc 4 à 3 pixels par mm soit 101,6 à 76,2 ppp. Donc une résolution maximale de l’ordre de 100 ppp.

La formule en clair : résolution (en ppp) = taille (en pixel)/hauteur (en mm) x 25,4 (conversion en pouce)

Dans la réalité.

Ceci posé, abordons le problème avec un petit comparatif :

• Un ordinateur portable DELL 15,4″.
• Un Macbook pro 17″ Apple.
• Un écran Iiyama 22″.
• Un smartphone HD2 par HTC.
• Un iPad d’Apple.

(...)
Lire la suite de "La guerre des ppp ou le casse tête de la résolution." (718 mots)

© Raphaël pour Le bloc-notes ; ergonomie & UX, 2010. | Permalink | 3 commentaires |

Pour rappel en 1999 :

iBook de 1999

• Le web se démocratise depuis 3 ou 4 ans.
• Le bas-débit est la norme.
• Les pages web doivent être conçues pour des écrans en 640×480 pixels.
• Netscape 4 et IE sont les navigateurs les plus répandu.
• Apple a sorti ses premiers iMacs en 1998 et ses iBooks en 1999, mais l’iPod n’existe pas ! (Oui, il y a eu aussi une époque le Frigo n’existait pas.)

Casser ou ralentir le bouton « page précédente ».

Contexte : Cette pratique consiste à désactiver plus ou moins la fonctions « page précédente » dans certains cas comme les pages de formulaires ou les services web. Les services web nécessitaient souvent de recharger entièrement la page depuis le serveur pour mettre à jour les données. L’utilisation du bouton « page précédente » pouvait crée des incohérences et donc les developpeurs étaient tenté de le désactiver.

Aujourd’hui : Des technologies comme l’AJAX permettent de répondre aux besoins de mettre à jour qu’une partie du contenu. De plus les techniques pour casser le bouton « page précédente » étaient peu fiable suivant les navigateurs et ont donc été abandonnées. Par contre les sites en « Full Flash » ne prennent toujours pas en considération l’environnement qu’est le navigateur.

Ouvrir une nouvelle fenêtre du navigateur.

Contexte : Cette pratique consiste à ouvrir une nouvelle fenêtre à chaque fois l’utilisateur clique sur un lien hypertexte pour ne pas le « perdre » ou au chargement de la page pour afficher de la publicité.

Aujourd’hui : L’ouverture automatique est bloquée par la majorité des navigateurs.La pratique la plus courante actuellement est la suivante, soit le lien est interne au site et il s’ouvre dans la fenêtre en cours, soit il est externe et s’ouvre dans une nouvelle fenêtre. Dans ce cas, on casse l’historique et la fonction « page précédente ». Une pratique élégante est de distinguer les hyperliens internes de ceux externes par un petit pictogramme à la suite du lien (dans la CSS). L’utilisateur peut alors choisir d’ouvrir ou non une fenêtre ou un onglet.

Utilisation non-standard des éléments d’interface utilisateur.

Contexte : Par exemple, la règle, pour un bouton radio, est qu’il permet de sélectionner un élément au moins et un seul dans un groupe. Mais le choix n’est validé que quand l’utilisateur clique sur le bouton OK. Malheureusement, on voit des sites ou les boutons radio sont utilisés comme des boutons et où le résultat est affiché dès que l’utilisateur à cliquer sur un des boutons.

Aujourd’hui : Le niveau global de l’ergonomie des sites web c’est nettement amélioré. De telle fautes de conceptions sont rédhibitoires. Les normes d’accessibilités ont aussi imposés des standards de conception.

Absence de biographies.

Contexte : « Les utilisateurs cherchent à connaître la personne qui est derrière l’information présentée sur le web. »

Aujourd’hui : La question de la validité de l’information trouvée sur le web est toujours d’actualité, car il est toujours plus facile de publier notamment avec les plateformes de blogs. Par contre, les juges sont passés par là ! Si vous publiez un site sur internet, en France, vous devez obligatoirement préciser qui est le directeur de publication et comment le joindre.

Absence d’archives.

Contexte : « Une veille information est souvent une bonne information et peut être utile au lecteur. » Mais en 1999, beaucoup de sites sont encore simplement une suite de pages HTML. Il est alors difficile de maintenir correctement tous les liens.

Aujourd’hui : L’utilisation de base de données pour la gestion des contenus c’est généralisée depuis 1999. L’apparition des blogs et des CMS (Content Manager System, Système de gestion de contenu comme WordPress que j’utilise ici) ont permis de faciliter la gestion des archives.

Changer l’adresse URL des pages.

Contexte : Comme précédemment les sites sont encore pour beaucoup une suite de pages HTML. Si l’organisation du site n’a pas été optimisé dés le départ, le Webmaster (A l’époque Maître tout puissant du site web !) peut être tenté de déplacer des pages et donc de changer leur URL.

Aujourd’hui : L’utilisation de bases de données à permis de remédier au problème d’organisation des contenus. Les CMS proposent des liens permanents vers les pages. Vous pouvez donc changer beaucoup de choses dans un site sans changer les URL.

Les gros titres qui n’ont pas de sens en dehors du contexte.

Contexte : Les titres sont des éléments qui sont utilisés pour la navigation, les tables des matières et les moteurs de recherche.

Aujourd’hui : La nécessité d’écrire spécifiquement pour le web n’est pas encore entré totalement dans les habitudes. L’utilisation d’un style littéraire ou scolaire reste bien ancré. Une certaine sélection naturelle est faite par le référencement des moteurs de recherche.

Utiliser le dernier gadget Internet.

Contexte : Utiliser divers gadget « Push, communauté, chat, email gratuit, enchère,… »

Aujourd’hui : Les gadgets ont changés, mais ils sont toujours là !  Par contre, certaines choses jugées comme gadgets il y a 4 ou 5 ans sont devenus de vrais outils de communication ou de travail, notamment les communautés et  les blogs.

Temps de réponse des serveurs trop long.

Contexte : Avec une connexion bas débit (3 ou 4 ko/s au mieux) le temps de chargement d’une page peut rapidement exploser et atteindre la minute.

Aujourd’hui : Les connexions haut débit sont devenus la norme, mais maintenant l’internet mobile arrive avec suivant la qualité de réception des débits pouvant être très faibles. Du coté des sites web, le poids des pages a considérablement augmentés, mais la séparation du contenu (dans le HTML) et la forme (dans les CSS), l’utilisation de l’AJAX tendent à réduire le volume global à télécharger.

N’importe quoi qui ressemble à de la publicité.

Contexte : En 1999, la bulle Internet n’est encore qu’un vague remous. Le moteur de recherche le plus utilisé est Altavista. L’aspect commercial n’existe pas ou peu… La publicité n’est absolument pas mature et utilise tout les moyens racoleurs possibles (bannière clignotante, fenêtre pop-up, Flash à gogo,…).

Aujourd’hui : L’internaute a évolué dans son rapport à la publicité sur Internet. Celle-ci a aussi évolué et sait se faire plus précise, plus discrète, plus efficace. Mais il y a toujours des publicitaires qui sont restés à l’âge de pierre, avec publicités intrusives qui couvrent tous ou une partie de l’écran. A la place de la fenêtre pop-up, on a le calque pop-up ! Mais l’internaute a les même réactions : ignorer le contenu et fermer les calques (ou le site !).

En conclusion.

Les avancées techniques ont permis de répondre à certaines problématiques liées à la gestion et la conception des sites. Le niveau global de l’ergonomie des sites c’est nettement amélioré depuis 1999. Il reste des pratiques qui n’ont pas évolués mais qui tendent à disparaitre « naturellement ».

© Raphaël pour Le bloc-notes ; ergonomie & UX, 2009. | Permalink | 2 commentaires |