web-dev-qa-db-fra.com

Comment limiter avec élégance la zone de texte saisie par la taille et non par le nombre de caractères.

Je suis en train de créer une application Web qui nécessite que l'utilisateur saisisse du texte et des images sur une page PDF qui sera ensuite imprimée sous forme de lettre. Cette page aura une zone spécifiée pour le texte et un police spécifiée. Cette police sera une police personnalisée à largeur variable, mais l'utilisateur ne pourra pas modifier la taille ni appliquer de mise en forme au texte.

Jusqu'à présent, ma solution consiste à configurer une entrée de zone de texte d'une largeur et d'une hauteur fixes, puis à l'aide de javascript, détecter quand un utilisateur a tapé plus de texte qu'il n'y en aura sans faire défiler et arrêter sa saisie de texte et afficher une alerte. Étant donné que je peux utiliser des polices personnalisées dans cette zone de texte, je devrais pouvoir obtenir une approximation très proche de l'espace limité disponible sur la lettre et empêcher l'utilisateur d'ajouter trop de texte.

Pour compliquer les choses, la lettre aura une page recto et verso avec des zones de texte de taille égale, et je dois montrer que le texte ira à la dernière page.

Voici l'écran d'édition tel qu'il fonctionne en ce moment. Pouvez-vous s'il vous plaît me donner quelques suggestions sur la façon de rendre cela plus convivial? Les utilisateurs comprendront-ils cela lorsqu'ils le verront? Nous ferons probablement des tests utilisateurs formels dans quelques semaines. text entry page

Les utilisateurs pourront prévisualiser la lettre avec toutes les images et le texte en place sur la page après avoir terminé l'écriture.

pdate: Voici une nouvelle maquette prenant en compte certaines des suggestions ci-dessous.

new text entry mockup

13
sirtimbly

J'aime la zone de texte à hauteur fixe que vous avez. Vous pouvez utiliser une image d'arrière-plan pour la faire ressembler à une "vue de mise en page".

L'image diviserait la zone de texte en deux sections égales avec une fine bordure grise autour de chaque section, de sorte qu'il semble que chaque section est une page blanche au-dessus d'un arrière-plan plus sombre. Il pourrait être utile de mettre un filigrane sur chaque page, étiqueté "avant" et "arrière".

Si l'utilisateur tape plus de deux pages, la zone de texte peut commencer à défiler pour autoriser du texte supplémentaire. Mais ce texte déborderait de la dernière page et sur l'arrière-plan plus sombre.

Je pense que la métaphore de la mise en page communiquerait assez bien l'idée sans avoir à utiliser de mots. Cependant, il ne serait probablement pas mauvais d'ajouter un message d'avertissement une fois que le texte déborde de la zone allouée.

2

J'aime ce que tu y vas. C'est tout à fait unique.

Quelques autres idées que vous pourriez utiliser ou au moins spark quelque chose:

  1. Lorsqu'ils réussissent le nombre de caractères, le texte est coloré en rouge.

  2. Demandez à toutes les lignes après un point en rouge.

  3. Avoir un texte d'état lors de la frappe et avoir 3-4 états: (1. Tapez votre message ici, 2. (100 mots dedans) C'est tout, il vous reste beaucoup d'espace, 3. (300 mots) Ne vous inquiétez pas encore il reste 200 mots, 4. (100 à partir de la fin) Attention, il ne vous reste que 100 caractères (et 100 décompteront à mesure qu'ils taperont à partir de 99, 98, 87 ...)

3
jonshariat

J'aime ce que tu as fait.

Quand affichez-vous pour la première fois le message "Approche"? Sera-ce toujours le cas quand il reste environ 6 lignes? Si je comprends bien l'interface, le nombre de caractères qu'un utilisateur peut saisir dans la zone différera d'un utilisateur à l'autre, d'une entrée à l'autre. Mais je pense qu'il serait utile de choisir un "seuil" prévisible - de cette façon, l'utilisateur sait toujours: "Oh, cela m'avertira lorsque j'aurai environ X lignes à parcourir."

Le message "La zone de texte a été dimensionnée ..." a disparu de votre nouvelle maquette - je pensais que c'était un excellent retour en ligne.

Une petite note - la position de "Front Page" et "Back Page" me semble tout simplement maladroite. Je pense qu'ils pourraient avoir plus de poids pour être alignés à mi-chemin sur chaque page, plutôt qu'en tête. Ça pourrait être juste moi.

2
gef05

Vous pouvez calculer une hauteur de ligne approximative avec JavaScript et afficher un avertissement lorsqu'ils se rapprochent de la limite, comme "Il reste environ 3 lignes".

1
Zian Choy

J'aime l'idée - c'est une belle façon de donner un retour sur la façon dont le résultat final apparaîtra sans essayer d'être précisément WYSIWYG.

Une chose que je remettrais en question (et ce n'est pas compliqué) est l'idée de donner la rétroaction en termes de lignes à parcourir. Je m'attends à (mais ne dispose que de preuves anecdotiques) que les utilisateurs sont plus habitués au concept de nombre de mots plutôt que nombre de lignes, donc donner des commentaires sur les mots à parcourir pourrait être plus facile à comprendre pour vos utilisateurs.

1
edeverett