Design : 7 règles pour une excellente conception d’interface Web

Par exemple, sur le site Web Zeroheight, l’objectif principal de l’entreprise est d’encourager l’utilisateur à s’inscrire afin qu’il puisse obtenir un essai gratuit pour utiliser son outil. Cette action est montrée à l’utilisateur avec l’appel à l’action principal « Essayer gratuitement ». Mais, si l’utilisateur n’est pas encore prêt à terminer cette action, il a la possibilité de cliquer sur l’appel à l’action secondaire « Voir des exemples » pour en savoir plus sur le service. Comme vous pouvez le voir, les deux appels à l’action ont un style visuel distinct.

Dès le début, travaillez avec le vrai contenu afin de comprendre l’histoire et comment structurer votre page. Si le contenu ne vous est pas fourni, faites de votre mieux pour l’écrire afin d’avoir au moins le brouillon initial en place. Obtenez toujours le contenu établi en premier, puis construisez le design autour de lui.

Voici une liste de conseils pour vous aider à rédiger un contenu convaincant:

• A qui parles-tu?: Considérez votre public pour écrire du contenu en fonction des besoins des utilisateurs.
• Évitez les distractions: Envisagez d’écrire dans un environnement à faible fidélité comme un éditeur de texte pour éviter d’être distrait par des éléments visuels ou une mise en forme de texte;
• Soyez humain: Utilisation la deuxième personne (Vous) lorsque vous faites référence à l’utilisateur pour rendre votre contenu accessible et engageant.
• Répondez aux questions de l’utilisateur: Lors de la visite d’un site Web, l’utilisateur a des questions spécifiques à l’esprit. Votre copie doit donner des réponses à ces questions.
• Ne soyez pas bavard: Soyez concis et clair autant que possible.
• Rendez votre contenu numérisable: Décomposez votre contenu avec des titres, des sous-titres, des paragraphes, des citations et des listes déroulantes. N’oubliez pas: les utilisateurs ne lisent pas les pages mais les numérisent à la place.
• Écrivez en langage clair: Évitez d’utiliser des acronymes, du jargon et des mots complexes qui obligeront l’utilisateur à réfléchir.
• Évitez les murs de mots: Assurez-vous de diviser votre copie en petits morceaux pour en faciliter le traitement et la lecture. Les gros blocs de texte sont difficiles à traiter.
• Voix et tonalité: Réfléchissez au type d’émotions que vous souhaitez évoquer avec votre message. Par exemple Amical? Informel? Formel? J’expliquerai plus ce point dans règle n ° 6 ci-dessous;
• Évitez Lorem Ipsum: L’utilisation du texte de Lorem Ipsum vous encouragera à vous concentrer sur un design dénué de sens susceptible d’être déformé plus tard, une fois le vrai contenu en place.

Cela dit, le contenu doit toujours venir en premier. Comme l’a dit Jeffrey Zeldman:

«Le contenu précède la conception. Le design en l’absence de contenu n’est pas du design, c’est de la décoration.  » —Jeffrey Zeldman

Pour déterminer comment le contenu doit être organisé sur la page, commencez par rédiger différentes approches de la mise en page sur papier en fonction des objectifs. Cette tâche vous permettra de rester concentré sur la mise en page, la structure du contenu et les interactions sans être distrait par la couleur, les polices ou les éléments graphiques. Dans la mesure du possible, collaborez avec le client, l’intervenant ou tout membre de votre équipe pour partager les idées.

Dans son article «Mes cinq commandements pour le wireframing»Paul Boag confirme les avantages de commencer une conception à partir de croquis dessinés à la main:

« Pour conserver une approche légère et spontanée, les wireframes doivent être initialement produits avec un stylo et du papier. »

– Paul Boag

Lors du wireframing, réfléchissez à la façon dont les informations doivent être affichées, des écrans mobiles aux écrans de bureau, afin de réfléchir à l’expérience globale et de hiérarchiser les informations nécessaires.

Une fois que vous êtes satisfait de vos croquis, n’hésitez pas à les affiner sur l’outil de wireframing de votre choix.

Enfin, testez tôt et souvent vos wireframes avec quelques personnes en dehors du projet et répétez jusqu’à ce que vous ayez une excellente solution au problème que vous essayez de résoudre.

Dans les deux dernières lignes directrices, je vous conseillerai sur la façon d’aborder la conception visuelle de votre interface afin de la rendre visuellement attrayant et mémorable.

Si vous souhaitez développer la confiance et faire en sorte que les gens se connectent à votre interface, vous devriez envisager d’appliquer une direction artistique à votre conception pour créer une personnalité distinctive. Dans son livre «Direction artistique pour le Web»Andy Clarke a déclaré que la direction artistique:

«Utilise des techniques de conception pour évoquer intentionnellement une réponse émotionnelle de la part d’une personne lorsqu’elle lit un article, utilise un produit ou visite un site Web»

– Andy Clarke

Pour diriger votre conception vers l’art, commencez par vous poser les questions suivantes:

1. Comment je veux que l’utilisateur se sente lors de l’interaction avec le site?
2. Qu’est-ce que je veux qu’ils disent?

De plus, rédigez une courte liste de mots qui transmettent les impressions que vous souhaitez que les utilisateurs aient en visitant votre site. Ces attributs définiront la personnalité de votre conception et vous guideront sur les polices, la photographie, les couleurs et la mise en page appropriées à utiliser.

Enfin, la rédaction de votre page (par exemple: copie du corps, étiquettes et messages d’erreur) doit être créée autour de ces attributs pour refléter la voix et le ton corrects. Par exemple, Mailchimp et Smashing Magazine les sites Web ont un langage visuel et une copie qui transmettent efficacement leur personnalité.