Indiquer la présence de contenu sous la ligne de flottaison dans une interface utilisateur mobile?
Dans mon application mobile, j'ai une section "Profil" que l'utilisateur doit remplir. Cela ressemble à quelque chose comme ça
PERSONAL INFO SECTION HEADER (label)
FIRST NAME (textfield)
LAST NAME (textfield)
CONTACT INFO SECTION HEADER (label)
PHONE NUMBER (textfield)
LOCATION INFO SECTION HEADER (label)
COUNTRY (drop down)
STATE (drop down)
CITY (drop down)
PROFESSION INFO SECTION HEADER (label)
PROFESSION (drop down)
INTERESTS SECTION HEADER (label)
(lots of checkboxes)
Plus précisément, comme ceci:
Cependant, dans les petits téléphones, certains contenus passent sous le pli. Ce n'est qu'en cliquant sur "enregistrer" (non illustré sur la photo) que l'utilisateur se rend compte qu'il y avait quelque chose sous le pli.
Bien sûr, il a une barre de défilement sur le côté, mais j'aimerais avoir une idée d'une mise en page plus optimale pour favoriser la présence de champs qui descendent en dessous du pli.
Trop d'écrans
Je ressens ta douleur. Avec la folie de la prolifération des appareils, il est extrêmement difficile de savoir si un bord de contenu sera visible pour encourager le défilement.
Entrez dans l'ombre évocatrice
Je suis un grand fan d'ombres pour indiquer "plus de cette façon". C'est un appareil subtil que les utilisateurs semblent percevoir instinctivement (au moins dans mes tests).
Pour indiquer que le contenu existe sous la fenêtre, affichez une partie coupée en bas. Voir http://goodui.org/#15
Lorsque vous remplissez chaque champ du formulaire, gardez à l'esprit que lorsque vous définissez le focus sur un champ de saisie, le clavier à l'écran va apparaître par le bas, de sorte que tout défilera de toute façon. donc le fait de modifier le comportement de défilement automatique pour centrer le champ actuel que vous avez défini comme centré empêchera l'utilisateur d'atteindre la fin du formulaire à moins que tous les champs n'aient été vus