background preloader

Ergonomie web & formulaires

Ergonomie web & formulaires
« L'ergonomie web » en deux mots L'ergonomie (du grec "Ergon" signifiant "travail" et "Nomos" règles) web est un concept qui repose sur deux notions clés que sont l'utilité et l'utilisabilité. L'utilité se base sur les besoins et envies des internautes et implique une bonne connaissance de leurs habitudes. Ce terme remet au centre des questions essentielles telles que "Le site apporte-t-il quelque chose aux internautes ? L'utilisabilité ("Usability" in english), rassemble trois critères : L’efficacité : Le résultat recherché est t-il bien atteint? Comme vous l'aurez compris "utilité" et "utilisabilité" gravite autour d'un projet web et fusionne pour constituer l'ergonomie web. Attention à ne pas tomber dans le piège de remettre en cause la crédibilité de l'ergonomie, et de la négliger sous prétexte qu'elle représente des notions paraissant simples et évidentes. Afin d'illustrer quelques concepts de base de l'ergonomie, concentrons nous sur la réalisation d'un formulaire. 1. 2. 3. 4. 5. 6. 7.

formulaire Archives Le mois dernier, j’ai célébré les 10 ans de la création de mon blog FredCavazza.net. Vous ne vous en souvenez certainement pas, mais le succès de ce blog est en grande partie dû à un tutoriel que j’avais publié à l’époque sur la conception de formulaire (Des formulaires plus simples). Ce formulaire avait été discuté sur plusieurs forums de développeurs / concepteurs et m’avait permis de recruter mes premiers lecteurs (vous connaissez la suite). Même si le W3C a pédalé dans la choucroute pendant de nombreuses années, il s’est passé pas mal de choses au cours de ces dix dernières années : les tendances graphiques ont changé, les pratiques d’utilisabilité se sont affinées, les langages de programmation ont évolué et les terminaux se sont grandement diversifiés. Même si les règles de base d’ergonomie sont toujours les mêmes (lisibilité, guidage, tolérance aux erreurs… cf. De même, les attributs placeholder ou required poussent plus loin le souci de standardisation (qui va s’en plaindre ?)

Simplifiez vos formulaires, 10 ans après Le mois dernier, j’ai célébré les 10 ans de la création de mon blog FredCavazza.net. Vous ne vous en souvenez certainement pas, mais le succès de ce blog est en grande partie dû à un tutoriel que j’avais publié à l’époque sur la conception de formulaire (Des formulaires plus simples). Ce formulaire avait été discuté sur plusieurs forums de développeurs / concepteurs et m’avait permis de recruter mes premiers lecteurs (vous connaissez la suite). Depuis, 10 ans se sont écoulés, et je suis toujours devant mon clavier, et vous devant votre écran, même malgré la fermeture de Google Reader ! Tout ça pour dire que je trouve intéressante l’idée de faire une rétrospective sur les techniques de conception et de codage des formulaires. Même si les règles de base d’ergonomie sont toujours les mêmes (lisibilité, guidage, tolérance aux erreurs… cf. De même, les attributs placeholder ou required poussent plus loin le souci de standardisation (qui va s’en plaindre ?)

Les interfaces web de saisie rapide | NoMemorySpace La désynchronisation des activités est l’essence même de Ajax, c’est le "A" dans "Ajax". Ces derniers temps, on commence a utiliser le terme "Ajax" pour dire "XMLHttpRequest" ce qui était prévisible : personne ne peux dire "XMLHttpRequest" sans attraper le hoquet. Comme vous le savez déjà nous sommes en train de développer un Progiciel de Gestion Intégré (PGI) pour un grossiste en pharmaceutiques en Tunisie. le secteur pharmaceutique est relativement ancien et bien développé ce qui fait qu’il y a des "traditions"le secteur pharmaceutique est très régulé pour des raisons de santé publique évidents L’une des particularités du secteur c’est le traitement d’un nombre de commandes élevé dans une plage horaire très restreinte. L’une des difficultés évidentes que nous avons identifiée depuis le début de projet, c’est l’interface de prise de commande qui allait être utilisée par les commerciaux. Le verdict fut unanime : la recherche des articles est trop lente. Like this: J'aime chargement…

Champs, libellés, alignements : la conception des formulaires[ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)] Certaines questions récurrentes se posent lors de la conception des formulaires : une seule colonne ou plusieurs ? Comment aligner les libellés et les champs de saisie ? Quelle taille doit faire les champs ? Dans cet article nous répondons à ces questions en rappelant les points clés de la conception des formulaires. Construction Colonage Il a été démontré lors de tests utilisateurs que pour maximiser l'efficacité de la saisie il est recommandé de construire le formulaire en une seule colonne. Formulaire Amazon La saisie est en effet facilitée et linéaire. Néanmoins, dans le domaine des applications professionnelles on apportera une nuance. Exemple de formulaire On concevra des formulaires sur plusieurs colonnes dans ces cas de figures : Si les données doivent être comparées, donc visibles sans faire défilement de l'écran.Si la saisie du formulaire constitue une tâche fréquente et répétitive pour l'utilisateur. Recommandations : Regroupements Il est nécessaire de regrouper les champs par thème.

Formulaires : validation et vérification des champs de saisie La saisie du formulaire est probablement l'étape la plus délicate du parcours d'achat sur un site web. C'est à ce stade que de nombreux visiteurs hésitent, se trompent et parfois abandonnent. L'ergonomie des éléments d'interface joue donc un rôle clé dans la capacité de transformation du site. Elle contribue à accompagner le visiteur dans sa saisie et l'encourage à poursuivre son chemin. Contrôler la validité de la saisie Rien de plus énervant que de voir un long formulaire refusé en fin de course parce qu’un champ a mal été rempli ou qu’un identifiant n’est plus disponible. Cette proposition sera importante dès que le concepteur du site définit comme obligatoire le remplissage d’un certain nombre de champs. L’expression la plus simple de ce principe de validation automatique consiste simplement à contrôler le bon format d’une entrée saisie par l’utilisateur au moment où l’utilisateur passe d’un champ donné au suivant après l’avoir rempli. Recommandations Conclusion Partager :

Label Placement in Forms By Matteo Penzo Published: July 12, 2006 “We were able to subject Luke’s theories to usability testing and enrich them through the power of numeric data.” In using eyetracking to evaluate the usability of search forms for my previous article for UXmatters, “Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach,” we discovered much interesting data. I’ll provide an in-depth analysis of that data here. Please note that our ad-hoc test setup didn’t resemble real-world conditions. We based our test setup on Luke Wroblewski’s article “Web Application Form Design.” Luke provided valuable insights and feedback during both our test preparation and results analysis. During the process of building the forms that we would test, we tried to respect Luke’s suggestions regarding the relationship between label placement and formatting and the type of form content—well-known data versus unfamiliar data that requires thought. Test 1: Left-Aligned Labels to the Left of Input Fields

Designing UX: Forms :: UXmatters Principles for Deciding Question Order Here are six principles for determining the order of questions in a form: Follow how the user thinksCore before supplementaryEasy before difficultRelated togetherBe consistentPrinciples, not rules Follow How the User Thinks The order of questions in your form should, as closely as possible, match the way things flow in the user’s mind. Unless you’re the one person on earth with genuine psychic powers, this means you need to do some careful research with your users. Core Before Supplementary Collect the information that’s central to your form’s purpose first, before collecting any supplementary information. Easy Before Difficult Ask simpler and less intrusive questions before complex and more intrusive questions. Related Together Remember our principle of proximity from Chapter 4? Be Consistent Try not to change the order of questions from one part of the form to another. This applies to answer fields, too. Principles, Not Rules Tab Order Screens Modal Windows

Related: