Design et ergonomie pour le Web


Cours 7


Jonathan Martel
21 mai 2014



Collège de Maisonneuve

Menu du jour

  1. Les lois de Krug (2000)
  2. La navigation
  3. La page d'accueil
  4. Le trunk test

Selon Krug (2000)

  1. Don’t make me think
  2. Créez une hiérarchie visuelle claire
  3. Prenez avantage des conventions
  4. Créer des zones claires et distinctes
  5. Rendez évidente les zones interactives
  6. Minimisez le « bruit »
  7. Créez des catégories exclusives
  8. Omettez les mots inutiles

Don't make me think

  • Utilisez des termes précis et orientés vers l’action
    • « Emplois » plutôt « opportunité de travail »
    • « Nous joindre » plutôt que « Nos coordonnées »
  • Évitez les éléments pouvant avoir plus d’une signification
    ou un comportement spécifique
    • Ex. : « Recherche rapide », Rechercher sur ce site », etc

Créez une hiérarchie visuelle claire

  • Créez des hiérarchies de titre par importance
  • Assemblez les éléments reliés logiquement
  • Créez des ensembles et des sous-ensembles graphiques

Prenez avantage des conventions

  • Utilisez les conventions connues afin de guider l’utilisateur
    • Titre, sous-titre, paragraphe, légende, etc
    • Items graphiques commun, emplacement des menus, etc
    • Métaphores communes : panier d’achat
  • Facilite le décodage, l’interprétation et la navigation
  • Si vous voulez changer les conventions, assurez-vous 
    • que votre innovation soit parlante en elle-même (Self-explanatory)
    • qu’elle soit à ce point meilleure que cela vaut la courbe d’apprentissage

Créer des zones claires et distinctes

  • L’utilisateur doit clairement être capable d’identifier
    le rôle de chaque section d    e votre site.
  • Utilisez des titres claires et des éléments graphiques cohérents
    et distincts

Exemple : http ://letour.com

Rendez évidente les zones interactives

  • Ce qui est « cliquable » doit être évident.
  • Les boîtes et les éléments interactifs
    qui commandent à l’utilisateur un     comportement
    doivent être clairement identifiés

Minimisez le « bruit »

  • Créez des vedettes sur vos pages.
    Tout ne peut être au premier plan et en     vedette.
  • Limitez le bruit provenant du fond des éléments.

Créez des catégories exclusives

  • Diviser vos sujets/objets en catégorie mutuellement exclusives
  • Évitez qu’une catégorie puisse s’appliquer à deux éléments
    ou à deux actions
    • Ex. : Catégorie d’équipement électronique : Maison et Bureau

Omettez les mots inutiles

  • Soyez bref et concis
  • Pour Krug (2000) :
    • « Happy talk must die »
    • « Instruction must die »

La navigation


Voyez la navigation comme le magasinage dans un magasin à rayon
  1. Entrez dans le magasin
  2. Cherchez le bon département
  3. Cherchez la bonne allée
  4. Trouvez le produit
  5. Avez vous trouvé le bon produit
    (changez d’allée, changez de département, 
    changez de magasin, payez) ?

La navigation II

  • Les utilisateurs
    • cherchent habituellement quelque chose sur votre site
    • décident s’ils vont naviguer ou bien chercher
      • Quelques uns sont naturellement des chercheurs, d’autres des navigeurs (Search-dominant, Link-dominant)
      • naviguent en suivant des hiérarchies
      • quittent votre site s’ils ne trouvent pas ce qu’ils cherchent (reviendront-ils ?)

La navigation III

  • Ce que le web a de différents du magasin
    • Aucun sens de l’échelle
    • Aucune orientation spaciale disponible
    • Aucun sens de l’emplacement
  • La page d’accueil devient alors la seule référence fixe

La navigation IV

  • Ce qu’elle permet
    • En plus de nous permettre de trouver ce que l’on cherche et de nous dire où nous somme
    • Elle nous donne un appuie sur lequel se tenir
    • Nous dit ce qu’il y a à voir dans le site
    • Nous renseigne sur la façon d’utiliser le site
    • Participe à définir le niveau de confiance envers l’organisation

La navigation V

  • Les conventions de navigation
    • Une convention à respecter
    • Pourquoi le faire sur la route, dans les immeubles et dans les livres, mais pas sur le web ?
  • Quelques éléments de la convention de navigation sur le web
    • Identification du site
    • Sections et sous-section
    • « Utilities »
    • Nom de la page
    • Navigation locale
    • Indicateur de localisation
    • Optionnel : version en texte (pied de page)

La navigation VI

  • Une navigation persistante
    • Un menu principal unique sur toutes les pages (ou presque)
    • Donne une stabilité au site
    • Ne demande qu’un seul décodage du visiteur
    • Aide à identifier le site sur lequel nous sommes
  • Ce qu’elle devrait contenir
    • Identification du site
    • Sections
    • « Utilities »
    • Une façon de chercher
    • Un retour vers l’accueil

La navigation VII

  • La profondeur des menus
    • Prendre un soin équivalent pour tous les niveaux de navigation.
    • Les visiteurs passe autant de temps à tous les niveaux.
    • Une navigation à trois ou quatre niveaux est très difficile à produire.

La navigation VIII

  • Fil d’ariane
    • Dit où vous êtes en fonction de la hiérarchie du site (de la page d’accueil)
    • Doit être positionné haut dans la page pour ne pas se confondre avec la navigation régulière
    • Ne doit pas se substituer à l’indicateur de position
    • Ne doit pas se substituer au nom de la page
    • Quelques éléments en vrac :
      • Utiliser le symbole « > »
      • Utiliser une petite police
      • Mettez du contraste dans le dernier item

La navigation IX

  • Un test à la Krug, le Trunk Test
    • Quelle est le site ?
    • Sur quelle page suis-je ?
    • Quelles sont les sections majeures
    • Quelles sont mes options à ce niveau (navigation locale) ?
    • Où suis-je par rapport à la navigation générale (Indicateur de position) ?
    • Comment puis-je faire une recherche ?

La page d'accueil

Ce qu'elle doit accomplir

  • Identifier le site
  • Montrer la hiérarchie du site
  • Ce qu'on peut y trouver
  • Ce qu'on peut y faire
  • Faire des recherches
  • Allumer ( teaser )
  • Contenu vedette
  • Section ou fonctionnalité vedette
  • Du contenu "périssable"
  • Des promotions, aubaines, etc
  • Raccourcis vers les sections spécifiques
  • Enregistrement des usagers, connection, etc
  • Me montrer ce que je cherche...
  • ... et ce que je ne cherche pas encore !
  • Me montrer la voie
  • Établir la crédibilité de l'organisation

Tout ça sans avoir
le contrôle total du design

  • Tout le monde en veux une partie
    • Page vue par tous
    • La page la plus vue
    • Chacun veut son lien avant le fold
  • Une page avec trop de chefs et pas assez "d'indiens"
  • Doit parler à tout les publics cibles à la fois

Les victimes de la "guerre"

  • La page d’accueil ne peut tout faire.
  • Compromis entre le nombre d’éléments et leur visibilité
  • C’est « Ce que fais le site » qui doit être mis en évidence
  • La page d’accueil doit répondre à 4 questions :
    • Qu’est-ce que je peux faire ici ?
    • Qu’est-ce que je peux trouver ici ?
    • Qu’est-ce que c’est ?
    • Pourquoi devrais-je être ici et non pas ailleurs ?

Des outils pour vous aider

  • Un slogan
  • Un court texte d’introduction
  • Ajouter la mission prêt de l’identité du site
  • Utiliser l’espace nécessaire...
    • Ne pas supposer que tout le monde
      connait votre site ou sa fonction
    • Tenir votre point afin de garder assez d’espace
      pour le faire
  • ... sans exagérer
  • Faites valider votre page d’accueil
    par des gens à l’extérieur de l’organisation

Où est-ce que je commence ?

  • si je veux chercher ?
  • si je veux naviguer ?
  • si je veux voir leur meilleur produit ?

La navigation sur la page d’accueil peut être différente

  • Une plus grande description des menus
  • Une orientation différente (attention ...)
  • La zone d’identité du site plus grande
  • Changement « très subtil » des noms des sections
    • La compagnie -> Compagnie
    • Les emplois -> Emplois

Des exemples pour savoir si l'on comprend bien

  • Thinkgeek.com
  • cyberpresse.ca
  • www.suunto.com/fr-CA/

Design et ergonomie pour le Web - Cours 8

By Jonathan Martel

Made with Slides.com

Design et ergonomie pour le Web - Cours 8

Design et ergonomie pour le Web - Cours 8

  • 775

More from Jonathan Martel