Meilleures pratiques pour 6 éléments d'interface utilisateur courants
L’ apparence et la facilité d’ utilisation de certains éléments d’interface et fonctionnalités sont essentielles à la réussite de tout site Web sur le marché actuel.
Des études ont démontré que même une fraction de seconde de réflexion sur la part de l'utilisateur affaiblirait leur perception et leur intérêt pour un site Web et, en fin de compte, diminuerait le taux de conversion du site Web.
Dans certaines niches et industries, il peut être parfaitement acceptable d'avoir des éléments d'interface utilisateur qui ne sont pas évidents dans leur utilisation. L'industrie du blogging et du développement web en sont des exemples parfaits.
Mais lorsque nous concevons des interfaces utilisateur pour des audiences non-technophiles, ce qui est généralement le cas avec le travail des clients, nous devons nous assurer que certains éléments de l'interface utilisateur ne sont pas trop éloignés de ce à quoi les utilisateurs sont habitués.
Cet article présente certaines des meilleures pratiques et caractéristiques d'utilisation de six éléments d'interface utilisateur et des conventions pour chacun, afin que les développeurs puissent créer des expériences utilisateur à la fois belles et simples.
1. Apparence du champ de recherche
Sur les sites Web volumineux ou riches en informations, la recherche est roi. Les utilisateurs renoncent généralement aux barres de navigation classiques en faveur du champ de recherche.
Un champ de recherche qui n'est pas immédiatement visible aura l'un des deux effets suivants: 1) l'utilisateur supposera qu'aucune fonctionnalité de recherche n'est disponible, ou 2) l'utilisateur trouvera la fonctionnalité de recherche après une période retardée et éventuellement irritante.
Assurez-vous que le champ de recherche de votre site Web est facile à voir. Les arrière-plans sombres et les graphiques fantaisistes nuiront à la facilité d'utilisation . Il est donc préférable de le garder blanc ou gris clair. Assurez-vous également que la zone de recherche est suffisamment grande par rapport aux autres éléments importants de la page, conservant ainsi sa position dans la hiérarchie visuelle.
Le champ de recherche sur Domaine par IP correspond bien au thème visuel du site, étant orange et graphiquement cohérent avec son environnement. Mais si une case de recherche sur un site Web plus fréquenté recevait ce traitement, il serait probablement difficile à repérer.
La conception n'est pas un obstacle sur le domaine par IP, car le site Web a une fonction: la recherche, qui se trouve au milieu de la page. De plus, étant dans un créneau technologique, ses développeurs sont moins incités à respecter les conventions. Mais ce degré de créativité doit être évité sur les plus grands sites Web , dont les publics cibles ne sont peut-être pas aussi techniques.
Temps de l'aventure , pendant ce temps, garde sa zone de recherche blanche, facilement dimensionnée et facile à trouver sur la page:
En dépit d'être dans une langue étrangère, Adventure Time dispose d'un champ de recherche très clair, même pour les utilisateurs anglophones. La taille et la couleur de la boîte sont complétées par le graphique en forme de loupe, qui est devenu le symbole universel pour la recherche en ligne. Un utilisateur cherchant cette fonctionnalité n'aura pas de problème ici.
Ce modèle doit être suivi dans tous les projets ciblés sur une base d'utilisateurs diversifiée.
Lectures complémentaires:
2. Contenu pliable / extensible clairement marqué
Les sites Web bénéficient de panneaux et de menus déroulants pliables, car ils permettent des mises en page plus propres et moins encombrées. Le contenu caché de ces éléments d’interface peut toutefois nuire à la convivialité d’un site Web si sa présence n’est pas clairement indiquée.
Lorsqu'un utilisateur clique sur un lien ou un bouton vide, il s'attend à être redirigé vers une nouvelle page. Mais lorsqu'un utilisateur clique sur un lien ou un bouton doté d'un indicateur de contenu caché, il s'attend à ce que le nouveau contenu soit instantanément affiché (via JavaScript ou AJAX) et qu'il soit possible de le masquer ultérieurement. Ainsi, un site Web devrait différencier nettement les liens normaux et les liens révélant du nouveau contenu via JavaScript .
Le contenu réductible, tel que les panneaux latéraux et les arborescences de menus, peut être indiqué par un indicateur plus / moins de type flèche, triangle ou Explorateur Windows. Le panneau sur lequel les utilisateurs connectés voient CSS Globe indique clairement qu'il est pliable:
Ci-dessous se trouve la même page après que le panneau a été développé pour révéler un groupe de fonctions:
Le contenu du panneau étant maintenant développé, la flèche pivote de 90 degrés, ce qui suggère que le même contenu peut maintenant être masqué ou réduit. Ce même principe peut être appliqué aux menus déroulants ou déplaçables, bien que ceux-ci ne nécessitent pas de flèche tournante. Étonnamment, cette fonctionnalité est souvent omise même sur des sites Web conçus par des professionnels.
Lectures complémentaires:
3. Indicateur de chargement AJAX
Lorsque vous améliorez l'expérience utilisateur en chargeant du contenu via des requêtes asynchrones, veillez à informer l'utilisateur qu'une requête AJAX est en cours de traitement. Sans cet indicateur, l'utilisateur peut abandonner l'attente ou se demander pourquoi rien ne s'est produit en réponse à son clic.
Vous pouvez accomplir cela de plusieurs manières. une manière consiste à mettre en évidence un message "Chargement" ou similaire dans ou près de l'endroit où l'action se produira, comme le fait le lecteur RSS de Google:
En haut de la capture d'écran se trouve le texte en surbrillance jaune, qui apparaît lorsque le bouton "Marquer tout comme lu" est cliqué, indiquant à l'utilisateur que quelque chose se produit.
Une autre façon d’indiquer ceci est d’utiliser une animation ou un sablier tournant, qui serait familier aux utilisateurs de Windows. Un indicateur animé est utilisé sur de nombreux sites Web, notamment Gazouillement , où les utilisateurs cliquent sur un bouton "Plus" pour afficher les anciens tweets:
En cliquant sur le bouton et en fonction de la vitesse de connexion du client au serveur, une image animée familière apparaît, indiquant à l'utilisateur que sa demande est en cours de traitement.
Les graphiques de chargement AJAX sont disponibles gratuitement sur différents sites Web, dont plusieurs vous permettent de personnaliser les graphiques en fonction de la taille, de la couleur et d'autres options.
Ce type d'indicateur visuel est important pour les requêtes asynchrones qui ne fournissent pas d'indices côté client sur l'activité en cours de chargement.
Un indicateur de type AJAX pourrait également être utilisé pour améliorer les fonctionnalités non-AJAX qui se comportent comme AJAX et prennent du temps à se charger. Cela pourrait inclure une galerie de photos qui charge une image plus grande lorsque vous cliquez sur une vignette.
Les graphiques de chargement AJAX et d'autres indicateurs n'accélèrent pas réellement une page, mais ils améliorent le temps de chargement "perçu" , qui est souvent tout aussi important que l'amélioration du temps de chargement réel.
Lectures complémentaires:
4. Emplacement du panier d'achat et des fonctions de connexion et d'enregistrement
Lorsque les utilisateurs scannent une page pour trouver le bouton "Panier" ou "Enregistrer maintenant", le premier endroit où ils se trouvent est le coin supérieur droit de la page. À moins que vous n'ayez une raison impérieuse de le faire, conservez cette fonctionnalité dans son emplacement habituel, sinon vous risquez de ralentir et de perturber l'expérience utilisateur.
Les options et fonctions relevant de cette catégorie incluent "Afficher le panier", "Extraire", "Se connecter", "Déconnecter", "S'inscrire", "Soumettre le lien", "Mot de passe oublié?" Et même "Contactez-nous. "Ce dernier élément serait généralement le dernier dans une barre de navigation horizontale.
Goûter comprend quatre liens de ce type dans le coin supérieur droit de sa mise en page:
Maui Divers Bijoux est un autre bon exemple et comprend également un graphique de sac à provisions:
5. Format de date d'expiration sur les formulaires de carte de crédit
Lorsqu'un formulaire demande la date d'expiration de votre carte de crédit, le format est toujours le même: le mois, représenté par deux chiffres, suivi de l'année, représenté par deux ou quatre chiffres (par exemple 03/11 ou 03/2011). Le format à quatre chiffres indique comment la date d'expiration apparaît sur la carte de crédit elle-même.
La meilleure façon de recueillir ces informations et de renforcer l'expérience utilisateur consiste à utiliser deux zones de sélection distinctes, une pour le mois et l'autre pour l'année. Ne soumettez pas l'utilisateur à la date d'expiration dans une seule zone de texte, même si vous fournissez des instructions.
Voici un bon exemple de la page de paiement de Maui Divers Jewelry:
Et voici un exemple de champ de date d'expiration mal conçu:
De plus, le sélecteur de mois ne devrait pas afficher les noms des mois, mais plutôt les numéros 01 à 12. Il n'y a aucune raison de ralentir les utilisateurs en leur faisant comprendre que "08" signifie "Août".
6. Liens facilement identifiables
Cela ne devrait jamais être un problème, mais malheureusement, certains sites Web ne font toujours pas clairement la distinction entre les liens et le texte normal dans le corps principal.
Dans la plupart des cas, la meilleure façon d’indiquer cette différence est de faire en sorte que les liens soient de couleur différente et de les souligner. Dans certains cas, une forte couleur contrastante suffit à elle seule; mais il suffit rarement de souligner ou de changer légèrement la couleur, ce qui nuit souvent à l'accessibilité.
Cameron.io fait bien cette distinction:
Ces liens ne seraient pas aussi visibles s'ils étaient simplement soulignés mais pas changés en couleur. Vous ne devez pas concevoir un bouton qui ne ressemble pas à un bouton, alors pourquoi laisser les liens de texte se fondre dans le corps principal? Comme la plupart des utilisateurs numérisent du texte en ligne, les concepteurs doivent s'assurer que tous les liens sont identifiables bien avant qu'une souris ne les survole.
Lectures complémentaires:
Conclusion
Tous les éléments et fonctions de l'interface utilisateur décrits dans cet article sont essentiels à la convivialité du site Web et jouent un rôle important dans la perception de l'utilisateur de votre marque.
Beaucoup de petites améliorations peuvent faire une grande différence en termes de vitesse perçue et peuvent empêcher les utilisateurs d'être frustrés ou mal à l'aise.
Rendez vos éléments d'interface utilisateur simples et rationnels, et suivez les conventions si possible. Vous verrez des taux de rebond réduits, de meilleures conversions et un flux régulier de trafic en retour.
Écrit exclusivement pour WDD par Louis Lazaris, rédacteur pigiste et développeur Web. Louis court Web impressionnant , où il publie des articles et des tutoriels sur la conception de sites Web.
Comment certains de ces éléments d'interface utilisateur ou d'autres pourraient-ils être améliorés? S'il vous plaît partager vos pensées dans les commentaires ci-dessous.