Vu sur le web : quelques liens que j’ai partagés avec mes collègues

Posted on Publié dans Non classé No Comments Étiquetté avec

Diaporamas, carrousels et accordéons : Le point de vue de Nielsen
Formulaires : Pourquoi les utilisateurs ne remplissent pas les formulaires d’inscription
Cartographie de l’UX : Méthodes, livrables & savoirs   [SVG]  [PDF]

Mieux traduire les besoins utilisateurs à l’équipe de développement

En quelques mots :

  • Faites du maquettage fonctionnel
  • Proposez une cinématique d’écrans
  • Storytelling
  • Documentez les fonctionnalités

Article original extrait de (Hélas ces deux liens sont morts) :

  • http://www.gargarismes-ergonomiques.com/post/traduction-besoin-utilisateur
  • Démarche ergonomique dans le cadre d’un projet : http://www.gargarismes-ergonomiques.com/post/demarche-ergonomique-projet-web

Messages d’erreur : Article original (en)
Drag and drop sur le web : exemples et bonnes pratiques
Utilisabilité des CMS : 5 (autres) points à réfléchir
Rapport usability : Un (ancien) projet de norme
Sites gouvernementaux : Guide de conception de formulaire du Québec [PDF]
Un article sur les apps hybrides : Navigating the Mobile App Development Landscape
Création de formulaire : Smashing magazin fait le point sur les dernières évolutions
Fiche de lecture : Mobile first de Luke Wroblewski
Utilisabilité des sites e-commerce : Nielsen revient sur le sujet 11 ans après sa dernière étude
Écrire de la documentation : Retour d’experience
Outil de mesure du contrast : Contrast Analyser
Rédaction de scénarios : Les 3 grandes étapes
Parution d’une norme sur l’ergonomie : La norme ISO 26800:2011
Intégrer l’ergonomie web en entreprise : Quelques recommandations
Benchmark éditorial : Quelques grilles à télécharger
Booster votre page d’accueil : Quelques conseils de Laure Sauvage
Eye Tracking : Le diamètre pupillaire
Conception d’IHM : Méthodologie
Persuasive design : Vos premiers pas en persuasive design
Une vision globale de l’expérience utilisateur : 3<sup>ème</sup> partie
Architecture de l’information : Penser l’organisation d’un site web
Que faire avec le feedback des utilisateurs ? : Améliorez l’expérience utilisateur de votre site grâce à vos utilisateurs
Nouvelles façon de déterminer la pertinence d’une page web : Twikio : la fin du ranking à la Google ?
Article très commercial mais intéressant : Eye Tracking en E-Marketing
Un article qui met les points sur les I : Humeur : tout le monde il est beau, tout le monde il est ergonome
Les bonnes pratiques de conception : Zoning, wireframe et prototype
Menus affichés au survol : Pourquoi font plus de mal que de bien
Exemples de plan de test : Handbook of Usability Testing 2<sup>nd</sup> Edition
Une liste de design patterns actualisée : Design patterns, des librairies pour la conception d’interface
Un utilisateur découvre l’ordinateur et le web : User Testing in the Wild: Joe’s First Computer Encounter
It’s the little things : How small frustrations can ruin a nice experience
Life below 600px : There’s life below the fold
Writing microcopy : The fastest way to improve your interface is to improve your copy-writing.
[Lien mort] RIA : Application Web Ajax – Edition de cellules dans un tableau
Moteur de recherche en ergonomie : Ergonosearch

Moteur de recherche

Après excellente découverte de Geert (un livre à paraitre) : Search User Interfaces

Et alors qu’avec Nicolas nous planchions sur les moteurs de recherche pour les nouvelles instructions administrative et l’aide en ligne, j’ai donc lancé une petite recherche sur internet et voila ce que j’ai trouvé :

  • Offrir un bon moteur de recherche interne sur son site : Essentiel et difficile !
    • Beaucoup d’internautes utilisant les moteurs de recherche y serait contrait par de mauvais sites (des sites dans lesquels il est difficile de trouver l’information que l’on cherche) ;
    • Plus les internautes utilisent les moteurs de recherche et moins ils ont de chance de trouver ce qu’ils cherchent ;
    • » Dès lors on peut en conclure que pas de moteur de recherche vaut mieux qu’un mauvais moteur de recherche ;
    • Les utilisateurs ne savent pas utiliser correctement ni les opérateurs booléens ni les jockers ;
    • » Dans un champs de recherche simple, l’opérateur doit implicitement être ET ;
  • À voir aussi un article très complet en 3 parties :

Webcredibility  : Tout savoir la webcredibility
Terminologie : Les interfaces vocales

Les ancres

En lisant le blog de la société Belge AG consult, j’ai trouvé un article qui pourrait nous donner un peu de matière pour le webguide :

  • Présentez les liens rapides en haut de page, sous le titre de la page, sous la forme d’un index.
  • Respectez les règles de cliquabilité.
  • Les ancres (liens sources) doivent être identiques aux intertitres (liens cibles). En d’autres mots, les titres dans l’index doivent être libellés de la même manière que les titres qui apparaissent dans la page.
  • Les intertitres vers lesquels renvoient les ancres doivent graphiquement ressortir et clairement faire apparaître la hiérarchie dans la titraille.
  • La première ancre doit renvoyer vers une zone encore visible dans le premier écran de sorte que l’utilisateur comprenne qu’il a affaire à des ancres.
  • A droite des intertitres, dans la page, proposez un lien souligné libellé «Haut» (ou l’icône d’une flèche vers le haut) pour permettre à l’utilisateur de remonter à l’index à partir de chaque intertitre qui en fait partie.
  • Assurez-vous que les ancres renvoient l’utilisateur au bon endroit de la page.

Une manière originale de présenter des heuristiques : Charte des droits des utilisateurs

Voici une charte qui provient du site d’Alain Robillard – Bastien, traduite d’après un article intitulé “A Computer User’s Manifesto” de Stephen W. Wildstrom.

  • L’utilisateur a toujours raison. S’il existe un problème avec l’utilisation du système, il provient du système, pas de l’utilisateur.
  • L’utilisateur a droit à la facilité lors de l’installation de logiciels et d’équipement informatique.
  • L’utilisateur a droit à des systèmes faisant exactement ce qu’ils sont censés faire.
  • L’utilisateur a droit à des instructions claires, simples et précises lui permettant de comprendre et d’utiliser un système assurant l’atteinte de ses objectifs.
  • L’utilisateur a droit au contrôle absolu du système, de même qu’à être capable d’obtenir l’attention du système sur demande.
  • L’utilisateur a le droit d’être informé par le système sur son état par rapport à la tâche qu’il effectue et par rapport au progrès accompli vers la complétion de la tâche, de façon claire, compréhensible et précise.
  • L’utilisateur a le droit d’être informé clairement quant aux spécifications requises pour utiliser pleinement tout système informatique.
  • L’utilisateur a le droit de connaître les limites des capacités du système.
  • L’utilisateur a le droit de communiquer avec les fournisseurs de technologies et de recevoir des réponses utiles et intelligentes à toutes ses questions.
  • L’utilisateur doit être le maître de la technologie, non l’inverse. Tout système doit être intuitif et naturel lors de son utilisation.

Ergo / UX Mobile

Choisir entre une application, native, web ou hybride : l’analyse de Norman Nielsen

Native, Web App, or Hybrid: Which Should You Choose?

Each of these types of apps has their advantages and disadvantages, as I’ve tried to point out. Let’s summarize them here.

Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.

Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.

Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or an information need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.

Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app.

Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.

Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.

Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.

Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such as Playboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.

Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web. NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.

User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.

To summarize, native apps, hybrid apps, or web apps are all ways to cater to the needs of the mobile user. There is no unique best solution: each of these has their strengths and weaknesses. The choice of one versus the other depends on each company’s unique needs.

Écrans tactile : Luke W propose une référence des mouvements possibles [EN]
Contexte d’usage : l’art d’imaginer des scénarios
Ergonomie mobile : Android : retour d’expérience
Ergonomie mobile : Responsive webdesign : adapter un site à toutes les résolutions
Web mobile : Comment réagissent les utilisateurs face à un site long à charger
Ipad & ergonomie : Futurs usages du web et tablettes tactiles

Tests utilisateurs

Séances utilisateurs : individuelle ou en groupe ?
Tests utilisateurs ? : 5 arguments pour clouer le bec à votre client
Comment réaliser un test utilisateur en toute simplicité : Désacraliser les tests d’utilisabilité
Tests utilisateurs : Document Word en anglais

Outils statistiques

  1. Une liste d’outils statistiques gratuits Free Statistical Software
  2. Une seconde liste Logiciels gratuits de statistique
  3. Un site dédié aux outils statistiques Bill Miller’s Free Statistics Site
  4. Une troisième liste Logiciels pour les statistiques
  5. Un outil statistique libre en ligne de commande (une référence) The R Project

Bonnes pratiques

Bonnes pratiques : Attention danger !

Guides de style : Quel intérêt

Quelques guides de style

