background preloader

Optimiser l'ergonomie des formulaires web

Optimiser l'ergonomie des formulaires web
Les formulaires sont très fréquents sur les sites web et parfois complètement incompréhensible. Il existe une multitudes d'astuces pour améliorer la compréhension de ceux-ci, éviter que les utilisateurs fassent des erreurs et optimiser le durée nécessaire pour les remplir. Cet article présente plus de 60 astuces et recommandations avec des explications. Structurer le formulaire Dans le cas d'un formulaire pour se connecter, il est possible de faire apparaître le formulaire au survol ou avec un clic de souris. Choix des éléments à insérer Ne pas utiliser le bouton "reset" (bouton pour réinitialiser le formulaire). Ne ppas utiliser de bouton annuler dans un formulaire web Si on utilise un bouton "retour", il faut le mettre sous la forme d'un lien d'action secondaire. Positionnement des éléments Position des champs du formulaire Lister les champs les uns au dessus des autres. Comparatif de placement des éléments sur un formulaire web. Position du bouton d'envoi Call to action Design

▷ Analysez et améliorez votre ergonomie grâce au eye tracking Vous voulez améliorer vos pages Web ou vos applications mobiles ? Être sûr que votre message essentiel va être bien lu ? Que les images que vous avez inséré ont un impact réel sur les utilisateurs ? Sachez que 3/4 des bannières des gros annonceurs ne sont jamais vues. L’eye tracking peut vous aider ! Qu’est ce que l’eye tracking ? L’eye tracking signifie en Français : oculométrie. Pour pouvoir bénéficier d’un test utilisateurs de eye tracking, il est possible de faire appel à des entreprises spécialisées. Exemple de carte du chemin exact parcouru par le regard d’un utilisateur : Si vous n’avez pas les moyens financiers de bénéficier d’un diagnostic concernant l’efficacité de vos pages Web, il existe heureusement d’autres techniques très efficaces et gratuites (ou peu onéreuses), comme le clickheat et le crazy egg. Qu’est-ce que le clickheat ? C’est une solution open source et gratuite de Heatmap (carte de chaleur) qui sert à visualiser les clics de l’utilisateur.

Les bonnes pratiques pour formulaires mobile À la question posée aux utilisateurs d’Android “Quelles raisons principales vous font supprimer une application ?”, la présence d’un formulaire d’inscription revient à 38% dans les réponses. C’est une bonne raison pour s’attarder sur les problèmes qui peuvent être rencontrés. Dans le cadre de notre nouvelle offre d’optimisation des applications mobiles, ce billet est le premier d’une série traitant des bonnes pratiques pour réaliser un produit performant. Contourner la saisie Limiter la saisie Le clavier constitue une source majeure de frustration pour les utilisateurs, voici des indications pour en limiter l’utilisation. Utiliser prioritairement les boutons d’actions, la gestuelle native (tap, swipe) et les fonctionnalités natives du téléphone (GPS, tap-to-call, photo). N’afficher que les champs indispensables. Opodo (v1.0.0) affiche uniquement les champs essentiels à la recherche, on peut accéder à d’autres champs via la bouton “plus d’options”. Simplifier au maximum la saisie Rassurer

Signification des couleurs en E-marketing et en Ergonomie Web . Sur la demande de plusieurs clients et stagiaires, les consultants-rédacteurs de Trinity Advise se sont mobilisés pour vous proposer un dossier complet sur les codes couleurs web et la signification des couleurs pour Internet. Vecteurs de cohérence graphique, les couleurs dictent de nombreux comportements à l’inconscient de l’internaute. 1. 2. 3. 4. Annotations et explications complémentaires [x] En savoir plus ————————————————– . En complément d’études d’Eye Tracking (cf. notre dossier complet sur l’eyetracking en ergonomie, ici), deux, trois ou quatre maquettes au plus, sont présentées au responsable internet, qui décide au feeling du meilleur template et jette son dévolu sur ce qui sera le futur web-design. En tout état de cause, le choix de la colorimétrie demeure aujourd’hui très subjectif car il ne dépend souvent que des goûts d’un seul comité de décideurs. Enfin, notez que les couleurs possèdent une symbolique implicite et influent sur le comportement des visiteurs. Domaines :

Comment créer son persona [Tutoriel] Le persona est un élément qui a trop tendance à être oublié dans certaines stratégies marketing. La création d'un persona est un élément indispensable pour le bon déroulement de votre stratégie marketing. Définition d'un persona Avez-vous déjà lu un article qui s'adressait à vous à la première personne, qui vous paraissait extraordinaire, fait pour vous, à la limite du surréel ? Comment créer un persona Etablissez un brainstorming Il est maintenant temps de réunir vos collègues et de commencer à brainstormer ! Etablissez une liste des préférences de votre persona Est-ce que votre persona aime le shopping, est-il plus du genre à vivre dans la nature. Dessinez votre persona Esprits créatifs, nous ne vous avons pas oublié ! Ecrivez et réécrivez Ecrivains à votre tour (décidément y en a pour tout le monde !). Fini ? 100 questions à se poser pour créer un persona Histoire du persona Quel est le nom du persona ? Éducation A-t-il passé sa scolarité dans le public ou dans le privé ? Parcours professionnel

