La moitié des possesseurs de smartphone le tiennent d’une seule main. Optimiser l’ergonomie de son application web. Introduction Je vous propose aujourd’hui un article sur un sujet un peu moins technique mais qui a son importance dans la vie d’un projet web, j’ai nommé la démarche ergonomique. Cette démarche part d’un constat simple : nous sommes ceux qui créons les outils que nous utilisons au quotidien, nous devrions donc être capable de les concevoir pour qu’ils nous servent et non l’inverse. Cependant dans le domaine des Interfaces Homme-Machine, on constate souvent à regret que concevoir un produit qui fonctionne ne suffit pas à garantir la satisfaction de ses utilisateurs en terme d’utilisabilité.
Nous allons donc voir ensemble quelques conseils pour optimiser l’expérience utilisateur sur ces interfaces. L’ergonomie, ça sonne bien mais qu’est-ce que c’est au juste ? Historiquement et de manière générale l’ergonomie est une démarche qui a pour but de faciliter notre vie en adaptant à nos besoins les objets qui nous entourent (ex. une souris, une voiture, un stylo, etc). Mais encore ? Conséquence. Ergonomie : les règles d'or d'une appli mobile réussie : Clarté et lisibilité, les maîtres mots de l'ergonomie. Débat sur l'Iphone : Application ou WebApp ? Les développements pour l'iPhone peuvent être réalisés sous la forme d'un site Web ou d'une application. Chacun de ses deux modes dispose de ses avantages et inconvénients. La question qui trotte dans la tête de tout bon "Mobarketeux" qui se respecte est aujourd'hui décortiquée : vaut-il mieux exister sur Iphone via une Application, ou une Web Application ?
Petit rappel des faits, si vous ne savez pas très bien quelle est la différence entre les deux (car vous êtes entourés de conseillers qui vous vendent des applications d'office les bougres !!) : Une application (le "st graal" du marketing mobile n'est-ce pas depuis quelques mois) est un petit logiciel, sur le modèle des widgets que l'on trouvait sur ordinateur, à installer sur son Iphone, après l'avoir téléchargé sur l'AppStore, le magasin en ligne d'applications d'Apple. Et pourtant. Il suffit de regarder la web app Gmail et l'application Gmail pour ne plus jamais toucher à l'application.
Navigabilité : ex aequo. En résumé : Design mobile : différencier web et application ? Lorsque j’ai été contacté par Matthieu Bué pour écrire sur WDfriday, j’ai été très honoré, de part la qualité du contenu, les sujets et thématiques abordés, mais aussi car j’allais pouvoir enfin vous parler de ce qui a beaucoup modifié mon travail de designer ces dernières années : le design d’interface en condition de mobilité (comprenez le “design sur mobile & tablette”). Aujourd’hui, je vais donc plus précisément aborder la question suivante : Pourquoi & comment différencier les applications web mobile et les applications mobiles natives Introduction J’ai souvent autour de moi des entreprises avec lesquelles je travaille qui se posent la question, légitime, de la conception d’une web app ou d’une application native. Je les rassure donc tout de suite car elles ont déjà fait le plus dur : elles ont compris l’intérêt d’avoir leur place dans la mobilité (sur tablette et smartphone) !
Ensuite, vient très vite les choix suivant : avec les problématiques qui correspondent. 1. Côté design 2. 3. Le problème du responsive design. Glossaire Ergonomie / Usabilité. Glossaire et Termes Liés à l'Ergonomie, l'UX, l'Utilisabilité. Responsive Navigation: Optimizing for Touch Across Devices. As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes?
Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution. Introduction to Mystery Meat Navigation. Wikipedia's defilnition (partial): MMN is very seductive — it looks cool and it's used on sites that win design awards. Because there's no long strings of text, MMN makes the page look "cleaner" because there's more white space. Why MMN is really bad. When you drive down the road, you don't see road signs that wait for you to get near them before they tell you what they say (mouse over this image for an example). Well, now that I think about it, Seattle has a lot of MMN; nevertheless, it's still a very bad concept.
I hope that the above image demonstration makes it perfectly clear why MMN sucks more than a Kirby vacuum cleaner. It's stupid, stupid, stupid — and dangerous. Les lois de la Gestalt : Comment améliorer l'UX ? (Partie 1) Une bonne expérience utilisateur globale est un aspect essentiel de la création d’un site Web réussi. Le terme d’expérience utilisateur semble être populaire ces derniers temps, mais comment pouvons-nous décrire l’expérience utilisateur et comment pouvons-nous nous assurer d’en offrir assez sur nos sites ? Pour faire simple, l’expérience utilisateur décrit la manière dont les utilisateurs perçoivent un site, quel type d’émotions ils ressentent lors de la visite d’un site web, et si oui ou non ils sont motivés pour revenir.
Cette expérience subjective est en grande partie basée sur l’apparence visuelle de ce site web. Bien sûr, la conception web a son propre champ d’expertise et on pourrait affirmer que seuls les concepteurs expérimentés sont capables de concevoir un bon site web et donc de produire une expérience utilisateur de haute qualité.
Cependant, il y a quelques principes de base qui aideront les non-professionnels pour concevoir un site attrayant selon les lois dites de Gestalt. Colour Check - Etre. Les 12 règles pour optimiser l’ergonomie de votre site web | Optimisation Conversion. Règles définies par Amélie Boucher, issues entre autres des règles heuristiques de Nielsen, Norman, Togazzini, Schneiderman architecture Connaissance des visiteurs pour architecturer le site, c’est essentiel pour connaître leurs habitudes et pouvoir ranger les éléments par thématique. L’architecture de l’information constitue les fondations du site sans lesquelles un site ne pourra être utilisable de façon ergonomique. organisation visuelle Vérifier en floutant la page que l’on a de gros blocs identifiables, il s’agit de limiter la surcharge visuelle au maximum car l’animation complique l’intégration mentale.
Essayer au maximum de placer les animations hors du texte principal de façon à limiter les distractions. Cohérence Capitaliser l’apprentissage interne en gardant des repères tout au long de la navigation sur le site, les barres de navigation sont un repère important pour le visiteur : ne pas déplacer/modifier au cours de la visite. 3 manières de gérer : L’évaluation Heuristique et les règles de Nielsen, Norman, Togazzini, Schneiderman | Optimisation Conversion.
Heuristiques ? Le terme heuristique désigne d’une manière courante, une méthode de résolution d’un problème qui ne passe pas par l’analyse détaillée du problème mais par son appartenance ou adhérence à une classe de problèmes donnés déjà identifiés. Aussi appelé guides d’utilisabilité, ce sont des règles qui ressortent les principes qui composent une bonne interfaceElles aident les experts à trouver les problèmes d’interfaceElles aident les concepteurs à choisir parmi plusieurs plusieurs designs d’interface (design patterns)Il existe plusieurs guides heuristiques (Nielsen, Norman Norman, Tognazzini et Shneiderman) Les principes Facilité d’apprentissage (A)Simplicité (S)Visibilité (V)Contrôle Utilisateur et Liberté (CU)Erreur (R)Efficience (E)Design graphique (DG) Les 10 règles de Nielsen Les 4 règles de Norman Affordance (A)Mappage Naturel (A)Visibilité (V)Feedback (V) Les 16 règles de Tognazzini Les 8 règles de Shneiderman (vidéo en anglais)
Les principes de la Gestalt appliqués au webdesign (1/2) J’ai toujours entendu dire qu’un bon design de page web se résumait à peu de choses : équilibre, rythme et organisation du contenu. C’est pas faux, mais un peu plus de détail ne ferait pas de mal. Pour aller dans le détail, il faut se pencher légèrement sur la psychologie de la forme, que l’on appelle aussi gestaltisme (le terme qui à lui seul vous fait paraitre intelligent), avec quelques principes simples, assez évidents pour certains, que l’on appelle les principes de la Gestalt. Les principes de la Gest- quoi ? C’est généralement la réaction quand on lit pour la première fois le terme. Quand on parle de Gestalt, en gros, c’est donc pour dire que, dans la psychologie de la perception, un ensemble de forme n’est pas l’addition des formes qui le composent, mais une autre forme à part entière.
A partir de ce principe général découle 6 principes sous-jacents, qui se complètent et se contredisent, que l’on va essayer d’illustrer avec des exemples tirés de sites actuels. 1. 2. 3. 4. 5. 6. Webmastering - Ergonomie d'un site web. Décembre 2016 Définition L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail.
L'ergonomie se caractérise généralement selon deux composantes : L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur ; L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en : confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse. sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur ; Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.
La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs. Caractéristiques humaines Critères d'ergonomie Plus d'informations. Organiser son contenu en fonction de - www.yacs.fr. A moins qu'e vous ne dédiiez votre site à une improbable espèce humaine d'un temps non encore advenu, ou le hamster de la voisine, ce sont des humains aujourd'hui qui vont vous surfer. Hors YACS contient un paradoxe : sa grande distributivité de contenu tente parfois d'en faire des tonnes, c'est aussi ce qu'on attend d'un Content Managment System... voici un petit florilège de choses à se souvenir lorsqu'en bon yacsien vous déplacez, renouez, rénovez, ajoutez votre contenu.
Celà n'a pas de visée systématique et ferme, ce sont juste des détails à savoir sur le comportement généralement reconnu d'un internaute lambda, et ce détail fera peut-être le vôtre comme avantage... Dans un article intitulé "30 Usability Issues To Be Aware Of", Smashing Magazine recense 30 concepts et définitions que toute personne s'intéressant à l'ergonomie et à l'utilisabilité devrait connaître. Il y a à prendre et à laisser ... Le principe des 7±2 éléments La règle des 2 secondes La règle des 3 clics La loi de Fitts. Loi de Hick. La loi de Hick est utilisée dans le domaine de l'interaction homme-machine pour prédéterminer le temps moyen d'un utilisateur à faire un choix selon le nombre de possibilités qui lui sont proposées. Très utile dans le domaine de l'usabilité, cette loi précise que plus l'utilisateur à de choix et plus il lui faudra de temps pour prendre une décision.
D'après les tests, le temps pour que l'utilisateur prenne une décision est logarithmique selon le nombre de choix qui lui sont proposé. Ainsi, si l'ont ajoute une option à un menu de 2 options le temps va être considérablement augmenté. En revanche, si l'ont ajoute une option à un menu qui a 30 options le temps nécessaire pour prendre une décision sera certes augmenté mais de peu. A partir de ces données il est possible de déterminer quelques bonnes pratiques: Moins l'utilisateur à de choix et plus il lui sera rapide de prendre une décision.Il est plus judicieux d'avoir un grand menu que 2 petits.
Wireframes & Prototypes: Is There Really a Difference? | ProtoShare.com. The terms “wireframe” and “prototype” are often used interchangeably – possibly due to convenience or misunderstanding – but it’s important to know what sets these two terms apart and how you benefit from each because sometimes your project will only need a wireframe, and sometimes it will require a prototype. What is a Wireframe? According to Usability.gov, “A wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. While there are other definitions of a wireframe, I think this is the most accurate.
Low-fidelity wireframe Medium-fidelity wireframe Once a wireframe starts becoming interactive – including animations, clickable navigation, and state functionality – it crosses the line into a prototype. What is a Prototype? High-fidelity prototype with interactions. La conception centrée utilisateur. Introduction La conception centrée utilisateur consiste à considérer les utilisateurs et leurs besoins tout au long du processus de développement d'une application informatique. Cet article présente les caractéristiques de la conception centrée utilisateur en s'appuyant sur sa définition dans la norme ISO 13407. Nous évoquons aussi les principales méthodes affectées à chacune des étapes du cycle de conception centré utilisateur. 1. Les utilisateurs finaux sont les mieux placés pour évaluer et influencer le développement d'un produit. Le processus de conception d'une application informatique doit donc mettre en oeuvre des moyens pour adapter le produit à la cible utilisateur.
Le concept d'utilisateur final réfère ici à deux types de référents : - L'utilisateur final réel, c'est à dire qui utilisera l'application de façon personnelle ou professionnelle après son lancement (et éventuellement qui utilise déjà une version précédente du produit) 2. 2.1. 2.2. 2.3. Conclusion Pour en savoir plus. Pages d’accueil « Ergonomie web illustrée.
Fig 2-2 TSF Jazz Carte de chaleur des onze participants confondus, 5 premières secondes (durée absolue) à retrouver en page 26 du livre Fig 4-2 Fortuneo Carte de chaleur avec transparence (durée absolue) – onze participants – 2 premières secondes à retrouver en page 36 du livre Fig 4-3 Fortuneo Le parcours oculaire sur les 4 minutes 30 de la session montre que la participante n’a jamais effectué une fixation oculaire sous la ligne de flottaison. Ce n’est pas un cas isolé, puisque dans les 40 premières secondes, ils ne sont que deux à avoir effectué une fixation en dessous de cette ligne. à retrouver en page 38 du livre Fig 5-3 Monabanq Carte d’occultation des onze participants confondus, 3 premières secondes (durée absolue). À retrouver en page 44 du livre Fig 5-4 Monabanq Carte de chaleur des onze participants confondus, 10 premières secondes (durée absolue) à retrouver en page 45 du livre Dans l’ordre de haut en bas: Annabelle, 27 ans Samuel, 31 ans Myrtille, 28 ans. Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab.
Principes d’ergonomie sur l’iPad et l’iPhone. AUDIT ERGONOMIQUE. Heuristic evaluation. Bonnes pratiques. Ergonomie. Google Traduction.