SlideShare une entreprise Scribd logo
Notions d’I.H.M.  Module 1ere année d’initiation au design d’interactivité Grégoire Cliquet / Laurent Neyssensas / Clément Thiery L’École de design Nantes Atlantique 2010 - 2011
Sommaire : 1. Evolution des ordinateurs  2. Interactions Humains Machines  3. Evolutions Source : Skokie / Flickr
1. Evolution des Ordinateurs des ordinateurs et des hommes… Ordinateur :  Proposé par  Jacques Perret à IBM France en 1955  (computers) le terme désigne des  machines automatiques de traitement de l'information , obéissant à des programmes formés par des suites d'opérations arithmétiques et logiques.  Informatique :  Le terme "informatique", est un néologisme français, introduit en 1962 par Philippe Dreyfus, condensant les mots  information et automatique . Les Anglo-Saxons parlent de computer science et de data processing. Mare Nostrum  / Barcelone http://www.iterfan.org/photo_of_a_month/march2009.jpg
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Evolution des machines à calculer mécaniques http:// lowtech.org/projects/raid/gfx/raid.jpeg /
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Le Colossus  est construit en 1942 par  Alan Turing  pour décrypter les messages allemands codés par  Enigma  (en haut à gauche). Le Colossus fut le  premier calculateur électronique  fondé sur  le langage binaire . Installé près de Londres, à Bletchley Park, il était constitué de 2400 tubes à vide et réalisait  5000 opérations par secondes Pour info : 2Ghz = 2 Milliards d’opération par secondes. Cryptage Vs Langage Humain (USA) Enigma Video :  http://www.youtube.com/watch?v=DnBsndE1IkA&feature=related
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Le Colossus  qui comporte 2 000 tubes à vide, peut lire des rubans perforés à la vitesse de 5 000 caractères à la seconde.   Un seul ruban à la fois est donné à la machine . Pour info : “Il y a grosso modo un marché mondial pour cinq ordinateurs.” 1943, THOMAS J. WATSON, président du conseil d’administration d’IBM. Video :  http://www.youtube.com/watch?v=O8WXNPn1QKo
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs L’ENIAC (1946) :  Sa capacité est de 20 nombres à dix chiffres signés permettent de réaliser un total de  100 000 additions par seconde . Il ne peut en revanche gérer  que 357 multiplications ou 38 divisions par seconde . Physiquement  l'ENIAC est un monstre , il contient 17 468 tubes à vide, 7 200 diodes à cristal, 1 500 relais, 70 000 résistances, 10 000 condensateurs et environ 5 millions de joints soudés à la main. Son poids est de 30 tonnes occupant une surface de 167 mètres carrés. Sa consommation est de 160 kilowatts. Pour info :  ”there is a bug in the machine” ! Video :  http://www.youtube.com/watch?v=mxj6h5JyfXs&feature=related
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs L’ENIAC 1946 « L’ homme »… ou plutôt  les femmes  dans la machine Video :  http://www.youtube.com/watch?v=VAnhFNJgNYY
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Whirlwind 1952 (M.I.T.) Le Whirlwind est le tout premier ordinateur possédant une interface graphique utilisateur, bien que celle ci soit encore trés rudimentaire, héritant de l'interface des radars. Il affiche les tous premiers symboles graphiques : des  T pour les cibles  (Target) et  F pour les combattants  (Fighter). Surveillance radar du territoire américain (Guerre Froide). Pour info : 20000 instructions par seconde / Affichage de graphiques sur écran cathodique en 32 pixels par 32.
1. Evolution des Ordinateurs 1945-1965 : L’Ere des (mini) Calculateurs PDP-1 / DEC 1959 (M.I.T.) Le PDP-1 était le premier ordinateur interactif et a lancé le concept de mini-ordinateur. Il avait une vitesse d’horloge de 0,2 MHz et pouvait stocker 4 096 mots de 18 bits. Il effectuait 100 000 opérations par seconde. Pour info : 120 000 $. SpaceWar  / 1961 (Pong 1972) Video :  http://www.youtube.com/watch?v=7bzWnaH-0sg
1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs SAGE / IBM 1961 Semi-Automatic Ground Environment  est le successeur du Whrilwind dans la surveillance de l’espace aérien américain. Cette machine se distingue par des modalités d’interaction novatrices. Le projet débuta en 1950 et le SAGE fut opérationnel en 1963. Il resta ensuite en activité jusqu’en 1983. Traitement :  75 000 instructions par seconde . Pour info : 250 tonnes !! L’ordinateur le plus encombrant et le plus lourd jamais construit (12 Milliards de $) Opérateur / Interaction  Périphériques spécifiques Video :  http://www.youtube.com/watch?v=5D-RHFta4aQ http://www.youtube.com/watch?v=o7ssZyRl6MU&feature=related
1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion Les calculateurs au service des  entreprises  (Banques, Assurances, Compagnies aériennes, etc…) Le « sacre d’IBM » de « Big Blue ». Logotypes par Paul Rand :  www.paul-rand.com
1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion  S/360  IBM 1965 L’IBM S/360 ouvre l’ère de l’informatique centralisée sur ce que l’on nomme des Mainframes. Les Mainframes sont consultables depuis une certain nombre de terminaux. Pour info :  de 0.034 MIPS à 1.700 MIPS avec de 8 kB à 8 MB  de mémoire interne (de $133 000 à $5 500 000) Video :  http://www.youtube.com/watch?v=ZGRCn0vwK3c&feature=related
1. Evolution des Ordinateurs b. 1965-1980 : Les (mini) Ordinateurs de Gestion  PDP-8 /  DEC 1965 L’IBM S/360 ouvre l’ère de l’informatique centralisée sur ce que l’on nomme des Mainframes. Les Mainframes sont consultables depuis une certain nombre de terminaux. Pour info : seulement… 35 000 opérations/seconde ($18 000) Video :  http://www.youtube.com/watch?v=DPioENtAHuY
1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion  S/370  IBM 1971 Successeur de la gamme S/360
1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion  Univac 1100 / Remington / 1972 de la concurrence ?
1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion  IRIS 80 / Cii / 1972 de la concurrence  française  !!?
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) Steve Jobs (Apple) et William Gates (Microsoft) / 2007 http://www.flickr.com/photos/cksample3/527038599/in/photostream/#/
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) MICRAL / R2E / 1972 André Truong et François Gernelle pour répondre à une commande de l'INRA dans le but de réaliser un système de mesure et de calcul de l'évaporation des sols, à un tarif inférieur au prix du mini-ordinateur PDP-8 4K (à 45 000 FF). Pour info : Le Micral N était vendu à un prix extrêmement bas selon les critères du moment : soit 1300 euros  environ.
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) ALTO / XEROX PARC / 1973 Il fut le premier ordinateur à utiliser la métaphore du bureau et une interface graphique. Le Alto fut un outil de recherche de Xerox, pas un produit commercial. Pour info : L’Alto intègre tous les principes de l’informatique « moderne » qui seront repris par Apple.
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) Apple 1 / Apple Computer / 1976 Les premiers ordinateurs personnels sont destinés aux étudiants des campus universitaire. Apple lance l’ordinateur à assembler soi-même. Pour info : L’Apple 1 était vendu  au prix de $666.66, en avril 1977 son prix sera de $475.
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels ZX-80 / Sinclair / 1978 L’apprentissage de la programmation en famille (BASIC) Pour info : Le ZX-80 était vendu au prix de $100 (à connecter à une TV et magnétophone à K7) .
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels Personal Computer / IBM PC / 1981 La bureautique accessible à tous (?) Pour info : de $1600 à $4500 selon les configurations
1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels Macintosh / Apple / 1984 Une machine compacte, accessible qui intègre tous les principes de l’Alto. D'une conception tout-en-un, le Macintosh 128 K avait un écran 9" en noir et blanc (1 bit) de 512 par 342 pixels. Il intègre un lecteur de disquettes 400 Ko 3,5" à chargement manuel et… une souris ! Pour info : environ $2500, 50.000 exemplaires écoulés en 2 mois. Video :  http://www.youtube.com/watch?v=OYecfV3ubP8
One Computer, many users  (Mainframe) One Computer, One user (PC) Many Computers, One user  (Ubiquitous Computing)
1. Evolution des Ordinateurs (conclusion) d. 1995-2000 : Les ordinateurs multimédia e. 2000-2008 : Internet et le Web f. 2008-2011 : L’informatique mobile & d’assistance Source :  http://www.firingsquad.com/media/article_image.asp/2505/02
2. Interactions Humains Machines (C.H.I.) a. Rappels Interaction :  nf. Influence réciproque de deux phénomènes, de deux personnes Interactif :  adj. Se dit de phénomènes qui réagissent les uns sur les autres Interactivité :  nf. 1.INFORM. Qualité d’un logiciel dont l’exécution prend constamment en compte les informations fournies par l’utilisateur. On considèrera l’interactivité comme le degré de satisfaction atteint par l’usager dans l’interaction vécue avec la machine John Underkoffler Video (TED) :  http://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture.html
2. Interactions Humains Machines (C.H.I.) b. Interfaces nf. (mot anglais)  Limite commune à deux systèmes , deux entités permettant des échanges entre ceux-ci. Elle favorise le  dialogue  (l’interaction) entre les machines et les humains par la  stimulation des sens  via des périphériques appropriés : Le touché  : par l’intermédiaire d’un dispositif de pointage : Souris, stylet, écran tactile ou clavier. La vue  : par l’affichage écran, c’est ce que l’on nomme les GUI : « Graphical User Interfaces ». L’ouie  : par commandes vocales appelés encore VUI : « Voice User Interface ». La gestuelle  : par l’analyse des mouvements du corps, du visage, d’un pointeur.
2. Interactions Humains Machines (C.H.I.) c. Principes de la Manipulation Directe Pour  Ben. Schneiderman  (1982) : Une interface est dite de  « manipulation directe »  si elle possède les propriétés suivantes :   -  Les objets concernés ont une  représentation permanente  (métaphores/icônes). -  Des  actions physiques directes  remplacent la saisie de commandes textuelles . -  Le résultat des actions sur les objets est  immédiatement visible . -  Les opérations sont rapides,  incrémentales et réversibles . La manipulation directe repose sur 2 métaphores : La métaphore de  la description La métaphore  du monde réel
2. Interactions Humains Machines (C.H.I.) c. Principes de la Manipulation Directe      «  Ligne de commandes (C.L.I.)  »  Vs  «  Graphical User Interface   (G.U.I.) »
2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows  | La fenêtre ouvre en permanence sur le bureau (Apple) ou l’occulte (PC). Le fenêtrage des applications permet l’utilisation simultanée de plusieurs applications (Multitâche / Multifenêtrage).
2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows  | I cons Les icones permettent de représenter des actions, de différencier les applications, d’identifier les périphériques, etc… Lorsque le  logogramme  se réfère à un élément abstrait de la réalité (comme une notion ou un morphème), on le nomme  idéogramme . L’idéogramme est un symbole graphique représentant un mot ou une idée (chinois, japonais, hiéroglyphes…). Les  pictogrammes  représentent des éléments concrets de la réalité.
2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows  | I cons   | M enus a_ Menus 'déroulants ' liés à la barre de menu principal généralement située sous la zone de titre de la fenêtre. b_ Menus de type 'pop-up'  pour afficher des indications ou des messages d'erreurs. c_ Boîtes à Outils et palettes  qui regroupent des actions / outils sous la forme d'icônes (surtout dans le cas des palettes). d_ Boutons de type 'Radio'  qui permettent de choisir une action parmi une liste.  e_ Cases à cocher  qui permettent une sélection multiple d’actions. f_ Listes de sélection , voisines des menus (ex. fichier ->'ouvrir‘).  g_ Boîtes de Dialogue  qui sont devenues des éléments récurrents dans les interfaces WIMP.
2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows  | I cons   | M enus   | P ointing devices (1) Souris  : Douglas Engelbart 1968  | Trackball  (ici intégré à une souris)  | TrackPad  : Ordinateurs portables Jog Shuttle  (mobiles)  | Joystick   (jeux)  | Tablette Graphique  : Infographie
2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows  | I cons   | M enus   | P ointing devices (2) Eye Tracking  : Tobii  | Space Mouse  (souris 3d : x,y,z)  Tapis DDR  : Dance Dance Revolution  |   Wiimote   (Nintendo)  | VR Mouse  (Réalité Virtuelle)  | DataGlove  : Ps5
2. Interactions Humains Machines (C.H.I.) e. W.Y.S.I.W.Y.G. What You See… Is What You Get  !! Hopefully ;)
3. Evolutions Evolution des paradigmes d’interaction liés à l’évolution technologique - Multitouch / multipoints - Gestuelle et Physique (accéléromètres / wiimote) - Mobilité  ? - Multimodalité ? - Cérébrale ? (Brain Computer interface) - Ligne de commande ??? Ubiquity (Mozilla)
Merci ;) des questions ? [email_address] [email_address] [email_address] Caprica  / BSG / Sci-Fi Channel

Contenu connexe

Similaire à Notions IHM

The supply chain is susceptible to market volatility, driven by changing cons...
The supply chain is susceptible to market volatility, driven by changing cons...The supply chain is susceptible to market volatility, driven by changing cons...
The supply chain is susceptible to market volatility, driven by changing cons...
DanielMohamed4
 
Historique de l'informatique et d'Internet
Historique de l'informatique et d'InternetHistorique de l'informatique et d'Internet
Historique de l'informatique et d'Internet
D1clic
 
historique de l'informatique
historique de l'informatiquehistorique de l'informatique
historique de l'informatique
Abdelouahab Benlatreche
 
cours_archi_2006-20071 (1).ppt
cours_archi_2006-20071 (1).pptcours_archi_2006-20071 (1).ppt
cours_archi_2006-20071 (1).ppt
ZeinabMhanna2
 
Synthese histoires-numerique
Synthese histoires-numeriqueSynthese histoires-numerique
Synthese histoires-numerique
maxime-breithaupt
 
Chap 1 Introduction SE
Chap 1 Introduction SE Chap 1 Introduction SE
Chap 1 Introduction SE
RAYENBOUAFIF1
 
Linux_history.pdf
Linux_history.pdfLinux_history.pdf
Linux_history.pdf
jaweb1
 
TD Grappes d'innovation
TD Grappes d'innovationTD Grappes d'innovation
TD Grappes d'innovation
Boris Adam
 
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
François Huguet
 
#000 is the new Black
#000 is the new Black#000 is the new Black
#000 is the new Black
Julien Noyer
 
éVolution des systèmes informatiques
éVolution des systèmes informatiqueséVolution des systèmes informatiques
éVolution des systèmes informatiques
SebastienMelanson
 
Grappe d'innovation des TIC
Grappe d'innovation des TICGrappe d'innovation des TIC
Grappe d'innovation des TIC
Boris Adam
 
Des ordinateurs et des hommes : les interfaces homme-machine
Des ordinateurs et des hommes : les interfaces homme-machineDes ordinateurs et des hommes : les interfaces homme-machine
Des ordinateurs et des hommes : les interfaces homme-machine
Vincent Mabillot
 
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
AssiaAouina
 
Saga des ordis
Saga des ordisSaga des ordis
Saga des ordis
jack51110
 
Embedded intro 2006
Embedded intro 2006Embedded intro 2006
Embedded intro 2006
mcbinene
 
Ordinateur
OrdinateurOrdinateur
Ordinateur
j_lipaz
 

Similaire à Notions IHM (20)

The supply chain is susceptible to market volatility, driven by changing cons...
The supply chain is susceptible to market volatility, driven by changing cons...The supply chain is susceptible to market volatility, driven by changing cons...
The supply chain is susceptible to market volatility, driven by changing cons...
 
Historique de l'informatique et d'Internet
Historique de l'informatique et d'InternetHistorique de l'informatique et d'Internet
Historique de l'informatique et d'Internet
 
historique de l'informatique
historique de l'informatiquehistorique de l'informatique
historique de l'informatique
 
cours_archi_2006-20071 (1).ppt
cours_archi_2006-20071 (1).pptcours_archi_2006-20071 (1).ppt
cours_archi_2006-20071 (1).ppt
 
Synthese histoires-numerique
Synthese histoires-numeriqueSynthese histoires-numerique
Synthese histoires-numerique
 
Chap 1 Introduction SE
Chap 1 Introduction SE Chap 1 Introduction SE
Chap 1 Introduction SE
 
M Forum
M ForumM Forum
M Forum
 
L’ordinateur
L’ordinateurL’ordinateur
L’ordinateur
 
Linux_history.pdf
Linux_history.pdfLinux_history.pdf
Linux_history.pdf
 
TD Grappes d'innovation
TD Grappes d'innovationTD Grappes d'innovation
TD Grappes d'innovation
 
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
2016_Huguet_l1ICC11 séquence 6 Naissance de l'informatique moderne
 
#000 is the new Black
#000 is the new Black#000 is the new Black
#000 is the new Black
 
éVolution des systèmes informatiques
éVolution des systèmes informatiqueséVolution des systèmes informatiques
éVolution des systèmes informatiques
 
Grappe d'innovation des TIC
Grappe d'innovation des TICGrappe d'innovation des TIC
Grappe d'innovation des TIC
 
Des ordinateurs et des hommes : les interfaces homme-machine
Des ordinateurs et des hommes : les interfaces homme-machineDes ordinateurs et des hommes : les interfaces homme-machine
Des ordinateurs et des hommes : les interfaces homme-machine
 
Chap8 extrait
Chap8 extraitChap8 extrait
Chap8 extrait
 
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
485017053-GUIDE-DU-PROFESSEUR-INFORMATIQUE-pdf.pdf
 
Saga des ordis
Saga des ordisSaga des ordis
Saga des ordis
 
Embedded intro 2006
Embedded intro 2006Embedded intro 2006
Embedded intro 2006
 
Ordinateur
OrdinateurOrdinateur
Ordinateur
 

Plus de lecolededesign

Dessins d'espaces
Dessins d'espacesDessins d'espaces
Dessins d'espaces
lecolededesign
 
Rencontres
RencontresRencontres
Rencontres
lecolededesign
 
Tatoo concept
Tatoo conceptTatoo concept
Tatoo concept
lecolededesign
 
cartographie de mon habitation
cartographie de mon habitationcartographie de mon habitation
cartographie de mon habitation
lecolededesign
 
Objets/manifestes
Objets/manifestesObjets/manifestes
Objets/manifestes
lecolededesign
 
Jardins monochromes
Jardins monochromesJardins monochromes
Jardins monochromes
lecolededesign
 
in situ
in situin situ
Toc. Toc #4 - White out
Toc. Toc #4 - White outToc. Toc #4 - White out
Toc. Toc #4 - White out
lecolededesign
 
Toc. Toc #3 Suffocations
Toc. Toc #3 SuffocationsToc. Toc #3 Suffocations
Toc. Toc #3 Suffocations
lecolededesign
 
Les anachorètes
Les anachorètesLes anachorètes
Les anachorètes
lecolededesign
 
TOC.TOC. #1 - Bâtiment C
TOC.TOC. #1 - Bâtiment CTOC.TOC. #1 - Bâtiment C
TOC.TOC. #1 - Bâtiment C
lecolededesign
 
Une sculpture / Un socle
Une sculpture / Un socleUne sculpture / Un socle
Une sculpture / Un socle
lecolededesign
 
W dessin sol plafond
W dessin sol plafondW dessin sol plafond
W dessin sol plafond
lecolededesign
 
Carnet de route - autoportrait
Carnet de route - autoportraitCarnet de route - autoportrait
Carnet de route - autoportrait
lecolededesign
 
Objets de la mort, Objets du désir (mises en scène photographiques)
Objets de la mort, Objets du désir (mises en scène photographiques)Objets de la mort, Objets du désir (mises en scène photographiques)
Objets de la mort, Objets du désir (mises en scène photographiques)
lecolededesign
 
Objet mort desir 2014
Objet mort desir 2014Objet mort desir 2014
Objet mort desir 2014
lecolededesign
 
Un Matériau / Un système d'assemblage / Une forme
Un Matériau / Un système d'assemblage / Une formeUn Matériau / Un système d'assemblage / Une forme
Un Matériau / Un système d'assemblage / Une forme
lecolededesign
 
Collages
CollagesCollages
Collages
lecolededesign
 
Cartographie mentale
Cartographie mentaleCartographie mentale
Cartographie mentale
lecolededesign
 

Plus de lecolededesign (20)

Dessins d'espaces
Dessins d'espacesDessins d'espaces
Dessins d'espaces
 
Rencontres
RencontresRencontres
Rencontres
 
Tatoo concept
Tatoo conceptTatoo concept
Tatoo concept
 
cartographie de mon habitation
cartographie de mon habitationcartographie de mon habitation
cartographie de mon habitation
 
Objets/manifestes
Objets/manifestesObjets/manifestes
Objets/manifestes
 
Jardins monochromes
Jardins monochromesJardins monochromes
Jardins monochromes
 
in situ
in situin situ
in situ
 
Toc. Toc #4 - White out
Toc. Toc #4 - White outToc. Toc #4 - White out
Toc. Toc #4 - White out
 
Toc. Toc #3 Suffocations
Toc. Toc #3 SuffocationsToc. Toc #3 Suffocations
Toc. Toc #3 Suffocations
 
Les anachorètes
Les anachorètesLes anachorètes
Les anachorètes
 
TOC.TOC. #1 - Bâtiment C
TOC.TOC. #1 - Bâtiment CTOC.TOC. #1 - Bâtiment C
TOC.TOC. #1 - Bâtiment C
 
Une sculpture / Un socle
Une sculpture / Un socleUne sculpture / Un socle
Une sculpture / Un socle
 
W dessin sol plafond
W dessin sol plafondW dessin sol plafond
W dessin sol plafond
 
Carnet de route - autoportrait
Carnet de route - autoportraitCarnet de route - autoportrait
Carnet de route - autoportrait
 
Objets de la mort, Objets du désir (mises en scène photographiques)
Objets de la mort, Objets du désir (mises en scène photographiques)Objets de la mort, Objets du désir (mises en scène photographiques)
Objets de la mort, Objets du désir (mises en scène photographiques)
 
Objet mort desir 2014
Objet mort desir 2014Objet mort desir 2014
Objet mort desir 2014
 
Un Matériau / Un système d'assemblage / Une forme
Un Matériau / Un système d'assemblage / Une formeUn Matériau / Un système d'assemblage / Une forme
Un Matériau / Un système d'assemblage / Une forme
 
Collages
CollagesCollages
Collages
 
Cartographie mentale
Cartographie mentaleCartographie mentale
Cartographie mentale
 
Banalsublime
BanalsublimeBanalsublime
Banalsublime
 

Dernier

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
lebaobabbleu
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
dokposeverin
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
M2i Formation
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
MahouwetinJacquesGBO
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
Martin M Flynn
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
OlivierLumeau1
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
lebaobabbleu
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
kamouzou878
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
mcevapi3
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 

