Conception d'une boîte de texte, version intégrale

La construction de sites Web est difficile. Explorons la création d’un composant du début à la fin, dans le contexte d’une réalité exagérée où les projets ne sont pas parfaits.

Avez-vous déjà passé une heure (ou même une journée) à travailler sur quelque chose simplement pour jeter le tout en cinq minutes? Ce n’est pas seulement une erreur de code du débutant; c'est une situation réelle dans laquelle vous pouvez facilement vous retrouver, surtout si le problème que vous essayez de résoudre n'est pas bien compris au début.

C'est pourquoi je suis un grand partisan de la conception initiale. recherche d'utilisateurs et création souvent de multiples prototypes – également connu sous le nom de «Vous ne savez pas ce que vous ne savez pas». En même temps, il est très facile de voir quelque chose que quelqu'un d'autre a fait, qui peut Ils ont pris beaucoup de temps et pensent que c’est extrêmement facile parce que vous avez l’avantage de voir un produit fini.

Cette idée que la simplicité est facile a été résumée joliment par Jen Simmons en parlant de CSS Grid et des peintures de Piet Mondrian:

«Je me sens comme ces peintures, si vous les regardez avec le sentiment de« Pourquoi est-ce si important? J'aurais pu faire ça. »C'est comme si, bien oui, vous pouviez peindre ça aujourd'hui parce que nous sommes tellement habitués à ce genre de pensée, mais auriez-vous peint cela quand tout autour de vous était victorien – alors que tout autour de vous était cet autre style? »

Je pense que cela résume le sentiment que j'ai de voir des sites Web et des systèmes de conception qui ont du sens; c'est presque comme si le fait qu'ils aient du sens signifie qu'ils étaient faciles à faire. Bien sûr, c'est généralement le contraire; écrire le code est le plus simple, mais ce sont les réflexions et les processus qui demandent le plus d’efforts.

Dans cet esprit, je vais explorer la possibilité de créer une zone de texte, dans une exagération des situations. Nous espérons que d'ici la fin de cet article, nous pourrons tous insister davantage sur le fait que le parcours du début à la fin est rarement linéaire.

Résumé

Nous savons tous qu'une planification minutieuse et une compréhension des besoins des utilisateurs sont importantes pour la réussite d'un projet de n'importe quelle taille. Nous savons également tous que nous avons trop souvent besoin de nous dépêcher pour concevoir et développer rapidement de nouvelles fonctionnalités. Cela peut souvent signifier que notre bon sens et nos meilleures pratiques sont oubliés alors que nous nous éloignons pour aller rapidement à la tâche suivante sur la liste des tâches à faire. Rincer et répéter.

Aujourd'hui, notre tâche consiste à créer une zone de texte. Assez simple, il doit permettre à un utilisateur de saisir du texte. En fait, c'est tellement simple que nous laissons la tâche pour durer car il y a tellement d'autres choses importantes à faire. Puis, juste avant de rentrer chez nous, nous sourions et écrivions:

Nous y voilà!

Oh, attendez, nous avons probablement besoin de le connecter pour envoyer des données au backend lorsque le formulaire est envoyé, comme ça. :

C'est mieux. Terminé. Il est temps de rentrer à la maison.

Comment ajouter une nouvelle ligne?

Le problème avec l'utilisation d'une simple zone de texte est qu'elle est plutôt inutile si vous voulez taper beaucoup de texte. Pour un nom ou un titre, cela fonctionne bien, mais bien souvent, un utilisateur saisira plus de texte que prévu. Croyez-moi quand je dis que si vous laissez une zone de texte assez longtemps sans validation stricte, quelqu'un va coller la totalité de War and Peace. Dans de nombreux cas, cela peut être évité en ayant un nombre maximum de caractères.

