background preloader

Les supports logiciels de l'ergonome

Les supports logiciels de l'ergonome
Introduction : un support pour… L'ergonome dans sa pratique quotidienne a besoin d'outils pour réfléchir, formaliser des idées et modèles, et conduire des tests utilisateurs. Cet article ne détaille pas de façon exhaustive les supports logiciels de l'ergonome, mais se veut une présentation rapide des applications qui sont les plus utilisées dans la pratique de l'ergonomie informatique. La majorité des applications présentées conviennent à la pratique générale de l'ergonomie des interfaces homme-machine. Enfin, on ne parlera pas uniquement de logiciels clients, mais on étendra ce concept à des applications, des services disponibles en ligne. L'idée consiste à traiter cet article sous forme d'objectifs : Quelles applications conviennent pour quel objectif ? Certaines applications se trouvent associées à plusieurs objectifs, et c'est un critère essentiel, puisque c'est ce qui fera que l'ergonome puisse se spécialiser dans l'utilisation de ces applications. 1. 2. 3. Classified 4. 5. 6. 7. 8. 9. Related:  carineg

Tri par carte Le tri par carte est une méthode permettant d'organiser les pages d'un site web. Les pages sont représentées par des cartes en papier. L'utilisateur regroupe les cartes qui se ressemblent. Il organise ainsi le contenu du site selon son point de vue et retrouvera plus facilement les informations qu'il cherche. Mode opératoire On rédige une carte pour chaque page du site. Les cartes sont des morceaux de papier de la taille d'une grande carte de visite, de préférence en papier cartonné pour faciliter la manipulation, mais des post-its peuvent aussi convenir. Le tri par carte est effectué avec un panel d'utilisateurs représentatifs de la cible du site. Un ensemble de cartes et d'enveloppes est présenté à l'utilisateur. Le temps pour réaliser le tri n'est pas limité. Il est recommandé de ne pas dépasser les 50 cartes, car le tri risque d'être faussé par la difficulté à prendre en considération l'ensemble des cartes. Valider le contenu du site Synthèse des résultats

Les couleurs et l'accessibilité En France, la proportion de daltoniens est d'environ 8% chez les hommes et 0,45% chez les femmes (source Wikipédia). Plus de 10% de la population masculine est daltonienne dans le monde, et affectée par une perception des couleurs déficiente. Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite... Bien entendu, il est très difficile, voire impossible d'éviter de mettre sur son site toutes les couleurs qui pourraient être mal perçues. Cependant, il est à la portée de tout le monde de faire en sorte que les pages soient lisibles par tous, quel que soit le handicap visuel. Dans cet exemple on voit bien que C et E sont plus facilement lisibles parce que le contraste est assez fort. En plus de faire attention aux couleurs employées, je vous rappelle qu'il est important de garder à l'esprit que la couleur ne soit jamais la seule indication de sens.

Télécharger IETester - Testez vos pages web sous différentes versions d'Internet Explorer : gratuit Témoignages : 14 professionnels expliquent leur stratégie en community management Nous avons sorti il y a quelques semaines notre grande enquête 2012 sur les community managers en France. On y découvrait le profil des professionnels en poste, leurs missions, leur salaire ou encore leur intégration dans l’entreprise. Pour faire suite à cet évènement, RegionsJob et ANOV Agency ont décidé de poursuivre l’aventure en faisant réagir 14 professionnels de la communication et du marketing aux chiffres de l’enquête. Ils en profitent pour expliquer leur vision du community management, de son avenir et de son intérêt. Le document suivant reprend ces 14 interviews. Forcément intéressant car tourné vers un aspect pratique et opérationnel, il contribue à établir un état des lieux du community management en France en 2012, que ce soit chez l’annonceur, en agence, en freelance ou dans les médias. Et un merci particulier à tout ceux qui ont accepté de répondre à nos questions : Annonceurs Agences Médias Blogueurs

Les « Style Tiles », un nouvel outil pour le webdesigner ? | Édition Nº4 Mais qu’est-ce que c’est ? On peut traduire en français les “Style Tiles” par le terme “Planches Tendances”. Habituellement utilisées en mode, en déco ou même en publicité, elles servent à définir les grandes tendances (graphiques, texturales, chromatiques, etc.) d’un projet donné. Un article de Samantha Warren, paru récemment sur A List Apart, propose d’adapter le concept et de l’utiliser en webdesign pour ressortir des tendances visuelles sans se soucier de la structure de la page. En bref, de faire l’inverse de ce qu’on fait avec les “wireframes” (ou “filaires”, ou “gabarits”, ou même “storyboards”… selon vos habitudes) pour déterminer une structure sans se soucier de l’apparence visuelle… Pourquoi s’en servir ? Ça marche bien et les clients y sont habitués. Partie intégrante de la démarche de “responsive webdesign” (“design adaptatif”), les “Planches Tendances” se proposent donc de décorréler la structure de page du choix des aspects graphiques et stylistiques en eux-mêmes. Conclusion

