Comment utiliser les modèles de conception d'interface utilisateur
Les modèles de conception sont des solutions optimales aux problèmes de conception courants. Au fur et à mesure que des problèmes communs se posent dans une communauté et sont résolus, des solutions communes apparaissent souvent. Finalement, les meilleurs d'entre eux dépassent le din, s'identifient eux-mêmes et deviennent raffinés jusqu'à ce qu'ils atteignent le statut d'un modèle de conception.
Je n’appellerais pas une tendance dans la conception de sites Web, les modèles de conception semblent plutôt s’interroger sur la façon dont les conceptions communes sont classées rétrospectivement, plutôt que de forger de nouveaux territoires ou de regarder où les choses vont.
Comment devriez-vous aborder les modèles de conception d'interface utilisateur?
Nous utilisons des modèles de conception tout le temps, si vous ne les connaissez pas, vous ne vous êtes probablement pas rendu compte qu'ils sont tout autour de vous.
Qu'en est-il de l'exemple classique de trop de contenu à afficher sur une seule page? Nous portons notre attention sur «Tabs», un modèle de conception qui nous permet de servir tout le contenu que nous voulons, sans faire disparaître l'utilisateur dans un océan de liens.
Les avantages typiques de l'utilisation d'un modèle de conception incluent:
- montrer aux débutants comment utiliser les meilleures pratiques en matière de conception Web;
- apprendre à s'adapter à la compréhension collective des concepteurs;
- permettant une meilleure communication, réduisant le risque associé aux choix inconnus;
- réduire le temps et les coûts nécessaires au déroulement des tâches spécifiques;
- éviter de perdre du temps à construire quelque chose qui a été construit auparavant;
- donner à l'utilisateur une expérience avec laquelle il est familier et expérimenté (la nature des modèles de conception).
Dans l'exemple ci-dessus, nous voyons Clicky Media en utilisant deux modèles de conception très populaires aujourd'hui:
- Navicon - un symbole universel pour le menu, également connu sous le nom de navigation de site, devient de plus en plus populaire dans la conception Web moderne, mais a déjà été entièrement adapté aux appareils mobiles.
- Défilement Parallax - un modèle de conception unique qui permet un site Web d'une seule page, avec un mécanisme de défilement facile à utiliser, mais comprend également une liste de sprites d'arrière-plan qui donnent une impression vivante à la page.
Même si le menu Navicon et le menu général en haut de la page partagent des choix similaires - il serait très gênant d’inclure tous les liens dans la même barre d’en-tête - il est clair que les petits choix peuvent faire une grande différence.
Voici ce que vous devez penser pour évaluer un modèle de conception et l'adapter à vos propres besoins:
- Résumé du problème: quel problème d'utilisateur résolvez-vous? Restez concentré et exprimez-le comme une histoire d'utilisateur - en une phrase seulement.
- Solution: comment les autres ont-ils résolu ce problème? Quelques éléments à détailler incluent la navigation de l'utilisateur (y compris les raccourcis), l'obtention d'entrées utilisateur, le traitement des données et des intégrations avec d'autres services ou applications, et l'affichage d'informations et de contenu (y compris les valeurs par défaut).
- Exemple: super, peux-tu me montrer? Parfois, une capture d'écran ou une maquette suffit; d'autres fois, des flux d'utilisateurs et / ou des notes supplémentaires sont nécessaires pour communiquer clairement le modèle.
- Utilisation: quand ce motif (pas) doit-il être utilisé? Quelques éléments à détailler incluent l'architecture du produit, la disposition de l'interface, le ou les périphériques, le langage de programmation, l'absence ou l'existence d'autres modèles de conception, le type d'utilisateur et les cas d'utilisation principaux.
Il faut de la pratique et de la discipline pour réfléchir aux schémas de cette manière si vous ne l’avez pas encore fait. Prenez le temps de répondre à ces questions lors de la conception de votre produit, car cela pourrait vous aider à gagner beaucoup de temps lors de la restructuration lorsque vos utilisateurs et votre équipe vous demanderont des informations similaires.
L'essor des boîtes à outils de l'interface utilisateur
Les modèles de conception d'interface utilisateur ont toujours eu pour but de faciliter la navigation de l'utilisateur sur votre site Web, votre application ou votre système. Si l'utilisateur apprend à soumettre un commentaire pour la première fois, il est probable qu'il saura instantanément comment vous envoyer un courrier électronique en utilisant le formulaire de contact, c'est le même concept répétitif de saisie d'informations.
Ces dernières années, nous avons assisté à une croissance énorme du marché des outils de l'interface utilisateur. Une boîte à outils d'interface utilisateur peut être simplement comprise comme un ensemble de widgets qui vous permettent de créer une application entièrement graphique à partir de rien. Twitter Bootstrap est un exemple parfait de boîte à outils d'interface utilisateur réussie. De nos jours, une grande partie des concepteurs Web s’appuient sur les fonctionnalités de Bootstrap pour faciliter leur propre flux de travail. En un sens, il n'y a pas besoin de réinventer la roue!
3 motifs de conception d'interface utilisateur à retenir
En bref, les modèles de conception sont des solutions aux problèmes récurrents. En utilisant des modèles, nous pouvons surmonter de simples problèmes d’interface utilisateur. Si nous portons une attention particulière, nous remarquons que les modèles sont tout autour de nous. Il n'y a rien de spécial à propos de ce design spécifique, c'est la manière dont il a été appliqué et qui vous enthousiasme!
Crystal Clear appels à l'action
Le plus simple des formulaires Web (et aussi des plus courants) ne comportera généralement qu’un seul bouton actionnable: dans ce cas, «Créer un site Web». C'est assez explicite, ce qui est le point.
Combien plus facile pourrait-il obtenir, non? Optez toujours pour l'option facile, ne réinventez pas la roue juste pour vous démarquer de la foule.
Chapelure à la rescousse
Les miettes de pain affichent le chemin de la page d'accueil du site à l'emplacement actuel de l'utilisateur dans la hiérarchie de la page du site Web. Ils constituent une forme de navigation secondaire qui aide les utilisateurs à comprendre la hiérarchie et la structure du site Web. Les miettes de pain commencent par la page d'accueil et se terminent par la page en cours de visualisation.
Dans cet exemple par Fares Farhan, nous voyons comment il utilise deux modèles de conception d'interface utilisateur en même temps. En premier lieu, il a le motif des onglets en haut et le motif de navigation en bas de la page. En les combinant, il crée une expérience de navigation très agréable.
L'inscription devrait être facile
À moins que vous ayez vécu sous un rocher, vous serez au courant de l'enregistrement social. L'inscription à un site Web est une chose commune à faire et devrait donc être aussi simple et agréable que possible.
Ceci est l'une de mes pages d'inscription préférées pour le moment. C'est le GitHub page d'accueil, et comme vous pouvez le voir sur la capture d'écran, tout ce que la société représente est présenté en moins de cent mots. Vous avez également la possibilité de vous inscrire en déplacement, et le processus prend moins d'une minute. Vous recevrez un email pour vérifier votre compte, mais nous y sommes habitués de toute façon!
Mots finaux
J'ai construit des sites Web pendant plus de huit ans et au cours de ces huit années, j'ai réalisé que la simplicité est la clé de nombreux problèmes de conception.
Je suis arrivé à la conclusion que l'encombrement dans la conception, bourré d'éléments et de formes inutiles est l'expérience la plus frustrante que vous pouvez trouver sur le Web. Oui, le design est exactement ce qui fonctionne, alors pourquoi ne pas le faire fonctionner correctement? L'interface utilisateur est extrêmement importante pour la réussite de votre entreprise ou de votre entreprise.
La meilleure façon de vous assurer que vous concevez des sites réussis est d’apprendre et d’utiliser les modèles de conception existants.