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.

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.

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.

Design d’interface et critère ergonomique 8: Adaptabilité Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question. Critère n°1 : Incitation Critère n°2 : Lisibilité Critère n°3 :Groupement-Distinction entre items Critère n°4 : Feedback Direct Critère n°5: Contrôle Utilisateur Critère n°6 : ConcisionCritère n°7 : Gestion des erreursCritère n°8: AdaptabilitéCritère n°9: CohérenceCritère n°10: SignifianceCritère n°11: Compatibilité Adaptabilité : en quoi ça consiste ? C’est S’ADAPTER aux caractéristiques des utilisateurs (vues, perspectives, raccourcis…) Portail personnalisé Ce critère concerne la capacité du système à réagir selon le contexte, mais aussi selon les besoins, préférences et niveaux d’expertise des utilisateurs. Bonne pratique :

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]

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 !

LaudableApps - Home 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

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.

20 Mobile Apps Inspiration and Design Patterns As a mobile apps designer I’m sure you are often looking for inspiration to ensure that you can deliver constant innovation and high quality to your clients. A really efficient way to get serious inspiration for specific parts of your mobile apps project is looking for web sites showcasing the best apps created be other creative designers. With hundred thousands of mobile apps flooding the market it can be challenging to stand out and I recommend you seek inspiration and look for good elements and combine the top findings into new unique creations. If you are not a mobile apps designer and developer yet I can tell you that there is a great chance you will be one soon. It is all about mobile right now and it is not going to change very soon! As the mobile Internet surfing is constantly increasing there’s a huge trend right now leaving website administrators with an important job to do. Advertisement 1. Mobile Awesomeness is a gallery for mobile websites. 2. 3. jQuery Mobile 4. 5. 6. 7. 8.

Wireframes et prototypes : ébauche visuelle d'une application web » Blog AppliBox Wireframes : les wireframes sont des schémas utilisés en web design qui permettent de suggérer sommairement les éléments principaux d’une interface web (application, site…). Pour être utilses, ils doivent être mis en place avant toute création artistique. En début de projet, ils permettent de valider les éléments principaux de l’ergonomie et de présenter une maquette fonctionnelle suffisamment évocatrice pour un client non technicien. En cours de projet, ils peuvent servir de référence pour tous les acteurs (client, développeurs, web designer…). Un exemple réel. Un autre (une page) Quelques synonymes : Zonings (franco-français ?) Outils logiciels : Powerpoint Le seul avantage est que c’est un outil que tout le monde connait, et que presque tout le monde possède (au moins en version Open Office). Visio (Microsoft) Les plus : Les moins : Axure Un outil spécifique qui va jusqu’au prototype et aux spécifications. Denim Un outil informel pour le design d’interface ou les ébauches de sites web.

Architecture d’un site pour le SEO : le guide complet Comment construire l’architecture de son site web en suivant les bonnes pratiques SEO ? Voilà une question que j’ai l’habitude de me faire poser et à mon humble avis, je ne dois pas être le seul. Mais reprenons du début. 1) Qu’est-ce qu’une architecture de site ? L’architecture d’un site se résume à la structure par laquelle les utilisateurs et les moteurs de recherche vont passer pour naviguer entre les différents contenus. La majorité des référenceurs vous conseilleront d’y penser en amont (s’ils y pensent en fin de projet, changez de référenceur, ça vaut mieux pour vous). 1) Lister les familles d’éléments à intégrer La première question à vous poser est de savoir quels contenus y aura-t-il sur votre site ? Selon le type de site, vous allez certainement avoir plusieurs familles de contenus qui vont être mis en ligne. En effet, classer vos contenus par famille et par type va vous aider à y voir plus clair, mais aussi à segmenter votre site en plusieurs parties. Quoi d’autre ?

960 Grid System Wireframing With Patterns By Lindsay Ellerby Published: March 20, 2007 “When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely.” When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely. Why a Wireframe Workshop? There is a fairly informal IA community in Toronto. What Are the Ingredients for a Successful Workshop? For a wireframing workshop like this you need: a facilitator with practical IA experience a place to hold the workshop that allows group viewing of visual documents—a projector is preferable, though not absolutely essential a group of people who are willing to share ideas and ask questions people who bring documents with them to share, whether they are large printouts or visuals for projection on a screen a common desire to build a greater community outside individual workplaces What Emerged? Distinguish the role of wireframes early in a project. 1. 2. 3. 4.

Le guide du référencement du site sur internet Le guide complet du référencement pour référencer et positionner votre site Internet. Tout savoir sur l'art et la manière de conçevoir et propulser un site sur les résultats des moteurs de recherche. Ce guide est publié grâce à la collaboration entre SEOmoz, AltiRef et 7 Dragons.. Sur une quarantaine de pages, sont exposés les fondamentaux du référencement qui vous permettrons d'appréhender au mieux les techniques de bases liées à l'optimisation d'un site Internet pour les moteurs de recherche. Ce guide gratuit est conçu pour vous aider à : Construire votre site dans les règles de l'art, Indexer les pages durablement, Optimiser vos chances de figurer dans les meilleures positions, Auditer vos concurrents, Effectuer la veille nécessaire afin de suivre l'évolution des techniques. Prologue : qui sont 7 Dragons, SEOMOZ et AltiRef ? Qu’est ce que le référencement ? Comment marche un moteur de recherche ? Comment définir les mots clés à cibler ? Réalisation d'un site qui mérite du trafic.

Related: