background preloader

Les boutons de validation en voie de disparition ?!

Les boutons de validation en voie de disparition ?!
Sur l'impulsion du Web riche et du mobile (téléphones et tablettes) on voit disparaître des boutons permettant de confirmer une action…. Quel sont les avantages de cette disparition ? Alléger l’interface ? Diminuer le nombre de clics ? Pour comprendre l’enjeu de la disparition des boutons de validation, voici quelques règles d’usage extraites de notre livre Ergonomie des interfaces : Employer les boutons pour les commandes fréquemment utilisées.Préciser l'intitulé de la commande en toutes lettres dans l'étiquette du bouton. La disparition de ce petit composant est donc une problématique intéressante puisqu’elle touche à différents aspects ergonomiques. Valider un champ de saisie. Saisir du texte est une des actions les plus courantes dans la pratique du web. Saisir du texte et le valider par la touche “Entrée” est une pratique standard dans les logiciels de discussion comme Skype. Google propose alors une aide à la saisie qui permet de palier l’absence de ce libellé. Recommandations Note Related:  Veille Ergo

Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.

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

L’aide en ligne sur le Web L’aide en ligne est une composante essentielle pour beaucoup de sites Web. Son objectif est d'expliquer à l'internaute le contenu d'un service et comment manipuler l'interface, elle peut prendre différentes formes d’un site à un autre. L’aide en ligne est utilisée diversement en fonction de l'attente de l'internaute. Première utilisationUtilisation quotidienneUtilisation ponctuelle Pour chacun de ces contextes, nous vous donnons les clefs pour réussir votre aide en ligne. Sachez par ailleurs que l’aide en ligne, entre autres, est abordée dans la formation Ergonomie des sites Web – e-commerce, idéale pour apprendre à concevoir des sites Web faciles à utiliser et attractifs. Première utilisation Sur certains sites Web, la phase d’inscription est suivie ou précédée d’un « tutoriel » qui explique brièvement les différentes fonctionnalités de l’interface. Ces explications ont pour but de présenter l’interface web ou logicielle et de guider l’utilisateur durant sa première utilisation. 1. 2.

L'utilisateur face au moteur de recherche juin 2012. La recherche est un processus itératif et interactif. Ce qui se joue entre l'internaute et le moteur de recherche échappe encore partiellement aux outils que nous utilisons quotidiennement : test de mots clés et webanalytics. La recherche est interactive Un utilisateur effectue rarement une recherche unique. La sortie C'est la cas de figure le plus simple. L'affinage de la recherche Ce cas est souvent cité en exemple. L'élargissement de la recherche Elargir sa recherche c'est le contraire de l'affiner. Pearl growing Dans ce cas l'utilisateur passe par un résultat qu'il juge pertinent puis en extrait des mots clés à rechercher. Pogosticking C'est un cas d'échec. Thrashing C'est aussi un cas d'échec. Les moteurs de recherche s'adaptent a ces modèles de comportement. C'est à se demander si l'internaute conserve son libre-arbitre lorsqu'il cherche ? En savoir plusSearch Patterns chez O'Reilly de Peter Morville & Jeffery Callender

L'ergonomie dans la conception d'un formulaire Introduction Le formulaire est l'un des moyens pour l'utilisateur d'envoyer des données, alors que son comportement classique sur le web consiste plutôt à recevoir des informations. Cette notion entraîne des problématiques d'ergonomie autres que celles liées à la simple consultation de contenus. Cet article présente les standards d'ergonomie web pour la conception de formulaires et quelques recommandations à adapter à la spécificité de chaque situation. Qu'ils servent à envoyer un message, acheter un produit, remplir un questionnaire ou accomplir une tâche professionnelle plus précise, les formulaires doivent respecter certaines règles. Il existe une grande différence entre un formulaire destiné à un site grand public ou à une application professionnelle. Les formulaires sont quelque chose d'assez bien défini au niveau des règles à appliquer pour les formulaires web classiques (formulaire de contact, de commande d'un document, de gestion d'un processus d'e-commerce...). 1. » La ligne 2.

Free Tools, Webmaster - Ressources et outils open source gratuits pour vos sites web iErgo, le bloc-notes | IHM, Ergonomie & expérience utilisateur. Sites web mobiles : 30 Exemples d'interfaces L’explosion du mobile exige de la part des développeurs web d’élargir leurs connaissances et de s’adapter aux différents standards web des plateformes mobiles distinctes : téléphones intelligents et tablettes mobiles. Bien que les buts premiers d’un site web resteront les mêmes d’une plateforme à une autre, l’expérience usager, elle, sera bien différente. Sur un appareil mobile, il existe quelques différences majeures telles que le principe de navigation, la résolution d’écran et l’ergonomie du site web. Vous trouverez dans cet article quelques exemples de sites mobiles très efficaces, plaisants à naviguer et très ergonomiques ayant trouvé la recette parfaite pour s’adapter aux différentes plateformes disponibles. La liste suivante de sites web mobiles a été rédigée par Jake Rocheleau et est parue initialement sur Spyrestudios.com.

Les petits détails qui font la différence Pour celles et ceux qui ne le savent pas, l’ergonomie est une discipline sérieuse, elle ne peut (en théorie) être pratiquée que par des professionnels diplômés et aptes à perpétuer la tradition de rigueur scientifique. Mieux : l’ergonomie est une science, elle se fonde sur des publications de référence, par exemple les critères ergonomiques de Scapin et Bastien (guidage, charge de travail, contrôle explicite, adaptabilité, gestion des erreurs, homogénéité et cohérence, signifiance des codes et dénominations…). OK très bien… mais cette rigueur scientifique ne doit pas vous faire oublier que les sujets de test sont des êtres humains : imprévisibles, faillibles et dont le comportement est dicté par des émotions. Il serait donc fort dommage de ne pas prendre en compte cette dimension émotionnelle et de ne pas essayer de séduire les utilisateurs avec des petites attentions. Personnellement j’adore, et vous ?

Webdesign Mag UX – Ergonomie Difficile de passer à côté du phénomène Twitter Bootstrap, cet ensemble d’outils CSS JS et UI pour créer des interfaces web-app en moins de deux. Il doit notamment sa renommée à sa gestion du responsive qui propose deux grilles css dont une entièrement gérée en unités relatives. C’est un framework de création d’interfaces web avancées tout comme « Zurb Foundation », ou le nouveau framework « Pure ». Il diffère sur ce point de ses cousins les frameworks css « Zen grids », « KNACSS », et autres qui n’embarquent aucun plugin javascript et se concentrent sur la structuration de la vue. Pour reprendre la phrase d’introduction sur le site de TB « Sleek, intuitive, and powerful front-end framework for faster and easier web developement » qu’on pourrait traduire par « un kit de composants web html css js (front) puissant, intuitif et élégant, qui va vous faire gagner du temps et vous simplifiera la tâche ». Sur le papier ça fait rêver, mais est-ce que dans les faits c’est toujours le cas ?

Related: