17 conseils pour mieux connaître la base de l’Interface Utilisateur (UI)

L’UI est présent dans toute les interfaces. Son rôle est d’anticiper l’action des utilisateurs, c’est-à-dire ce qu’ils pourraient vouloir faire. Il doit aussi veiller à ce que l’interface soit facile à comprendre et à utiliser. L’UI rassemble des concepts de design d’interaction, de création visuelle, et d’architecture de l’information. Voici quelques conseils en webdesign. 

1) L’évidence du design

L’évidence du design est la première et la plus importante sur l’interface. Pour savoir si celle-ci est efficace, les visiteurs doivent être en mesure de reconnaître ses éléments. Il faut comprendre que l’interface doit amener à l’interaction, comprendre ce qui se passera au clic, sans pour autant le faire. La propreté du design inspirera confiance et conduira à l’utiliser davantage.

2) Des interfaces claires pour des interactions évidentes

Elles peuvent aider à clarifier, diriger, montrer la relation du contenu, naviguer et nous donner accès à divers services. La conception d’une interface n’est pas artistique. Son design vise avant tout l’efficacité. Outre leur côté pratique, les meilleures interfaces doivent inspirer, décrire, et renforcer notre relation avec les utilisateurs.

3) La manipulation évidente est la plus efficace

Il est simple d’ajouter plus d’éléments design que nécessaire. Trop de boutons, de graphiques, d’options, de préférences, de fenêtres, ou autres, nous empêchent de nous concentrer sur le plus important : l’utilisation. L’objectif de base doit être la manipulation directe. L’interface doit comporter le moins d’éléments possibles, reconnaissables intuitivement. L’interface idéale doit être suffisamment sobre pour que l’utilisateur ait un sentiment de manipulation naturelle.

4) Une action par écran

Chaque design d’un écran devrait être réservé à une action unique pour l’utilisateur. Cela le rend plus facile à apprendre, à utiliser ; et il est plus facile de progresser si nécessaire. Les écrans qui proposent plusieurs actions importantes sont source de confusion.

5) Garder les actions secondaires

Les écrans avec une seule action peuvent avoir plusieurs actions secondaires, mais elles doivent le rester. On peut garder les actions secondaires plus légères visuellement ou en les plaçant après l’action primaire une fois celle-ci atteinte.

6) Fournir une prochaine étape évidente

Il y a très peu de « dernière » interaction. Il faut anticiper les interactions suivantes et les préparer au mieux. Ne laissez pas les utilisateurs en suspens car ils sont prêts à suivre vos indications pour atteindre naturellement les prochaines étapes.

7) L’apparence doit suivre le comportement

Les éléments conçus doivent suggérer leur comportement. La forme suit la fonction. En pratique, cela veut dire que quelqu’un doit pouvoir prédire l’action d’un élément d’interface simplement en le regardant. S’il ressemble à un bouton, il doit agir comme un bouton. Réservez votre votre créativité et votre imagination  pour d’autres choses.

8) La cohérence

Les éléments de l’écran ne doivent pas forcément apparaître compatibles entre eux, à moins qu’ils ne se comportent mutuellement de manière cohérente. Les éléments qui se comportent de la même manière devraient avoir la même direction. Il faut donc garder le même traitement visuel pour une cohérence évidente.

9) De fortes hiérarchies visuelles

Une hiérarchie visuelle forte est atteinte lorsqu’il y a un ordre de visionnement clair des éléments affichés. Des hiérarchies visuelles faibles donnent peu d’indices sur l’endroit où poser son regard, et l’utilisateur finit par perdre patience et fuir. Si un seul élément visuel important est ajouté à une création, le designer devra peut-être remanier l’ensemble pour préserver la hiérarchie. Celle-ci passe généralement inaperçue, mais elle joue un grand rôle dans le succès votre création.

10) Organisation intelligente

Cela aide les utilisateurs à comprendre votre interface plus facilement et plus rapidement, comme vous l’avez illustré dans les relations essentielles de contenu dans la conception. Il faut montrer les relations naturelles par le placement et l’orientation. Une organisation intelligente du contenu évite à l’utilisateur de se creuser la tête. Il n’a pas à penser à la façon dont les éléments sont liés parce que vous l’avez fait pour lui. Ne forcez pas l’utilisateur à comprendre les choses … montrez-lui tout en créant ces relations dans vos écrans.

11) La couleur

La couleur ne devrait pas compter beaucoup dans une interface. Certes, elle peut aider, mettre en évidence, capter l’attention, sans être le seul facteur de différenciation des éléments.

12) La révélation progressive

N’affichez que ce qui est nécessaire sur chaque écran. Montrez suffisamment d’informations pour permettre un premier choix, puis entrez dans les détails sur l’écran suivant. Évitez de trop expliquer ou tout montrer à la fois. Lorsque cela est possible, déplacez les actions et les informations possibles dans une page suivante,  en les divulguant progressivement. Les interactions seront ainsi plus claires.

14) Les interfaces existent pour être utilisées

Comme dans la plupart des règles de conception, la création d’interface est réussie quand les utilisateurs comprennent ce que vous avez conçu. La conception a échoué quand les utilisateurs renoncent à l’utiliser.

15) Aider l’utilisateur

L’interface idéale ne demande pas d’aide parce qu’elle doit être intuitive et utilisable. Donc, avant d’ajouter de l’aide, assurez-vous plutôt que l’utilisateur sache déjà comment utiliser votre interface, grâce à l’UX.

16) Création invisible

Une bonne conception doit généralement passer inaperçue aux yeux des utilisateurs. Autrement dit, si la conception est réussie, l’utilisateur se concentre sur ses propres objectifs et non sur l’interface. C’est un exercice difficile, mais sachez qu’un utilisateur satisfait est souvent silencieux.

17) Construire sur d’autres règles de conception

Conception visuelle et graphique, typographie, rédaction, architecture de l’information et visualisation : tout cela fait partie de la conception de l’interface. Chaque choix typographique ou de couleur aura son code, sa signification. A vous d’en faire bon usage.

Si cet article vous a plu, nous vous invitons à découvrir notre agence de Webdesign et à télécharger notre livre blanc « Identité Visuelle : rendez votre marque mémorable et reconnaissable »