Organisation classique d’un guide de style

  1. Contexte d’usage, connaissance sur les utilisateurs : Rappel des études concernant les utilisateurs qui sont à l’origine des choix faits par la suite.
  2. Principes de conceptions, modèle d’interactions : L’interface va probablement se baser sur un type d’interface existant (WIMP, texte, hiérarchique,…) ou s’appuyer sur du matériel spécifique comme un écran tactile, une télécommande, etc… Cela crée un cadre spécifique et des contraintes pour la conception.
  3. Règles de conceptions : On peut rappeler là un certain nombre de règles transverses par exemple en ce qui concerne l’accessibilité, la protection des mineurs, l’organisation de l’information, les raccourcis claviers…
  4. Architecture de l’information, Structure des services : Des structures types peuvent être proposées en fonction de la complexité des services et de la structure des données.
  5. Modèles d’écrans : Chaque type d’écrans est défini, ainsi que son bon usage, de la fenêtre principale, au dialogue en passant par la pop-up d’alerte à la prudence…
  6. Éléments d’interfaces : On arrive dans les détails, le plus important, qui permet de déterminer quel contrôle, quel élément il faut utiliser dans quel cas. Ainsi que les éléments spécifiques à certains usages : calendrier pour saisir les dates, contenu audio-visuel, etc…
  7. Graphisme, animations, typographies,… : Les éléments liés aux aspects visuels sont souvent regroupés, soit parce que l’interface est personnalisable, soit parce qu’ils peuvent évoluer en parallèle des interfaces.
  8. Annexes, index, etc…

Article original

Divers

Accessibilité

Quelques extraits des WCAG 2 :

Référencement

 

Dev web

Layout responsive : Une liste de paterns avec code à reprendre
Responsive, nouvelles techniques : et sa traduction chez Openweb
Template HTML/CSS responsive : Simple Stacks and Panels [en]
Mise à jours des codes twitters pour WordPress : Explication en Français
Priorité des opérateurs CSS : Explication chez Alsacréation
Newsletter : Un e-mail en HTML responsive multi-clients
Favicon : L’équivalent pour Windows 8
Mise en page : Le modèle tabulaire en CSS
Web sémantique : Microdata et Schema.org
Configuration serveur : Le fichier htaccess
visualisation de données : 13 exemples
Métiers du développement web : De l’intégrateur au développeur front-end
Tous les navigateurs acceptent HTML5 et CSS3
Mise en page CSS avancée : La propriété display
HTML : centrer verticalement sur tous les navigateurs
HTML5 & CSS3 : Acceptés par tous les navigateurs
Boutons extensibles : un exemple en CSS compatible tous navigateur
Outils pour webmaster : Les guidelines de Google
CSS : Mise en page avancée grâce à la propriété display
Exemples d’infobulles en CSS : Examples of CSS ToolTips
HTML5 : HTML5 par l’exemple

CSS 2.1 : Ce que permettra l’abandon d’IE6

L’abandon prochain d’IE6 permettra enfin d’exploiter pleinement les CSS2 et 2.1 qui, bien que CSS3 pointe le bout du nez, ne peuvent pas encore être pleinement utiliser aujourd’hui.

Cet article en français sur le site Britoweb et sa source en anglais sur le site 456 Berea Street mettent en avant quelques points intéressants des CSS 2 que nous pourront bientôt utiliser :

  • Le sélecteur d’élément enfant (E > F) ;
  • Le sélecteur d’élément frère adjacent (E + F) ;
  • Le sélecteur d’attribut (E[attribut] et E[attribut=valeur], notamment) ;
  • La pseudo-classe :first-child ;
  • La pseudo-classe :hover applicable à n’importe quel élément et non seulement à l’élément a ;
  • La pseudo-classe :focus ;
  • Le sélecteur de classes multiples (E.classe1.classe2).

Typographie

Dyslexie : Une police de caractères dédiée
Taille du texte : 16 Pixel [en]

Guidelines : 12 Conseils pour gérer l’Ergonomie au travers de la Police

