Comment concevoir des formes réactives et agnostiques de l'appareil

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

Qu'il s'agisse d'un flux d'inscription ou d'une étape à pas multifonction, les formulaires sont l'un des composants les plus importants de la conception de produits numériques - vous devez donc les concevoir afin qu'ils fonctionnent efficacement sur des appareils mobiles.

[dix]

Voici comment concevoir des formulaires pour les appareils mobiles, y compris un aspect rapide Comment utiliser flexbox .

01. Conception pour défilement vertical

A single column layout works better — Une disposition de colonne unique fonctionne mieux

Quelle que soit la taille de l'appareil, le moyen le plus simple de terminer une forme est de manière linéaire. Plusieurs colonnes perturbent l'élan d'un utilisateur (les utilisateurs sont susceptibles d'interpréter les champs de manière incohérente, ce qui est un facteur négatif en termes de convivialité) et peut entraîner des utilisateurs qui devaient recourir au défilement horizontal.

Lorsqu'il s'agit de mettre en place des formulaires, vous devez concevoir les entrées dans une colonne: si un formulaire est dans une seule colonne, le chemin d'accès à l'achèvement est une ligne droite dans la page.

02. Placez les étiquettes au-dessus des champs

Place labels above form fields — Placez les étiquettes ci-dessus des champs de formulaire

Les étiquettes disent aux utilisateurs quels sont les champs d'entrée correspondants. Lorsque vous choisissez où placer vos étiquettes, vous avez deux options: gauche alignée ou haut alignée.

[dix]

Les étiquettes gauche-alignées fonctionnent bien si le formulaire est en cours de remplissage sur un bureau ou un comprimé. Cependant, ils constituent une solution terrible pour les appareils mobiles où il y a une succession à écran limitée. Étant donné que les étiquettes gauche alignées doivent s'asseoir avant le champ, l'écran étroit laisse très peu d'espace pour le champ lui-même - surtout si l'appareil est en mode portrait. Cela crée deux problèmes de convivialité graves:

Le champ de formulaire ne sera pas suffisamment large pour afficher la totalité de l'entrée de l'utilisateur, ce qui les rend plus susceptibles de faire en erreur leurs réponses et de mener à des formes plus erronées
Lorsqu'un utilisateur est notifié qu'ils ont entré des informations erronées, ils peuvent avoir une période difficile à repérer et à résoudre le problème car ils ne pourront pas voir l'entrée non valide.

Placer l'étiquette au-dessus du champ Formulaire Lorsqu'un utilisateur navigue à partir d'un périphérique mobile garantira que les utilisateurs peuvent voir la largeur maximale pour entrer leurs informations, car vous n'avez pas besoin d'utiliser pour l'étiquette.

Ecrire vos étiquettes au-dessus des champs de saisie vous permet également d'écrire des étiquettes de champs claires et significatives, car vous ne serez pas limité à un ou deux mots.

03. Utilisez Tap Objectifs

Les cibles de l'exploitation doivent être faciles à utiliser, quelle que soit la taille de l'appareil qui s'affiche. Les principales cibles (champs d'entrée et boutons) sont plus faciles pour les utilisateurs ayant une dextérité inférieure, qu'il s'agisse d'une condition permanente ou d'une temporaire causée par l'environnement.

Pour le moment, la plus grande taille de la cible est destinée aux périphériques tactiles. Vous devez donc concevoir une touche d'abord. Cela garantit que les utilisateurs n'auront pas à zoomer pour entrer le texte ou sélectionner une option. Les zones cliquables devraient suivre la règle du doigt de la graisse et ne pas empiéter sur les zones environnantes: le tampon de doigt humain moyen est de 10 x 14 mm et le bout des doigts moyens est de 8-10 mm, ce qui fait 10 x 10 mm une bonne taille minimale de la cible.

Mais non seulement une cible du robinet doit être correctement dimensionnée, vous devez également vous assurer qu'il ya suffisamment d'espace entre plusieurs cibles de prise. En fait, si vous obtenez une erreur «Tap Table Taille» sur les outils de référencement mobiles, il est souvent parce que vos cibles de prise sont trop proches ensemble, plutôt que la cible du robinet réelle étant trop petite.

Il peut être difficile de lire du contenu sur des appareils mobiles. Rendre les entrées 100% et que le texte est défini sur au moins 16px (1em) fera une grande différence. De cette façon, aucun zoom avant ou par défilement supplémentaire ne sera nécessaire pour lire les informations requises.

04. Utilisez les champs de formulaire HTML5

[dix]

Les appareils mobiles offrent des claviers de logiciel personnalisés pour différents types d'entrée et les champs de formulaire HTML5 sont le moyen unique d'améliorer l'expérience utilisateur de vos formulaires. Ces types d'entrée donnent des astuces au navigateur sur le type de disposition du clavier à afficher pour les claviers à l'écran.

Inclure les types d'entrée de numéro , e-mail , tél , URL et Date et l'entrée de clavier sur vos appareils mobiles mettra à jour pour faciliter la tâche de remplir le formulaire. Il ne nécessite pas que vous ajoutez des classes supplémentaires aux entrées de forme de style, tout ce que vous avez à faire est d'utiliser des types d'entrée HTML5 valides:

<input type="email" id="input-email">

05. Utilisez Flexbox

Faisons face dessus - il est difficile de créer une mise en page réactive dans HTML. La plupart d'entre nous ont lutté avec cela à un moment ou à un autre. Bien qu'il a toujours été possible de faire des mises en page comme prévu à l'aide de technologies spécialisées, le processus n'a jamais été facile.

Les technologies pour faire face aux mises en page structurée sont venues au fil des ans: les développeurs ont utilisé des cadres HTML, des tables HTML, des dispositions à base de flotteurs et, plus récemment, divers systèmes de grille popularisés par des cadres CSS tels que Amorcer .

Mais avec l'avènement du modèle de boîte flexible HTML (ou Flexbox ), HTML a finalement gagné un moteur de formatage de boîte riche qui répond à des dispositions complexes, y compris des formulaires HTML.

Flexbox nous donne une grande flexibilité pour construire rapidement de belles formes. La principale chose à comprendre sur Flexbox est que c'est un outil de manipulation de conteneurs: il vise à fournir un moyen plus efficace de disposer, d'aligner et de distribuer l'espace entre les éléments dans un conteneur, même lorsque leur taille est inconnue et / ou dynamique (d'où la mot 'flex').

Ce qui est intéressant, c'est que Flexbox nous donne une grande flexibilité pour construire rapidement notre forme sans utiliser de requêtes multimédia. De plus, tous les navigateurs actuels le soutiennent.

Notre Guide de la concepteur Web to Flexbox L'article vous en dit plus, mais pour le moment ferons des pratiques et apprenez à tirer parti de Flexbox pour créer une forme réactive. Tout d'abord, définissez la structure HTML pour notre formulaire:

 & lt; forme & gt;
& lt; ul classe = "flex" & gt;
& lt; li & gt; & lt; étiquette pour = "premier nom" & gt; prénom & lt; / étiquette & gt; & lt; entrée = "Texte" ID = "premier nom" Placeholder = "Entrez votre prénom ici" & GT; & LT; / li & gt;
& lt; li & gt; & lt; étiquette pour = "nom de famille" & gt; nom de famille & lt; / étiquette & gt; & lt; entrée Type = "Texte" ID = "Nom" Last-Name "Placeholder =" Entrez votre nom ici "& GT; & LT; / li & gt;
& lt; li & gt; & lt; étiquette pour = "email" & gt; e-mail & lt; / label & gt; & lt; entrée Type = "Email" ID = "Email" Placeholder = "Entrez votre email ici" & GT; & LT; / LI & GT;
& lt; li & gt; & lt; étiquette pour = "téléphone" & gt; téléphone & lt; / étiquette; & lt; entrée Type = "Tel" ID = "Téléphone" Placeholder = "Entrez votre téléphone ici" & GT; & LT; / LI & GT;
& lt; li & gt; & lt; étiquette pour = "message" & gt; Message & lt; / étiquette & gt; & lt; textarea lignes = "ID =" Message "Message" Placeholder = "TextArea & GT; & Texarea & GT; & Lt; / li & gt;
& lt; li & gt; & lt; Type de bouton = "Soumettre" & GT; Soumettre & lt; / Bouton & GT; & lt; / li & gt;
& lt; / ul & gt;
& lt; / forme & gt;

