Design et ergonomie pour le Web


Cours 3


Jonathan Martel
9 mai 2014 



Collège de Maisonneuve

Menu du jour

  1. Dialogue humain-machine
    1. L'interface comme artefact cognitif
  2. Révision de l'approche PARC
    1. Analyse en équipe de sites
    2. Retour en groupe sur les analyses

Dialogue humain-machine

Les affordances désignent les propriétés actionnables entre le monde et un agent. Elles sont des relations qui existent entre les moyens d’action et les éléments qui sont perçus par l’agent (Gibson, 1977, 1979 ; Norman, 1988).

Dialogue humain-machine

Un artefact est un objet ayant subi une transformation même minime par l’homme et se distinguant ainsi de tout objet dont la modification serait due à un phénomène naturel.

Dialogue humain-machine

Un artefact cognitif est un outil conçu pour conserver, exposer et traiter l’information dans le but de satisfaire une fonction représentationnelle (Norman, 1993).

Le premier artefact : le monde

  • Par son existence même, il réduit au minimum le besoin d’encoder son état actuel (déjà encodé)
  • Par sa seul présence, il est utilisable comme une base de données (base de donnée)
  • Il fournit une organisation spaciale tridimensionnelle des objets (interface)
  • Sa structure physique simplifit la sélection des actions (contraintes)
  • Stabilité des objets dans le monde (mémoire)

Une preuve par l'exemple

Nommez tous ce que vous avez dans vos armoires de cuisine

Ce que l'on vous demande de faire...


Ce que vous faites réellement


Une fonction représentationnelle

Une interface est un artefact cognitif qui doit être conçu en rapport avec ses fonctions représentationnelles. Comme telle, elle représente un objet à l’aide d’un lexique et d’une grammaire.

Un système A

Un système B

Flux d'activité "réel"


Flux d'activité "vécu"


Un test cognitif pour vous convaincre

Test 1

  • À vos marques...
  • Prêts
  • Partez !

Test 2

  • À vos marques... 
  • Prêts 
  • Partez ! 
  • Vérifions...


    De quessé ça donne ?

    Sur quoi peut-on cliquer ?

    (à lire...)

    Exemples 


    Approche PARC

    • Proximité
    • Alignement 
    • Répétition
    • Contraste

    Challenge
    Québec - France - États-Unis

    • Aviation
      • aircanada.com (site Canada/Français)
      • airfrance.fr (site France/Français)
      • united.com (site USA/English)
    • Transport ferroviaire
      • viarail.ca (Français)
      • voyages-sncf.com (France)
      • amtrak.com (English)
    • Services postaux
      • canadapost.ca (Français)
      • laposte.fr
      • usps.com

    Retour sur le Challenge

    Design et ergonomie pour le Web - Cours 3

    By Jonathan Martel

    Design et ergonomie pour le Web - Cours 3

    Design et ergonomie pour le Web - Cours 3

    • 903