Est-il acceptable de faire ressembler un champ de texte à une ligne d'écriture?
Mon concepteur aimerait implémenter un champ de texte qui tombe en survol sur un fond blanc, et qui n'a qu'une bordure inférieure pour définir le champ. En outre, le concepteur aimerait voir un curseur clignotant immédiatement visible dans le champ de texte lorsque la boîte descend - et cela indiquerait à l'utilisateur que le champ est modifiable. Donc, essentiellement, le champ ressemblera à une écriture en ligne.
Ma pensée est qu'il n'y a pas assez de séparation visuelle ou d'indication que le champ est modifiable. surtout sur le fond blanc. Ai-je tort de penser cela, et devrais-je recommander une approche de conception différente à cette boîte?
Il est difficile de répondre à la question sans voir davantage le schéma de conception, mais je vais quand même vous donner les lignes directrices.
Votre question concerne un problème de accessibilité. L'affordance est un signal visuel qui implique une action. Par exemple: une fente mince dans une machine à soda indique l'endroit où l'utilisateur doit insérer sa pièce, et le levier de traction dans la porte d'une voiture implique que l'utilisateur doit tirer la porte pour l'ouvrir. La suppression de ces repères visuels peut induire l'utilisateur en erreur quant à la manière dont l'instrument doit être utilisé.
Dans la conception de sites Web, nous avons des conventions fondées sur la façon dont les éléments doivent ressembler. Dans le cas d'un champ de texte, la convention est une boîte bordée de gris avec un fond blanc. La suppression d'un ou de plusieurs de ces éléments diminue la disponibilité du champ. Je prédis qu'il sera plus difficile pour les utilisateurs de reconnaître qu'il s'agit d'un champ de texte, et donc de créer de la confusion et de la frustration . Je crois que votre designer le sait aussi, et c'est pour cette raison qu'il a suggéré d'autres indices supplémentaires (le curseur clignotant).
Mais ne prenez pas ma parole pour ça. Faites un test d'utilisabilité rapide et bon marché . Rendez visite à 3 personnes qui n'ont pas participé à la conception de ce site Web, montrez-leur une capture d'écran de la conception actuelle et demandez-leur de "lancer une recherche". Ne vous contentez pas de remarquer s'ils reconnaissent ou non le champ de recherche. Faites attention au temps que cela leur prend, à ce qu'ils disent pendant qu'ils le recherchent ("où est ce champ de recherche dieu d ***?!")) Et comment ils réagissent quand ils le trouvent enfin (ou pas! ). Si vous sentez qu'ils ont du mal, retournez voir votre designer et demandez-lui de rendre le terrain un peu plus conventionnel.
* Une exception serait si ce site Web tente de transmettre un message d'innovation et de "violation des règles" (par exemple, le site Web d'un studio interactif). Si tel est le cas, et que d'autres éléments sont également non conventionnels, vous devez également vous en tenir au champ de texte non conventionnel.
Je peux penser à au moins un outil populaire qui utilise cette méthode de gestion des champs de formulaire — 37signals ' Basecamp :
L'effet est particulièrement intéressant lors de l'édition du nom de quelque chose que vous visualisez déjà. Par exemple, dans un projet donné:
Vous pouvez cliquer sur le nom ou la description du projet pour le rendre modifiable en ligne:
Cela permet au champ de partager la conception visuelle de l'exécution finale qui, dans certains scénarios, peut aider l'utilisateur à choisir les mots précis qu'il utilise lors de l'exécution finale.
Quelques considérations importantes, cependant:
- Sur l'écran "nouveau projet", ils utilisent du texte d'espace réservé au lieu d'étiquettes, ce qui permet de décrire l'objectif prévu de ce champ et de préciser que le champ est un endroit pour le texte
- Ils mettent en évidence le texte de l'espace réservé afin que vous sachiez qu'il est modifiable
- Lorsqu'ils ne mettent aucun texte d'espace réservé (par exemple avec les champs de courrier électronique), ils ont dû fournir une instruction très explicite pour ce qui se passe dans ces champs.
Vous pouvez masquer la zone de texte par défaut et augmenter l'immobilier du bouton "Rechercher". Lorsque l'utilisateur souhaite effectuer une recherche et ne trouve pas de champ de recherche évident, il clique très probablement sur le bouton "Rechercher", qui sert à afficher la zone de texte à partir de laquelle il reprend son objectif initial de soumettre la requête de l'utilisateur.
n focus clair sur la boîte est nécessaire lorsque le mode d'édition est activé, Comme vous l'avez dit, il devrait y avoir une certaine séparation visuelle pour la boîte. Parce que l'utilisateur peut quitter la page pendant quelques secondes ou minutes et revenir et devrait pouvoir revenir facilement là où il est parti.
Cela peut également être fait avec le style de votre concepteur en mettant en évidence la couleur de la ligne inférieure de la zone de texte et en donnant peu de différence visuelle pour la zone de texte.
Ma suggestion serait de concevoir un meilleur état de mise au point pour le champ de saisie. De nombreux concepteurs oublient ces sélecteurs utiles.
Ainsi, sans focus, vous pouvez avoir juste une bordure inférieure de 1px.
Une fois que l'élément a: focus, ajoutez une bordure et peut-être même une ombre lumineuse autour de l'élément d'entrée.
Ce thème est en fait recommandé pour Android car l'utilisateur sait déjà à quoi ressemblera le champ de texte. Peu de sites utilisent mais ce n'est pas convivial pour les pages Web de bureau.