Notez que chacun des éléments de liste de notre formulaire a une classe de fléchir . Cette classe identifie le conteneur Flex sous notre forme. L'un des grands avantages de Flexbox est sa capacité à utiliser n'importe quel élément HTML pour définir ses conteneurs et ses éléments.

Vous pouvez appliquer un style Flexbox sur n'importe quel élément HTML, ce qui signifie que vous pouvez facilement resserrer et refuser des éléments indépendamment les uns des autres. Gardez à l'esprit que Flexbox n'est qu'un mécanisme de coiffage, ce qui signifie que vous pouvez ajouter et le supprimer à la volonté.

Identifions les conteneurs Flex dans notre CSS. De plus, nous voulons centrer verticalement les éléments Flex sur l'axe croisé. Il est assez facile de préciser que, il suffit de mettre en place une simple règle CSS:

 .flex li {
Affichage: flex;
Flex-Wrap: enveloppe;
Align-items: centre;
}

L'étape suivante consiste à spécifier les largeurs des éléments Flex. Les principales exigences:

Les étiquettes doivent être au moins 100px et au plus 200px
Éléments de forme qui viennent après que les étiquettes soient au moins 200px

Qu'est-ce que cela nous donne? Chaque étiquette et son élément de formulaire associé seront affichés sur une seule ligne horizontale lorsque la largeur du formulaire totalise au moins 300px (rappelez-vous, nous utilisons des étiquettes alignées à droite).

 .flex & gt; li & gt; étiqueter {
flex: 1 0 100px;
max-largeur: 200px;
}
.flex & gt; li & gt; étiquette + * {
Flex: 1 0 200px;
}

Enfin, pour le bouton d'envoi, lequel est également un élément Flex, nous définissons quelques styles de base:

 .FLEX LI BOUTON {
Marge: Auto;
Rembourrage: 22px 46px;
}

Comme vous pouvez le constater, avec une balise minimale et la puissance de Flexbox, nous avons construit une forme réactive.

Avec plus d'utilisateurs transportant des appareils mobiles, il est essentiel de fournir une expérience conviviale sur n'importe quel appareil. Le point clé est de s'adapter aux besoins de l'utilisateur et aux capacités de l'appareil.

Cet article a été publié à l'origine dans le numéro 287 de magazine net , le magazine des concepteurs de sites Web et des développeurs professionnels - offrant les dernières tendances, technologies et techniques Web. Abonnez-vous à Net ici.

Articles Liés:

Créer des formes et des tables réactives
Commencez avec une accessibilité Web
7 grands outils pour tester vos conceptions Web réactives

[dix] [dix]

[dix]

Comment concevoir des formes réactives et agnostiques de l'appareil

01. Conception pour défilement vertical

02. Placez les étiquettes au-dessus des champs

03. Utilisez Tap Objectifs

04. Utilisez les champs de formulaire HTML5

05. Utilisez Flexbox

Comment - Most Popular Articles

Faites votre propre stylet avec seulement 4 articles ménagers (sérieusement)

Créer une scène avec Renderman pour Maya

Comment créer des analyses 3D avec la capture de la réalité

Comment construire une application AR

Créer des portraits illustrés des photos

Télécharger des fichiers pour le monde 3D 232

Faire des plantes réalistes dans le cinéma 4D

L'incroyable pouvoir de flexbox

Catégories