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

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.

Exemple de test utilisateur sur le site seloger.com 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

Innovations - Le responsive design: le nouveau visage d'Internet? Publié le 05 janvier 2012 Les usages digitaux évoluent et entrainent dans leurs sillages une prolifération des supports. Portables, tablettes, ordinateurs, netbooks ou smartphones, le défi à venir sera de pouvoir harmoniser cette démultiplication de l’écran. Eclairage par Dagobert dans sa dernière étude sur le sujet… Réponse concrète à la prolifération des formats d’écran, le responsive design, qui agite les spécialistes depuis quelques mois, est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Aujourd’hui et depuis plusieurs années, les professionnels de la com et les consommateurs font face à la multiplication des terminaux: ordinateurs fixes, ordinateurs portables, smartphones aux tailles d'écrans variées, tablettes et bientôt téléviseurs connectés… Les résolutions et tailles d’écrans se font plus nombreuses, sans compter les différences et les nouvelles habitudes de lecture. Sylvain Bénémacher La suite de l'étude ci-dessous :

Le Responsive Design : un livre blanc pour comprendre la méthode | MiratechMiratech Le responsive design permet d’adapter le design d’un site web à tous types de terminaux : smartphone, ordinateur, télévision, tablette… Quels sont les principes à respecter pour réussir son site web en responsive design ? Quels sont les écueils à éviter ? Quelles sont les limites de la méthode ? Le livre blanc présente les guidelines illustrées des meilleures pratiques , ainsi que l’analyse d’un cas e-commerce concret. 47 pages pour saisir l’essentiel sur le responsive design ! Introduction Qu’est-ce que le « Responsive Design » ? Guidelines Les blocs de contenu Penser en bloc Conserver un ordre logique Adapter les blocs Les menus mobiles Présentation du menu en haut de page Menu en liste déroulante ‹select› Déploiement du menu « Toggle » Menu déroulant par la gauche Menu avec ancre vers le footer Menu uniquement dans le footer Supprimer l’accès au menu Les visuels Supprimer les visuels trop importants Adapter les icônes d’un site Les éléments cliquables Les fonctionnalités des terminaux mobiles

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).

An Extensive Guide To Web Form Usability - Smashing UX Design Advertisement Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability. In this article, we’ll provide practical guidelines that you can easily follow. Why Web Form Usability Is Important The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” Let’s clarify this last point by discussing the three main uses of forms. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks2. Thus, the relationship between forms and usability have two aspects: Forms can make a website usableor unusable, because they stand in the way of the user achieving their goal;Forms need to be usablein order to help the user achieve that goal. Aspect 1: The Relationship 1.

Ergolab 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

Meaningful Transitions // Home Meaningful Transitions - Motion Graphics in the User Interface »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience. The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. »Does your animation have weight, depth and balance? Does your animation have weight, depth and balance? This Website was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in software user interface. Click to read »Meaningful Transitions - Motion Graphics in the User Interface« (Preview/German)

Ergonomie web illustrée « Responsive Web Design » : Aperçu du livre La semaine dernière j’ai eu la chance de recevoir dans ma boîte aux lettres, le quatrième opus, en version presse, des excellents petits livres de poches de la collection « A Book Apart », édités par Eyrolles. Ce dernier est intitulé : « Responsive Web Design ». Les précédents de la série étaient : A ce propos, je vous conseille de lire les différentes critiques que j’ai pu faire sur ces trois livres, qui je l’espère vous incitera à les lire. Ethan Marcotte, auteur du livre est connu dans le cercle du développement Web. Voici donc mes notes à propos du livre ! Avant de commencer je vous propose d’introduire le sujet avec une introduction récupérée sur l’excellent alsacreations : La spécification CSS3 Media Queries du W3C définit les techniques pour l’application de feuilles de styles en fonction des périphériques de consultation utilisés pour des pages (X)HTML. Très prometteur comme introduction non ? Au sommaire Comment est abordé le sujet ? Ce que j’en pense…

Related: