Les détails créent l'expérience utilisateur : 15 exemples en image. L’expérience utilisateur en ligne est une savante équation, une équation composée de nombreuses variables comme le design, les interactions, le temps de chargement, la navigation, le discours client, la haute disponibilité, la qualité de service, etc. Cette équation « expérience utilisateur »se doit de trouver son équilibre entre le ressenti de l’utilisateur et l’efficacité du site à atteindre son objectif premier. J’aurais l’occasion de revenir plus en détails sur cette définition mais je voulais partager avec vous quelques exemples de petits (de tout petits) détails mis en place sur certains sites web ou applications et qui contribuent à créer une véritable expérience utilisateur. Vous ne les avez peut-être jamais remarqués, ou n’y avez jamais fait attention mais pourtant c’est souvent grâce à ces petits détails que vous avez eu l’impression que le site en question était fun, cool, intuitif ou encore efficace.
Petite sélection. #1 – Le logo de CNN change Le logo de CNN change. 5O Bons Conseils Pour Concevoir un Site Internet User Friendly. SEO, ergonomie et clichés. Je répondais hier en commentaire d’un article traitant du SEO et de l’ergonomie sur Locita. Si j’étais globalement d’accord sur le fond, certains points sur l’acquisition de trafic, la conversion, l’ergonomie m’ont fait bondir. D’autres sont sans doute à relativiser. Quel que soit le sujet, je me méfie toujours des certitudes (le SEO m’a appris à ne jamais être trop sûr de moi). Vu ma propension à en faire 10 pages, je vais juste reprendre certains points ici. « Difficile d’être visible sur Google avec une ergonomie ou un design de mauvaise qualité » Là, je m’inscris en faux. J’en veux pour preuve le positionnement de ce site volontairement horrible et à l’ergonomie bien plus que perfectible, blindé de pub et mal hébergé : La DEROUTE. . « On oublie parfois que le design est aussi important dans votre stratégie de génération de trafic » Ne mélangeons pas tout !
Une fois ce trafic généré, on entre dans une seconde phase. La règle des trois clics. La fameuse ligne de flottaison. Mouais. L'accessibilité du web pour les déficients visuels. De nombreux sites web sont inaccessibles aux personnes handicapées, notamment aux malvoyants, parce qu'ils ne tiennent compte ni de leurs besoins, ni de leurs pratiques de lecture numérique. D'où la notion d'accessibilité du web qui suppose que les personnes handicapées puissent non seulement percevoir, comprendre, naviguer et interagir de manière efficace dans l’univers numérique, mais aussi y créer du contenu et y contribuer.
Cette définition élaborée par le W3C est citée par Denis Boudreau dans un dossier que nous vous avons présenté, il y a quelques temps sur Thot Cursus, dont nous recommandons la lecture ou la relecture. Le cas des malvoyants Grâce au développement de la technologie, des outils comme l'afficheur braille et le synthétiseur vocal permettent aux malvoyants de lire eux aussi des contenus numériques. Mais cette lecture n'est aisée que si à la base les contenus sont conçus pour être accessibles à ces usagers spécifiques. La démonstration de l'importance de l'accessibilité. Priceminister contre eBay : le match de l'ergonomie. Le nombre de clics, c’est vraiment si important que ça ? | Ergonautes. Vous connaissez la règle du pouce (rules of thumb en anglais) ? C’est simple, quand vous ne savez pas pourquoi, mais que ca sonne bien, vous pouvez invoquer la célèbre « règle du pouce ».
Les exemples foisonnent et il y a en a une que j’adore : la règle des trois clics. La règle des 3 clics A une période dans la conception de site Internet, on disait que tous les éléments du site devaient être atteignablse en 3 clics : la règle des 3 clics qui a sont article wikipedia, c’est dire…. Puis sont apparus les articles pour dire que ce n’est pas vrai : La vérité sur la règle des trois clics, En finir avec la règle des 3 clics. La vérité est que cette règle est utile de temps en temps mais qu’elle n’a aucun fondement : C’est une règle du pouce. Avouez que vous l’avez déjà invoqué pour convaincre qu’il fallait reconcevoir une partie du site parce qu’il y avait trop d’étapes, et donc trop de clics… Le nombre magique de Miller : 7 plus ou moins 2 Tout est compromis L’exemple du formulaire. La Taxonomie pour éviter le cagibi de l’oubli « Enrico Panaï – Consultant Expert Ergonomie Web et Ergonomie Stratégique.
Le terme taxonomie (taxonomy en anglais) désigne une méthode de classification des informations dans une architecture évolutive. Le terme est couramment employé dans le cadre des systèmes de gestion de contenu (CMS). Vous avez sûrement déjà entendu parler de taxonomie pour l’organisation des contenus d’un site. Mais c’est quoi concrètement ? Côté client (MOA) la taxonomie sert à centrer les informations sur le client (user-centered). Côté informatique (MOE) la taxonomie sert à organiser hiérarchiquement les informations.
Nous pouvons donc considérer la taxonomie comme l’instrument de base (ou le dictionnaire) pour faire communiquer la MOA avec la MOE. En réalité, nous vivons aujourd’hui dans un monde où la quantité d’information disponible augmente rapidement et avoir trop d’informations revient souvent à ne pas avoir d’information. L’importance d’organiser correctement les informations, pour pouvoir ensuite les retrouver, a bien été comprise par le créateur de l’HTML. . - créer la gouvernance. Paris Web 2010 – Les erreurs les plus fréquentes en accessibilité du Web. Lisibilité des textes sur un site Web (Taille, Police, Couleur...) » La Gazelle du Web. Lisibilité des textes Consulter des informations sur le net fait maintenant partie de notre quotidien, mais la lecture sur l’écran reste tout de même moins facile que sur le papier (25% de temps de lecture supplémentaire).
Une page mal conçue peut fatiguer vos internautes et les faire fuir. Il est donc important que vos pages soient optimisées pour que les internautes trouvent votre site visuellement « confortable ». Vous devez travailler sur 2 éléments : les couleurs et les caractéristiques du texte. Nous parlerons de la mise en forme des textes dans un prochain article… Les couleurs Le contraste doit être assez important entre la couleur des textes et le fond de page. Prenons l’exemple d’un texte de couleur bordeaux #B00000 (code hexadécimal de la couleur) sur fond de couleur grise #322D2D.
Nous voyons que la brillance est à 6 donc loin du chiffre idéal 125 et le contraste à 216 au lieu du 400 conseillé. Les caractéristiques du texte Taille de police : te, une taille de 12 pixels. Gras : Inaccessibility of CAPTCHA. Abstract A common method of limiting access to services made available over the Web is visual verification of a bitmapped image. This presents a major problem to users who are blind, have low vision, or have a learning disability such as dyslexia.
This document examines a number of potential solutions that allow systems to test for human users while preserving access by users with disabilities. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. This is a W3C Working Group Note produced by the WAI Protocols and Formats Working Group.
The WAI Protocols and Formats Working Group recognizes that this is a dynamic area of technology. The WAI Protocols and Formats Working Group is part of the WAI Technical Activity. This is an updated version of a document previously titled "Inaccessibility of Visually-Oriented Anti-Robot Tests: Problems and Alternatives". 1. 1.1 A false sense of security 2. 3. 4.
Recommended Guidelines on Language and Terminology – PERSONS WITH DISABILITIES. Ce manuel contient des recommandations à l’intention des radiodiffuseurs sur le langage et la terminologie recommandés lorsqu’on fait référence aux personnes handicapées dans les émissions de nouvelles. Il s’inspire de la recherche effectuée par l’Association canadienne des radiodiffuseurs au nom des radiodiffuseurs privés canadiens et d’une consultation auprès des personnes handicapées et des journalistes de la presse électronique canadienne. Ce manuel se veut ni un code de l’industrie, ni des règlements obligatoires. Son but vise plutôt à familiariser les professionnels responsables des nouvelles avec la terminologie préférée des personnes handicapées au Canada. Il n’est pas recommandé pour d’autres catégories d’émissions, telles les comédies et les émissions dramatiques. En 2005, l’Association canadienne des radiodiffuseurs (ACR) a commandé une étude de recherche sur La présence, la représentation et l’intégration des personnes handicapées dans les émissions de télévision.
U.S. Haut. 7 enseignements pratiques tirés du eye-tracking : les internautes vont-ils sous la ligne de flottaison ? Un des mystères les plus épais du web a été résolu depuis bien longtemps, mais le eye-tracking a permis de mieux comprendre le fonctionnement des internautes lorsqu’il s’agit de plonger profondément dans la page et de s’enfoncer sous la ligne de flottaison. Pour rappel, la ligne de flottaison, c’est cette ligne de démarcation qui sépare ce qui est visible immédiatement à l’affichage d’une page web de ce qui n’est visible que lorsqu’on déroule la page à l’aide de sa molette de souris ou de la scrollbar (barre d’ascenseur). Sous la ligne de flottaison, pensait-on, point de salut, les internautes n’y vont pas. Ce n’est pas que faux, mais pas que vrai, non plus La réalité, c’est que les internautes plongent dessous s’ils en ressentent le besoin.
Autrement dit, s’ils pensent qu’ils vont pouvoir trouver de l’information qui les intéresse au delà de la zone visible de la page. Schéma du temps d'attention par tranche de page en hauteur. Exemple sur la page d’accueil : 25 raisons pour lesquelles on va quitter votre site en 10 secondes | Alekseo. Qu’est-ce qui motive les gens appuyer sur le bouton «en arrière» lors de la visite de votre site? Pourquoi s’en vont-ils si vite et quelles démarches peut-on entreprendre dans ce cas-là pour les retenir? Ci-dessous je voudrais vous proposer la traduction d’un excellent article de Chris Lake dans son blog Econsultancy.com. Quelques-uns des propos de Chris peuvent paraître assez fortes, pourtant il a bien démontré l’attitude d’un utilisateur ordinaire en face de certains nuances de sites web.
Alors, voici 25 raisons qui feront Chris Lake quitter votre site lors des premières 10 secondes de sa visite. Ayant bien réfléchi, j’ai compris qu’il existe beaucoup plus de facteurs négatifs qu’il ne semble du premier regard. Evidemment, quelques facteurs à part peuvent ne pas suffire pour faire un utilisateur abandonner le site, or, ensemble, ils exercent un très mauvais impact. Il n’est pas facile de créer au visiteur des conditions confortables, chaque site web a ses particularités. A quoi bon ? Accessibilité des sites Web publics : 10 sites portails au banc d'essai. Date de publication : 2011-02-09 Auteur : [courrier électronique]Patrice Bourlon Sommaire de la page Objectif mai 2011 Depuis la publication du [externe]décret n° 2009-546 du 14 mai 2009, les nouveaux sites Web des services de l’État et des collectivités doivent être accessibles aux personnes handicapées et conformes au Référentiel général d’accessibilité pour les administrations (RGAA).
À moins de 4 mois de cette échéance, où en sommes-nous ? Afin de contribuer à répondre à cette question, nous avons constitué un échantillon de 50 sites Web des services de l’État ou des établisements publics qui en dépendent (10 préfectures, 10 ministères, 10 sites portails à forte fréquentation et 20 établissements publics) et nous soumettons la page d’accueil de ces sites à notre grille d’analyse simplifiée de 10 critères (voir plus bas). Nous avons réalisé une opération similaire pour les sites Web des collectivités. Sommaire Les sites évalués Nous avons évalué la page d’accueil des 10 sites suivants : Liens - ergonomie, architecture de l'information, utilisabilité.
Derniers liens User Interface (Q&A) Une plateforme de Questions / Réponses dédiée à l'expérience utilisateur web et mobile. » Visiter le site Baekdal.com Le site de Thomas Baekdal est très riche en ressources diverses, la plupart appartenant au champ de l'expérience utilisateur. Assorti d'une jolie baseline*, s'il-vous-plaît ! (* "The goal is pretty simple") Colour Contrast Check Un formidable petit outil proposé par Jonathan Snook, qui permet de calculer les rapports de contrastes de couleurs et de luminances entre des caractères et un fond. » Voir tous les derniers liens.
10 facteurs à la source de l’évolution de l’ergonomie Web. Il semble que les entreprises soient condamnées à périodiquement entreprendre la refonte de leur site. Frustrant pour certains, normal pour d’autres. Cela dit, les refontes sont parfois nécessaires. Parfois un changement technologique s’impose. Mais souvent, ces refontes ont plus à avoir avec l’évolution des attentes des internautes. On pourrait aussi dire que les attentes augmentent au fil du temps. Voici un palmarès des facteurs (parfois surprenants) qui ont eu le plus d’influence sur l'évolution de l'ergonomie Web. 1- La molette de souris (Scroll wheel) Inventée en 1995, elle est devenue monnaie courante au début des années 2000. Conséquence : Les pages se sont beaucoup allongées dans la dernière décennie. 2- Les écrans à cristaux liquides Les écrans à cristaux liquides, majoritaires depuis 2007 et omniprésents désormais, ont conduit à une nette augmentation de la résolution moyenne des écrans (et à une légère augmentation de la densité des pixels).
Conséquences: 6- JavaScript 9- jQuery.