Test d’utilisabilité (test utilisateur) - Utilisabilité d'une Application / logiciel Le test d’utilisabilité est mené dans un contexte le plus proche possible de l’utilisation réelle. L’utilisateur réalise les principales tâches pour lesquelles le logiciel a été conçu. Lorsque l’évaluation porte sur un logiciel existant, le test est réalisé sur la version commerciale du produit. En phase de conception, le test est conduit sur un prototype vertical. L’observateur donne à l’utilisateur des consignes qui vont le conduire à effectuer des tâches typiques du logiciel ou du site Web. Il est essentiel de ne pas l’aider sauf, bien entendu, en cas d’impasse. L’observateur note les erreurs commises, les incompréhensions, les impasses, tout événement qui montre une difficulté d’utilisation du logiciel. Ces différentes observations font l’objet, une fois le test terminé, d’une « analyse à chaud » avec l’utilisateur, afin de mieux comprendre les causes des problèmes.

Prototypage ou réalisation de prototypes d'une application | Usabilis Cependant, quelques précautions sont à prendre pour éviter que la phase de prototypage ne dérive. Ne pas modifier le prototype en cours de session. L’objectif de la séance de prototypage n’est pas de montrer à l’utilisateur comment programmer ! Les interruptions qui découlent des modifications lui font perdre le fil de la séance. Il est préférable de laisser un problème jusqu’à la fin de la séance afin de s’assurer qu’il s’agit d’un véritable problème, plutôt que de se lancer dans une modification hâtive. Le prototype évolue uniquement entre chaque phase de prototypage suite à une analyse des problèmes avec les utilisateurs. Tracer les évolutions. A des fins de traçabilité, il importe de consigner les évolutions demandées par les utilisateurs, les problèmes rencontrés lors des tests et les solutions choisies pour y remédier.

Choisir la taille de la police de caractère - USABILIS Avec la nouvelle vague d'appareils digitaux, nous sommes confrontés à une gamme très vaste de résolutions d'écrans et de densités de pixels. Dans cet article, nous passons en revue les différentes solutions qui existent pour vous aider à choisir une taille de police adaptée à la densité de pixels (DPI). Les facteurs qui déterminent le rendu d'une policeLes systèmes de mesure d'une policeLes tailles de polices minimales recommandées Ces différents sujets, entre autres, sont abordés dans la formation Design Graphique, idéale pour acquérir les bons réflexes de conception graphique d'une interface. En fin d'article, vous trouverez un tableau d'équivalences dans lequel nous affichons la taille de police idéale par rapport à sa distance de lecture et son support. Facteurs déterminant le rendu d'une police Contrairement à ce qui se passe sur le papier, les polices à l'écran peuvent s'afficher différemment d'un appareil à un autre, voir même d'un écran à un autre. Densité de pixels Taille de police

Recette de test utilisateur, Partie 1 Introduction Cet article propose une recette de test utilisateur. On peut parler de recette parce que mettre en place un test nécessite de passer par plusieurs étapes. Chacune de ces étapes exige des ingrédients spécifiques. Il est important de savoir où se procurer ces ingrédients et comment les mêler. Comme pour les recettes de cuisine, la dextérité vient avec l'expérience. Comprendre l'importance des tests utilisateurs n'implique pas de pouvoir les conduire. La façon de conduire un test utilisateur dépend en grande partie du budget accordé à l'ergonomie dans le projet. » Pré-requis Notre présentation part du principe que l'on a pris connaissance de l'interface et identifié les objectifs du projet. Le choix de la méthode du test suppose que le projet soit d'ampleur suffisante pour l'avoir fait précéder d'autres analyses (consultation libre des utilisateurs, tri de cartes, analyse des tâches, analyses concurrentielles, inspection experte d'une interface existante…). 1. 2. 3. 4. 5.

3 conseils d’ergonomie pour la conception d’applications de gestion « Ah… vous savez, ce ne sont que des applications de gestion. Vous voulez vraiment voir l’existant ? Je vous préviens, pour vous qui êtes dans l’ergonomie, ce n’est pas beau à voir… » C’est avec cet avertissement que certains chefs de projet nous présentent leurs applications de gestion. Chez Usabilis, nous avons collaboré avec plusieurs sociétés pour les aider à améliorer l’ergonomie dans ce type de projet (voir par exemple notre travail pour L’Oréal : Optimisation UX d’une application de gestion). Faites des listes …et pas forcément toujours des tableaux. Souvent, les applications de gestion s’articulent autour d’une interface dite « Master-Detail ». Le tableau présente chaque attribut d’un élément sur une nouvelle colonne alors que la liste laisse plus de flexibilité sur l’agencement des attributs Du point de vue de l’ergonomie, les avantages de la liste sont nombreux : Elle permet plus de flexibilité dans l’agencement des attributs au sein de chaque élément. Dur dur ! Enregistrer

Related: