background preloader

10 crimes sur l’ergonomie des sites web que vous ne devriez plus commettre

10 crimes sur l’ergonomie des sites web que vous ne devriez plus commettre
L’article sur les 10 crimes sur les balises HTML que vous ne devriez plus commettre est actuellement l’article qui a été le plus lu sur Kiwano et aussi celui qui a entrainé le plus de commentaires de votre part. Alors, nous n’avons pas pu résister à l’idée de vous proposer une traduction du nouvel article de Chris Spooner intitulé « 10 Usability Crimes You Really Shouldn’t Commit » sur son blog Line 25 Web Design Blog. Voici donc une sélection des dix crimes les plus courants concernant l’ergonomie et l’accessibilité des sites webs avec la solution pour les éviter. Crime n°1 : avoir des labels non associés aux champs de saisies dans vos formulaires Il est indispensable d’utiliser la balise label pour vos labels de formulaires et de renseigner l’attribut « for » pour pointer sur l’ID du champ de saisie. Crime n°2 : avoir un logo qui ne contient pas de lien vers la page d’accueil de votre site Crime n°3 : ne pas avoir de couleur différente sur les liens qui ont été visités

Comment doper ses ventes grâce aux tests AB? Après mon texte sur le click tracking pour améliorer l’ergonomie de son site WEB (article que vous pouvez retrouver ici), voici un article sur une autre technique complémentaire : le test AB… Le test AB est une technique marketing qui consiste à analyser le choix d’un consommateur face à deux variantes d’un même produit, afin d’en déterminer le plus porteur. Ce test a pour but d’améliorer l’ergonomie web de votre site et ainsi d’optimiser votre CA. L’intérêt du test A/B L’intérêt de proposer plusieurs variantes d’une même page Internet permet de déterminer une stratégie visuelle pour améliorer le taux de transformation de la dite page. Qu’est-il possible de tester avec l’AB testing ? Cette technique e-marketing n’a de limite que l’imagination de celui qui la met en place car tout peut-être modifiable afin d’améliorer l’ergonomie d’un site : positionnement d’un bouton, couleur ou taille de la police de caractère, couleur de fond.

HTML5 Boilerplate, un template puissant et complet - Journal du Net Développeurs Performance, compatibilité inter-navigateurs, accessibilité, Javascript... Le template résume les principales bonnes pratiques de développement Web. HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Vous retrouverez donc dans un zip de 464 Ko tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Attention, tout ceci relève d'un condensé d'expérience et de recommandations généralistes, par exemples celles définies par Yahoo et Google, il est possible que certaines ne soient pas applicables à votre site ou provoquent des effets non désirés, faites donc bien attention à comprendre tous les critères utilisés et dans quel but. Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple. Article rédigé par dew sous licence Creative Commons sur Alsacreations

Design et ergonomie d’un site Web Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir ? Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs. Dans cette page : Les standards - Principes de mise en page - Importance du contraste - Le zapping - L'esthétique - La couleur En bref ... Respecter les standards Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. A lire en complément : Ergonomie d'un site Web par Kreatys En détail ... Quelques principes de mise en page La communication écrite existe à grande échelle depuis plus de 500 ans. Les légendes des belles images sont lues même par les visiteurs pressés ! source image : civilization.ca La mise en page doit être conçue comme une pyramide. Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant. Les paragraphes : Vous devez développer une seule idée par paragraphe. Le zapping

Variables personnalisées Google Analytics Google Analytics est un puissant outil statistique, à condition de bien l'utiliser. Il est notamment possible d'y ajouter des variables personnalisées pour mieux segmenter et analyser le trafic. Mais comment installer ces customs variables, comment en ajouter plus de 5 et comment s'en servir efficacement ? Découvrez le guide des variables personnalisée d'Analytics ! A la base, ce post était dédié uniquement à l'ajout de plus de 5 variables personnalisée dans Google Analytics. Mais je me suis dit qu'il serait plus intéressant de faire un article complet sur la question. Les variables personnalisées Les customs variables de Google Analytics permettent d'affiner l'analyse de vos visiteurs, pour pouvoir ensuite agir efficacement sur votre site : ergonomie, graphismes, contenus, campagnes de liens sponsorisées, ... Ces variables personnalisées vont vous permettre de mieux comprendre comment les internautes naviguent sur votre site. 1 visiteur unique => 5 sessions => 42 pages vues. Recommandations

