Nous sommes des designers. Enfin, nous essayons de notre mieux de l’être, honnêtement. Toujours avec la même question présente à l’esprit : « Si j’étais le client, avec ses enjeux, ses contraintes, ses envies et son budget, qu’est-ce que j’aimerais voir, quelle est l’image mentale que je me fais de la représentation des valeurs de ma compagnie, à travers le prisme pour le moins antidogmatique de la représentation infographique ? » Tout ceci se traduit par une pléthore de métaphores techniques, comme l’expérience utilisateur,  l’utilisabilité de l’interface, la conception centrée utilisateurs, etc.
Toutefois, tout ceci reste assez vague et ne représente en aucun cas un absolu à atteindre, mais plutôt un prérequis, alors que nous parlons ici de matière purement artistique. Le but de cet article est de vous présenter un ensemble de lois, 10 au total, qui sont autant de jalons pour la création de designs efficaces, pour le moins. Le plus étant que le respect de ces règles vous permettront de briller en société, mais aussi de valoriser, voire de justifier certains choix potentiellement délicats ou tendancieux.

 

 

1 – La loi de Hick


La loi de Hick prétend que plus l’on donne de potentiel de choix à un utilisateur, plus la réponse de celui-ci sera longue et différée. Autrement dit, ajoutez vingt options sur votre interface et vous risquez de perdre votre audience, voire de ne plus jamais la revoir, dans le cas d’un site web.

Dans les faits, avez-vous utilisé un configurateur automobile sur un site d’un grand constructeur récemment ? Si oui, votre session a sans doute dépassé les vingt minutes, et au final, vous n’avez pas commandé. Le nombre d’option est tout bonnement hallucinant et cumulatif (modèle-motorisation-version-…).
Plus on a le choix, moins on l’emploie.
La solution à cette problématique est donc de restreindre le nombre de choix et d’options au minimum acceptable, celui-ci étant caractérisé par la bonne acceptation de la navigation et du respect de l’émotionnel de l’utilisateur (j’ai le choix, je suis reconnu comme une personne unique et singulière).
Attention donc aux menus à rallonge, aux liens croisés, aux pages inutiles, aux boutons redondants et non-pertinents.

 

2- Le principe de Pareto


Autrement appelé la règle des 80/20. Cette loi stipule que 80% des utilisateurs n’utilisent que 20% de de ce que vous mettez à leur disposition. Regardez les statistiques des sites, elles sont éloquentes. Un utilisateur va visiter une, deux, voire trois pages d’un site donné. Il cherche une info, y accède et s’en va. Et globalement, s’il va chez Nescafé, c’est pour trouver du café.
Pour répondre à cette problématique, prenez le temps de faire des tests en situation et de bien étudier les analyses de trafic ou d’audience de vos projets. Ces données vous permettront de mieux cerner votre public et de lui offrir les pages qu’il désire réellement voir, pas celles qui vous semblent intéressantes. Souvent, cela permettra de dégager également un principe de navigation intéressant et vous donnera l’occasion de respecter la loi n°1.

 


 
3 – La règle des trois tiers.


Cette loi  est issue du monde de la photographie et largement enseignée en école d’Art, spécifiquement en cours de composition. On parle ici de composer votre visuel en trois parties distinctes, en verticales comme en horizontales. Cela permet à l’utilisateur de se concentrer sur les intersections de la grille de morpion ainsi créée. Le regard est guidé par ces lignes de force et sa lecture en est plus rapide, plus fluide, en un mot plus efficace.
On veillera alors à se méfier du ventre mou  de l’application, loin des lignes de force. On y placera cependant l’information de second plan.
Par contre on pourra poser les composantes principales du design dans le premier  ou le second tiers  de l’espace de composition afin d’être plus percutant.
Et bien sûr, il est impératif de ne pas donner dans le bloc uniforme.


 
4 – Le feedback.


Dans la nature, toute action entraine une réaction. Si rien ne se passe, c’est que rien ne fonctionne. Quand j’appuie sur le bouton de fermeture centralisée de mon automobile, la voiture me répond en clignotant deux fois et diffuse un son bien étudié de verrouillage. Elle m’indique qu’il s’est passé quelque chose.
Le web est coutumier du fait : je veux parler bien sûr du lien hypertexte qui prend des couleurs différentes selon l’action que j’effectue ou que j’ai effectué précédemment. Ceci est applicable partout où l’action de l’utilisateur est requise : pensez à l’informer qu’il a fait une action en le récompensant d’une jolie animation, d’un son… Dans un souci du respect de l’humanité qui sommeille en vous, pensez aussi aux malvoyants et aux malentendants.
Attention également aux interfaces tactiles qui sont peu prolixes en termes de roll-over. Ceci est une embuche majeure. Pour ces mêmes surfaces, pensez également que le doigt est sur votre interface au moment de l’action et masque une bonne partie du contrôle sur lequel repose l’action de l’utilisateur.

 

 

5 – La loi de la proximité.


Celle-ci peut apparaître comme évidente, mais bien souvent, elle est mal ou peu utilisée. Le designer-artiste en chacun de nous veut tout d’abord satisfaire le beau avant de réjouir le bien. Et on se retrouve avec des contrôles  placés dans des « vide-poches » graphiques. Grave erreur.
Cette loi exprime le fait que deux items graphiques posés  à proximité induisent une notion de relation. Si je crée une zone contenant un bouton « Validation » et un bouton « Annulation », je m’attends à ce que ces deux options soient affectées au même processus.
Par ailleurs, les éléments, contrôles, items graphiques ont besoin de place pour exister. La recherche (dropdown list), ce n’est pas le choix (checkbox, radiobutton), ni sémantiquement, ni fonctionnellement. Pas plus que « Continuer » et « Annuler ». Le web regorge de sites où tous les « contrôles » sont placés au même endroit, parfois sans souci de cohésion. Des contrôles mal placés, ou posés trop proches les uns des autres augmentent le risque d’erreurs et de « faux contacts » (je clique sur un bouton, mais c’est l’autre qui s’active), à plus forte raison sur surface tactile.
Laissez respirer les éléments, grouper les choses rationnellement et testez, testez et testez encore.

 

 

6- La loi  de Fitts.


Un peu d’animation ! La loi de Fitts veut que le temps de déplacement vers un élément soit fonction  de la taille et de la distance de cet élément. Exprimé différemment, plus votre élément est large et proche, plus rapide sera la réaction de l’utilisateur. Surtout en fonction de critères tels que l’âge, la culture, … de la personne qui se sert de votre application.
Cela peut également servir à comprendre cette notion : un bouton n’est pas le clic. Rien n’oblige en effet à ce que la zone cliquable de votre bouton soit strictement limitée à la représentation graphique de ce dernier.  Vous pouvez faire déborder la zone d’action du bouton afin de fluidifier  son utilisation. D’autant plus que vous multiplierez les boutons dans votre design.
A moins que vous ne souhaitiez l’inverse, c’est-à-dire rendre difficile l’accès à une action, afin de focaliser l’attention dessus, comme sur une annulation, ou sur une action pouvant entrainer des conséquences néfastes.

 

 

7- Le rasoir Ockham


Enoncée par le moine franciscain Guillaume d’Ockham en ces termes : « Entia non sunt multiplicanda praeter necessitatem”. Littéralement, cela veut dire : « Les entités ne doivent pas être reproduites plus que nécessaire ». En d’autres termes, cette sentence fait l’apologie de la simplicité et de la parcimonie. De toute façon, en accord avec la loi numéro 1, la complexité augmente le temps de réaction. Donc, restez simple dans votre approche. Et surtout, n’ajoutez pas de complexité à un postulat de base simple.
Pour rester dans les rails de cette loi, il faut savoir aussi se poser les bonnes questions : Lors du design de l’application, vous commencerez sans doute par un brainstorming qui fera émerger trop d’idées.  Demandez-vous alors en quoi votre appli est différente et supprimez le reste. Demandez-vous ensuite quelle est votre plus-value et supprimez ce qui n’en apporte pas. Ces deux opérations devraient avoir réduit votre brainstorming de 80%. Enfin, retenez ce que vous tenez comme faisant partie de votre savoir-faire. Une fois atteint ce stade n’ajoutez plus de complexité.

 

