Traduction : Les Principes du Design d'Interfaces Utilisateur

Pour notre première traduction d'article anglophone, nous avons choisit "Principles of User Interface Design" par Joshua Porter.

"Le design est bien plus que simplement assembler, ordonner ou modifier. C'est ajouter de la valeur, éclairer, simplifier, clarifier, changer, justifier, démontrer, persuader, et peut-être même divertir." - Paul Rand

01. Les interfaces existent pour permettre l'interaction

Les interfaces ont pour but de permettre l'interaction entre les humains et notre monde. Elles aident à clarifier, éclairer, rendre possible, montrer les relations, s'adresser à tout le monde, interpeller chacun d'entre nous, gérer nos attentes et nous donner accés à des services. Créer des interfaces n'est pas un art, ce ne sont pas des monuments par essence. Les interfaces font un travail et leur efficacité peut être mesurée. Ce ne sont cependant pas juste des outils; les meilleures interfaces peuvent inspirer, évoquer, mystifier et intensifier notre relation au monde.

02. La clareté est l'objectif numéro 1

Clarifier est primordial. C'est le travail le plus important lors de la conception d'une interface. Pour utiliser votre interface efficacement, les gens doivent être capables de reconnaître ce qu'elle est, savoir pourquoi ils devraient l'utiliser, comprendre en quoi l'interface les aide à interagir, être en mesure de prédire ce qui arrivera lorsqu'ils l'utiliseront et ensuite, interagir facilement avec. Bien qu'une interface pusse faire planer le mystère, retarder un peu la satisfaction d'une demande, il n'y a pas de place pour la confusion. La clareté inspire confiance et mène à une utilisation plus poussée.

03. Monopoliser l'attention à tout prix

Nous sommes sans arrêt sollicités par notre environnement. Il est de plus en plus difficile de se concentrer sans être distrait, sans que notre attention se porte sur autre chose. L'attention est précieuse. Ne polluez pas vos applications avec des éléments perturbateurs. Souvenez-vous de la raison pour laquelle les écrans existent. Si quelqu'un est entrain de lire, laissez le finir sa lecture avant de lui montrer cette publicité (si vous le devez vraiment). Honorez l'attention qui vous est accordée et, non seulement vos usagers seront contents, mais vos résultats seront meilleurs. Si votre objectif principal est que l'on utilise votre application, l'attention devient un prérequis. Conservez là coûte que coûte.

04. Laissez le contrôle à l'utilisateur

Les humains ont un plus grand sentiment de confort lorsqu'il sont en capacité de contrôler leurs actes et leur environnement. Les logiciels mal conçus cassent ce confort en contraingnant les gens avec des interaction insoupçonnées, des scénarios improbables et des réactions inattendues. Garder l'utilisateur aux commandes en l'avisant régulièrement de l'état du système, en expliquant les conséquences (si vous faîtes cela, il se passera ceci) et en donnant des éclairages sur ce que vous souhaitez présenter à chaque fois. Ne craignez pas d'affirmer des évidences... Ce qui paraît évident, ne l'est que rarement pour tous.

05. La manipulation directe est ce qu'il y a de mieux

Les meilleures interfaces sont celles dont on se passe, on est capable de manipuler directement les objets physiques qui nous entourent. Cela n'est cependant pas toujours possible et les objets sont de plus en plus informationnels, nous créons des interfaces pour aider les gens à interagir avec eux. C'est simple d'ajouter plus d'artifices que nécessaire à une interface, en créant des boutons trop travaillés, des graphiques, des options, des préférences, des fenêtres, des accessoires et autres orborescences. Cela finit par nous faire manipuler des éléments d'interface utilisateur plutôt que ce qui est important.

Au contraire, efforçons nous de nous rapprocher de ce but ultime qu'est la manipulation directe des objets. Créons des interfaces avec la plus faible empreinte possible, se rapprochant le plus possible du geste originel. Idéalement, l'interface est tellement imperceptible que l'utilisateur a le sentiment de manipuler directement les objets sur lesquels il porte son attention.