Publicité sur le web : que fait l'ergonomie ? La publicité sur le web est omniprésente. Comme tout élément de contenu constitutif d'un site Internet, elle entraîne des questionnements ergonomiques. Notre objectif consiste à laisser la publicité jouer son rôle, tout en limitant ses défauts potentiels du point de vue de la qualité d'utilisation d'un site. Cet article traitera à la fois du fond et de la forme des contenus publicitaires, en évoquant l'ergonomie des publicités d'abord du point de vue du web en général, puis à l'intérieur d'un site, et enfin dans une page donnée. Véritable fondement de l'économie numérique, la publicité sur le web existe et ne peut pas être exclue sous prétexte qu'elle est susceptible de gêner l'internaute. Les bannières, animations et autres pop-up faisaient déjà partie des Top Ten Mistakes in Web Design de Nielsen en 1999. Pour Alex Kirtland, intégrer les publicités dans le travail de conception d'un site peut même devenir un défi pour le concepteur web. 1.1. 1.2. . . . . . . 1.3. Source: www.monster.fr

Les marques, commerçants et opérateurs de service seront "Responsive Ready" dans le monde ubimédia Le Responsive Web Design est-il soluble dans la digitalisation du monde physique ? Dans le domaine de la conception d'interface, le "Responsive Web Design", qu'on appelle aussi « One Web » (un web unique lisible et ergonomique partout sur tout type d'écran), se voit opposer cette critique: comment garantir une expérience utilisateur réellement adaptée à chacun des contextes d'usage et de connexion si la marque, le marchand ou l'opérateur de service, se bornent à répliquer le même contenu, certes parfaitement ergonomique, mais qui n'exploite pas finement les caractéristiques du contexte et le background de l'utilisateur ? Le responsive c'est quoi ? J'ai voulu creuser la différence entre "answer" et "response" , et je comprends que la notion de responsive renvoie à la notion de réponse, non pas dans le sens, répondre à une question ( to reply to the answer), mais comme l'attitude qui aboutit à la réponse. Le design digital s'en trouve du coup complexifié et deux réponses sont développées:

Les QR Codes révolutionnent les usages Générer du trafic en magasin, enrichir un support papier, récolter des données consommateurs... le QR Code s'impose de plus en plus dans les campagnes de marketing relationnel tant il s'avère d'une efficacité redoutable... si son usage est maîtrisé. "Parler de QR Code, c'est comprendre le lien que fait le consommateur entre un média essentiellement print (affiche, annonce presse, produit, PLV...) et un contenu mobile. En ce sens, cela relève d'un marketing consommateur global", déclare Bertrand Espitalier, directeur du développement et de la communication à l'agence Le Fil. Ils font désormais partie de notre quotidien. Les QR Codes, ces petits carrés à l'origine noir et blanc et désormais colorés, sont peu à peu en train de révolutionner les usages des consommateurs. En France, le taux de connaissance des QR Codes s'élève à 89% et leur taux d'utilisation à 53% (1), à tous les âges : ils sont 35% à être âgés entre 25 à 34 ans, 20% entre 35 et 44 ans, 16% entre 18 et 24 ans (6).

Design Blog, Innovation Design Blog, Modern Design Blog, Product Design Blog 10 Type Rules for an Excellent User Experience When it comes to websites and apps, good typography is more than just a pretty typeface. Letting has to be highly readable – and scannable – while providing a solid visual... Web Design Trends 2016: How Cards Dominate Design Practical as they are visually attractive, card interfaces are more than just a trend. Comprehensive Guide to Static Website Generators Most developers already understand how content management systems work.

Facebook Social Engagement Hub : Transformez votre fan page en outil de relation client avec Get Satisfaction Vu sur ReadWriteWeb, Get Satisfaction une entreprise proposant des outils de service au consommateur vient de lancer un outil de relation client pour les fan pages Facebook. Celui-ci donne la possibilité à vos clients de vous posez des questions et vous permet d’y répondre simplement via Facebook. Le gros plus de l’application : la synchronisation de cet espace Facebook avec votre page relation client présente sur votre site… Le service « Facebook Social Engagement Hub » va ainsi permettre aux entreprises ayant une présence sur Facebook de sonder l’avis de leurs clients et de répondre à leurs questions depuis leur page fan. Le gros avantage du service réside dans la synchronisation de cette application Facebook avec la page de votre site associée. La synchronisation va permettre de garder un historique de ces interactions sur votre site et ainsi mettre en valeur ce contenu en évitant qu’il soit oublié après avoir été archivé sur Facebook. Source : ReadWriteWeb

Color Psychology of Consumer Decision Making | NeuroRelay What does color really mean to your customer, or how does color affect consumer behavior? Colors can have a powerful psychological effect, and there is a strong connection between color and feelings. Color can evoke emotions and therefore it can change our behavior too (a red sports car can create feelings of excitement, or a blue sea can create feelings of calmness). This is also supported by science, as color addresses one of our basic neurological needs for stimulation. For retailers, shopping is the art of persuasion. Color and Marketing When marketing new products it is crucial to consider that consumers place visual appearance and color above other factors when shopping (1% sound / smell, 6% texture, 93% visual appearance). 85% of shoppers place color as a primary reason for why they buy a particular product. Color and Branding Color increases brand recognition by 80%. Color and Consumer Color is one of the most powerful methods of design. Infographic provided by: Kissmetrics.

Bonnes pratiques pour les écrans d’identification Souvenez-vous, il y quelques années je me réjouissais de la simplification de la procédure d’identification avec Open ID : La création de compte simplifiée avec OpenID. Depuis, les choses ont bien changé avec l’avènement des réseaux sociaux et leurs mécanismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de là à ne proposer que cette option comme Klout, c’est extrêmement gênant. Ce type de mécanisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela engendre des conflits insolubles (j’ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Il n’est pourtant pas très compliqué de proposer deux systèmes d’identification : délégué (avec Facebook ou Twitter) et internalisé. C’est ce que proposent des services comme Spotify ou Storenvy, et ça fonctionne très bien.

10 conseils d’ergonomie basés sur des études de recherche Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses. Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. Beaucoup de ces conseils, tel que mentionné précédemment, semblent de mise, mais ils sont enfin soutenus par des statistiques. 1. L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. À la base, cette idée semble tout à fait logique, car, bien entendu, un utilisateur sera frustré s’il passe beaucoup de temps à cliquer ici et là pour trouver ce qu’il cherche. 2.

8 critères ergonomiques pour évaluer la persuasion d’un site Cela fait près de 18 ans que les professionnels se basent, entre autres, sur les critères ergonomiques de Bastien et Scapin. Bien qu’ils soient toujours pertinents et utiles, ils ne sont plus suffisants pour représenter la réalité actuelle du Web. La tendance est à la recherche de persuasion et, bien qu’on en parle de plus en plus sur Internet, c’est un domaine qui manquait cruellement de référence pratique. Ce n’est plus le cas. Dans sa conférence du 29 avril 2011, Eric Brangier nous présentait des critères d’évaluation de la persuasion. Avant la persuasion : évolution des recherches en ergonomie Durant les 40-50 dernières années, les recherches en ergonomie des interfaces ont beaucoup évoluées. Accessibilité : Les premières études s’orientaient sur les contraintes opératoires, au niveau matériel. Critères d’évaluation de la persuasion Les critères suivants sont organisés en deux groupes. Critères statiques : 1. Pour persuader, il faut être crédible aux yeux du visiteur. 2. 3. 4. 5. 6. 7.

L’optimisation de site pour le mobile n’est pas une affaire de taille d’écran mais de comportements ! par Georges-Alexandre Hanin - Chronique e-Business L’optimisation d’un site pour mobile ne consiste pas seulement s’adapter à une taille d’écran mais bien à s’adapter à des comportements différents. Voici quelques clés pour y parvenir. Le comportement des utilisateurs est la clé de compréhension Le mobile est devenu un des centres d’intérêt principal de tous les marketeurs et les entreprises sont de plus en plus nombreuses à optimiser leur site pour le mobile. Dans ce contexte, on entend beaucoup parler de Responsive Webdesign, technique qui permet à un site internet de s’adapter automatiquement et dynamiquement aux différentes tailles d’écrans (ordinateur, tablettes, smartphones). La recherche sur smartphone comme point d’entréeAujourd’hui les consommateurs ont pris l’habitude de se connecter à Internet dès qu’ils le souhaitent grâce aux smartphones et aux tablettes. Dans ce contexte, comment optimiser son site pour le mobile ? Aller plus loin?

Related: