Sur certaines tailles d'écran, le CTA passe sous le pli
Je conçois un site Web et j'ai deux boutons l'un en dessous de l'autre sur la page de destination. L'un est un bouton principal et l'autre est un bouton secondaire.
La structure de la page comprend une image qui occupera par exemple 40% de l'écran, en dessous de laquelle le titre et une courte description suivront, en dessous de laquelle les deux boutons ci-dessus suivront comme vous pouvez le voir ici 
Le problème auquel je suis confronté est que pour la plus petite taille d'écran possible (iphone 5) où la hauteur n'est pas suffisante, le deuxième bouton ne sera visible que sur le défilement, comme on peut le voir ici 
Je me demande si cela pourrait être problématique pour les utilisateurs parce que cette structure les confondrait en divisant une sorte de section entre les deux?
Je comprends que les utilisateurs défilent et je m'interroge simplement sur la cohérence de la structure plutôt que de craindre qu'ils ne voient pas le bouton. Une solution possible consisterait à réduire le texte de la description ou à réduire sa taille, mais j'aimerais l'éviter si possible.
Vous vous demandez si quelqu'un a fait face à ce problème et l'a déjà abordé. Je n'ai cependant pas de données pour confirmer ma pensée
La forme générale (carré horizontal) et la position du bouton principal (juste au-dessus du pli) créent un faux fond.
Donc, le problème ici est que l'utilisateur n'est pas conscient qu'il y a un autre bouton sous le principal et qu'il devra le découvrir.
Une fois que le bouton secondaire est découvert en faisant défiler vers le bas, les utilisateurs doivent comprendre que le CTA appartient à la page de destination, car ils ont maintenant un certain contexte.
Mais faire défiler et cliquer c'est travail. Si vous pouvez offrir une expérience qui minimise le nombre de gestes requis de la part de l'utilisateur, vous obtiendrez peut-être un meilleur taux de conversion.
Je placerais les deux boutons côte à côte sur les petits écrans ou préciserais qu'il y a plus de contenu sous le pli.
Je pense que la meilleure solution pour vous est la suivante:
1- Essayez de Raccourcir le titre long pour chaque bouton mais en supprimant les mots redondants.
2- Les boutons doivent avoir la même place même sur un petit écran , pour une meilleure expérience, changer l'emplacement des boutons est un grand ennemi de l'utilisabilité. et cela réduira les visites sur votre application.
3- Ce que vous devez faire est de laisser les deux boutons côte à côte. Restez toujours au bas de l'application même si vous avez un petit contenu ou plus. donc si vous avez un défilement, gardez toujours les boutons. comme indiqué sur l'écran ci-joint.
Alternativement, la hauteur de l'image en haut pourrait être sacrifiée pour faire de la place au contenu ci-dessous. Une image plus petite aurait le même objectif.
En dessous de 300 pixels, les éléments peuvent être légèrement réduits pour un rendu normal, comme vous l'avez déjà mentionné.
Ou utilisez l'image comme arrière-plan et superposez le texte et les boutons.
Il existe plusieurs façons de gérer ce problème.
J'ai rencontré un problème similaire, j'ai réduit la hauteur de l'image pour les appareils à faible résolution - Cela aide les utilisateurs à prendre des décisions (évident gagne toujours - puis caché - je comprends qu'il n'est pas caché à dessein), le mot "Parcourir" apparaît deux fois/dos à dos dans les CTA qui peuvent être évités, alors vous pouvez avoir les CTA côte à côte 
Les préoccupations concernant Au-dessus du pli vs Au-dessous du pli sont apparues il y a des décennies. Internet est maintenant suffisamment courant pour qu'il ne s'agisse probablement pas d'un problème. Les utilisateurs savent que l'intégralité des pages Web ne tiennent pas sur un seul écran et qu'ils doivent faire défiler. Les sites les plus populaires aujourd'hui sont essentiellement des expériences de défilement infinies.
Les utilisateurs ne défileront pas lorsque votre contenu n'est pas suffisamment convaincant pour les garder sur la page, pas parce que cela ils sont "confus".
Si vous vraiment voulez savoir ce que les utilisateurs font sur votre site, vous pouvez utiliser javascript pour surveiller le comportement de défilement et taux de clics sur différentes tailles d'écran.
Options à considérer:
- Réduisez les espaces blancs, notamment autour du lien "Compte" et des boutons.
- Créez des barres de navigation de type application. (Essentiellement ce que Khalil Hanna recommande.)
- Retirez l'un des boutons. Quelle est la différence entre parcourir les "plans de repas" et les "menus"? L'un pourrait facilement être considéré comme un sous-ensemble de l'autre.
- Raccourcissez le texte du bouton et placez-les côte à côte, comme suggère Jairaj Ramendran .
Superposez le titre sur l'image.
![mockup]()
