background preloader

10 conseils d’ergonomie basés sur des études de recherche

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. D’autres, par contre, vous surprendront peut-être et changeront votre opinion sur certaines coutumes actuelles. 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à. Mais pourquoi une limite arbitraire de trois clics ? 2. Le Dr. 3. 4.

Les sites de référence dans le webdesign Sources d'inspiration et compiles de Webdesign Css Nous vous proposons de découvrir ici des sites qui ne manqueront pas de vous apporter de l'inspiration pour construire le vôtre. Css-design est une large vitrine de sites web classés par catégories où les designs sont très riches et très variés. Il y en a pour tous les goûts! En voici d'autres du même genre: Cssmania, Bestwebgallery, Mydesignaward, Webcreme, Cssimpress, Cssburst Si vous cherchez des idées pour présenter un formulaire, un lecteur vidéo ou encore une boutique E-commerce etc... Technique CSS et autres éléments de Webdesign Un aspect plus technique pour mieux comprendre l'articulation Css + XHTML et autres éléments du webdesign. Css 4 design est un site intéressant et agréable à lire pour mieux comprendre le Css. Alsacreations est certainement un incontournable pour celui qui cherche à approfondir la technique du Css. Webdesign.2803 nous propose de nombreux trucs et astuces sur le webdesign et autres techniques d'intégration.

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. Ces critères, qui devraient être publiés bientôt sur le site du laboratoire ETIC de l'université Paul Verlaine, vont permettre d’ouvrir de nouvelles voies dans l’évaluation et la conception d’interfaces. 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. Critères d’évaluation de la persuasion Les critères suivants sont organisés en deux groupes.

Tout savoir sur l'Expérience Utilisateur (User eXperience ou UX) Design is much more than how something looks like and feels like, design is how it works. C’est en général très compliqué et long de rendre les choses simples. Et ce n’est pas moi qui le dit. Très bon article de Krystal Higgings sur l’importance et la manière de créer une vraie expérience quand un utilisateur ouvre une application mobile pour la première fois. Ce premier lancement doit à la fois séduire l’utilisateur tout en lui apprenant rapidement comme se servir de l’application : laisser jouer l’utilisateur plutôt que lui montrer comment il doit faire, lui présenter une interface avec du contenu sans qu’il ait à le remplir lui même, mettre en valeur les key features et l’inciter à découvrir le reste. Un contre-exemple que j’ai rencontré récemment est le tout récent Blackberry Z10 : au lancement, Blackberry montre à l’utilisateur comment la nouvelle interface de son OS fonctionne (et c’est nécessaire !) (merci à Christophe) En bonus une démo (merci JB)

Le webdesign en blocs - Exemples et ressources Suivant l’avènement des grilles dans le webdesign, la mise en page basée sur des blocs de contenu peut s’avérer une bonne stratégie pour certains design. Petit tour d’horizon des sites du genre, puis des ressources nécessaires pour créer votre site sur une grille modulable. Webdesign en blocs ? La mise en page basée sur des blocs de contenu modulable est devenue incontournable pour les portfolios, les sites d’inspiration, bref ils s’agit souvent de sites présentant un lot important d’images. Rendu populaire par des sites comme Pinterest par exemple ou encore inspiré par des applications comme Flipboard ou le design Metro, la navigation se veux simple et rapide, proposant beaucoup de contenu scanable rapidement. Le responsive webdesign y joue également un rôle crucial : par définition un bloc modulable va s’adapter à la taille du viewport de l’utilisateur. Quelques exemples : Pinterest Pepsized Usain Bolt Red Interactive Agerman Etchapps Everlovinpress Depthcore Bernd Kammerer Neightborhood Studio

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). Sinon dans le même genre il y a aussi Asana qui restreint le choix à Google Account et le met en première position : On trouve aussi la même chose chez Pinterest avec un formulaire minimaliste, mais soigné :

