Comment puis-je m'assurer que mon utilisateur sait qu'il y a plus de données sous ce CTA flottant?
J'ai un formulaire mobile, sur lequel le CTA est plus bas sur la page, donc un CTA collant indique l'action du formulaire au premier coup d'œil pour les utilisateurs. Mais, comment gérer le contenu caché à cause du pied de page collant, sous le pli?
Je veux taquiner l'utilisateur en coupant le contenu, pour indiquer qu'il y a plus de contenu sous le pli, mais comment pouvez-vous vous assurer que cela se produit à chaque hauteur de l'appareil mobile?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il semble que nous essayions de détecter la hauteur de l'appareil pour nous assurer que vos éléments assis à mi-chemin sous un élément flottant pénètrent dans toute une boîte de vers, alors je vais vous proposer quelques solutions qui élimineraient le besoin de cela:
Collez le CTA à gauche ou à droite de l'écran
S'il est positionné sans la marge de contenu standard, il n'apparaîtra pas comme faisant partie de la région de défilement typique. Cela pourrait aider à indiquer qu'il ne fait pas partie de l'écran en dessous.
De toute évidence, assurez-vous que le contenu défilera suffisamment haut pour que tout le contenu puisse se déplacer confortablement plus haut que le CTA flottant.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Afficher le CTA après un court délai
Alternativement, vous pouvez charger la page, puis estomper ou glisser dans votre CTA afin que les utilisateurs voient que la page s'étend en dessous (difficile à afficher dans une maquette, mais j'espère que vous avez l'idée).
J'envisagerais d'utiliser un arrière-plan légèrement transparent et flou, semblable à ce que Apple fait avec la propriété "background-blur" pour leur élément de barre d'onglets dans les applications natives, pour indiquer à l'utilisateur que des champs supplémentaires se trouvent juste en dessous de la légende principale du CTA.
Tirant parti d'une autre approche d'application native, utilisez des éléments inclinés ou caret up et down dans la superposition pour que le CTA déplace le focus d'un champ à un autre; "angle ou curseur vers le haut" en naviguant le focus du navigateur vers le champ ci-dessus et "angle ou curseur vers le bas" en naviguant le focus du navigateur vers le champ ci-dessous.
Vous pouvez peut-être désactiver le bouton Soumettre jusqu'à ce que tous les champs obligatoires soient remplis et tester les faux étages sur différentes hauteurs de fenêtre.
Placez le CTA légèrement au-dessus du bas, rendez-le légèrement plus étroit que l'écran et donnez-lui un ombrage 3D. Cela soulignera qu'il est collant, et non en fait la fin du contenu, et s'il y a du contenu en dessous, il devrait ressortir des côtés et du bas.