Points clés
1. Ne faites pas réfléchir les utilisateurs : concevez une navigation intuitive
Si vous pouvez rendre quelque chose évident, il faut au moins qu’il soit explicite.
Le design intuitif est essentiel. Les utilisateurs ne doivent pas avoir à deviner comment fonctionne votre site. Chaque élément, des boutons aux menus, doit être immédiatement compréhensible. Lorsqu’un utilisateur rencontre un élément inconnu, il doit pouvoir en saisir rapidement la fonction sans effort mental important.
La clarté prime sur l’originalité. Évitez les noms astucieux ou le jargon obscur pour les éléments de navigation. Privilégiez des libellés clairs et descriptifs que l’on comprend d’un coup d’œil. Par exemple, préférez « Offres d’emploi » à « Opportunités de carrière » pour une section consacrée aux annonces.
Éliminez les points d’interrogation. Chaque fois qu’un utilisateur doit s’arrêter pour réfléchir au fonctionnement d’un élément, cela alourdit sa charge cognitive. Cherchez à supprimer ces obstacles mentaux en :
- Utilisant des modèles et conventions familiers
- Fournissant des consignes claires et concises si nécessaire
- Veillant à ce que les éléments cliquables aient une apparence évidente
- Employant des titres et sous-titres explicites
2. Les utilisateurs ne lisent pas, ils parcourent : optimisez pour une compréhension rapide
Une expérience élégante a montré que beaucoup se passe dès l’ouverture d’une page.
Les utilisateurs sont impatients. La plupart ne lisent pas les pages web mot à mot ; ils cherchent rapidement l’information pertinente. Ce comportement est encore plus marqué sur mobile. Pour y répondre, concevez vos contenus pour une lecture rapide :
- Utilisez des titres et sous-titres clairs et descriptifs
- Aérez le texte en paragraphes courts
- Employez des listes à puces ou numérotées
- Mettez en valeur les mots-clés et informations importantes
- Illustrez avec des images et schémas pertinents
Placez l’essentiel en premier. Mettez les informations cruciales au début des paragraphes, titres et sections. Cette technique dite de la « pyramide inversée » aide les utilisateurs à trouver rapidement ce qu’ils cherchent sans tout lire.
3. Créez des hiérarchies visuelles claires pour guider les utilisateurs
Une bonne hiérarchie visuelle nous facilite le travail en prétraitant la page, en organisant et priorisant son contenu de façon quasi instantanée.
La hiérarchie visuelle est primordiale. Une hiérarchie bien pensée aide à comprendre l’importance relative des éléments et leurs liens. Cela facilite la recherche d’information et la compréhension globale du site.
Principes clés pour une hiérarchie efficace :
- Rendez les éléments importants plus grands, plus gras ou d’une couleur distinctive
- Regroupez visuellement les éléments liés (proximité, style similaire)
- Utilisez l’espace blanc pour séparer les éléments sans lien
- Imbriquez les éléments pour montrer leur appartenance
La cohérence est essentielle. Maintenez une hiérarchie visuelle constante sur tout le site pour aider les utilisateurs à apprendre et mémoriser la navigation. Cela inclut un style uniforme pour les titres, liens et autres éléments importants.
4. Divisez les pages en zones bien définies pour faciliter le balayage visuel
Diviser la page en zones distinctes permet aux utilisateurs de choisir rapidement où porter leur attention et ce qu’ils peuvent ignorer.
Le fractionnement améliore la compréhension. En segmentant votre page en sections claires, vous facilitez la compréhension rapide de sa structure et la recherche d’informations. C’est particulièrement utile pour les pages longues ou aux contenus variés.
Stratégies pour des zones bien délimitées :
- Utilisez des couleurs de fond ou des bordures différentes pour séparer les sections
- Respectez un espacement cohérent entre les types de contenu
- Employez titres et sous-titres pour délimiter les parties
- Envisagez une mise en page en grille pour organiser le contenu
Priorisez le contenu. Placez les informations les plus importantes dans les zones où l’œil se pose en premier, généralement en haut à gauche pour les cultures lisant de gauche à droite. Appuyez-vous sur des études de suivi oculaire et des cartes de chaleur pour orienter votre mise en page.
5. Rendez évident ce qui est cliquable pour améliorer l’ergonomie
Comme une grande partie de l’activité sur le Web consiste à chercher le prochain clic, il est crucial de faciliter la reconnaissance des éléments interactifs.
Des indices visuels clairs sont indispensables. Les utilisateurs ne doivent jamais se demander si un élément est cliquable. Utilisez des repères visuels pour faire ressortir les éléments interactifs :
- Stylisez les liens de manière cohérente (soulignés ou en couleur distincte)
- Donnez aux boutons un aspect cliquable avec ombres, reliefs ou effets au survol
- Employez des icônes familières pour les actions standards (loupe pour la recherche, par exemple)
Pensez aux interactions mobiles. Sur les écrans tactiles, assurez-vous que les cibles cliquables sont suffisamment grandes et espacées pour un tap facile. La taille minimale recommandée est de 44x44 pixels.
Offrez un retour visuel. Utilisez des effets au survol sur ordinateur et des états pressés sur mobile pour indiquer l’interaction. Cela renforce la perception d’interactivité et donne un sentiment de contrôle.
6. Concevez une navigation efficace : utilisez les conventions et des repères clairs
La navigation compense l’absence de repère spatial en incarnant la hiérarchie du site, créant un sentiment de « lieu ».
La navigation est essentielle. Une bonne navigation aide à comprendre le contenu, son organisation et à trouver ce que l’on cherche. Elle inspire aussi confiance dans le site et son organisation.
Éléments clés d’une navigation efficace :
- Libellés clairs et descriptifs pour les éléments de navigation
- Placement cohérent des éléments sur tout le site
- Indication visuelle de la position actuelle (ex. : mise en surbrillance de la page active)
- Fil d’Ariane pour les structures profondes
- Fonction de recherche bien visible
Respectez les habitudes. Suivez les conventions usuelles sauf raison majeure de déroger. Les utilisateurs sont habitués à certaines structures, comme la navigation principale en haut ou dans une colonne à gauche.
Proposez plusieurs accès. Offrez différentes façons d’accéder au contenu : navigation principale, recherche, liens contextuels dans le texte. Cela répond aux préférences et styles de navigation variés.
7. Simplifiez les formulaires et éliminez les mots superflus
Supprimez la moitié des mots sur chaque page, puis la moitié de ce qui reste.
La concision est la clé. Chaque mot inutile complique la recherche d’information utile. Soyez impitoyable dans l’édition, privilégiez la clarté et la brièveté.
Stratégies pour simplifier le contenu :
- Utilisez un langage simple, évitez le jargon
- Fractionnez les longs paragraphes
- Remplacez les longues explications par des exemples quand c’est possible
- Employez des listes à puces ou numérotées pour faciliter la lecture
- Supprimez les redondances
Rendez les formulaires fluides. Les formulaires sont souvent source de frustration. Pour améliorer leur ergonomie :
- Demandez uniquement les informations essentielles
- Regroupez les champs liés
- Utilisez des étiquettes claires et précises
- Fournissez des messages d’erreur utiles et une validation en ligne
- Affichez une progression pour les formulaires en plusieurs étapes
8. Réalisez des tests d’utilisabilité simples pour identifier et corriger les problèmes
Tester un utilisateur vaut toujours mieux que de ne pas en tester du tout.
Les tests réguliers sont indispensables. Les tests d’utilisabilité ne doivent pas être coûteux ni longs. Même de petits tests informels révèlent souvent des problèmes majeurs.
Comment mener des tests simples :
- Recrutez 3 à 5 participants représentatifs de votre public cible
- Proposez-leur des tâches réalistes à accomplir sur votre site
- Demandez-leur de verbaliser leurs pensées pendant l’exercice
- Observez et notez leurs comportements et remarques
- Identifiez les problèmes récurrents et priorisez les corrections
Concentrez-vous sur l’essentiel. Ne vous perdez pas dans les détails mineurs. Traitez d’abord les problèmes majeurs qui empêchent la réalisation des tâches clés.
Testez tôt et souvent. Intégrez les tests tout au long du processus de conception, pas seulement à la fin. Cela permet de détecter et corriger les défauts avant qu’ils ne s’enracinent.
9. Design mobile : privilégiez la rapidité, la simplicité et les interfaces tactiles
Tout est question de compromis.
Le design mobile-first est incontournable. Avec la montée en puissance des appareils mobiles, concevoir pour les petits écrans et le tactile est essentiel. Cette approche vous oblige à vous concentrer sur l’essentiel.
Points clés pour le design mobile :
- Priorisez rigoureusement contenus et fonctionnalités
- Concevez pour le tactile : cibles larges et espacées
- Optimisez la vitesse : réduisez les temps de chargement, utilisez le chargement progressif
- Simplifiez la navigation : menu « hamburger » ou barre inférieure
- Adoptez un design responsive pour s’adapter aux différentes tailles d’écran
Tenez compte du contexte. Les utilisateurs mobiles ont des besoins et comportements différents. Pensez aux usages en mobilité tout en conservant l’accès aux fonctions importantes.
10. Accessibilité : rendez votre site utilisable par tous
C’est la bonne chose à faire. Et pas seulement la bonne chose, c’est profondément la bonne chose, car l’argument souvent oublié en faveur de l’accessibilité est à quel point elle améliore la vie de certaines personnes.
L’accessibilité profite à tous. Concevoir accessible aide non seulement les personnes en situation de handicap, mais améliore souvent l’ergonomie pour tous. C’est aussi une exigence légale croissante.
Points clés pour l’accessibilité :
- Fournissez un texte alternatif pour les images
- Assurez la navigation au clavier pour toutes les fonctions
- Garantissez un contraste suffisant pour les textes et éléments importants
- Structurez le contenu avec une hiérarchie de titres appropriée
- Rendez les formulaires accessibles avec des étiquettes claires et des messages d’erreur
- Proposez sous-titres et transcriptions pour les contenus multimédias
Commencez par l’essentiel. Même de petites améliorations font une grande différence. Concentrez-vous d’abord sur les points critiques, comme la structure des titres et les textes alternatifs, puis progressez.
11. Gagnez la confiance en respectant les besoins et le temps des utilisateurs
J’ai toujours trouvé utile d’imaginer qu’à chaque visite d’un site, on commence avec un capital de bonne volonté.
La satisfaction utilisateur est cumulative. Chaque interaction positive renforce la bonne volonté, tandis que les expériences négatives l’épuisent. Cherchez à offrir une expérience globale positive en respectant les besoins et le temps des utilisateurs.
Façons de cultiver la bonne volonté :
- Soyez transparent sur les informations importantes (prix, frais de livraison)
- Fournissez des messages d’erreur clairs et aidez à la récupération
- Proposez un support client facilement accessible
- Réduisez les étapes pour accomplir les tâches courantes
- Respectez la vie privée et soyez transparent sur l’usage des données
Anticipez les besoins. Essayez de comprendre ce que les utilisateurs veulent accomplir et facilitez ces tâches. Cela peut passer par des raccourcis, la mémorisation des préférences ou une aide contextuelle.
Améliorez en continu. Recueillez régulièrement retours et données analytiques pour détecter les points de friction et axes d’amélioration. Montrez que vous valorisez les utilisateurs en traitant les problèmes fréquents et en intégrant les fonctionnalités demandées quand c’est pertinent.
Résumé des avis
Don't Make Me Think, Revisited est largement reconnu pour son approche pragmatique de l’ergonomie web. Les lecteurs apprécient le style clair et humoristique de Krug ainsi que ses conseils concrets et applicables. L’ouvrage met l’accent sur la simplicité, un design intuitif et une réflexion centrée sur l’utilisateur. Si certains le jugent un peu basique ou daté, beaucoup le considèrent comme une lecture incontournable pour les concepteurs et développeurs web. Parmi les notions clés, on trouve l’importance de rendre les interfaces auto-explicatives, de comprendre la manière dont les utilisateurs naviguent réellement sur les sites, ainsi que la nécessité de tester l’utilisabilité. Les principes exposés dans ce livre sont perçus comme intemporels, même si certains exemples peuvent sembler un peu anciens.
Les lecteurs ont aussi lu
FAQ
What's "Don't Make Me Think, Revisited" about?
- Focus on Usability: The book is a guide to web usability, emphasizing the importance of designing websites that are intuitive and easy to navigate.
- Krug’s First Law: It introduces Krug’s First Law of Usability: "Don’t make me think," which suggests that web pages should be self-evident and self-explanatory.
- Practical Advice: It provides practical advice and principles for creating user-friendly websites, applicable to both web and mobile design.
- Real-World Examples: The book uses real-world examples and illustrations to demonstrate effective and ineffective web design practices.
Why should I read "Don't Make Me Think, Revisited"?
- Improve User Experience: It offers insights into improving the user experience on websites, which is crucial for retaining visitors and achieving business goals.
- Simplified Concepts: The book breaks down complex usability concepts into simple, actionable steps that anyone can follow.
- Broad Applicability: While focused on web design, the principles can be applied to any interactive design, including apps and software.
- Engaging Style: Steve Krug’s engaging writing style, with humor and wit, makes the book an enjoyable read.
What are the key takeaways of "Don't Make Me Think, Revisited"?
- Self-Evident Design: Aim for designs that are self-evident, reducing the cognitive load on users.
- Usability Testing: Regular usability testing is crucial; even simple tests can reveal significant insights.
- Guiding Principles: Follow conventions, create clear visual hierarchies, and eliminate unnecessary elements to enhance usability.
- User-Centric Approach: Always design with the user in mind, ensuring that their needs and expectations are met.
What is Krug’s First Law of Usability?
- "Don’t Make Me Think": This principle emphasizes that web pages should be obvious and self-explanatory.
- Reduce Cognitive Load: The goal is to minimize the amount of thinking users need to do to understand and navigate a site.
- Immediate Understanding: Users should be able to grasp the purpose and functionality of a page at a glance.
- Design Clarity: Achieving this requires clear, intuitive design and navigation.
How does "Don't Make Me Think, Revisited" suggest improving web navigation?
- Consistent Navigation: Use persistent navigation elements that appear on every page to help users orient themselves.
- Clear Hierarchies: Establish a clear visual hierarchy to guide users through the site’s content.
- Breadcrumbs and Tabs: Implement breadcrumbs and tabs to show users their location and options within the site.
- User-Friendly Labels: Ensure that page names and navigation labels are clear and match what users expect.
What is the importance of usability testing according to Steve Krug?
- Early Testing: Conduct usability testing early and often to catch issues before they become costly to fix.
- Simple and Effective: Even simple, informal tests can provide valuable insights into user behavior and site issues.
- Focus on Major Issues: Prioritize fixing the most significant usability problems first to improve the overall user experience.
- Involve Stakeholders: Encourage team members and stakeholders to observe tests to understand user challenges firsthand.
What are some best practices for mobile usability mentioned in the book?
- Responsive Design: Ensure your site is usable on all screen sizes, from desktops to mobile devices.
- Prioritize Content: Focus on the most important content and features for mobile users, considering their context and needs.
- Visible Affordances: Make interactive elements like buttons and links clearly visible and distinguishable.
- Allow Zooming: Ensure users can zoom in on content to improve readability and interaction on small screens.
How does "Don't Make Me Think, Revisited" address accessibility?
- Inclusive Design: Emphasizes the importance of making websites accessible to all users, including those with disabilities.
- Simple Adjustments: Suggests simple changes like adding alt text to images and ensuring keyboard navigation to improve accessibility.
- Usability and Accessibility: Highlights that improving general usability often enhances accessibility for users with disabilities.
- Moral Obligation: Argues that making sites accessible is the right thing to do, as it significantly improves some users' lives.
What are some of the best quotes from "Don't Make Me Think, Revisited" and what do they mean?
- "Don’t make me think!" - This encapsulates the book’s core message that web design should be intuitive and effortless for users.
- "It’s not rocket surgery." - Usability doesn’t have to be complex; simple, common-sense approaches can lead to significant improvements.
- "Focus ruthlessly on fixing the most serious problems first." - Prioritize addressing the biggest usability issues to make the most impact.
- "Usability is about people and how they understand and use things, not about technology." - The focus should always be on the user experience, not just the technical aspects.
How does Steve Krug suggest handling web design debates?
- Avoid Religious Debates: Recognize that many design arguments are based on personal preferences rather than user needs.
- Test to Resolve: Use usability testing to settle debates by focusing on what works for users rather than opinions.
- Focus on Users: Keep the user’s experience at the forefront to guide design decisions and avoid unnecessary conflicts.
- Embrace Diversity: Understand that users are diverse, and design should accommodate a range of preferences and behaviors.
What is the "Trunk Test" in "Don't Make Me Think, Revisited"?
- Navigation Check: The Trunk Test is a method to evaluate if a page’s navigation is clear and intuitive.
- Key Elements: Ensure that users can easily identify the site ID, page name, sections, local navigation, and search options.
- Quick Assessment: The test involves quickly assessing a page to see if these elements are immediately apparent.
- User Orientation: It helps ensure that users can orient themselves and navigate the site without confusion.
How does "Don't Make Me Think, Revisited" suggest dealing with visual noise?
- Reduce Clutter: Eliminate unnecessary elements that distract users from the main content and navigation.
- Clear Hierarchy: Use visual hierarchy to guide users’ attention to the most important parts of the page.
- Consistent Design: Maintain consistency in design elements to avoid overwhelming users with too much information.
- Focus on Content: Prioritize content that supports users’ goals and remove anything that doesn’t add value.
