Comment afficher de gros formulaires sur mobile?
Je suis en train de créer une application Web d'une seule page pour mon entreprise et j'ai rencontré un problème.
Nous voulons afficher un graphique de résultat + texte et un formulaire d'entrée qui met à jour le graphique immédiatement.
Actuellement, la page Web ressemble à ceci: La vue des résultats se compose d'un graphique et de deux vues de texte que vous pouvez parcourir via une diapositive ou des points et le formulaire est énorme et défilable à l'écran.
Cependant, je suis un peu inquiet qu'il y ait des zones de balayage séparées sur un si petit écran + ajoutez les événements de zoom et de glisser du navigateur natif, je peux voir cela résultant en une expérience utilisateur horrible
Le problème que je vois avec cette conception est que l'utilisateur n'a pas nécessairement besoin de voir le formulaire lorsqu'il souhaite simplement afficher les résultats ou l'inverse n'a pas besoin de voir le résultat lorsqu'il saisit des valeurs, donc mon idée actuelle est d'étendre le formulaire sur l'interaction avec l'utilisateur.
Je recherche une solution plus élégante mais facile à utiliser. Qu'est-ce qui pourrait être amélioré? Je jouais avec l'idée de séparer complètement le résultat et la vue de formulaire, mais je n'ai pas pu trouver une bonne solution.
Les descriptions de champ doivent simplement être au-dessus de leurs champs de saisie au lieu de la disposition côte à côte actuelle de 50% - 50% que vous avez.
En tant que tel, vos champs de saisie doivent être à 100%, comme dans: chacun sur une ligne, d'un bout à l'autre.
N'oubliez pas que lorsque les téléphones sont tenus (à des fins de saisie), la plupart des utilisateurs utilisent les deux mains et tapent également avec les deux pouces; vous ne devriez pas rendre cette expérience douloureuse!
N'oubliez pas d'envelopper vos champs de saisie avec au moins 15 pixels à gauche et à droite.
Je les séparerais comme vous l'avez dit, avec un compteur de progression/pas.
Par expérience, j'ai constaté que les utilisateurs qui voient les résultats tout en saisissant des informations peuvent les inciter à saisir des informations incorrectes pour obtenir de meilleurs résultats.
En fait, je pense que votre solution est bonne. Cependant, si les champs de saisie ne sont limités qu'à une certaine valeur fournie par le système, je chercherais dans l'interface utilisateur de démarrage rapide qui permet à l'utilisateur de sélectionner rapidement la valeur souhaitée par mode de numérotation.
Sinon, j'aime votre conception, car après que l'utilisateur a rempli le champ, je suppose qu'il doit cliquer sur "appliquer" ou "mettre à jour", vous pouvez fermer le panneau d'extension d'entrée et faire la mise à jour sur le graphique, je pense que la transition peut être jolie bien.