Design et ergonomie pour le Web

1. Présentation du plan de cours
2. Introduction
1. Définitions
2. Ergonomie et design d'interface
3. Design Web
1. Historique
2. Paradigme du design Web

Étude scientifique des conditions de travail et des relations entre les personnes et les machines, en vue de leur amélioration

Esthétique industrielle des objets utilitaires, des meubles, de l’habitat en général 

Dispositif qui permet l’échange d’information entre deux systèmes

Rapport entre les résultats obtenus et les résultats attendus.
Qualité, caractère d’une chose, d’un comportement, d’une approche efficace

Rapport entre les résultats obtenus et les moyens mis en oeuvre pour y parvenir

• Elle doit donc :
• permettre rapidement à l’utilisateur de déterminer ses fonctions
• être facilement décodable
• assister l’utilisateur dans sa manipulation
• être attrayant
• Elle ne doit donc pas :
• être seulement belle
• être « design »
• servir à faire valoir son créateur (sauf pour son propre site personnel)
• être tout le contraire d’un objet utile et fonctionnel

• identifier le contexte d'utilisation
• comprendre les objectifs du système
• analyser les contraintes (matérielles, logicielles,
  financières, temporelles, etc)

• les règles de base de l’ergonomie visuelle
• les principes de la communication graphiques
• les contraintes inhérentes aux médias choisis

• Début 1990
  
• 1990 : Invention du HyperText Markup Language (HTML) par Tim Berners-Lee (20 éléments).
• 1992 : Suggestion de la balise IMG par l'équipe de Mosaic.
• 1993 : Lancement du premier navigateur graphique (Mosaic) et plusieurs autres ensuite.
• 1994 :
• Nombreux ajouts de balises par les navigateurs, le HTML 2 est créé.
• Netscape devient le navigateur dominant et ajoute d'autres balises, les autres suivents.
• Fondation du World Wide Web Consortium (W3C)

• 1995 : 
  
• Le HTML 3 est créé.
• Internet Explorer arrive sur le marché.
• Netscape soumet une proposition pour les cadres (<frame>)
• Premier balbutiement des feuilles de style (CSS)
• 1996-1998 : Flash, HTML 3.2, HTML 4, CSS...

• Développement du langage HTML
• Contrainte de bande passante
• Coût de l'hébergement
• Outils de développement Web
• Programmation serveur et bases de données
• Technologie de compression de données
• Développement des dispositifs de navigation
  
  

• Caractéristiques des pages : 
  
• Wow, mais encore
• Premiers sites en Flash
• L'habileté du graphiste avant le contenu
• Technologies :
• Navigateurs graphiques
• Modem rapide
• Flash
• Plus grande bande passante
• Outils de conception graphique

• Caractéristiques des pages : 
  
• Esthétique vs contenu
• Technologies :
• Outils faciles à utiliser
• Connection haute vitesse
• Démocratisation de la micro-informatique et de l'accès
• Recherche sur le rôle d'Internet comme média

• Caractéristiques des pages : 
  
• Interactivité et participation en-ligne
• Système de gestion de contenu (CMS)
• Technologies :
• CMS
• Serveur moins couteux 
• Bande passante et capacité de stockage plus grande

• Skeuomorphisme 
• flat design

• Caractéristiques des pages : 
  
• ?
• Technologies :
• ?