background preloader

Ergonomie web : les mythes et légendes ont la vie dure...

Ergonomie web : les mythes et légendes ont la vie dure...
Malgré le travail acharné de grands ergonomes Web reconnus (Amélie Boucher et Jean-François Nogier chez nous, ou Steve Krug et Jakob Nielsen aux USA, pour ne citer qu’eux), des mythes perdurent en donnant des réponses à l’apparence facile et pratique aux profanes, tout en dépréciant notre démarche au passage. Grâce aux ouvrages de Steve et Amélie dont je me suis inspiré pour cet article, et en y ajoutant mon expérience personnelle, je vous livre ici une courte liste de 12 légendes qui sont encore colportées régulièrement sur l’Ergonomie Web… 1. Ergonomie web : la règle des trois clics Vous avez déjà tous entendu cette phrase : “Pour que ton site web soit facile à utiliser, l’internaute doit trouver ce qu’il veut en moins de 3 clics, sinon il se barre” ou du style… C’est l’exemple typique d’un argument vrai sur le fond mais complètement idiot sur la forme. Ensuite, ce chiffre magique très pratique (car facilement vérifiable lors de la conception d’un site) n’a aucun fondement scientifique. Related:  Graphisme & Ergonomie / UX & UI

Navigation horizontale : une nouvelle alternative graphique à l’ère du tout-mobile ? Ces derniers mois ont vu naître de nombreux sites web à navigation horizontale, à la manière de MySpace ou de USA Today. C’est grâce à l’évolution des portfolios, des sites personnalisés et des désirs d’innovation des webdesigners que la navigation horizontale est née. Les sites utilisant cette variation graphique se multiplient et offrent des nouvelles alternatives au design. Souvent considérés comme une aberration d’un point de vue ergonomique, ces sites offrent sans conteste une grande liberté artistique et surtout correspondent à une nouvelle habitude de lecture des internautes devenus mobinautes. Pour mieux comprendre ce phénomène, laissez-nous répondre à trois questions afin d’appréhender la navigation horizontale et comprendre que finalement elle n’est pas si inhabituelle que ça … 1/ Qu’est ce que la navigation horizontale ? Le design d’un site internet peut permettre à l’internaute de « scroller » – faire défiler – sa page internet, généralement dans le sens vertical. Vitamins Kids

WireFrame à toutes les sauces… Publié le 05 sept 2007 par leGizz dans Web Design Vous connaissez sans doute tous les wireframes, il s’agit du design d’une page web de manière schématique, on y place uniquement les principaux blocs d’informations et éléments d’interactions. Les wireframes permettent de structurer une page web avant même d’avoir attaqué le design. Pour vous faire une idée, voici à quoi cela peut ressembler . En général les wireframes sont utilisés au sein de l’équipe projet pour identifier les interactions entre les pages, la disposition des éléments etc. Les wireframes sont très pratique lorsque l’on passe à la conception du site. . Je lui ai naturellement expliqué que le design se fera dans une étape secondaire… Résultat : le client à tout de suite mordu De cette manière j’ai fait d’une pierre deux coups, présentation de mes idées au client et préparation du travail pour le développement du site… J’avais procédé quasiment de la même manière il y a de cela quelques mois pour un autre client.

Ergonomie 101 : les éléments d’une bonne scénarisation Pourquoi scénariser le web? La scénarisation est un terme surtout utilisé dans l’industrie du cinéma. En contexte web, elle désigne l’étape de création de maquettes dites « fonctionnelles », aussi appelées les maquettes fil de fer ou wireframes. Un peu comme l’architecte dessine les plans d’une maison, l’ergonome organise l’espace sur les pages web. les objectifs du siteles personas (ou clientèle cible)les données d’utilisation du site (merci Google Analytics!) Tout ça dans un but ultime : créer la meilleure expérience pour l’utilisateur. Le travail de scénarisation permet de communiquer facilement les orientations du projet au client et valider les enjeux du site. Un complément à l’arborescence L’arborescence illustre bien les différentes sections du site et chacune des pages qui s’y retrouvent. Les maquettes fonctionnelles illustrent clairement comment la navigation, l’interactivité et les fonctionnalités prennent forme sur le site. Le contenu d’abord Le piège du design Exemple Programmeur

Ergonomie et référencement : les meilleures pratiques pour 2013 Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… 1. Conventions et règles en ergonomie Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header) Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens. Ci-dessous, les éléments pour le footer : Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer) Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013. Les conventions et règles à respecter dans une démarche ergonomique 18 critères répartis en 8 groupes : Voici les autres règles que nous vous proposons : 2. La Méthode du tri de cartes (“Card Sorting”) 3. 4. 5. 6. 7. 8. 9. 10.

Les indicateurs clés de performance pour le SEO Puisque le référencement naturel (SEO pour les intimes) est devenu un véritable investissement pour les entreprises (en temps aussi bien qu’en argent), il devient évident de pouvoir créer des rapports de données efficaces pour comprendre l’impact des actions mises en place. Aussi une partie du travail consiste-t-elle à créer des « tableaux de bord » (« dashboards ») qui rassemblent les Indicateurs Clés de Performance (ICP) correspondant à l’identité, aux objectifs et aux cibles de votre business… Métriques et outils pour mesurer votre travail Il est certain que les ICP peuvent varier grandement d’un site web à un autre, ne serait-ce que par sa catégorie : site vitrine, plateforme informative, site de e-commerce… Ici je vous présenterai les 3 ICP universels et applicables dans la plupart des cas : le trafic d’un site, son classement (« ranking ») dans les pages des résultats de recherche des moteurs, et son net-linking (ses liens entrants). Quoi et pourquoi ? Outils : Google Analytics.

Zoning, wireframe, maquettage, prototype ... : les meilleures pratiques Zoning, wireframe, maquette, prototype, voici des termes qui ne vous sont pas anodins, puisque nous les rencontrons de plus en plus dans le monde du Web, notamment dans les phases d’initialisation des projets. Mais savez-vous réellement ce qui se cache derrière chacun de ces termes, qui désignent l’ensemble des techniques et des outils qui permettent de maquetter graphiquement, fonctionnellement, ergonomiquement un site Web ? Tout d’abord utilisée dans la création de logiciels lourds avant la phase de développement, cette technique de conception a progressivement été adoptée, et est aujourd’hui conseillée par les professionnels du Web. ceci dit, il arrive encore couramment que l’on fasse l’amalgame entre les différents termes. Parallèlement, le nombre d’applications permettant de réaliser des wireframes ou des prototypes ne cesse d’augmenter, avec à chaque fois de nouvelles spécialisations. Les différentes notions derrière ces termes Un zoning Exemple de zoning Un wireframe Une maquette 1.

Pattern Un article de Wikipédia, l'encyclopédie libre. Cette page d’homonymie répertorie les différents sujets et articles partageant un même nom. Sur les autres projets Wikimedia : pattern, sur le Wiktionnaire Le mot anglais « pattern » est souvent utilisé pour désigner un modèle, une structure, un motif, un type, etc. Un pattern constitue donc une solution générique à un type de problème fréquemment rencontré, en décrivant et formalisant les concepts sous-jacents à cette solution. Informatique[modifier | modifier le code] Il est employé en informatique[1] dans les cas suivants : les Patterns d'analyse facilitent et guident les étapes de la phase d'analyse ;Architectural pattern : patron d'architecture (ex. : le Modèle-Vue-Contrôleur) ;Les Design patterns ou patrons de conception sont des façons de programmer éprouvées et réputées pour apporter des propriétés comme la cohérence, la robustesse, la réutilisabilité, etc. Arts[modifier | modifier le code] Sauvetage[modifier | modifier le code]

A quoi sert la pagination sur le web La lecture de la semaine provient de la rubrique “technologies” du site d’information américain Slate (@slate), on la doit à Farhad Manjoo (@fmanjoo), qui tient cette rubrique, le texte s’intitule : “arrêtez tout de suite la pagination”. “La pagination”, écrit Farahad Manjoo, “est, en termes de design et d’usage, le pire péché sur le Web. Elle est la preuve d’un mépris constant et silencieux pour ceux qui devraient être la cible privilégiée des sites d’informations : à savoir les gens qui veulent les articles jusqu’au bout. Or c’est faux, rappelle Manjoo. Image : le tourneur de page d’Andy Brandon. “Chaque jour, comme des dizaines de millions d’autres lecteurs innocents, je clique sur des articles qui se révèlent être des morceaux d’articles. Certains avancent qu’ils aiment que les articles soient divisés en plusieurs pages. Je ne suis pas en complet désaccord avec l’idée que ce sont là des bénéfices de la pagination. “J’y crois”, dit Farhad Majoo. Xavier de la Porte

10 règles basiques de SEO « Beaucoup d’appelés mais peu d’élus » – Nous parlons bien des premières positions dans les SERP Google (search engine results page ou page de résultat de recherche). Le SEO (Search Engine Optimization) ou référencement naturel consiste en un ensemble de techniques visant à positionner un site Internet dans les premiers résultat de recherche des moteurs de recherche sur des requêtes bien définies. La particularité de la discipline réside dans le fait que personne ne connait vraiment le fonctionnement de l’algorithme qui régit les positions des sites indéxés. Ce fameux algorithme évolue par ailleurs au rythme des fréquentes mises à jour (Google Panda ou Google Pingouin pour les dernières) qui sèment parfois la désolation sur leur passage (cf. En somme, le S.E.O. reste un far west digital !

10 conseils d’utilisabilité avant de concevoir l’UX L’expérience utilisateur d’un site web, vaste sujet que nous avons déjà traité dans de nombreux articles : Chaque éditeur souhaite que les visiteurs prennent du plaisir quand ils visitent leur site, qu’ils gardent un bon souvenir, qu’ils reviennent et qu’ils recommandent le site à leur entourage. L’expérience offerte sur un site web prend de plus en plus d’importance avec la richesse des offres disponibles sur les différents supports : Web, mobile ou tablette. Le marché du commerce en ligne oblige donc à se démarquer des concurrents en offrant aux utilisateurs plus qu’une plate-forme fonctionnelle en ligne. Il n’est plus possible de rendre public un nouveau service ni préparé ni testé et penser créer des expériences extraordinaires. Il est nécessaire de s’assurer que le site web satisfait les attentes les plus simples des utilisateurs. 1. L’utilisabilité est la capacité d’un système à être utilisé par certains utilisateurs afin d’atteindre leurs buts ou objectifs. 2. 3. 4. 5. 6. 7. 8. 9.

Wireframe (design) Un article de Wikipédia, l'encyclopédie libre. Exemple de Wireframe Pour Jakob Nielsen, le maquettage wireframe correspond à du prototypage horizontal[1], c'est-à-dire au développement de la partie graphique de l'interface homme-machine. La confirmation de la satisfaction des exigences de l'interface utilisateur et des possibilités du site webLa simulation du fonctionnement a priori du site web selon les objectifs de départUne première estimation du temps et du coût de développement Pour un site web, une première forme de maquette statique consiste à définir le « zoning » des écrans, c’est-à-dire le découpage des pages du site. Le zoning sert de base au travail du graphiste. Bien que le passage par le maquettage papier soit encore une technique courante, il devient de plus en plus fréquent d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine : Portail d’Internet

Ergonomie d’un site web et ligne de flottaison Le débat a longtemps fait rage parmi les ergonomes. Mettre du contenu sous la partie directement visible à l'écran sans avoir besoin de scroller sur une page web était une hérésie pour certains. Qu'en est-il en 2014 ? Mais où est le "Fold" Le fold (en français : pli) est représenté par la limite basse de ce que vous voyez à l'écran quand vous affichez une page web. En image, voici la représentation de la ligne de flottaison en rouge sur notre page d'accueil la semaine dernière pour mon écran. Le fold : Une ligne virtuelle qui varie d'emplacement selon l'outil de visualisation. Doit-on encore se préoccuper de cette limite ? Je pense que cette réflexion sur le fait que les internautes scrollent ou pas et sur le contenu qui devait être visible au-dessus du pli était parfaitement justifiée il y a 10 ans. Les choses ont tout de même bien évolué depuis... Des habitudes qui changent Pour info, rappelez-vous qu'il se vend aujourd'hui plus de tablettes que d'ordinateurs... Profondeur du scroll

SEO: Quatre actions qui amélioreront la découverte de votre blogue Sans être spécialiste du SEO, vous pouvez facilement améliorer la découverte de votre site Web ou blogue. Il existe quelques techniques relativement simples à mettre en place qui vous aideront à propulser votre espace Web. Dans un premier temps, je vous rappelle qu’il n’y a pas de formule magique. Sur le Web, pour être découvert, vous devez créer du contenu original à valeur ajoutée. Il ne s’agit pas ici de mettre en place votre site et de créer du contenu pour une période de quelques mois. Ce processus de création de contenu doit s’inscrire dans le temps. Au-delà des ces quatre suggestions, vous devez adhérer à des services comme Google outils pour webmasters ainsi que Big Webmaster tools (Microsoft). Voici les quatre actions que je vous suggère de mettre en oeuvre pour améliorer la découverte de vos contenus sur le Web: Créez et authentifiez votre page d’entreprise sur Google+ Google+ c’est le réseau social de Google. Ces actions ne remplacent pas une stratégie SEO.

Tips and best practices to develop responsive websites Start with a template Sure, you can start coding from scratch, but there’s a lot of interesting free templates that will make you save a lot of time. Among others, I recommend Mobile boilerplate, The 1140 grid and Skeleton. Working with fluid grid based layouts Fluid layouts are an important part of a good responsive layout. To get the size in percents from a size in pixels, you have to take the element’s width and divide it by the full grid size. This is why it is interesting to work with a 1000px grid. 1000 is a round number, and it is easy to calculate that 24% of this size will be equal to 240 pixels. Flexible images A very important aspect of a responsive layout is how images can adapt to the size of their parent container. A better solution is to use context-aware image sizing. And the related CSS: For more info about this technique, check out this article. jQuery is your friend jQuery is definitely a super useful tool when it comes to web development. Don’t forget Apple’s viewport

Related:  BookmarkStage