web-dev-qa-db-fra.com

Barre latérale contextuelle et cohérence

Je conçois un service de site Web pour les collectionneurs de pièces et j'ai une question concernant la navigation. Le flux de contrôle est le suivant:

  1. L'utilisateur sélectionne le pays (à partir d'une carte ou d'une liste alphabétique).
  2. L'utilisateur sélectionne une période dont le début marque une réforme monétaire (c'est-à-dire Allemagne - Troisième Reich 1933-1945).
  3. L'utilisateur voit tous les différents types de pièces par valeur faciale (c.-à-d. Si le pays sélectionné est les États-Unis, l'utilisateur verrait tous les types de pièces d'un cent (Lincoln Cent, Union Shield cent, etc.), puis cinq cents et ainsi de suite). Sélectionne un type.
  4. Voir des informations détaillées sur le type et une liste de tous les problèmes (par exemple Lincoln cent: 1941, 1941-S, 1941-D, 1942, ...) avec des informations détaillées sur chacun d'eux.

Chaque page aura un fil d'Ariane, qui indique le chemin vers la page actuelle pour la navigation. Je pense également à ajouter une barre latérale contextuelle à gauche, qui contient les éléments de la page précédente (par exemple, si un utilisateur se trouve dans la page de type de pièce de détail, la barre latérale affichera une liste d'autres types au cours de la même période). Voici une visualisation simple du flux:

enter image description here

Les flèches représentent les destinations des hyperliens. Les rectangles sombres représentent les barres latérales contextuelles. Le fil d'Ariane affiché apparaîtra dans la page la plus profonde (type de pièce).

Cela me semble très utile (pas besoin de recharger une page entière pour choisir un autre frère). Mais cela ne serait-il pas un peu écrasant (surtout pour les utilisateurs novices)? Je suis également préoccupé par la cohérence. Chaque barre latérale aurait son contenu présenté différemment. Je sais que c'est plutôt abstrait à ce stade. Mais peut-être avez-vous des idées pour améliorer cela?

3
Crossfire

J'aborderais cela en utilisant une méthodologie "Recherche et filtre". Votre architecture d'information a plusieurs niveaux, mais les utilisateurs ne pensent pas au contenu de cette façon. Ils pensent de manière plus abstraite - comme dans "Quelle est la première chose à laquelle je pense lorsque je recherche une pièce spécifique". Ce pourrait être une date, un pays, une couleur, un détail, un texte ou une inscription - ou quelque chose d'encore plus abstrait auquel seuls les collectionneurs penseraient.

La mise en garde à cela est que si vous savez que vos utilisateurs recherchent spécifiquement des pièces en fonction du pays, de la plage de dates ou de la valeur, une barre latérale avec ces options pourrait travailler, mais je ne pense pas que ce soit la meilleure solution à ce problème.

Voici quelques solutions:

  1. Utilisez une interface fluide "Recherche et filtre".

Laissez les utilisateurs rechercher tout ce qu'ils veulent et filtrer les résultats en fonction des critères de recherche. Vous connaissez déjà une poignée de catégories - pays, valeur, période - alors pourquoi ne pas créer des métadonnées pour chaque catégorie et créer des pages qui mettent en évidence ces résultats? Par exemple, créez une liste de métadonnées de pays (États-Unis, Canada, Allemagne, etc.) et si l'un de ces termes est inclus dans une recherche, une page personnalisée affichant les détails de ce pays apparaît, permettant aux utilisateurs d'accéder facilement à plus de détails. Je ne serais pas en mesure de dire à quoi ressemble cette page, mais je pourrais l'imaginer y compris les détails des pièces de monnaie rares du pays, les pièces populaires de ce pays basées sur des recherches (ou la navigation) précédentes, et des filtres pour naviguer plus loin dans les détails des pièces. Cette solution peut facilement être formatée pour mobile, il suffit d'avoir les options de filtre comme menu déroulant et d'organiser les contrôles de recherche dans l'en-tête ou le pied de page, laissant la majorité de l'écran pour les détails des pièces et une navigation plus approfondie.

  1. "Filtrer et réduire"

Utilisez un contrôle de filtrage similaire mais réduisez les panneaux une fois le contenu sélectionné (par exemple, lorsqu'un pays est sélectionné, réduisez la barre latérale gauche et affichez "Allemagne" dans une orientation verticale). Cela permettra plusieurs niveaux de filtrage des données mais occupera beaucoup moins d'espace à l'écran.

Suggestions/conseils généraux

  1. Gardez les fils d'Ariane pour le bureau, supprimez-les pour les mobiles (ou placez-les dans un menu déroulant de filtrage logique)

  2. Continuez à affiner l'interface en fonction des statistiques d'utilisation. Poussez le contenu populaire vers la page de destination et affinez la page de destination en fonction des informations de navigation.

  3. Essayez de sympathiser avec l'utilisateur. Pensez à la façon dont ils aborderaient la recherche de pièces et essayez de créer une interface adaptée à leur ligne de pensée.

  4. La mise en œuvre d'une fonction de "recherche" décente peut être exagérée pour cette application, mais c'est l'un des meilleurs moyens de permettre aux utilisateurs de trouver rapidement ce qu'ils recherchent.

1
ckoosh

Cela me semble un peu trop compliqué. Peut-être que je manque un point, mais j'utiliserais plutôt une barre latérale de navigation multiple. Je trouve cette solution super facile à naviguer avec un retour très clair sur la position de l'utilisateur.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

0
Marco Tatta

J'ai remarqué que vous vous concentriez beaucoup sur la solution Web, sans mentionner le mobile.

Dans ce cas, concentrez-vous sur une communication claire avec l'utilisateur. Sur le Web, vous disposez de beaucoup d'espace pour cela, permettant à l'utilisateur de choisir LA solution qu'il souhaite, en les assemblant de manière claire. Ce que je propose est un mélange de chapelure avec des liens dans la description et la sélection déroulante.

  • Les utilisateurs expérimentés n'auront aucun problème à utiliser le filtrage déroulant
  • Alors que les utilisateurs réguliers , qui ne s'y sentent pas à l'aise, peuvent utiliser <Bouton Retour ou chapelure . Le filtrage des résultats se ferait par le biais de liens intégrés dans la description de la catégorie. Ici, ces liens incluent des numéros - 1999, 2001, 2008.

Donc si j'étais dans la catégorie Allemagne, dans la description je verrais:

Allemagne

La première pièce allemande découverte est datée de YYYY. Il y a aussi d'autres détails intéressants à leur sujet, qui sont inclus ici. Périodes de marque de réforme monétaire: Période1 , Période2 , Période3 , ...

Bien sûr, il est préférable de tester l'approche que vous souhaitez adopter avant de vous décider.

enter image description here

0
Marlena Dedera

Certains sites de commerce électronique le font. Et oui, il est parfois déroutant qu'il s'agisse d'éléments suggérés ou simplement de l'élément précédent et suivant.

Peut-être juste fournir une flèche précédente et suivante, tout comme la vue détaillée d'une photo facebook dans un album.

0
Nicolas Hung

Il me semble qu'une approximation de recherche traditionnelle à facettes clarifiera les résultats.

Pas besoin d'un fil d'Ariane car vous n'approfondissez pas vraiment une structure hiérarchique. au lieu de cela, vous alignez les propriétés des pièces.

Offrez dès le départ toutes les options contextuelles à facettes, pour permettre aux utilisateurs de rechercher et d'explorer la collection en suivant leur propre chemin.

Si des pièces spécifiques doivent être imbriquées le long d'une période ou d'une propriété, vous pouvez ajouter une facette de balise avec toutes les balises spécifiques pour les pièces visibles.

0
Onoper

@Crossfire, corrigez-moi si je me trompe, jetez un œil à l'écran des pièces mobiles https://au.pinterest.com/pin/180284791312295679/

en outre, à partir du dernier écran (détails des pièces), l'utilisateur peut également faire glisser d'avant en arrière pour vérifier l'écran des pièces "précédent"/"suivant". pardonnez-moi de ne pas avoir ajouté cet écran. faites-moi savoir si cela fonctionne, merci.

0
Sourabh Rangdal