web-dev-qa-db-fra.com

Comment les utilisateurs réagissent-ils à la classe d'entrée non modifiable de Bootstrap?

Bootstrap fournit une classe .uneditable-input, qui peut être appliquée à un span/label/text/etc pour imiter l'apparence d'une entrée de texte désactivée.

Bootstrap le décrit comme:

"Entrées non modifiables: Présentez les données dans un formulaire qui n'est pas modifiable sans utiliser le balisage de formulaire réel."

<span class="input-xlarge uneditable-input">Some value here</span>

Je souhaite l'utiliser dans quelques zones de mon application où les données supplémentaires non saisies sont côte à côte avec des champs de saisie modifiables. Mon intention est d'aider à maintenir une conception de formulaire propre et empilable. Mais j'ai quelques hésitations sur lesquelles j'aimerais avoir des commentaires UX ...

Y a-t-il eu des tests utilisateur effectués avec cette approche? Cela donne-t-il à un utilisateur une mauvaise impression des données? L'utilisateur sera-t-il confus et réagira-t-il négativement? Normalement, quand il y a une entrée de texte désactivée, le L'utilisateur peut penser que le champ peut être modifié s'il a une sécurité, une configuration, etc. différentes. Mais dans ce cas, les données ne sont jamais modifiables - elles sont uniquement enveloppées dans un faux champ de saisie afin de pouvoir être présentées proprement sous une forme.

J'aimerais utiliser cette approche, mais je n'ai trouvé aucune recherche d'utilisateurs sur ce sujet. Quelqu'un peut-il faire la lumière sur ce sujet?

user-behaviorinput-fieldsuser-expectationuser-centered-designbootstrap
18
Rob DiMarzo

En tant qu'utilisateur, je penserai automatiquement qu'un champ de saisie de texte désactivé (ou quelque chose comme ça) signifie que le champ est finalement modifiable. Soit les données que je fournis sur d'autres champs les rendent invalides pour la modification, soit je n'ai pas les autorisations suffisantes pour modifier la valeur du champ.

Bootstrap CSS a le form-control-static classe que vous pouvez utiliser pour aligner correctement les champs en lecture seule:

<div class="form-horizontal">
    <!-- Other fields not shown for brevity -->
    <div class="form-group">
        <label class="control-label col-md-2">Date</label>
        <div class="col-md-10 form-control-static">
            January 12, 1695
        </div>
    </div>
 </div>
22
Mickael Caruso

Parfois, les données sont présentées dans un élément d'entrée désactivé car elles ne sont pas modifiables, mais c'est quelque chose que l'utilisateur voudra probablement sélectionner et éventuellement copier-coller ailleurs. Le placer dans un contrôle d'entrée le rend facilement sélectionnable, mais le rendre désactivé indique clairement que l'utilisateur doit utiliser exactement ce qui est fourni. C'est souvent le cas avec les données générées (c'est-à-dire que la saisie de votre nom d'utilisateur génère une URL pour accéder à votre profil mais elle n'est pas modifiable).

4
elemjay19

Visuellement, cela revient à définir un champ de saisie sur désactivé, il n'y a donc pas de différence du point de vue de l'interface utilisateur. La différence est principalement technique, car un faux champ de saisie ne renverra aucune valeur au serveur lorsque le formulaire est soumis, tandis qu'un champ de saisie désactivé le fera.

Si les données ne sont en aucun cas modifiables, je ne vois pas les avantages de laisser entendre qu'elles pourraient l'être.

4
Josef Engelfrost