Voici une liste de 12 directives pratiques relatives à la police qui vous aideront à améliorer la facilité d’utilisation de votre site web :

  1. Maintenir le nombre de polices utilisées au minimum : utiliser un grand nombre de polices (plus de 3 polices différentes) rend un site Web difficile à regarder, non structuré et non professionnel.
  2. Utiliser des polices sans empattement plutôt qu’avec pour le contenu : Les polices sans empattement sont plus adaptés pour l’écran que les polices à empattement qui sont mieux adaptés pour les titres et l’impression.
  3. S’assurer que le texte et sa taille sont appropriés : Il est recommandé que l’Arial Trébuchet et Georgia soient en plus de 10 pts, le Times New Roman à 12pts et d’éviter le Comic Sans et l’Impact.
  4. Utiliser un contenu avec une capitalisation mixte : Afficher tout le texte en majuscules ou petites majuscules le rend difficile à lire et à analyser pour l’utilisateur. Cela donne au site Web un aspect peu professionnel et non digne de confiance.
  5. Utiliser des polices standards pour le Web : Les utilisateurs sont plus familiers avec les polices standards et les lisent donc plus rapidement.
  6. Ne pas minimiser l’espacement des caractères : La modification de l’espacement des caractères pour intégrer plus de texte le rend plus dense et difficile à analyser.
  7. Limiter l’utilisation de différentes couleurs pour les polices : Lorsque le texte est trop coloré, cela réduit son impact et sa compréhension. En outre, les utilisateurs peuvent confondre avec une publicité. Ainsi, il est recommandé d’utiliser au maximum 4 couleurs différentes pour le contenu du texte.
  8. Ne pas utiliser le bleu pour le contenu : Les utilisateurs associent le texte en bleu avec des liens et essayent donc de cliquer dessus.
  9. Éviter de colorer un texte en rouge ou en vert : Le daltonisme est une affection fréquente surtout chez les hommes (8% des hommes sont daltoniens). Il est conseillé de toujours utiliser d’autres couleurs, surtout pour distinguer le texte important.
  10. Ne pas utiliser les couleurs identiques ou similaires pour le texte et l’arrière-plan : Plus le texte est visible, plus les utilisateurs seront en mesure de lire rapidement et facilement.
  11. Ajouter un séparateur des milliers pour les nombres de 5 chiffres ou plus : Avec le séparateur des milliers, il est plus facile pour les utilisateurs d’interpréter rapidement les chiffres.
  12. Ne pas utiliser le déplacement ou le clignotement de texte : Bien que les technologies avec lesquelles ils sont mis en œuvre ont changé, ces techniques qui existent depuis les premiers jours du Web se retrouvent toujours dans certains sites Web. Leur objectif est toujours le même : attirer l’attention des utilisateurs. Cependant, ils véhiculent une image de manque de professionnalisme et peuvent conduire les utilisateurs à quitter le site Web.

12 guidelines for good website usability

  1. Keep the number of fonts used at a minimum: Using a lot of fonts (more than 3 different fonts) makes a web site look unstructured and unprofessional
  2. Use sans serif fonts instead of serif for content: Sans serif fonts are more suited for the screen than serif fonts which are better suited for headings and print
  3. Ensure that proper text and text size is used: It is recommended that Arial Trebuchet and Georgia are at 10pts+, Times New Roman at 12pts+ whilst Comic Sans and Impact fonts are not used
  4. Content must make use of mixed capitalisation: Having all text in caps or small caps makes it difficult for the user to read and scan it. All caps text makes a web site look unprofessional and untrustworthy
  5. Use standard fonts for web site fonts: Users are more familiar with standard fonts and can thus read them faster
  6. Character spacing should not be minimised: Altering the character spacing to fit in more text, makes it more dense and difficult to scan
  7. Limit the use of different colours for fonts: When text is over-designed, it affects its meaning. Additionally, users may mistake over-designed text for adverts. Thus it is recommended that 4 different colours or less are used to colour text
  8. Do not use blue for content: Users associate blue text with links and can thus try and click on it
  9. Avoid colouring text in red or green: Since colour blindness is a common condition, especially amongst men (8% of men are colour blind), it is advisable to always use other cues in addition to colour to distinguish important text. It is also advisable to avoid the use of red and green since red and green colour blindness is the most common form of colour blindness
  10. Do not use the same or similar colours for text and background: The more visible the text, the faster users are able to scan and read it
  11. Numbers having 5 digits or more should have a thousand separator: The thousands separator makes it easier for users to quickly scan and interpret numbers
  12. Do not use moving or blinking text: Although the technologies with which they are implemented has changed, these techniques that have been with us since the early days of the web are still found in some web sites. Their objective is still the same – to draw the users’ attention. However, they convey an unprofessional image and may lead to users leaving the web site

Référencement

AuthorRank & AuthorShip : explications par WaW
Algorythmes Google : L’impact de Panda et Pinguin
Référencement WordPress : URL Canonique
Référencement : Pourquoi conduire des tests utilisateurs
Présentation d’Ad-word : presentation à laquelle j’ai assisté

Média sociaux

Bouton de partage : Le point après 2 mois sans
Ergonomie des réseaux sociaux par Nielsen : Streams, Walls, and Feeds[en]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.