web-dev-qa-db-fra.com

Où placer les contrôles de filtre de liste?

Supposons que l'utilisateur - à partir d'un éditeur WYSIWYG backend CMS - ouvre une boîte de dialogue Insérer un lien. Lorsque vous disposez d'une liste de pages de destination de lien possibles,

  • où serait un endroit approprié pour placer des contrôles de filtre si l'interface utilisateur devait répondre aux utilisateurs inexpérimentés ainsi qu'aux utilisateurs expérimentés?

Supposons que les contrôles soient placés au-dessus de la liste, comme (1)enter image description here

Cela pourrait être un avantage pour les utilisateurs plus expérimentés, car ils ont un accès rapide aux outils de filtrage. Cependant, pour les utilisateurs plus novices, les outils de filtrage peuvent sembler nécessaires - en raison du flux implicite - plutôt que des outils d'assistance facultatifs (comme prévu du point de vue de la conception).

Une autre approche serait de placer les outils de filtrage à côté de la liste, comme (2):enter image description here

De cette façon, les outils de filtrage sont moins visibles.

Une troisième approche serait de masquer initialement les contrôles de filtrage, comme (3A & 3B):enter image description hereenter image description here

L'avantage ici est la réduction du nombre d'éléments d'interface utilisateur lors de la première rencontre. L'inconvénient est le clic supplémentaire pour ouvrir les options de filtrage. Cependant, un cookie peut être utilisé pour stocker l'état caché/visible des contrôles de filtre.

Peut-être que le style des options de filtre ressemble davantage à une barre d'outils, mais là encore, ce serait encore un autre élément d'interface utilisateur.

Des réflexions à ce sujet?

8
agib

À mon humble avis, vous ne devez pas basculer la visibilité des boutons de filtre. Restez simple et montrez à l'utilisateur les interactions prises en charge par l'interface utilisateur.

En ce qui concerne le choix de la position en haut/à droite, la réponse sera probablement évidente lors d'un test. Vous avez déjà quelques maquettes, donc ce n'est pas un gros travail de demander à quelques personnes de "terminer certaines tâches".

Je ne pense vraiment pas que ce soit important que les boutons soient en haut ou à droite, mais la position sera "plus fixe" en haut. Si vous placez les boutons à droite, vous pouvez vous retrouver avec un peu de distance entre la liste et les boutons. Par exemple. si l'utilisateur redimensionne l'écran ou la largeur de la liste.

Je considérerais les boutons en haut comme liés à la grille, alors que les boutons à droite sont des boutons plus généraux (comme un panneau d'action ).

Mise à jour

Placement des boutons lors du redimensionnement de la fenêtre:
enter image description here
enter image description here

Flux de travail visuel:
enter image description here
enter image description here

1

Pour répondre à ma propre question, inspirée par l'idée de Luke Wroblewski de se concentrer sur le mobile d'abord (par exemple http://www.lukew.com /ff/entry.asp?9 ) et l'empressement d'Apple à aplatir les hiérarchies d'informations, l'interface utilisateur pourrait ressembler à ceci:

enter image description here

Ici, le champ de recherche répondrait à la fois aux noms de page, aux noms d'ancêtre (écrits en gris sous les noms de page) et aux ID de page.

Malheureusement, une interface utilisateur comme celle-ci dépasse la portée de notre projet de refonte.

2
agib

J'aime 3a/3b. La plupart des utilisateurs n'auront pas besoin du filtre, et un utilisateur peut facilement sélectionner une page sans l'utiliser (s'ils ne le remarquent pas ou s'ils ne savent pas ce que cela signifie).

Cela semble être une interface utilisateur assez compliquée juste pour insérer un lien. Comment l'utilisateur manipule-t-il le texte du lien hypertexte? Le navigateur de site interne dont vous disposez peut être utile pour les utilisateurs qui ne sont pas avertis du Web, mais il peut être plus compliqué pour les utilisateurs qui le sont. Qui est votre public cible? S'agit-il d'un CMS à usage général ou est-il destiné à une industrie spécifique?

Vous pourriez envisager une boîte de dialogue plus traditionnelle avec deux champs: [URL] et [texte du lien]

1
Baa

Je dirais que les "filtres" peuvent être plus puissants et intuitifs pour les nouveaux utilisateurs que la liste des dossiers hiérarchiques.

Et si vous vouliez utiliser les filtres comme une recherche puissante et laisser la liste hiérarchique des dossiers facultative ?

search or filter as main

Les résultats de la recherche s'affichent à droite et changent à mesure que la recherche/les filtres changent. Le "afficher toutes les pages" ouvrirait la liste hiérarchique des dossiers, également à droite (qui peut être filtrée de la même manière à partir de là).

(Je fais l'hypothèse qu'il y a beaucoup de pages. Sinon, simplement afficher une liste de dossiers est plus rapide et les filtres ne sont pas du tout nécessaires.)

C'est peut-être plus que ce que vous pouvez changer dans l'application. Dans ce cas, rendez les filtres plus apparents et laissez-les attirer plus d'attention (visuellement et/ou dans les mots) que la liste des dossiers.

À l'avenir, vous pouvez même penser à fusionner les onglets interne et externe en une seule entrée/recherche. Comme la plupart des utilisateurs ne connaissent pas la différence entre les deux, cela peut aider beaucoup. L'interface réagit différemment si ce que vous saisissez peut être une URL externe (commençant par http, www, etc.) et/ou si le texte se trouve comme une page interne.

Mise à jour

J'ai un peu changé la maquette. Mettre davantage l'accent sur le premier champ de recherche et changer les listes déroulantes en champs de recherche également. Vous pouvez également afficher la maquette précédente si vous le souhaitez.

Parmi les premières maquettes que vous avez données, je ne préfère surtout pas celle 3A/B. Il ajoute un clic de plus et ne déclenche que plus de questions et de distraction pour les nouveaux utilisateurs. Si vous souhaitez afficher moins de filtres, je pense qu'il est préférable d'utiliser des champs, des icônes et des boutons décolorés/grisés.

1
Lode

Étant donné que vous souhaitez répondre aux besoins des utilisateurs inexpérimentés et expérimentés, ma première supposition serait d'opter pour votre option 3: masquer ces contrôles de filtre. Peut-être pourriez-vous également rendre l'état de visibilité persistant - si l'utilisateur quitte la page avec le contrôle développé, il sera toujours développé lors de sa prochaine visite.

Si vous développez un comportement de mise au point raisonnable, un clic ou une pression sur une touche ouvrira le contrôle du filtre et donnera instantanément la mise au point du clavier au champ le plus susceptible d'être utilisé, afin que l'utilisateur puisse simplement commencer à taper.

0
Jan