Le guide du débutant pour la mauvaise conception de l'interface utilisateur

Bref aperçu de plusieurs points essentiels à éviter pour créer une interface utilisateur efficace:

Créer une interface utilisateur efficace n’est pas si difficile. Offrir une bonne expérience utilisateur n’est pas «sorcier». Et pourtant… nous rencontrons maintes et maintes fois des exemples dans la nature des mauvaises interfaces utilisateur. Vraiment mauvais. Horrible, en fait. Voici une liste de quelques exemples que j'ai rencontrés sur de vrais sites Web. Éviter ces erreurs courantes ne rendra peut-être pas votre interface utilisateur fabuleuse, mais ce sera certainement un pas dans la bonne direction. Plus important encore, cela me rendra heureux.

Ce sont toutes des choses que j'ai vues récemment.

Numéro 1: Soyez cohérent

Je me rends compte que les grands sites sont développés par différentes équipes sur différentes périodes, mais ce n’est vraiment pas mon problème. Il est agaçant d’utiliser un type de composant sur un écran, puis un autre sur un autre. Par exemple, si je sélectionne une date avec un sélecteur de date pour programmer un paiement, il est ennuyeux d’utiliser un sélecteur de date différent ultérieurement pour choisir une plage dans laquelle afficher les transactions. Oui, je sais, c’est une petite chose, mais c’est irritant et il n’ya aucune raison de le faire.

S'il vous plaît, où que vous soyez avec vos composants, veillez à conserver une bibliothèque couvrant l'ensemble du site. Bien sûr, si vous utilisez une bibliothèque telle que Kendo UI dans vos applications, vous n’aurez plus à vous en soucier. La normalisation vient avec le paquet. Kendo UI est livré avec tous les composants dont vous avez besoin pour toute interface utilisateur. Vous pouvez appliquer des thèmes standard ou personnalisés à tous vos composants à la fois. Regardez la liste des composants dans l'interface utilisateur de Kendo.

Numéro 2: Mettez à jour votre code, ou laissez quelqu'un d'autre le faire!

Le monde change. Votre interface utilisateur doit changer avec elle. Surtout quand vous avez astucieusement ajouté tout cela en vérifiant votre interface utilisateur en premier lieu.

Voici un bon exemple. Mon email personnel est john@savix.net . Savix.net est mon propre domaine. Je l’utilise depuis un moment et je l’ai imaginé après avoir été trop lent et avoir manqué Willoughby.com et johnwilloughby.com. Ce dernier est actuellement disponible, mais à un prix plus élevé que celui que je souhaite payer. Imaginez ma joie quand ils ont ouvert tous ces nouveaux TLD et que j'ai pu saisir Willoughby.email. Ouais! Je déplace maintenant mon courrier électronique vers john@willoughby.email .

Eh bien, au moins à certains endroits. Parce que dans de nombreux endroits, lorsque je tente de saisir cette adresse électronique, on me dit que ce n’est pas une adresse électronique valide, car aucun domaine n’est de la forme xxx@yyy.email et que je ne peux pas l’utiliser. Ce qui signifie que le code est assez ancien et a été écrit avant l’ouverture de tous ces nouveaux TLD qui ne sont plus deux ou trois caractères. Ayant finalement réussi à obtenir un nom de domaine avec mon nom actuel, je suis un peu vexé lorsque je tombe sur cette affaire. Et je l’ai rencontré plus d’une fois. Cela fait maintenant plusieurs années que les nouveaux TLD ont été publiés et ils planifiaient depuis plus longtemps. Réveillez-vous les gens!

Vous voulez savoir comment faire une validation facile? Jetez un coup d’œil à cet exemple du Validateur Kendo UI .

Numéro 3: Ne présentez pas de mauvaises options

En voici un qui m’a énervé. Quiconque a utilisé ce système de réservation n’a utilisé que deux menus déroulants numérotés. Choisissez un nombre entre 1 et 31 pour le jour, 1 et 12 pour le mois. Oh mon Dieu, par où commencer? Pour commencer, aurait-il été si difficile d'utiliser des noms pour les mois plutôt que des chiffres? Deuxièmement, vous pouvez choisir une date qui n'existe pas, comme le 31 février. Enfin, choisir deux chiffres au lieu de choisir un calendrier est tout simplement gênant. Ne le fais pas.

Vous souhaitez en savoir plus sur l'utilisation des datepickers? Consultez ce blog sur “ Comment utiliser un composant d'interface utilisateur jQuery DatePicker dans votre application Web .”

Numéro 4: Ne soyez pas paresseux

Voici un aperçu de quelques autres cela me rend fou et la plupart tombent sous le coup de ne pas obliger l'utilisateur à faire des choses que vous pouvez faire à la place.

Si vous allez me donner une longue liste de choix – comme mon pays – et que 90% des gens en utilisent un ou deux sélections, puis placez-les en haut de la liste. Si la plupart de vos clients se trouvent aux États-Unis, ne me faites pas défiler dans 50 pays pour le trouver. Si ce n’est pas un pays mais 3 ou 4 alors très bien, amenez-les en haut de la liste. Pour obtenir un crédit supplémentaire, découvrez où je suis connecté et présélectionnez ce pays.

Pour en savoir plus sur l'utilisation efficace des listes déroulantes dans le blog “ Comment utiliser un composant d'interface utilisateur jQuery DropDownList dans votre site Web App . ”

Formats de date – S'il est vraiment trop difficile pour vous d'utiliser un sélecteur de date réel qui me permet de sélectionner un calendrier, vous devez au moins faire un effort pour me permettre d'entrer la date de toute façon. Rien ne me rend plus fou que lorsqu'un ordinateur me fait entrer des zéros non significatifs. Soyez flexible, faites le travail pour moi. Et au-delà des zéros, si Google peut comprendre que «août» signifie «août», vous le pouvez aussi.

Vous souhaitez en savoir plus sur la manière d'ajouter des fonctionnalités de saisie semi-automatique à vos formulaires? Consultez ce blog sur « Comment utiliser un composant d’interface utilisateur à complétion automatique jQuery dans votre application Web ».

Enfin, ne me forcez pas à saisir des informations redondantes. J'entends des anges chanter à chaque fois que certains sites me demandent d'entrer mon code postal et peuplent la ville et l'état pour moi. Bien sûr, laissez-moi le changer si je veux – et laissez-moi voir la ville et l’état au cas où j’aurais fait une faute de frappe sur le zip, mais ne me demandez pas d’entrer la ville, l’état et le zip.

Tout va bien maintenant

Voilà les quatre marre-à-coude de la mauvaise conception de l’interface utilisateur, ainsi que des liens vers des composants susceptibles de vous aider à éviter ces erreurs. N'oubliez pas: l'application est censée faciliter la vie de l'utilisateur, et non l'inverse. J'ai donné des liens vers des exemples jQuery mais rappelez-vous que Kendo UI existe également en versions Angular, React et Vue, vous pouvez donc en tirer parti dans le cadre de votre choix.

Quelles sont vos plus grandes marmottes de l'interface utilisateur, Ou encore, vos exemples préférés de quand l'interface utilisateur a été mis en œuvre de la bonne façon? N'hésitez pas à partager vos propres pensées dans les commentaires.