06. Une action principale par écran

Tous les écrans que nous créons ne devraient comporter qu'une seule action qui soit vraiment importante pour la personne qui l'utilise. Cela le rend plus simple à comprendre, plus simple à utiliser et plus facile à améliorer ou à refondre lorsque nécessaire. Les écrans qui proposent deux actions principales ou plus deviennent rapidement confus.Tout comme un article ne devrait avoir qu'un seul sujet important, tous les écrans que nous créons devraient avoir une unique et forte action qui soit sa seule raison d'être,

07. Les actions secondaire doivent le rester

Les écrans avec une seule action principale peuvent avoir d'autres utilités secondaires, mais il faut veiller à ce qu'elles le restent. La raison pour laquelle votre article existe n'est pas qu'il soit partagé sur Twitter... il existe pour que les gens le lisent et le compennent. Garder les actions secondaires au second plan en leur donnant un poids plus faible ou en les laissant apparaître lorsque l'action principale a été effectuée.

08. Proposez toujours une étape suivante

Beaucoup d'interactions sont pensées pour être la dernière, proposez une étape suivante pour chaque interaction qu'une personne a avec l'interface. Anticipez ce que pourrait être la prochaine interaction et concevez votre interface pour permettre d'y accéder. Comme nous l'apprecions dans les conversations humaines, prévoyez une ouverture invitant à une interaction plus poussée. Ne laissez pas les gens en attente parcequ'ils ont fait ce que vous vouliez. Donnez leur une nouvelle étape naturelle pour les aider à atteindre leurs buts.

09. L'apparence découle du comportement (aka le fond détermine la forme)

Les humains se sentent à l'aise avec les choses qui se comportent comme on s'y attend. Les autres gens, les animaux, les objets ou les logiciels. Quand quelqu'un ou quelquechose se révèle conforme à nos attentes, on se sent en harmonie avec. A cette fin, les éléments d'un design devraient inspirer le comportement qu'ils auront. En pratique, cela signifie que quelqu'un devrait être capable de prédire comment une interface va réagir simplement en la regardant. Si ça ressemble à un bouton, ça devrait agir comme un bouton. Ne cherchez pas à innover pour les interactions basiques, exprimez votre créativité à un niveau supérieur.

10. L'uniformisation est importante

En conséquence des principes précédents, tous les éléments d'une interface n'ont pas à être homogènes tant que les éléments qui se comportent de la même manière le sont. Les éléments qui ont la même fonction doivent avoir le même aspect. Mais c'est aussi important que les éléments qui n'ont pas les mêmes fonctions ne se ressemblent pas. C'est une erreur commune à de nombreux designers débutants de réutiliser la même apparence (souvent pour réutiliser du code) quand un apparence différente serait appropriée.

11. Une hierarchie visuelle forte fonctionne mieux