Pattern UI : Vision des couleurs et daltonisme En France, la proportion de daltoniens est d’environ 8% chez les hommes et 0,45% chez les femmes. Le daltonisme, décrit il y a deux siècles par le physicien anglais John Dalton, est un déficit visuel dont la forme la plus connue se manifeste par une perception déficiente du rouge (protanopie), du vert (deutéranopie) ou plus rarement du bleu (tritanopie). En gros, lorsqu’un daltonien (deuteranope ou tritanope) observe l’infographie sur les couleurs des géants du web, il voit ça : Lorsque la plupart d’entre nous voit ceci : Pourquoi surtout les hommes ? Description Même s’il est compliqué de tenir compte de l’ensemble des dyschromatopsies, exclure environ 10 % de la population mondiale est juste inenvisageable ! –> 2 règles ultra simples à suivre lorsque l’on travaille sur une infographie, de la dataviz ou sur les pages d’une application de manière générale. 1/ Tester les contrastes en passant en niveaux de gris. sur cet exemple , interface Windows : 2/ Simuler la vision des daltoniens Antipattern

2. Fenêtres principales L'interface utilisateur de GIMP est maintenant disponible en deux modes : mode multi-fenêtre, mode fenêtre unique. Quand vous lancez GIMP pour la première fois, il s'ouvre en mode multi-fenêtre par défaut. Vous pouvez passer en mode fenêtre unique grâce à la commande → ) dans la barre de menus de l'image. Mode multi-fenêtre Figure 3.2. La copie d'écran ci-dessus montre les fenêtres qui apparaissent à l'écran au démarrage de GIMP, après la phase initiale de chargement. Vous pouvez noter deux panneaux, gauche et droit, et une fenêtre d'image au milieu. La Boîte à outils : Elle contient un ensemble de boutons icônes servant à sélectionner un outil. La gestion des boîtes de dialogue et des fenêtres de regroupement est décrite dans Section 2.3, « Dialogues, fenêtres et onglets ». Mode fenêtre-unique Figure 3.3. Vous retrouvez les mêmes éléments, avec certaines différences dans leur gestion : Les panneaux gauche et droit sont fixes ; vous ne pouvez pas les déplacer. Figure 3.4.

colourcode - find your colour scheme Vers une Usine de Développement 2.0 En repartant de l’usine de développement tel que nous la connaissons aujourd’hui, nous allons tenter de vous initier à notre vision de l’UDD (Usine de développement) de demain. En effet, en interne chez OCTO nous travaillons activement sur ce sujet de recherche. Pourtant, avant de rentrer dans les séduisants concepts qu’il pourrait apporter, revenons sur les principes et limites de ce que l’on considère comme une UDD 1.0. C’est une usine logicielle, contenant des outils pour le développement et permettant d’automatiser tout ce qui peut l’être et ce dans le processus de construction logiciel de bout en bout. En effet, le développement logiciel actuel (à l’état de l’art) suit un processus centré sur l’usine de développement. Pour avoir une vision concrète d’une UDD, nous proposons de la représenter schématiquement comme ceci : On voit ici un workflow plutôt complet et répondant aux besoins de nombreux projets. Elle apporte aussi des bénéfices implicites comme : Gestion des environnements

Signification des couleurs en E-marketing et en Ergonomie Web . Sur la demande de plusieurs clients et stagiaires, les consultants-rédacteurs de Trinity Advise se sont mobilisés pour vous proposer un dossier complet sur les codes couleurs web et la signification des couleurs pour Internet. Vecteurs de cohérence graphique, les couleurs dictent de nombreux comportements à l’inconscient de l’internaute. Elle génèrent des réactions et des émotions que nous ne savons pas concrètement évaluer et chiffrer en e-marketing, sauf avec les nouveaux outils de test d’ergonomie web (eye tracking, mouse tracking, neuromarketing). Comment sont perçues les couleurs sur Internet, quel est leur impact sur la navigation et comment influencent-elles les internautes dans le tunnel d’achat ? 1. 2. 3. 4. Annotations et explications complémentaires [x] En savoir plus ————————————————– . En tout état de cause, le choix de la colorimétrie demeure aujourd’hui très subjectif car il ne dépend souvent que des goûts d’un seul comité de décideurs. Significations : Représentations :

Nouveau thème graphique en HTML5 et responsive design Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles). Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

Créer une grille CSS responsive Les grilles CSS, à quoi ça sert ? La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. L’idée c’est de partager votre site en un nombre défini de colonnes. L’image ci-contre affiche un exemple d’un site (au hasard deercreation.fr) qui utilise un système de grille à 12 colonnes. Dans la partie réalisations, la largeur d’une vignette vaut 4 colonnes. Réalisation Ce système de grille est finalement assez simple à mettre en place et ne nécessite que du HTML et CSS. Dès le début, il est important de bien choisir la largeur de son site. Pour mettre ça en place, on va utiliser des classes CSS spécifiques et réutilisables. Ligne Une ligne est une div qui contiendra les colonnes dont la somme font 12. Comme signalé, chaque ligne fait 960 pixels de large. Il est donc très important que les lignes n’ait comme enfant direct uniquement les colonnes et que celles-ci soient des div. Colonnes Notre système est à douze colonnes. Séparateur

Mobile-First Responsive Web Design What Is Mobile-First Responsive Web Design? Mobile-First Responsive Web Design is a combination of philosophies/strategies, and ultimately boils down to a broader application of good ol’ web best practices. As the digital landscape gets increasingly complex, we need to design experiences that work across the entire spectrum of digital devices. Mobile First Mobile First Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. Responsive Web Design Responsive Web Design is a term coined by Ethan Marcotte that articulates how to adapt a website’s layout for multiple screen resolutions. Progressive Enhancement Ultimately, mobile-first responsive web design comes down to using Progressive Enhancement as a foundation for web strategy and design. Why Mobile-First RWD Works The interactive landscape is increasingly complex. That’s what makes mobile-first responsive web design a great approach. Content.

Related: