Guides d'utilisation intégrés
Je veux que mon application Web soit explicite. Il y a des champs de saisie et des pages entières qui nécessitent quelques paragraphes d'explication. Comment intégrer ces guides d'utilisation à mon application? Comment les rendre visibles et non dérangeants?
J'envisagerais de révéler l'aide progressivement:
Si vous définissez une norme dans laquelle chaque champ a une info-bulle, vous pouvez éviter toute icône spéciale - l'utilisateur saura immédiatement que le survol de la souris entraînera une info-bulle.
Chaque info-bulle doit contenir un lien (ou bien l'info-bulle entière peut être pressée) pour la développer pour une explication plus approfondie. Cette explication peut simplement s'ouvrir sur place ou sur une autre page).
Je trouve la page d'inscription à Twitter pour faire du très bon travail:
Ils l'utilisent même pour la validation/le feedback:
Cela le fait nécessite cependant quelques centaines de pixels à côté de votre champ de saisie. Il vous laisse cependant la liberté de simplement fournir un court texte d'aide suivi d'un lien "plus ...".
Nous avons adopté l'approche selon laquelle les visiteurs qui visitent notre site pour la première fois (en utilisant des cookies) reçoivent une barre d'alerte (similaire à la première visite de SE) les pointant vers l'aide en ligne et une vidéo sur la façon d'utiliser le site. .
Cette barre d'alerte ne s'afficherait pas pour les visites suivantes et éviterait ainsi de distraire à nouveau l'utilisateur.
(Plus d'informations sur cet article de blog. )
Pour notre site, nous avons privilégié l'approche de la barre d'alerte non modale.
Cependant, une autre approche que nous examinions, est une boîte d'alerte modale lors de la première visite, et cela s'afficherait à chaque fois, jusqu'à ce qu'ils cliquent sur la case à cocher 'Ne plus montrer' avant en cliquant sur OK.
Vous pouvez écrire une petite explication dans la barre latérale comme ils le font dans la page de connexion SO.
une autre option consiste à placer de petites icônes à côté des champs et à inclure une info-bulle en survol à côté de chaque champ.