Une hierarchie visuelle est fortement marquée quand il y a une vision très claire de l'ordre des éléments de l'interface. Cela arrive lorsque l'utilisateur voit les mêmes éléments dans le même ordre à chaque fois. Une hiérarchie visuelle insuffisante donne peu d'indices sur l'endroit où le regard doit se poser et finit par donner un sentiment de surcharge et de confusion. Dans les environnements très changeants, il est difficile de maintenir une hiérarchie visuelle forte car le poids visuel est relatif : quand tout le texte est en gras, rien n'est en gras. Si un seul élément visuellement fort devait être ajouté à l'écran, le designer pourrait avoir besoin de réétudier le poids visuel de chaque éléments pour aboutir à nouveau à une hierarchie visuelle forte. La plupart des gens ne se rendent pas compte qu'il existe une hiérarchie visuel et pourtant, c'est l'une des façon les plus simples de consolider un design (ou de l'ébranler).

12. Une organisation intelligente réduit l'effort cognitif

Comme le dit John Maeda dans son livre "Simplicity", l'organisation intelligente des éléments peut donner à beaucoup d'éléments l'apparence de que quelques-uns. En illustrant la relation inhérente entre les contenus de votre design, vous aidez les gens à comprendre votre interface plus facilement et plus rapidement. Regroupez les éléments similaires, montrer leurs interelations naturelles par leur position et leur orientation.

En organisant intelligemment votre contenu, vous diminuez l'effort cognitif nécessaire à sa compréhension pour l'utilisateur. Ce dernier n'a pas à réfléchir sur les relations existant entre les éléments car vous l'avez fait pour lui. Ne forcez pas l'utilisateur à se questionner sur les éléments de votre interface, montrez lui leurs relations par le design.

13. Les couleurs accentuent, mais ne sont pas déterminantes

Les couleurs des objets physiques changent avec l'éclairage. À la lumière du jour, un arbre nous apparaît totalement différent que lorsqu'il est souligné par un couché de soleil. Comme dans le monde réèl où les couleurs sont d'apparence plurielle, les couleurs ne devraient pas être déterminantes pour une interface. Elles peuvent aider, être utilisée pour enlluminer, pour guider l'attention mais ne devraient pas être la seule différentiation visible. Pour les longues lectures ou les écrans longuement consultés, utilisez une lumière ou des couleurs de fond atténuées préservant ainsi les teintes éclatantes pour accentuer les éléments important. Bien-sûr, il y a de la place pour les designs hauts en couleurs, essayez juste de déterminer si elles sont appriopriées à votre audience.

14. Révélation progressive

Ne montrez que ce qui est nécessaire sur chaque écran. Si les utilisateurs doivent faire un choix, montrez leur suffisamment d'informations pour leur permettre de le faire en pleine conscience, ensuite, plongez-les dans le détail sur divers écrans consécutifs. Evitez la tendance visant à trop expliquer et tout montrer tout de suite. Quand c'est possible, reportez les décisions à des écrans ultérieurs en révélant progressivement les informations nécessaires. Cela préservera la clarté des interactions.

15. Aidez les utilisateurs dans leur contexte

Une interface idéale ne nécessite pas d'aide car elle s'apprend et s'utilise naturellement. Juste sous l'idéal vient la réalité, C'est dans celle-ci que l'aide apparaît, en ligne, dans le contexte qui la rend utile, uniquement disponible quand et où elle est nécessaire et invisible le reste du temps. Demander aux gens d'aller à la section d'aide et de trouver une réponse à leur questions fait reposer sur eux la responsabilité de savoir ce dont ils ont besoin. Présentez plutôt l'aide là où elle est utile, assurez vous seulement qu'elle ne bloque pas la route à ceux qui n'en on pas besoin ou connaissent déjà votre interface.

16. Le moment crucial : l'état t0

La première expérience avec une interface est cruciale, très souvent trop travaillée par les designers. De manière à aider vos utilisateurs à atteindre la vitesse de croisière avec votre interface, il vaut mieux la concevoir pour le moment t0, l'état auquel rien ne s'est encore passé. Cet état ne devrait pas ête un canvas vide, il devrait donner la direction, être un guide pour parvenir à une utilisation rapide. La plupart des frictions des interactions apparaissent dans ce contexte initial, dès que l'utilisateur comprend les règles, il a de plus grandes chances de succès.

17. Les problèmes rencontrés sont les plus valorisables

Les gens cherchent des solutions aux problèmes qu'ils ont déjà, pas aux problèmes potentiels ou aux problèmes du futurs. C'est pourquoi il faut résister à la tentation de créer des interfaces pour des problèmes hypothétiques, observez les comportements existants et créez des designs pour résoudre les problèmes rencontrés. Ce n'est pas aussi excitant que les plans sur la comète mais ce sera bien plus productif quand les gens utiliseront votre interface.

18. Les meilleurs designs sont imperceptibles

Une particularité curieuse des bons designs est qu'ils ne sont pas reconnus comme tels par les gens qui les utilisent. Une des raisons est que lorsque le design est efficace, les utilisateurs peuvent se concentrer sur leurs objectifs plutôt que sur l'interface. Quand ils sont parvenus à leurs fins, ils sont satisfaits et n'ont pas besoin de réfléchir à la situation. En tant que designer, cela peut être frustant... nous recevons moins de gratitude quand nos designs sont bons. Mais les bons designers se contentent d'avoir des interfaces bien utilisées et savent que les utilisateurs satisfaits son silencieux.

19. Basez vous sur les autres domaines du design

Le design graphique et visuel, la typographie, le copywriting, l'architecture de l'information et la visualisation... toutes ces disciplines font partie du design d'interfaces utilisateur. Ils peuvent n'être qu'abordés ou devenir une spécialité. N'entrez pas dans des guerres intestines ou un complexe d'infériorité vis à vis des autres disciplines du design : piochez y ce qui augmente la valeur de votre travail et mettez le avant. Mettez en lumière également les ressemblances dans les disciplines qui peuvent apparaître sans rapport. Que peut-on apprendre de l'édition, du développement logiciel, de la reliure, du skate board, de la lutte anti-incendies ou du karaté ?

20. Les interfaces sont faîtes pour être utilisées

Comme dans la plupart des disciplines du design, la création d'une interface est réussie quand les gens l'utilisent. Comme une belle chaise qui serait inconfortable, une interface est un échec quand les gens décident de ne pas l'utiliser. C'est pourquoi le fait de créer une interface repose bien plus sur la création d'un environnement d'utilisation plutôt que sur la création d'un oeuvre sans usage. Qu'une interface satisface l'égo de son designer n'est pas suffisant, elle doit être utilisée !

Vous pouvez retrouver l'article orignial sur le blog de l'auteur : Principles of User Interface Design. Merci à l'auteur qui a très sympathiquement accepté la publication de cette traduction que nous espérons fidèle à la réalité. N'hésitez pas à nous signaler toute erreur d'interprétation.

A propos de l'auteur

Joshua Porter est designer produit et interface utilisateur vivant aux Etats-Unis et travaillant pour @HubSpot. Il rédige actuellement un livre décrivant la manière d'attirer l'attention des utilisateurs sur vos produits et services en communiquant clairement sur leurs points forts. Make them care! s'adresse particulièrement aux designers et responsables marketing qui créent des sites ou applications web. Vous pouvez retrouver Joshua Porter sur Twitter.

Publié par Nicolas Froidure le Vendredi 18 Mai 2012 à 17:57:43

Retour

Commentaires

Ce billet vous fait réagir ? N'hésitez pas à ajouter votre pierre à l'édifice ! Ajouter un commentaire

Derniers articles

Test de qualité d'un site

Pendant longtemps, tester la qualité d'un site a été assez compliqué pour les clients non-avertis. Aujourd'hui, de nombreux outils permettent de vous faciliter la tâche, faisons un point sur ces derniers. Suite de l'article

Stop aux lorem ipsum

Les bons designers ne parlent pas le latin, sauf quand leurs utilisateurs le parlent. Mettons fin à cette mauvaise pratique du lorem ipsum. Suite de l'article

Pas de miracle

Le web grouille de sociétés à l'histoire épatante, au développement ahurissant. Cela participe au sentiment populaire de facilité d'entreprise sur le web. Et pourtant, entreprendre sur le web est un véritable sacerdoce. Suite de l'article

Nous contacter

SARL Elitwork
10, rue Antoine DEQUEANT
62860 Oisy le Verger
Tél. : 03 21 59 62 24
E-mail

Restons en contact

Profitez de notre veille en choississant parmi les nombreux canaux de diffusion que nous vous proposons.

Nos outils

Tremplin Numérique : Agence web spécialisée en référencement SEO à Paris et partout en France.
BBComposer : Cet éditeur permet de rédiger du contenu de haute qualité pour vos sites Internet grâce au respect de la sémantique du HTML.
CanImage : Editez facilement vos images avant de les ajouter à votre site Internet directement à l'intérieur de Firefox.