Problèmes communs d'utilisation des applications Web?
Quelles sont les erreurs courantes concernant la convivialité des applications Web?
Menus déroulants CSS/Javascript qui n'ont pas de délai spécifié afin que vous rencontriez le "problème diagonal" (via Jakob Nielsen )
Ne pas mettre étiquettes cliquables sur les cases à cocher et autres champs de formulaire.
C'est si facile à faire. Voir la balise HTML <label> .
Mauvaise conception de la validation du formulaire.
Je je déteste lorsque je soumets un formulaire qui échoue à la validation et que l'application fait l'une des choses suivantes:
- Les champs sont BLANK lors du rechargement du formulaire. Cela m'est arrivé lors de l'inscription à une application Web sur mon iPhone. J'étais vraiment énervé parce qu'il y avait plus de 8 champs.
- Affiche une seule erreur de validation par envoi de formulaire.
- Ne présente pas de résumé des erreurs en haut du formulaire.
- Ne met pas en évidence visuellement les entrées de champ non valides.
Mauvaise conception en ce qui concerne les boutons d'action primaire vs secondaire sur les formulaires.
http://www.lukew.com/resources/articles/psactions.asp
Les utilisateurs utilisent les boutons Précédent et Suivant de leur navigateur (ou de leur souris). Et ils utilisent également le bouton d'actualisation. Soyez donc prudent avec les messages de formulaire sur votre site Web.
Personne n'aime ça ...
Cette boîte de dialogue apparaît lorsque vous actualisez la page sur laquelle les données sont publiées. Heureusement, cela peut être évité en utilisant method = "get" si possible, ou method = "post" suivi immédiatement d'une redirection si nécessaire. Si vous devez utiliser une publication pour des raisons de longueur ou de sécurité, la redirection doit aller vers une URL différente de l'action du formulaire pour éviter ce message.
liens JavaScript. Vous ne pouvez pas cliquer avec le bouton central pour ouvrir un nouvel onglet pour javascript:loadPage(34576).
Demander des informations personnelles obligatoires dans les formulaires d'inscription lorsqu'elles ne sont pas nécessaires.
Exemples :
- demander une adresse sur un site internet où ces informations sont inutiles
- Forcer à saisir un "vrai" nom
- ...
Rendre ces informations obligatoires est le meilleur moyen d'obtenir une base de données vraiment polluée remplie de "factices", "[email protected]", etc. parce que la plupart des gens n'aiment pas donner ce genre d'informations quand ce n'est pas vraiment nécessaire.
De plus, ne pas pouvoir modifier ces informations est une très mauvaise conception.
target = "_ blank" sur les ancres est l'un des plus courants et celui que je déteste le plus. Il y a certains cas qui, à mon avis, ont du sens.
Voici une liste assez connue des 10 principales erreurs sur la conception Web: http://www.useit.com/alertbox/9605.html
Lorsque la fonctionnalité de bouton retour est désactivée ou modifiée par rapport à ce que l'utilisateur attend. Je vois cela beaucoup sur les applications qui utilisent des boîtes de dialogue/lightbox/iframes personnalisées.
Me faire chasser pour le "mot de passe oublié?" lien, puis une fois que je clique dessus, en m'envoyant mon mot de passe en clair 1 une fois que je le trouve. Notre cher Jeff Atwood l'a très bien couvert dans " Vous stockez probablement des mots de passe incorrectement "
1 Certes, cette partie est plutôt un problème de programmation , mais je considère que c'est aussi un problème d'utilisation.
Utiliser des cases à cocher comme boutons radio et vice-versa.
Nulle part où fermer votre compte ou où il est vraiment difficile de trouver où fermer votre compte.
Idéalement, vous voulez une section "Compte" ou quelque chose de la même façon, et sur cette page, à part toutes les autres choses que vous voulez, un lien ou un bouton clairement étiqueté qui dit "fermer mon compte". Vous pouvez suivre cela avec une page qui demande aux utilisateurs pourquoi ils partent ou les invite à donner leur avis, mais tout cela devrait être priorisé par rapport à l'appel à l'action "fermer mon compte" (ou supprimer, supprimer, etc.) .
Champs avec validation super stricte. Par exemple, si vous avez tapé un code postal et que "V5X4O4" fonctionne mais pas "V5X 4O4".
Icônes sans étiquette textuelle ni titre (en survol ou non).
Si un titre est tronqué, je pense que vous devriez pouvoir voir une info-bulle avec le titre complet en survol.
Lorsque des boutons importants sont masqués par les utilisateurs finaux au profit de publicités ou de matériel promotionnel. Pensez au bouton "Continuer sans compte" de Paypal.
- UN AUDIO QUI JOUE SANS AUTORISATION! Lol - Aussi, pas de bouton muet.
Ne pas voir votre site se dégrader gracieusement lorsque JavaScript est désactivé.
La question est un peu trop générale et en fait plus une discussion.
Je peux contribuer une chose que j'ai vue à plusieurs reprises:
Formulaires qui ont un bouton "effacer tout".
- Certains de ceux-ci conçoivent même les boutons "soumettre" et "effacer tout" de la même manière, leur donnant un poids égal.
- Sans oublier que j'ai vu des exemples (je n'ai pas de lien spécifique en tête pour l'instant ...) où le "clear" est à gauche et le "submit" à droite, ce qui pousse certains utilisateurs à appuyer sur le premier bouton le plus proche de leur curseur en quittant le dernier champ.
Je ne vois aucune raison pour un bouton "clair", mais si vous insistez absolument, utilisez simplement un lien très subtil, permettant une seule action simple et évidente pour l'utilisateur.
Devoir s'inscrire pour effectuer certaines opérations de base qui n'ont pas vraiment besoin d'être enregistrées. Ou autorisez une méthode d'enregistrement "en un clic".
L'utilisateur devrait avoir le droit de décider. Je me retrouve avec beaucoup de comptes "à usage unique" sur tant de sites Web!
Quelques exemples où cela ne devrait pas être nécessaire:
- téléchargement de fichiers (combien de sites web "code" vous demandent de vous inscrire pour vous permettre de télécharger un exemple de fichier?)
- recherche (oui, certains forums désactivent la recherche d'utilisateurs non enregistrés)
- accéder à un article (lorsque son accès est gratuit)
- ...
Sites avec barres d'état flottantes
Tels que Meebo Bar . Ceux-ci sont désagréables et fournissent rarement des fonctionnalités utiles. Ils occupent un espace inutile et font apparaître des ballons distrayants.
Être "créatif" et ranger votre barre de recherche derrière un onglet/lien/etc. Si vous proposez une recherche, mettez simplement une boîte à disposition, plutôt que de devoir la rechercher!
Mes plus gros bêtes noires sont des sites qui pour une ou plusieurs raisons ne prennent pas correctement en charge les signes plus dans les adresses e-mail . La plupart du temps, les sites Web ne valideront pas une adresse e-mail avec un "+" avant le "@". Le pire est qu'un site accepte l'adresse, mais n'échappe pas et/ou n'échappe pas correctement les données et essaie d'envoyer un e-mail à une adresse avec un espace ou avec les deux côtés du `` + '' brisés ensemble .
Ce validateur gratuit écrit en PHP suit prétendument tous les RFC et leurs errata associés.
De nombreux sites n'utilisent pas de couleurs différentes pour les liens visités .
Jakob Nielsen: Changer la couleur des liens visités
Web Apps qui s'exécutent sur une connexion HTTPS sécurisée, mais chargent du contenu à partir d'une connexion HTTP. D'une part, c'est tout à fait correct, mais pour IE utilisateurs en particulier (pas moi en général), l'avertissement de sécurité est maladroit et déroutant pour les utilisateurs ...
Non seulement il est très aggravant de rejeter sur chaque page, mais la formulation est maladroite et les actions des boutons sont différentes pour IE (6 & 7) vs IE8 +
Ancienne boîte de dialogue IE:
Nouvelle boîte de dialogue IE:
Donc, si en tant qu'utilisateur vous "voulez juste charger la page entière" (par exemple, vous recherchez le bouton "disparaître") ... c'est la valeur par défaut Yes dans IE6 et IE7, mais la valeur par défaut No dans IE8 +.
Remarque: Je suis pleinement conscient en tant que développeur de l'objectif de la boîte de dialogue et même de la raison pour laquelle Microsoft l'a modifiée, mais pour les utilisateurs finaux, cela les confond tout particulièrement dans IE8. Les utilisateurs finaux voient apparaître une boîte de dialogue demandant "autorisation", "confirmation", etc. et s'attendent à cliquer sur l'option "ok" ou "oui" car ils ne lisent pas la boîte de dialogue. On peut affirmer que les utilisateurs devraient le lire, mais c'est simplement plus facile si les développeurs s'assurent qu'ils n'ont pas de contenu mixte si cela peut être évité.
Devoir rechercher le lien de déconnexion. Je me connecte à une page, et dans certains cas, lorsque j'ai terminé, je dois rechercher le bouton ou le lien de déconnexion.
Récemment, j'ai remarqué quelque chose que je n'ai jamais considéré comme un problème d'utilisation:
Survolez pour rendre les actions disponibles. Comme par exemple sur Twitter.com où le survol d'un Tweet affiche les commandes de retweet et de réponse.
Cela ne fonctionne tout simplement pas du tout sur les appareils tactiles. Il n'y a pas de vol stationnaire!
Une autre bête noire est les sites Web qui n'ouvrent pas de liens externes dans un nouvel onglet. Regardez, je suis en train de naviguer dans un arbre. Je m'attends à ce que chaque domaine sur lequel je représente une branche, lorsque j'en aurai fini, je fermerai l'onglet. Je ne veux certainement pas cliquer dix fois sur "Retour" pour monter dans la succursale.
Cacher ce que veulent les utilisateurs et leur donner ce que VOUS voulez qu'ils veuillent.
Un exemple est le support client. Au lieu de lister une grosse boîte grasse avec le numéro de téléphone/mail, etc., certaines entreprises affichent un FAQ comme moyen d'obtenir de l'aide et n'ont pas d'informations de contact sur cette page.
Les sites qui ont des structures de menu qui "flottent" de haut en bas de chaque côté de l'écran lorsque vous faites défiler. Je peux voir pourquoi ils l'ont fait, mais c'est souvent très distrayant et le plus souvent pas aussi "slick" que le designer l'avait visiblement espéré.
Un exemple auquel je fais référence se trouve ici: http://www.deluxe-menu.com/floatable-menu-sample.html
Sites d'AQ qui affichent deux fois la réponse acceptée.
A List Apart a un article d'Aza Raskin: "N'utilisez jamais d'avertissement lorsque vous voulez annuler".
http://www.alistapart.com/articles/neveruseawarning/
Les utilisateurs ont tendance à ignorer ou à ne pas aimer les fenêtres contextuelles "d'avertissement", mais offrir à un utilisateur la possibilité de "défaire" est beaucoup plus convivial.
Captchas
bien qu'ils soient assez populaires de nos jours, ils sont également considérés comme un problème d'accessibilité, en particulier pour les personnes qui ne reconnaissent pas les mots qu'ils ne connaissent pas (ou qui n'ont même pas de caractères spéciaux tels que ýáěíč sur leur clavier)
personnellement, j'utilise plutôt des questions rationnelles simples pour servir cette fonctionnalité
exemple: veuillez écrire le prochain nombre entier qui vient après le nombre onze
Sites qui utilisent beaucoup de CPU et de mémoire
J'ai généralement un tas d'onglets ouverts avec des questions/réponses de programmation de diverses listes de diffusion et beaucoup de ces sites ont un lourd Javascript en cours (l'installation d'Adblock a aidé, mais il y a toujours des sites lourds). Avec Chrome je peux enfin voir quels onglets sont à l'origine de cela.
La nouvelle recherche d'image Google améliorée met mon processeur à rude épreuve et occupe plusieurs centaines de mégaoctets. Beaucoup de ressources ont faim.
Avoir des éléments statiques sur votre page qui changent de couleur si vous placez le curseur de la souris dessus, mais ne faites rien si vous cliquez dessus. Dans la même ligue: hyperliens ou boutons où la zone cliquable est limitée au texte.
Redirection depuis l'URI racine vers un sous-répertoire ou un sous-domaine (sans supprimer/ajouter le www).