Dans cette situation cependant, nous avons découvert que notre paresse (ou mauvaise hiérarchisation) de laisser à la dernière minute signifiait que nous ne tenions pas compte de la exigences réelles. Nous voulions simplement faire une autre tâche sur cette liste de tâches à faire éternelle et rentrer à la maison. Cette zone de texte doit être réutilisable. Parmi ses exemples d'utilisation, citons une zone de saisie de contenu, une zone de saisie de style Twitter et une zone de commentaires utilisateur. Dans tous ces cas, l'utilisateur est susceptible de taper beaucoup de texte, et une zone de texte de base ferait simplement défiler de côté. Cela peut parfois convenir, mais en général, c’est une expérience affreuse.

Heureusement pour nous, cette simple erreur ne tarde pas à se régler:

Maintenant, prenons un moment pour examiner cette ligne. A : aussi simple que possible sans supprimer le nom. N'est-ce pas intéressant, ou est-ce seulement mon esprit pédant que nous devons utiliser un élément complètement différent pour ajouter une nouvelle ligne? Ce n’est pas un type d’entrée, ni un attribut utilisé pour ajouter plusieurs lignes à une entrée. De plus, l'élément n'est pas à fermeture automatique mais une entrée est? Strange.

Ce «moment à considérer» m'a fait voyager en octobre 1993, parcourant les profondeurs de la liste de diffusion www-talk . Il y avait clairement beaucoup de discussions sur l'avenir du Web et sur ce que devrait contenir «HTML +». C'était en 1993 et ​​ils discutaient d'idées telles que qui n'était pas disponible avant HTML5, et Jim Davis a déclaré:

, mais vous pouvez utiliser des formulaires HTML dans une interface de jeu. »

Cela montre bien que le Web n’était pas conçu uniquement pour des documents, comme on le croit généralement. Marc Andreessen a suggéré d'avoir au lieu d'autoriser de nouvelles lignes dans le type de texte à une seule ligne [saying]: ( http://1997.webhistory.org /www.lists/www-talk.1993q4/0200.html)

www.lists)Le nettoyage du code du navigateur – il doit être traité différemment en interne. »

C'est une bonne raison de séparer au texte, mais ce n'est toujours pas ce que nous avons fini avec. Alors, pourquoi est-il son propre élément?

Je n'ai trouvé aucune décision dans les archives des listes de diffusion, mais le mois suivant, le document de discussion HTML + comportait l'élément et un note en disant:

«Dans la conception initiale des formulaires, les champs de texte multilignes étaient pris en charge par l'élément INPUT avec TYPE = TEXT. Malheureusement, cela entraîne des problèmes pour les champs avec des valeurs de texte longues, car SGML limite la longueur des littéraux d'attribut. Le HTML + DTD permet jusqu’à 1024 caractères (la valeur par défaut du SGML est de seulement 240 caractères!) »

ils n'étaient pas en mesure d'utiliser un attribut pour le texte long. En 1994, l’élément a été inclus, avec beaucoup d’autres éléments de HTML + tels que dans la spécification HTML 2.

Bon, ça suffit. Je pourrais facilement explorer les archives plus loin mais revenir à la tâche.

Styling A

Nous avons donc un défaut . Si vous les utilisez rarement ou si vous n'avez pas vu les paramètres par défaut du navigateur depuis longtemps, vous serez peut-être surpris. Une (faite presque uniquement pour du texte multi-lignes) ressemble beaucoup à une entrée de texte normale, sauf que la plupart des valeurs par défaut du navigateur sont plus foncées, la boîte légèrement plus grande et les lignes en bas à droite. Ces lignes sont la poignée de redimensionnement; ils ne font pas réellement partie de la spécification, de sorte que les navigateurs les traitent tous (à l’instar des jeux de mots) à leur manière. Cela signifie généralement que la poignée de redimensionnement ne peut pas être restylée, même si vous pouvez désactiver le redimensionnement en définissant resize: none sur . Il est possible de créer un handle personnalisé ou d'utiliser des pseudo-éléments spécifiques au navigateur tels que :: - webkit-resizer .

Il est important de comprendre les valeurs par défaut, notamment en raison de la capacité de redimensionnement. C’est un comportement très unique. L'utilisateur peut faire glisser pour modifier la taille de l'élément par défaut. Si vous ne remplacez pas les tailles minimum et maximum, la taille peut être aussi petite que 9px × 9px (lorsque j'ai vérifié Chrome) ou aussi grande que la patience de la faire glisser. C’est quelque chose qui peut causer du chaos avec le reste de la mise en page du site si cela n’est pas pris en compte. Imaginez une grille où est dans une colonne et une boîte bleue dans une autre; la taille de la boîte bleue est purement déterminée par la taille de la .

À part cela, nous pouvons aborder le style de comme n'importe quelle autre entrée. Voulez-vous changer le gris autour du bord en épais trait vert? Bien sûr, vous y allez: frontière: 5px vert pointillé; . Vous souhaitez recadrer le focus dans lequel beaucoup de navigateurs ont une ombre de boîte légèrement floue? Changez l’esquisse de manière responsable, mais vous savez que c’est important pour l’accessibilité. Vous pouvez même ajouter une image de fond à votre si cela vous intéresse (je peux penser à quelques idées qui auraient été populaires lorsque le design skeuomorphique était plus célèbre).

Scope Creep

la portée se glisse dans notre travail, que ce soit un client qui ne pense pas que la version finale corresponde à son idée ou que vous essayiez juste de mettre un petit tweak et que vous finissiez toujours pour finir. Donc (appréciant de créer le personnage d'un chef de projet exagéré en nous disant ce que nous devons construire) ont décidé que notre n'est tout simplement pas suffisant. Oui, il est maintenant multi-ligne, et c’est génial, et oui, il est même plus "pop" avec son nouveau style. Pourtant, cela ne correspond tout simplement pas aux besoins très vagues des utilisateurs auxquels je pensais à peine après que nous ayons pensé que nous avions presque fini.

Que se passe-t-il si l'utilisateur met des milliers de mots? Ou fait glisser la poignée de redimensionnement jusqu'à présent, il brise la mise en page? Il doit être réutilisable, comme nous l’avons déjà mentionné, mais dans certaines situations (comme une boîte à notes «Twittereqsue»), nous aurons besoin d’une limite. La tâche suivante consiste donc à ajouter une limite de caractères. L'utilisateur doit être capable de voir combien de caractères il lui reste.

De la même manière que nous avons commencé avec au lieu de il est très facile de penser que l'ajout de maxlength attribut résoudrait notre problème. C'est un moyen de limiter la quantité de caractères que l'utilisateur saisit, il utilise la validation intégrée du navigateur, mais il ne peut pas afficher le nombre de caractères restants.

Nous avons commencé avec le code HTML, puis ajouté le CSS, maintenant il est temps de faire du JavaScript. Comme nous l’avons vu, charger comme un taureau dans un magasin de porcelaine sans s’attarder sur les bonnes approches peut vraiment nous ralentir à long terme. Surtout dans les situations où un grand refactor est nécessaire pour le changer. Alors réfléchissons à ce compteur; il doit être mis à jour au fur et à mesure que l'utilisateur tape, nous devons donc déclencher un événement lorsque l'utilisateur tape. Il doit ensuite vérifier si la quantité de texte est déjà à la longueur maximale.

Alors, quel gestionnaire d'événement devrions-nous choisir?

• changez
  Intuitivement, il peut être judicieux de choisir l'événement de modification. Il fonctionne sur et fait ce qu'il dit sur l'étain. À part cela, il ne se déclenche que lorsque l’élément perd le focus, il ne serait donc pas mis à jour lors de la frappe. Mais il ne se déclenche pas lorsque les caractères sont supprimés. Le compteur ne se met donc pas à jour après avoir appuyé sur Retour arrière. Il ne se déclenche pas non plus après un copier / coller.
• keyup
  Celui-ci est assez proche, il se déclenche chaque fois qu'une touche a été pressée (y compris le bouton retour arrière). Il se déclenche donc lors de la suppression de caractères, mais pas après un copier / coller.
• input
  C'est celui que nous voulons. Cela se déclenche chaque fois qu'un personnage est ajouté, supprimé ou collé.

Ceci est un autre bon exemple de la façon dont l'utilisation de notre intuition n'est parfois pas suffisante. Il y a tellement de bizarreries (surtout en JavaScript!) Qu'il est important de prendre en compte avant de commencer. Donc, le code pour ajouter un compteur qui se met à jour doit mettre à jour un compteur (ce que nous avons fait avec un span qui a une classe appelée counter ) en ajoutant un gestionnaire input au . La quantité maximale de caractères est définie dans une variable appelée maxLength et ajoutée au code HTML. Par conséquent, si la valeur est modifiée, elle est modifiée à un seul endroit.

 var textEl = document.querySelector ('textarea ')
var counterEl = document.querySelector ('. counter')
var maxLength = 200
    
textEl.setAttribute ('maxlength', maxLength)
textEl.addEventListener ('input', (val) => {
var count = textEl.value.length
counterEl.innerHTML = $ {count} / $ {maxLength}
})

Compatibilité avec les navigateurs et amélioration progressive

L'amélioration progressive est un état d'esprit dans lequel nous comprenons que nous n'avons aucun contrôle sur ce que l'utilisateur voit exactement sur son écran. Nous essayons plutôt de guider le navigateur. La conception Web réactive est un bon exemple: nous construisons un site Web qui s’adapte au contenu de la fenêtre de taille donnée sans définir manuellement la taille de chaque taille. Cela signifie que d’une part, nous attachons une grande importance à ce qu’un site Web fonctionne sur tous les navigateurs et tous les appareils, mais d’autre part, nous ne nous soucions pas du fait qu’ils soient identiques.

Nous n'avons pas défini de valeur par défaut pour le compteur. La valeur par défaut est actuellement "0/200" si 200 étaient la longueur maximale; cela a du sens mais a deux inconvénients. Le premier n’a pas de sens au premier abord. Vous devez commencer à taper avant qu'il ne soit évident que vous mettez à jour les 0 mises à jour. L'autre inconvénient est que les mises à jour 0 que vous tapez, ce qui signifie que l'événement JavaScript ne se déclenche pas correctement (peut-être que le script n'a pas téléchargé correctement ou utilise JavaScript qu'un ancien navigateur ne prend pas en charge tel que la double flèche dans le code ci-dessus) ) alors il ne fera rien. Une meilleure façon serait de bien réfléchir avant. Comment procéderions-nous pour le rendre utile lorsqu'il fonctionne à la fois et quand il ne l'est pas?

Dans ce cas, nous pourrions faire en sorte que le texte par défaut soit limité à 200 caractères. L'utilisateur verrait toujours la limite de caractères mais cela ne ferait que réagir à la limite. Cependant, lorsque JavaScript fonctionne, il se met à jour au fur et à mesure de leur frappe et peut indiquer «200 caractères restants» à la place. C'est un changement très subtil, mais cela signifie que même si deux utilisateurs peuvent avoir des expériences différentes, ils n'obtiennent pas non plus une expérience brisée.

Un autre défaut que nous pourrions définir est la longueur maximale sur l'élément après avec JavaScript. Sans cela, la version de base (celle sans JS) serait capable de taper au-delà de la limite.

User Testing

Il est très bien de tester sur différents navigateurs et de réfléchir aux différentes permutations des périphériques. site Web d'une manière différente, mais les utilisateurs sont-ils en mesure de l'utiliser?

De manière générale, non. Je suis constamment choqué par les tests des utilisateurs; les gens n'utilisent jamais un site comme vous le souhaitez . Cela signifie que le test utilisateur est crucial.

Il est assez difficile de simuler une session de test utilisateur dans un article, donc pour les besoins de cet article, je vais me concentrer sur un point avec lequel les utilisateurs ont du mal sur divers projets.

L'utilisateur écrit avec plaisir, reste à 0 caractères, puis reste bloqué. Ils oublient ce qu’ils étaient en train d’écrire, ou ils n’ont pas remarqué qu’ils avaient cessé de taper. S'ils sont en train de taper sans trop prêter attention, ils peuvent alors atteindre la longueur maximale sans s'en rendre compte. C'est une expérience frustrante.

Une façon de résoudre ce problème consiste à autoriser le sur-typage, afin que la longueur maximale soit toujours valide lorsqu’elle est envoyée, mais elle permet à l’utilisateur de taper autant qu’il le souhaite avant de le modifier. soumission. C'est une bonne solution car elle redonne le contrôle à l'utilisateur.

Bon, comment implémenter le sur-typage? Au lieu de sauter dans le code, passons en revue en théorie. maxlength n'autorise pas le sur-typage, il arrête juste de permettre l'entrée une fois qu'il atteint la limite. Nous devons donc supprimer maxlength et écrire un équivalent JS. Nous pouvons utiliser le gestionnaire d'événements en entrée comme nous l'avons fait auparavant, comme nous le savons, sur le collage, etc. Dans ce cas, le gestionnaire vérifie si l'utilisateur a tapé plus que la limite et si c'est le cas, le texte du compteur peut changer pour dire «10 caractères de trop». La version de base (sans le JS) n’aurait plus de limite, donc un moyen terme utile pourrait être d’ajouter la longueur maximale à l’élément HTML et supprime l'attribut à l'aide de JavaScript.

Ainsi, l'utilisateur verrait qu'il dépasse la limite sans être coupé lors de la frappe. Il faudrait encore une validation pour s'assurer qu'il n'est pas soumis, mais cela vaut le peu de travail supplémentaire pour rendre l'expérience utilisateur bien meilleure.

Concevoir le sur-type

Cela nous amène à une position assez solide: l'utilisateur peut maintenant utiliser n'importe quel périphérique et acquérir une expérience satisfaisante. S'ils tapent trop, ils ne vont pas les couper;

Il y a plusieurs façons de concevoir cela différemment, alors regardons comment Twitter le gère:

Twitter a lancé son principal tweet depuis le lancement de la société. La version actuelle utilise beaucoup de techniques que nous pourrions envisager d'utiliser.

Au fur et à mesure que vous tapez sur Twitter, il y a un cercle qui se termine lorsque vous atteignez la limite de 280 caractères. disponible jusqu'à ce que vous soyez à 20 caractères de la limite. À ce stade, le cercle incomplet devient orange. Une fois que vous avez 0 caractère, il devient rouge. Après les 0 caractères, le compte à rebours devient négatif; il ne semble pas y avoir de limite à ce que vous pouvez surpasser (j'ai essayé jusqu'à 4 000 caractères restants) mais le bouton tweet est désactivé pendant le sur-typage.

Cela fonctionne de la même manière que notre la principale différence étant les caractères représentés par un cercle qui met à jour et indique le nombre de caractères restants après 260 caractères. Nous pourrions l'implémenter en supprimant le texte et en le remplaçant par un cercle SVG.

L'autre chose que fait Twitter est d'ajouter un arrière-plan rouge derrière le texte surdimensionné. Cela rend tout à fait évident que l'utilisateur va devoir éditer ou supprimer une partie du texte pour publier le tweet. C'est une très belle partie du design. Alors, comment pourrions-nous mettre en œuvre cela? Nous recommençons depuis le début.

Vous vous souvenez de la partie où nous avons réalisé qu'une zone de texte de base ne nous donnerait pas de multiligne? Et qu'un attribut maxlength ne nous donnerait pas la possibilité de surpasser? C'est l'un de ces cas. Pour autant que je sache, il n'y a rien dans CSS qui nous donne la possibilité de styliser des parties du texte à l'intérieur d'un . C'est le point où certaines personnes suggèrent des composants Web, car nous aurions besoin d'un prétexte . Nous aurions besoin d'une sorte d'élément - probablement un div - avec contenteditable et dans JS, nous aurions besoin d'envelopper le texte surdimensionné dans un span stylé avec CSS.

-JS version ressemble à alors? Eh bien, cela ne marcherait pas du tout parce que, même si contenteditable fonctionnera sans JS, nous n’aurions aucun moyen de faire quoi que ce soit avec. Il faudrait donc avoir un par défaut et le supprimer si JS est disponible. Nous aurions également besoin de faire beaucoup de tests d'accessibilité, car même si nous pouvons faire confiance à un accessible sur la base des fonctionnalités du navigateur, il est plus sûr que de créer vos propres composants. Comment Twitter le gère-t-il? Vous l'avez peut-être vu; Si vous êtes dans un train et que votre code JavaScript ne se charge pas lorsque vous entrez dans un tunnel, vous vous retrouvez avec une version héritée de Twitter vieille de dix ans, sans aucune limite de caractères.

la limite de caractère? Twitter recharge la page avec un message d'erreur indiquant: «Votre Tweet dépassait la limite de caractères. Vous devrez être plus intelligent. »Non, Twitter. Vous devez être plus intelligent.

Retro

La seule façon de conclure cette dramatisation est une rétrospective. Qu'est-ce qui s'est bien passé? Qu'avons-nous appris? Que ferions-nous différemment la prochaine fois ou que changerions-nous complètement?

Nous avons commencé très simplement avec une zone de texte de base; À certains égards, c'est une bonne chose car il peut être trop facile de trop compliquer les choses dès le départ et une approche MVP est bonne. Cependant, avec le temps, nous avons réalisé à quel point il est important d'avoir une pensée critique et de réfléchir à ce que nous faisons. Nous aurions dû savoir qu'une zone de texte de base ne serait pas suffisante et qu’une manière de définir une longueur maximale serait utile. Il est même possible que, si nous avons déjà mené ou participé à des sessions de recherche d’utilisateurs, nous aurions pu anticiper la nécessité de permettre le dépassement. En ce qui concerne la compatibilité des navigateurs et les expériences des utilisateurs, envisager une amélioration progressive dès le début aurait permis de résoudre la plupart de ces problèmes potentiels.

Un changement pourrait donc être beaucoup plus proactif au lieu de la tâche, en pensant que le code est facile lorsque le code est la partie la moins importante.

Dans le même ordre d'idées, nous avons eu le "fluage de portée" de maxlength et Nous avons anticipé cela, nous préférerions ne pas avoir de marge de progression du tout. Donc, toute personne impliquée dès le début serait très utile, car une approche multidisciplinaire variée, même pour de petites tâches comme celle-ci, peut sérieusement réduire le temps nécessaire pour déterminer et corriger tous les réglages imprévus.

Back To The Real World Bon, je peux me plonger dans ce projet inventé, mais je pense que cela montre bien à quel point les tâches les plus simples peuvent être compliquées. Être axé sur l'utilisateur, avoir une mentalité d'amélioration progressive et réfléchir à la situation dès le début peut avoir un impact réel sur la rapidité et la qualité de la livraison. Et je n'ai même pas mentionné les tests!

Je suis entré dans les détails de l'histoire du et des auditeurs d'événements à utiliser, certains peuvent sembler exagérés, mais je trouve fascinant de bien comprendre les subtilités du web, et il peut souvent aider à démystifier les problèmes auxquels nous serons confrontés à l'avenir.

(ra, il)