8- La suite Fibonacci


Un peu de mathématiques : Au XIIIème siècle, Leonardo Pisano a mis en lumière une suite mathématique dont chaque nombre est la somme des deux précédents. Par exemple :
1, 1, 2, 3, 5, 8, 13, 21,…
Cette suite est souvent utilisée conjointement avec le nombre d’Or (voir plus bas) et permet d’élaborer des structures, des hiérarchies et des ensembles de contrôles. On peut en déduire une arborescence de site web, par exemple :
Une page Hub> Deux pages famille> trois pages produits> cinq pages de descriptif…
On peut également en déduire un principe de zonage, issu du tracé de la spirale de Fibonacci.

 

 

9- les schémas mentaux


Si vous pouvez en faire un modèle mental, vous pouvez comprendre cette interface. Voici le credo de cette loi. En effet, combien de sites disposent d’une page dédiée de type « SiteMap » ? N’est-ce pas là l’aveu d’impuissance du designer (si tant qu’il y ait quelqu’un à ce poste au bout du fil ?) face à la complexité du modèle qu’il utilise ? Une interface  ne devrait-elle pas être intuitive et spontanée ? Dans cette optique, il est souvent plus simple de s’ancrer dans l’inconscient collectif et de proposer des interfaces dont le mécanisme mental est souvent acté pour sa performance et son intuitivité (interface en niveau hiérarchique, notamment).
Lors de la phase de construction de votre application, tâchez de modéliser avec précision ce que l’on veut obtenir et construisez votre interface autours de cette idée. Si la complexité devient trop grande, ajoutez un ou plusieurs niveaux hiérarchiques qui soient rationnels et cohérents avec le schéma de pensée qui mène à vos cibles.
Attention là encore à votre cible. Les schémas mentaux sont très différents entre un enfant de 7 ans et un adulte de 60 ans.

 

 

10- Le nombre d’or (fameux, célèbre, souvent mal compris)


Qui n’a pas entendu parler de ce fameux nombre d’or, oscillant à la pointe de la foi mystique, de la magie mathématique et du fantasme fumeux des chercheurs d’or de l’Arizona artistique ?
Il faut admettre que mathématiquement parlant, ce nombre est parfait : c’est le seul irrationnel positif de l’équation x²=x+1. En nombre réel, on approche le plus précisément le nombre d’or par cette fraction stupéfiante:
 
Mais je connais peu de designers versés dans l’Art du Chiffre. Donc, regardons de manière plus artistique ce fameux nombre. Le nombre d’or est obtenu quand le rapport d’un élément d’une œuvre par rapport à un autre élément vaut 0,618. Par exemple, le rapport idéal de 1024 est 632.  Et ce ratio prévaut aussi pour les triangles, les cercles et, de manière générale, toutes les formes géométriques.
Bien sûr, on pourra trouver assez facilement dans l’Histoire de l’Art tout un ensemble  d’œuvres inspirées ou basées sur le nombre d’Or (notamment le Parthénon grec, les pyramides égyptiennes, ou certaines œuvres de Picasso.
Bien sûr, il faut savoir s’inspirer de la règle sans vouloir à tout prix la copier. Le nombre d’Or est comme une grille de base propre et nette. C’est un élément sur lequel on peut baser sa composition, qui apportera un réel équilibre, mais qui ne doit pas entraver votre créativité, ni entrer en conflit avec les règles précédentes.

 


Conclusion


Voilà l’ensemble de ces règles. Ceci, encore une fois, n’est en aucun cas un manuel, mais permet d’expliciter certains choix et certains partis-pris. C’est aussi un guide vous permettant de créer vos propres frameworks et de les mutualiser. Ensuite, le designer-graphiste aura certainement à cœur de déroger à certaines règles, puisque créer, c’est toujours inventer,  en dehors des chemins tracés précédemment.