Dernier (13)

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 

Notions IHM

  • 1. Notions d’I.H.M. Module 1ere année d’initiation au design d’interactivité Grégoire Cliquet / Laurent Neyssensas / Clément Thiery L’École de design Nantes Atlantique 2010 - 2011
  • 2. Sommaire : 1. Evolution des ordinateurs 2. Interactions Humains Machines 3. Evolutions Source : Skokie / Flickr
  • 3. 1. Evolution des Ordinateurs des ordinateurs et des hommes… Ordinateur : Proposé par Jacques Perret à IBM France en 1955 (computers) le terme désigne des machines automatiques de traitement de l'information , obéissant à des programmes formés par des suites d'opérations arithmétiques et logiques. Informatique : Le terme "informatique", est un néologisme français, introduit en 1962 par Philippe Dreyfus, condensant les mots information et automatique . Les Anglo-Saxons parlent de computer science et de data processing. Mare Nostrum / Barcelone http://www.iterfan.org/photo_of_a_month/march2009.jpg
  • 4. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Evolution des machines à calculer mécaniques http:// lowtech.org/projects/raid/gfx/raid.jpeg /
  • 5. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Le Colossus est construit en 1942 par Alan Turing pour décrypter les messages allemands codés par Enigma (en haut à gauche). Le Colossus fut le premier calculateur électronique fondé sur le langage binaire . Installé près de Londres, à Bletchley Park, il était constitué de 2400 tubes à vide et réalisait 5000 opérations par secondes Pour info : 2Ghz = 2 Milliards d’opération par secondes. Cryptage Vs Langage Humain (USA) Enigma Video : http://www.youtube.com/watch?v=DnBsndE1IkA&feature=related
  • 6. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Le Colossus qui comporte 2 000 tubes à vide, peut lire des rubans perforés à la vitesse de 5 000 caractères à la seconde. Un seul ruban à la fois est donné à la machine . Pour info : “Il y a grosso modo un marché mondial pour cinq ordinateurs.” 1943, THOMAS J. WATSON, président du conseil d’administration d’IBM. Video : http://www.youtube.com/watch?v=O8WXNPn1QKo
  • 7. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs L’ENIAC (1946) : Sa capacité est de 20 nombres à dix chiffres signés permettent de réaliser un total de 100 000 additions par seconde . Il ne peut en revanche gérer que 357 multiplications ou 38 divisions par seconde . Physiquement l'ENIAC est un monstre , il contient 17 468 tubes à vide, 7 200 diodes à cristal, 1 500 relais, 70 000 résistances, 10 000 condensateurs et environ 5 millions de joints soudés à la main. Son poids est de 30 tonnes occupant une surface de 167 mètres carrés. Sa consommation est de 160 kilowatts. Pour info : ”there is a bug in the machine” ! Video : http://www.youtube.com/watch?v=mxj6h5JyfXs&feature=related
  • 8. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs L’ENIAC 1946 « L’ homme »… ou plutôt les femmes dans la machine Video : http://www.youtube.com/watch?v=VAnhFNJgNYY
  • 9. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs Whirlwind 1952 (M.I.T.) Le Whirlwind est le tout premier ordinateur possédant une interface graphique utilisateur, bien que celle ci soit encore trés rudimentaire, héritant de l'interface des radars. Il affiche les tous premiers symboles graphiques : des T pour les cibles (Target) et F pour les combattants (Fighter). Surveillance radar du territoire américain (Guerre Froide). Pour info : 20000 instructions par seconde / Affichage de graphiques sur écran cathodique en 32 pixels par 32.
  • 10. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des (mini) Calculateurs PDP-1 / DEC 1959 (M.I.T.) Le PDP-1 était le premier ordinateur interactif et a lancé le concept de mini-ordinateur. Il avait une vitesse d’horloge de 0,2 MHz et pouvait stocker 4 096 mots de 18 bits. Il effectuait 100 000 opérations par seconde. Pour info : 120 000 $. SpaceWar / 1961 (Pong 1972) Video : http://www.youtube.com/watch?v=7bzWnaH-0sg
  • 11. 1. Evolution des Ordinateurs 1945-1965 : L’Ere des Calculateurs SAGE / IBM 1961 Semi-Automatic Ground Environment est le successeur du Whrilwind dans la surveillance de l’espace aérien américain. Cette machine se distingue par des modalités d’interaction novatrices. Le projet débuta en 1950 et le SAGE fut opérationnel en 1963. Il resta ensuite en activité jusqu’en 1983. Traitement : 75 000 instructions par seconde . Pour info : 250 tonnes !! L’ordinateur le plus encombrant et le plus lourd jamais construit (12 Milliards de $) Opérateur / Interaction Périphériques spécifiques Video : http://www.youtube.com/watch?v=5D-RHFta4aQ http://www.youtube.com/watch?v=o7ssZyRl6MU&feature=related
  • 12. 1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion Les calculateurs au service des entreprises (Banques, Assurances, Compagnies aériennes, etc…) Le « sacre d’IBM » de « Big Blue ». Logotypes par Paul Rand : www.paul-rand.com
  • 13. 1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion S/360 IBM 1965 L’IBM S/360 ouvre l’ère de l’informatique centralisée sur ce que l’on nomme des Mainframes. Les Mainframes sont consultables depuis une certain nombre de terminaux. Pour info : de 0.034 MIPS à 1.700 MIPS avec de 8 kB à 8 MB de mémoire interne (de $133 000 à $5 500 000) Video : http://www.youtube.com/watch?v=ZGRCn0vwK3c&feature=related
  • 14. 1. Evolution des Ordinateurs b. 1965-1980 : Les (mini) Ordinateurs de Gestion PDP-8 / DEC 1965 L’IBM S/360 ouvre l’ère de l’informatique centralisée sur ce que l’on nomme des Mainframes. Les Mainframes sont consultables depuis une certain nombre de terminaux. Pour info : seulement… 35 000 opérations/seconde ($18 000) Video : http://www.youtube.com/watch?v=DPioENtAHuY
  • 15. 1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion S/370 IBM 1971 Successeur de la gamme S/360
  • 16. 1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion Univac 1100 / Remington / 1972 de la concurrence ?
  • 17. 1. Evolution des Ordinateurs b. 1965-1980 : Les Ordinateurs de Gestion IRIS 80 / Cii / 1972 de la concurrence française !!?
  • 18. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) Steve Jobs (Apple) et William Gates (Microsoft) / 2007 http://www.flickr.com/photos/cksample3/527038599/in/photostream/#/
  • 19. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) MICRAL / R2E / 1972 André Truong et François Gernelle pour répondre à une commande de l'INRA dans le but de réaliser un système de mesure et de calcul de l'évaporation des sols, à un tarif inférieur au prix du mini-ordinateur PDP-8 4K (à 45 000 FF). Pour info : Le Micral N était vendu à un prix extrêmement bas selon les critères du moment : soit 1300 euros environ.
  • 20. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) ALTO / XEROX PARC / 1973 Il fut le premier ordinateur à utiliser la métaphore du bureau et une interface graphique. Le Alto fut un outil de recherche de Xerox, pas un produit commercial. Pour info : L’Alto intègre tous les principes de l’informatique « moderne » qui seront repris par Apple.
  • 21. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels (les prémices) Apple 1 / Apple Computer / 1976 Les premiers ordinateurs personnels sont destinés aux étudiants des campus universitaire. Apple lance l’ordinateur à assembler soi-même. Pour info : L’Apple 1 était vendu au prix de $666.66, en avril 1977 son prix sera de $475.
  • 22. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels ZX-80 / Sinclair / 1978 L’apprentissage de la programmation en famille (BASIC) Pour info : Le ZX-80 était vendu au prix de $100 (à connecter à une TV et magnétophone à K7) .
  • 23. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels Personal Computer / IBM PC / 1981 La bureautique accessible à tous (?) Pour info : de $1600 à $4500 selon les configurations
  • 24. 1. Evolution des Ordinateurs c. 1980-1995 : Les Ordinateurs personnels Macintosh / Apple / 1984 Une machine compacte, accessible qui intègre tous les principes de l’Alto. D'une conception tout-en-un, le Macintosh 128 K avait un écran 9" en noir et blanc (1 bit) de 512 par 342 pixels. Il intègre un lecteur de disquettes 400 Ko 3,5" à chargement manuel et… une souris ! Pour info : environ $2500, 50.000 exemplaires écoulés en 2 mois. Video : http://www.youtube.com/watch?v=OYecfV3ubP8
  • 25. One Computer, many users (Mainframe) One Computer, One user (PC) Many Computers, One user (Ubiquitous Computing)
  • 26. 1. Evolution des Ordinateurs (conclusion) d. 1995-2000 : Les ordinateurs multimédia e. 2000-2008 : Internet et le Web f. 2008-2011 : L’informatique mobile & d’assistance Source : http://www.firingsquad.com/media/article_image.asp/2505/02
  • 27. 2. Interactions Humains Machines (C.H.I.) a. Rappels Interaction : nf. Influence réciproque de deux phénomènes, de deux personnes Interactif : adj. Se dit de phénomènes qui réagissent les uns sur les autres Interactivité : nf. 1.INFORM. Qualité d’un logiciel dont l’exécution prend constamment en compte les informations fournies par l’utilisateur. On considèrera l’interactivité comme le degré de satisfaction atteint par l’usager dans l’interaction vécue avec la machine John Underkoffler Video (TED) : http://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture.html
  • 28. 2. Interactions Humains Machines (C.H.I.) b. Interfaces nf. (mot anglais) Limite commune à deux systèmes , deux entités permettant des échanges entre ceux-ci. Elle favorise le dialogue (l’interaction) entre les machines et les humains par la stimulation des sens  via des périphériques appropriés : Le touché  : par l’intermédiaire d’un dispositif de pointage : Souris, stylet, écran tactile ou clavier. La vue  : par l’affichage écran, c’est ce que l’on nomme les GUI : « Graphical User Interfaces ». L’ouie  : par commandes vocales appelés encore VUI : « Voice User Interface ». La gestuelle  : par l’analyse des mouvements du corps, du visage, d’un pointeur.
  • 29. 2. Interactions Humains Machines (C.H.I.) c. Principes de la Manipulation Directe Pour Ben. Schneiderman (1982) : Une interface est dite de « manipulation directe » si elle possède les propriétés suivantes :   - Les objets concernés ont une représentation permanente (métaphores/icônes). - Des actions physiques directes remplacent la saisie de commandes textuelles . - Le résultat des actions sur les objets est immédiatement visible . - Les opérations sont rapides, incrémentales et réversibles . La manipulation directe repose sur 2 métaphores : La métaphore de la description La métaphore du monde réel
  • 30. 2. Interactions Humains Machines (C.H.I.) c. Principes de la Manipulation Directe     «  Ligne de commandes (C.L.I.)  » Vs «  Graphical User Interface   (G.U.I.) »
  • 31. 2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows | La fenêtre ouvre en permanence sur le bureau (Apple) ou l’occulte (PC). Le fenêtrage des applications permet l’utilisation simultanée de plusieurs applications (Multitâche / Multifenêtrage).
  • 32. 2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows | I cons Les icones permettent de représenter des actions, de différencier les applications, d’identifier les périphériques, etc… Lorsque le logogramme se réfère à un élément abstrait de la réalité (comme une notion ou un morphème), on le nomme idéogramme . L’idéogramme est un symbole graphique représentant un mot ou une idée (chinois, japonais, hiéroglyphes…). Les pictogrammes représentent des éléments concrets de la réalité.
  • 33. 2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows | I cons | M enus a_ Menus 'déroulants ' liés à la barre de menu principal généralement située sous la zone de titre de la fenêtre. b_ Menus de type 'pop-up' pour afficher des indications ou des messages d'erreurs. c_ Boîtes à Outils et palettes qui regroupent des actions / outils sous la forme d'icônes (surtout dans le cas des palettes). d_ Boutons de type 'Radio' qui permettent de choisir une action parmi une liste. e_ Cases à cocher qui permettent une sélection multiple d’actions. f_ Listes de sélection , voisines des menus (ex. fichier ->'ouvrir‘). g_ Boîtes de Dialogue qui sont devenues des éléments récurrents dans les interfaces WIMP.
  • 34. 2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows | I cons | M enus | P ointing devices (1) Souris : Douglas Engelbart 1968 | Trackball (ici intégré à une souris) | TrackPad : Ordinateurs portables Jog Shuttle (mobiles) | Joystick (jeux) | Tablette Graphique : Infographie
  • 35. 2. Interactions Humains Machines (C.H.I.) d. W.I.M.P. W indows | I cons | M enus | P ointing devices (2) Eye Tracking : Tobii | Space Mouse (souris 3d : x,y,z) Tapis DDR : Dance Dance Revolution | Wiimote (Nintendo) | VR Mouse (Réalité Virtuelle) | DataGlove : Ps5
  • 36. 2. Interactions Humains Machines (C.H.I.) e. W.Y.S.I.W.Y.G. What You See… Is What You Get !! Hopefully ;)
  • 37. 3. Evolutions Evolution des paradigmes d’interaction liés à l’évolution technologique - Multitouch / multipoints - Gestuelle et Physique (accéléromètres / wiimote) - Mobilité ? - Multimodalité ? - Cérébrale ? (Brain Computer interface) - Ligne de commande ??? Ubiquity (Mozilla)
  • 38. Merci ;) des questions ? [email_address] [email_address] [email_address] Caprica / BSG / Sci-Fi Channel

Notes de l'éditeur

  1. Video : http://www.youtube.com/watch?v=DnBsndE1IkA&feature=related http://www.youtube.com/watch?v=DnBsndE1IkA
  2. http://www.youtube.com/watch?v=O8WXNPn1QKo