Le « Pixel Perfect » est un terme à la mode en ce moment, mais souvent incompris ou mal utilisé. Découvrez ici ce que représente cette notion.
Le but est de se concentrer sur les éléments propres, simples et utilisables, avant même d’aborder les détails du design.
Comme pour toutes les choses de la vie, quand une interface est bien réalisée, elle devient invisible pour vous, mais quand elle est mal conçue, cela devient très pénible, notamment au quotidien.
Je me base sur le livre de USTWO, le PPP : Pixel Perfect Precision (lien en bas d’article).
Définition
Deux définitions ou plutôt deux idées…
- Construire une interface web (ou d’application) parfaite, ajustée au pixel près, ajustée à la perfection.
- Concevoir des maquettes « propres » dans Photoshop, des maquettes qui sont parfaites visuellement (pas de pixels qui dépassent, de formes ratées…)
Pour simplifier la suite de l’article, je me baserais sur les deux notions en même temps.
D’après moi, une maquette doit être conçue en respectant chaque pixel, et la page web (ou l’application…) parfaitement stable visuellement. Cette méthode de travail permet de respecter la personne qui utilisera votre développement. Aucun débordement, pas de problèmes visuels… Une expérience utilisateur parfaite.
Historique
Le « Pixel Perfect » est apparu à partir du moment où le web a évolué, notamment avec le vectoriel, et donc le SVG (format vectoriel compatible web).
L’idée est de profiter des performances du web moderne, en proposant des interfaces qui soient parfaites, tout du moins visuellement.
L’exemple ci dessus illustre la différence entre un dessin propre (à gauche) et le même dessin, avec des formes qui « s’étalent ».
Principes
L’accessibilité
L’utilisateur est au cœur de l’application. Elle n’est pas développée pour l’équipe du projet, mais pour un ensemble de personnes de tous horizons. Le graphisme doit donc être prévu pour convenir à la majorité et cela passe par l’accessibilité (problématique d’accès aux contenus).
- A gauche, une interface avec beaucoup (trop) de liens, difficilement cliquables sur un écran tactile
- A droite, la même interface mais avec des boutons bien plus grands, cliquables facilement, ce qui améliore le confort d’utilisation et confère à l’utilisateur une sensation de maîtrise de l’outil.
La typographie
L’utilisation d’une application passe évidemment par la lecture du contenu. Il peut s’agir d’articles de blog, d’actualités…
- A gauche, le texte est tassé, petit, illisible donc. L’utilisateur ne prendra la peine que de lire les 3 ou 4 premières lignes.
- A droite, le paragraphe est aéré (hauteur de ligne), la police plus grande. L’utilisateur ne sera pas gêné dans sa lecture.
Les animations
Les animations permettent d’informer l’utilisateur des changements d’écran, mais doivent être explicites et logiques.
L’illustration ci-dessus montre les animations d’entrée et de sortie d’éléments de liste. Pour l’entrée, les items arrivent de la droite, et se fixent au centre de l’écran.
L’animation de sortie fait repartir les éléments dans le sens inverse, tout simplement.
De cette manière, l’utilisateur comprend le fonctionnement, il prend en main l’application.
Une animation n’est pas seulement utile pour une plus-value visuelle, c’est une aide à l’utilisateur.
Des formes propres
Avec Photoshop, tout est possible. Il est donc possible de faire des maquettes aussi belles qu’affreuses.
Les rectangles, les disques, cercles… ils entrent en compte pour la composition de toute maquette !
Cependant, il est possible d’avoir des résultats relativement mauvais :
- A gauche, les bords sont flous, ce qui est certainement dû à un agrandissement trop important
- A droite, la forme est vectorielle, les bords sont nets, propres. Ce détail est très important pour les formes qui ont des tailles qui peuvent être modifiées.
Il existe beaucoup d’autres principes, que je vous invite à découvrir dans le livre PPP disponible ici.
N’hésitez pas à réagir en commentant cet article, ou encore sur mon twitter.
Image de couverture par CreativeBloq