Guide · UI designL’UI, ça se voit.
Ce guide ne vous demande presque pas de lire. Le design d’interface se comprend avec les yeux : huit comparaisons, deux versions à chaque fois, et votre œil qui choisit. Vous verrez qu’il en sait déjà beaucoup.
Votre site est jugé en 50 millisecondes.
C’est le temps qu’il faut à un internaute pour se faire une première opinion d’une page, selon une étude de Gitte Lindgaard publiée dans Behaviour and Information Technology. Moins qu’un clignement d’œil : pas le temps de lire un mot.
Ce premier jugement, c’est l’UI qui le provoque. L’UI, pour user interface, c’est tout ce que l’on voit sur un site : les textes, les couleurs, les espaces, les boutons. Et le plus simple pour la comprendre n’est pas de la lire. C’est de la regarder.
Source : Nature, sur l’étude de l’Université CarletonLequel est le mieux ?
Huit comparaisons. À chaque fois, la même chose en deux versions, avec exactement les mêmes mots. Choisissez au premier coup d’œil, puis découvrez ce que votre œil a perçu.
Laquelle comprenez-vous d’un seul coup d’œil ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Laquelle se lit sans effort ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Laquelle paraît la plus claire ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Laquelle fait la plus professionnelle ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Sur laquelle savez-vous tout de suite où cliquer ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Laquelle se lit le plus facilement ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Sur téléphone, laquelle touchez-vous sans viser ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Lequel inspire le plus confiance ?
Choisissez A ou B, sans réfléchir. Votre premier réflexe est le meilleur test.
Huit règles, zéro jargon.
- 1La hiérarchieUn seul élément domine chaque écran.
- 2Le contrasteUn texte foncé sur fond clair, au moins 4,5 pour 1.
- 3L’espacePlus de vide entre les groupes qu’à l’intérieur.
- 4Les typographiesDeux au maximum, souvent une seule.
- 5L’actionLe style le plus fort pour l’action principale.
- 6L’alignementLe texte part toujours du même bord.
- 7Le téléphoneDes cibles assez grandes pour le doigt.
- 8La cohérenceUn même élément, la même apparence partout.
Ce qui est beau paraît plus simple à utiliser.
Les chercheurs appellent cela l’effet esthétique-utilisabilité : nous jugeons plus facile à utiliser ce que nous trouvons beau, même quand ce n’est pas le cas. Un site soigné bénéficie donc d’une indulgence que n’a pas un site négligé.
Mais cet effet a une limite. Il fait patienter, il ne retient pas. Un beau site mal organisé finit par décevoir, c’est pourquoi l’UI travaille toujours avec l’UX : l’une rend les choses visibles, l’autre décide où les mettre.
Un design qui vous ressemble.
Pour Guide Van Australie, nous avons repris le sable et le rouge de la couverture du livre. Le visiteur retrouve le même univers dans le livre et sur le site, et le bouton rouge indique toujours l’accès au guide.
- S’imprégnerVotre activité, vos clients, ce qui vous distingue.
- Poser les règlesCouleurs, typographies, tailles, boutons.
- DessinerL’accueil et les pages clés, avec vos vrais contenus.
- DéclinerLe téléphone, et chaque état : survol, erreur, chargement.
- TransmettreTout ce qu’il faut pour construire sans approximation.
Ce qu’on nous demande souvent.
Le design se limite-t-il à rendre le site plus beau ?
Il donne au site son apparence, mais aussi des repères pour l’utiliser. La taille d’un titre aide à identifier le sujet ; le contraste rend le texte lisible ; l’apparence d’un bouton indique qu’il permet une action.
Le design est-il aussi prévu pour les téléphones ?
Oui. Nous adaptons la disposition des textes, des images et des boutons aux petits écrans. Une page peut changer d’organisation pour rester lisible et utilisable au doigt.
Peut-on vous confier le design sans le développement ?
Oui. Nous proposons des missions UI seules. Nous définissons ensemble les pages à concevoir, ce qui existe déjà et ce qui sera transmis à la personne chargée du développement.
Les autres guides.
La suite
Faisonsplace à votre idée.
Une idée précise ou une simple intuition : c’est déjà un bon point de départ. Racontez-nous.
Parlons de votre idée