27 conseils pratiques en ergonomie Web Conception d'un site web Cette page présente quelques considérations sur la conception de sites web. Certaines sont énoncées par des spécialistes et d'autres sont plus personnelles. Je ne prétends pas détenir la Vérité Absolue; je me propose simplement de vous faire profiter de mon expérience en tant que webmaster et surfeur. 1. Il convient tout d'abord d'apporter une précision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constituée d'un certain nombre de pages web. 1. Quel est l'objectif visé? 2. Un éditeur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, .... 3. Structurez, hiérarchisez votre site! Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation. 4. Deux principes de base - La page d'accueil est la plus importante - Navigation dans le site - Les pages doivent être lisibles - Apparence graphique Deux principes de base Le plus important, ce sont les visiteurs! 5. 6. 7.

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. Color triggers very specific responses in the brain and in the whole body (red raises blood pressure and heart rates, while blue lowers blood pressure, pulse, and respiration rates). 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). Color and Branding Color increases brand recognition by 80%. Like this:

20 outils pour aider les jeunes développeurs à créer leur site internet Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web. Poser les bases de son projet : Choisir son CMS : Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Créer sa charte graphique : Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. Créer une maquette : Composer une grille : Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Prévoir ses espaces publicitaires Choisir ses icônes Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. La recherche de la typographie idéale est une quête de longue haleine. Développer son site : Débuter en HTML5 : Innover grâce à la CSS3 : Tester et débugger :

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

Mon premier site: les 10 erreurs à éviter | Le Site Internet Des fichiers trop lourd Il est très important de faire attention à la taille des fichiers que l’on utilise sur son site. . Hors l’internaute s’attend à avoir l’information rapidement, si votre page ne s’affiche pas immédiatement ou presque vous perdrez beaucoup de visiteurs. Attention à ne pas tomber dans un piège: tester l’affichage de son site chez soi n’est pas représentatif de l’expérience que vivra un autre internaute. Si vos fichiers sont déjà stockés sur votre ordinateur une page pourra se charger rapidement chez vous alors que le visiteur, lui, devra télécharger ces fichiers, ce qui prend plus de temps. Il est possible de tester le poids des pages de son site sur www.websiteoptimization.com/ . Les images L’erreur fréquente du débutant consiste à prendre une photo avec son appareil photo et à l’utiliser telle quelle sur son site. Les blogs et CMS font souvent ce travail sur les photos automatiquement. Les autres fichiers Il n’y a pas que les images qui soient lourdes. Lisez aussi:

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). Mais l’optimisation d’un site pour mobile, ce n’est pas s’adapter à une taille d’écran différente mais s’adapter à des comportements différents ! 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. Aller plus loin?

5 outils en ligne pour tester vos sites Si vous êtes web designer ou développeur Web, alors vous devez savoir à quel point il est important de s’assurer que le produit final est dépourvu de tous bugs ou erreurs. Les cinq sites que voue je vais décrire dans la suite de cet article, vont aider les développeurs et les concepteurs de sites Web à valider et vérifier le code du site Web et ce, afin de déceler toute sorte d’erreurs. Le W3C Markup Validation Service permet aux utilisateurs de valider leurs sites Web soit en fournissant un lien en ligne vers le fichier HTML, XHTML, SMIL, MathML ou soit par le téléchargement du fichier, dans le même format que mentionné précédemment. Si vous avez juste besoin de vérifier une partie spécifique du code, vous pouvez manuellement coller votre portion de code depuis l’onglet « Validate by Direct Input » pour le valider. Note : Un autre service, W3C CSS Validation Service, va réaliser à l’identique le traitement offert par le service « Markup », mais concernant la CSS.

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. Le principe en soi est simple : on propose des variantes de pages aux visiteurs du site sur une même période. Qu’est-il possible de tester avec l’AB testing ? Il est possible de faire des tests simples : tester seulement deux couleurs de boutons différentes pour voir quelle couleur est plus favorable au clic.

Related: