web-dev-qa-db-fra.com

Problème de conception: lier ensemble deux éléments liés mais différents lorsque l'un est potentiellement en dessous du pli

Bref historique de ce qui se passe: le client voulait un graphique interactif que l'utilisateur peut utiliser pour déterminer ses besoins auprès du client. Le graphique illustre la croissance de l'entreprise de l'utilisateur au fil du temps. Lorsque l'utilisateur fait glisser le bouton sous le graphique, les services ci-dessous (dans la section services) s'affichent/se masquent en fonction des types de services disponibles pour cette taille d'entreprise. (ie: si votre entreprise est prête à commercialiser un produit, vous avez besoin de ces 6 services, etc.)

Parce que les sections sont séparées, mais également liées entre elles, je cherche des moyens que je peux indiquer à l'utilisateur une fois qu'il a lâché le bouton du graphique, ils devraient descendre dans la section services. Je voudrais faire quelque chose d'animé, comme peut-être, dessiner une flèche de style "dessiné à la main" du graphique à la section des services ... y a-t-il une meilleure façon de lier ces éléments ensemble?

Remarque: la section des services pourrait facilement tomber sous le pli, c'est pourquoi j'aimerais avoir l'indicateur supplémentaire que ces sections sont liées.

graph and services

5
binky

Pouah

Il s'agit d'une interface qui semble intéressante pour un client inexpérimenté, mais qui n'est pas intuitive, facile à utiliser ou une bonne expérience pour les utilisateurs.

  • Il y a [~ # ~] façon [~ # ~] trop de charge cognitive impliquée.
  • L'utilisateur doit d'abord comprendre le graphique, puis comprendre le modèle d'interaction non standard, puis relier l'interaction à un panneau qui peut ou non être en dessous du pli.
    • Le panneau lui-même n'est pas standard (non aligné sur la grille, formes hexagonales inconnues favorisant les icônes cryptiques au lieu du texte)
  • En plus de tout cela, un utilisateur qui souhaite parcourir tous les services doit maintenant faire glisser le curseur sur chaque nœud du graphique, puis essayer de lire les formes hexagonales, puis répéter avec beaucoup de frustration.

Ce type d'idée est typique des clients créatifs mais inexpérimentés en UX. En règle générale, l'entreprise de conception aura un rôle actif à jouer pour expliquer pourquoi la créativité n'est pas la même chose que l'UX ou la marque, et pourquoi les solutions créatives peuvent conduire à une mauvaise UX et à une image de marque négative.

Donc ma première suggestion serait ... d'essayer de résoudre le problème en amont d'une mauvaise conception, sinon c'est comme choisir quelle couleur peindre le Titanic .

Si vous avez vraiment besoin de faire ça ...

Je commencerais par réduire l'interaction indirecte non linéaire dans la conception:

  • Remplacez l'interaction de glissement par une rangée de boutons, chacun représentant une phase de croissance. Vous pouvez utiliser un style plat pour les rendre élégants tout en conservant la possibilité de bouton afin que les utilisateurs comprennent clairement comment fonctionne l'interaction.

  • Lorsque le bouton est enfoncé, mettez en surbrillance la phase de croissance dans le graphique et animez un panneau déroulant connecté au bouton. Cela fournit un lien visuel clair entre le graphique, le bouton et le contenu du panneau déroulant.

  • Utilisez des hexagones ou le graphique, mais pas les deux. Vous essayez d'en faire trop en introduisant un bling visuel dans l'interface. Aidez votre client à faire preuve de retenue en matière de conception.

J'espère que cela pourra aider. Pour diverses raisons professionnelles, je connais très bien les sociétés de capital-risque, juridiques, comptables, bancaires et de conseil qui ont souvent besoin de communiquer une gamme de services couvrant le cycle de vie d'une entreprise et, selon mon expérience, ce n'est pas la bonne façon de le faire: le graphique est communicatif, mais la façon dont il est rendu interactif ne l'est pas.

J'essaierai d'ajouter un filaire alternatif ici demain si j'ai le temps.

3
tohster