Conception ergonomique de sites Web

1
Conception ergonomique de sites Web

• DESS GI
• Option Communication Homme-Machine
• Emmanuel Dubois
• - Thésard 3ème année -
• Emmanuel.Dubois_at_imag.fr
• Labo. CLIPS - Equipe IIHM
• Labo. TIMC - Equipe GMCAO

2
Option CHM (1)

• Module Conception Ergonomique
• Conception ergo. et techniques d'interaction
• L. Nigay, 24h cours, Contrôle continu
  (coeff. 7)
• Conception et développement d'applications Web
• E. Boyer, 12h cours, 9h TD, 16h TP,
  Projet
• E. Dubois, 9h cours, Projet
• Module Images
• Analyse et Synthèse d'Images (ASI)
• E. Boyer, 24h cours, Examen (coeff. 5) Projet
• P. Reignier, 24h TD

3
Option CHM (2)

• Projet
• Commun au cours de conception et ASI
• Développement d'un site Web présentant une partie
  du cours d'ASI et utilisant les techniques de
  programmation Web
• Evaluer au 2nd semestre, 2 Notes
• Coeff.. 2 contenu sémantique ASI (E. Boyer)
• Coeff. 6 ergonomie et technique de
  développement
• Coeff 3 ergonomie du site (E. Dubois)
• Coeff. 3 développement d'appli. Web (E. Boyer)

4
Remarques générales

• Ressemblances avec le cours de maîtrise
• Pré-requis
• Notions de GL
• Notions d'IHM (conception, ergo.)
• Ce que ce cours n'est pas
• une liste de bonnes recettes
• le guide du site Web parfait
• Ce qu'il se veut être
• adaptation au Web des techniques de conception
  d'IHM

5
Web Overview

• Croissance spectaculaire
• Internautes US 7.5M (96), 60M (98), 95M (2000)
• Sites 1M (97), 2.3M(98), 200M dans les 5 ans
• Causes
• Baisse des coûts / Augmentation de la concurrence
• Simplicité de HTML
• Indépendance des plates-formes
• Bénéfices attendus
• Problèmes empressement lors de la création
• Présentation, structure - -
• ? Besoins de conception (technologies)

6
Le Web

• Définitions ?
• Système d'informations
• Ensemble de documents disponibles à distance
• Bibliothèque mondiale,ubiquitaire, sans rayonnage
• Caractéristiques "techniques"
• hypertexte -
  navigable
• multi plate-forme -
  dynamique
• distribué (client/serveur)
• INTERACTIF
• ? Besoins de conception (aspects humains)

7
Le Web évolutions des générations

• 1) Informations scientifiques
• conception centrée sur dispositif de sortie
• textuel
• 2) Apparitions de graphiques
• conception centrée sur les techno offertes par le
  Web
• graphiques, boutons, sons, images
• 3) Développement de principes de présentation
• conception orientée sur la volonté d'attirer les
  users
• métaphores, tunnels,
• 4) WAP, TV, frigo. tous le temps, partout

8
Qu'est ce que la conception ?

• Prendre en compte les utilisateurs
• leurs caractéristiques
• leurs besoins
• leurs tâches
• Définir les objectifs du sites
• les informations
• les services
• Gérer une équipe de développeurs / concepteurs
• Savoir mettre en uvre les technologies ad hoc

9
Conception Ergonomique de pages Web

• Web Overview
  (0.3)
• Spécificité du domaine, impact sur le design
  (0.3)
• Organisation du processus de design
  (0.5)
• Conception du site
  (1)
• Propriétés ergonomiques pour le Web
  (1.5)
• Guidelines, trucs et astuces
  (1.5)
• Evaluation ergo.
  de sites
• Axes de recherche
  actuels
• Mise en uvre conception (1-2),évaluation (2-3)

10
Importance de la spécificité du domaine

• Web ensemble d'informations
• Site porte d'accès au Web, !!! porte
  INTERACTIVE
• Différence fondamentale d'avec les SI
  "classiques"
• Le designer n'a pas le contrôle total sur
  l'interaction ! (exple)
• Nécessité de partage user, équipement
• Causes spécificités du domaine !

11
Spécificités (1)

• Dispositifs d'Entrée / Sortie
• grande incertitude sur le dispositif (écran, TV,
  Pilot, )
• taille x1(PDA) ? x100 (écran)
• largeur de bande (débit) x1(modem) ? x1000 (T3)
• formatage par défaut variable fonte, taille,
  couleur,
• ressources variables (plugins)
• "Looking different is not a bug it's a feature"
  (Nielsen)
• ? Concevoir des spécifications qui s'adaptent aux
  préférences et à l'équipement de l'utilisateur

12
Spécificités (2)

• Navigation de l'utilisateur
• incertitude sur le chemin suivi par l'user
• impossibilité de contraindre le chemin suivi dans
  le site
• anticipation impossible (pas de "grisés")
• action dépendante de la localisation dans le site
  inenvisageable
• goût de l'internaute pour la liberté de mouvement
• ? Assister la navigation contrôlée par
  l'utilisateur

13
Spécificités (3)

• Contexte
• non identifiable pour un user sur le Web
• souvent flou et vaste
• un site une infime partie du monde connecté
• ? Conserver une cohérence externe pour réduire
  le temps d'apprentissage

14
Spécificités (4)

• Dimension de l'information
• artefacts journalistiques d'appels inutilisables
  (photo encadrée, graphique, à cheval sur deux
  pages, ) car
• limitations liées à HTML
• contraintes temporelles et spatiales
• ? Concevoir en pensant d'abord que le site est un
  espace mono-dimensionnel (suite d'enchaînements)

15
Spécificités (5)

• Navigation
• assimilable à la manipulation d'objets dans le
  monde réel
• ? Soigner la conception des liens
• doit s'appuyer sur
• apparence
• affordance
• capacité à assister l'utilisateur dans ses tâches
  de localisation

16
Spécificités (6)

• Temps de réponse, résolution
• limite les graphiques (taille, couleurs,
  résolutions, nb.)
• influe sur la quantité de texte
• contraint les présentations les plus
  avant-gardistes
• encourage la pondération des designer !
• ? Prendre en compte ces contraintes
  incontournables

17
Spécificités (7)

• Type d'interaction
• large panel de dispositifs d'interaction (p/r à
  un livre)
• clic plus d'informations
• bouton changement de site
• ? Garder à l'esprit l'inconsistances des
  dispositifs utilisés

18
Spécificités conclusion

• Différences réelles entre SI et sites Web
• dispositifs d'E/S, navigation, contexte,dimension,
  contraintes matérielles, dispositifs
  d'interaction
• Intégration de ces différence nécessaire lors de
  la conception de sites
• Garder à l'esprit les contraintes en découlant
• MAIS AUSSI
• Savoir en profiter !

19
Bilan

• Garder en tête les contraintes tout en profitant
  UTILEMENT des capacités offertes par le Web
• Embellissez, développez l'interaction avec le Web
  avec comme pensée sous-jacente et permanente
  l'utilisateur et ses tâches.
• Admettez que vous, concepteur, n'avez plus le
  contrôle intégral sur tout ! (à commencer par
  l'interaction)