web-dev-qa-db-fra.com

Meilleure pratique pour le défilement vertical à travers de longs sous-menus repliables

Nous repensons certaines de nos pages de destination. Dans ce cas, chaque page de destination comporte 6-8 catégories de cours, chacune contenant 3-4 cours par date, heure et prix. Current Layout

Chaque cours a un bouton CTA et est contenu dans le menu du cours pliable. La page de destination s'ouvre actuellement avec tous les menus développés, ce qui pose le problème de devoir faire défiler beaucoup vers le bas pour trouver le bon cours. Nous pensons également que nous pouvons mieux organiser les données.

Pour cela, nous avons créé une barre flottante sur le côté droit qui, lorsque vous cliquez dessus, défile jusqu'à la bonne catégorie de cours (par exemple, la catégorie 4). Propose layout

Nous nous demandons s'il existe une meilleure façon de procéder. Des suggestions pour améliorer la mise en page seraient également les bienvenues.

1
T0urist

J'ai inclus une conception alternative qui montre toutes les options de cours par défaut, mais peut aider à supprimer la fatigue de décision et le poids de la page en minimisant les boutons "sélectionner". Ici, un utilisateur devra d'abord sélectionner un cours, puis dans un modal choisir quelle classe spécifique. Je pense que cela se dégrade également en vue mobile. J'espère que cela t'aides!

Bureau:

Desktop view

Mobile:

Mobile View

0
Andrew Weibert

Considérant qu'il s'agit d'une page de destination et que le taux de conversion est important et pour , vous devriez montrer les boutons CTA au lieu de les cacher dans un accordéon je vous proposerai 2 alternatives.

1) Tout afficher dans des cases ouvertes et mettre en évidence les plus importants.

enter image description here

2) Mon préféré parce que:

  • Trop d'options = plus de choix = facile de ne pas choisir (et de quitter)
  • Affichage des options pour l'avenir, vous perdrez l'achat impulsif
  • Mettre l'accent sur ce qui compte

enter image description here

0
Rafael Perozin