La gestion de l'espace sur écran dans le domaine de l'interactivité.
Ce texte est une version mise à jour d'un article publié par la revue Typ, Observatoire Typo_Graphique n°2
Le plan :
Introduction
Historique
1 les écrans “texte”
2 écran autonome
3 écran «infini»
4 scrolling (ou travelling) sur un axe
5 scrolling sur deux axes
6 montage
7 scrolling différentiel
8 axe des Z (profondeur)
9 vue multiple (split-screen)
10 perspectives
conclusion
Introduction
Je travaille, en tant que designer graphique, depuis plus de dix ans dans le domaine des médias interactifs.
La taille de l'écran (le principal vecteur de communication entre la machine est l'utilisateur) a toujours été un problème.
En effet le nombre d'informations que l'on peut placer sur un moniteur (de votre téléphone portable à l'écran de votre ordinateur) est très réduit en comparaison du support papier.
Les écrans envahissant notre quotidien (votre réveille, montre, interphone, tableau de bord de votre voiture, ordinateur, téléphone, console de jeu ...), je pense qu'il est vraiment important de se poser des questions liées à l'utilisation et à la gestion de l'espace sur ce support.
Je vais donc me pencher sur les différentes réponses originales que les ingénieurs, designers, créateurs ... ont pu apporter à cette problématique au cours de ces quarante dernières années.
Historique :
Ce domaine étant assez récent et peu connu, un bref historique des grandes avancées liées au design interactif s'impose.
1945
"As we may think" de Vannevar Bush, article prévoyant un grand avenir aux ordinateurs. Vannevar Bush décrit une sorte de machine imaginaire, le Memex, capable d'aider un individu à ranger et retrouver toutes sortes d'informations de façon simple par l'intermédiaire de liens et d'associations entre les documents.
On peut y voir la première formulation de la notion d'hypertexte.
1949
installation des premiers moniteurs vidéos sur des ordinateurs.
1958
Le premier jeu vidéo de l'histoire a été créé au "Brookhaven National Laboratory" aux états Unis par William A. Higinbotham, il s'agissait d'une sorte de simulateur de tennis tournant sur un ordinateur "analogique" (à tubes et non à transistors), c'est donc l'ancêtre du célèbre Pong.
1962
SpaceWar!, le second jeu vidéo de l'histoire est développé sur Dec PDP-1 par Steve. Russel, J.M. Graetz et W. Wiitanen, étudiants au MIT.
Le but du jeu est de contrôler deux petits avions combattant autours du soleil.
1965
Douglas Engelbart et son équipe de la Stanford Research Institute : invention de la souris.
1965
Ted Nelson publie un premier papier sur le concept de nombreux types de documents informatiques reliés entre eux. Il utilise les mots hypertexte et hypermedia pour décrire ce concept, par la suite plus connu sous le nom de Xanadu.
1968
Toujours, Douglas C. Engelbart fait une démonstration d'un environnement graphique avec des fenêtres à manipuler avec une souris. Il démontre dans cet environnement l'utilisation d'un traitement de texte, d'un système hypertexte et d'un logiciel de travail collaboratif en groupe.
1972
Adventure (ou Advent) est le premier jeu d'aventure (ou pour employer le vocabulaire exact, la première Fiction Interactive). Il s'agit d'un jeu purement textuel.
1972
Magnavox Odyssey Model ITL-200, c'est la première console de jeux de salon par Ralph Baer : Il s'agissait d'une console se branchant sur le téléviseur et disposant de 13 jeux (principalement des Pong) sur 6 cartouches enfichables. .
1974
Au PARC de Xerox est développé le Xerox Alto , premier ordinateur avec une interface graphique moderne
1975
BRAVO est le premier traitement de texte WYSIWYG (What You See Is What You Get).Ce logiciel a été développé au PARC sur Xerox Alto par Charles Simonyi.
1978
Space Invaders , le premier jeu à utiliser le terme de "high score" et aussi à être infini ( vous ne pourrez jamais gagner ;-)
1982, le premier Smiley :-)
D’après les laboratoires de recherche de Microsoft le premier smiley serait un :-) écrit par Scott Fahlman, qui avait posté ce message sur le réseau du CMU CS en octobre 1982.
le message original était :
19-Sep-82 11:44 Scott E Fahlman :-)
From: Scott E Fahlman
I propose that the following character sequence for joke markers:
:-)
Read it sideways. Actually, it is probably more economical to mark
things that are NOT jokes, given current trends. For this, use
:-(
1983
Apple Lisa, premier ordinateur commercial avec une interface graphique issue de l'Alto de Xerox,
1989
World Wide Web (www), crée par Tim Berners-Lee du CERN (Genève),
1993
Le WWW est au départ en mode texte, mais Marc Andressen met au point une interface graphique pour WWW nommée MOSAIC.
1 les écrans “texte” (vers 1955)
Ce type de jeu (ou d’interface) ne proposait qu’un affichage en mode texte, en effet la technologie de l’époque ne permettait pas (ou très difficilement) d’afficher des images points par points, et encore moins des images numérisées.
Le système est similaire à une machine à écrire classique, chaque nouvelle ligne de texte pousse la précédente vers le haut de l’écran et ainsi de suite.
Ce système se retrouve dans l’interface DOS du PC ou le Minitel. Nous allons aussi avoir ce système sur les tout premiers jeux d’aventures textuels, comme Zork en 1977.
L’espace de l’écran est constitué uniquement de caractères typographiques. Les jeux de l'époque sont dont textuel et c'est l'imagination des joueurs qui fait le reste, l'interaction se fait uniquement au clavier; taper N pour aller au nord, S pour le Sud ...
Une évolution s’est faite avec les images dites “ASCII”, en effet l' «ascii art» est une technique permettant de dessiner des illustrations uniquement avec les caractères typographiques.
Exemples :
• jeux vidéos : Zork
2 écran autonome
Dans cet espace, le hors champ n’existe pas. En effet tous les éléments (texte, image) apparaissent et disparaissent à l’intérieur de l’écran.
L’espace en dehors du cadre n’est pas pris en compte seul compte l’espace constitué de votre écran.
Il n’y a pas de déplacement de la caméra, nous sommes dans un espace fixe et autonome.
Dans ce type d’espace, les bords disparaissent, le cadre n’existe pas, l’écran devient univers.
Exemples :
• jeux vidéos : Pong, Robotron 2084, Space Invaders,
• Animation expérimentale : Matrix ou Mandala (1971) des frères Whitney ou certaines animations de Norman Mc Laren (Dots).
3 écran «infini»
Ce type de représentation de l’espace est typique de l’informatique, à ma connaissance il n’existe pas de système comparable sur d’autre support.
Cet espace est caractérisé par le fait qu’un objet (personnage, voiture…) sortant de l’écran apparaît à l’opposé de ce même écran et continu son mouvement.
Un personnage sortant de l’écran par le haut va donc apparaître automatiquement en bas de l’écran. Chose impossible dans la réalité, mais qui sur votre écran est tout a fait accepté et semble presque cohérent pour l’utilisateur/joueur.
Ce type d’effet peut se retrouver dans le cinéma, avec pour conséquence un effet comique.
Exemples :
• jeux vidéos : Spacewar, Astréroïd, Pacman
remarque : Il est à noter qu’un des premiers jeux vidéo de l’histoire a utilisé ce système (SpaceWar en 1962).
4 scrolling (ou travelling) sur un axe
Avec l’avènement de machine plus puissante et ayant plus de mémoire, certains jeux vont développer le système du déplacement latéral sur une grande image.
Ce système va donc permettre à l’utilisateur de découvrir une image bien plus grande que l’écran par un effet de glissement horizontal ou vertical.
Exemples :
• jeux vidéos : 1942, Defender
• cinéma : le générique de fin de West Side Story de Saul Bass, le texte du générique de fin est entièrement graphité sur un mur. Le spectateur découvre le générique par un mouvement latéral de caméra sur ce mur (un travelling horizontal).
Remarque : Ce système se retrouve au cinéma sous le nom de travelling.
5 scrolling sur deux axes
il s’agit d’une amélioration du principe précédent, mais cette fois, le déplacement peut se faire sur deux axes en même temps.
Nous pouvons donc nous déplacer aussi bien latéralement que verticalement (X et Y) et sur des images bien plus grandes. Ce genre d’espace s’est développé avec les grands jeux d’aventures/rôles de l’époque (Ultima III …) durant les années quatre-vingt.
Exemples :
• jeux vidéos : Ultima III, Gauntlet, Populous ou Sim City
6 montage
Le principe est exactement celui que nous trouvons au cinéma, nous passons d’un plan à un autre par un simple « cut ».
Le passage d’un espace à un autre est signifié par ce « cut », c’est donc à l’utilisateur (joueur ou spectateur suivant les cas) de se faire une image mentale de l’espace global qui lui est proposé. Vous recomposez vous-même mentalement l’espace proposé.
Exemples :
• Jeux vidéos : Berzerk
7 scrolling différentiel
Il s’agit d’une technique permettant de signifier la profondeur (tout en restant en deux dimensions) par la différence de vitesse de défilement d’images superposées. Le premier plan va se déplacer donc plus rapidement que l’arrière-plan afin de donner ce sentiment de profondeur.
Exemples :
• jeux vidéos : Shinobi, Sonic
Remarque : cette technique est souvent utilisée dans les dessins animés.
8 axe des Z (profondeur)
Dans ce principe, nous avons des éléments en 2 dimensions (des «Sprites» dans le jargon informatique) changeant de taille suivant leurs positions dans l’espace. La position des objets en X et Y synchronisée avec le changement d’échelle va donner l’illusion de perspective (conique).
Plus un objet est loin, plus il est petit et réciproquement.
Exemples :
• jeux vidéos : Night Driver 1967 (le premier jeu à utiliser cette technique), Pole Position 1982,
9 vue multiple (split-screen)
Ce système permet dans le même écran la cohabitation graphique de différents types d’espace. Par exemple une vue 2D avec un déplacement horizontal et vertical, puis dans l’espace adjacent, un mode texte simple et pour finir une vue subjective en 3D dans une troisième partie.
Exemples :
• Jeux vidéos : Ultima 3, Wizardry, « XIII »
• Les génériques de Thomas Crown Affair de Pablo Ferro ou Grand Prix de Saul Bass utilisant la technique du « split screen ».
• Au cinéma : les trois volets de Napoléon d’Abel Gance, pour la première fois dans l’histoire du cinéma.
• Les interfaces des systèmes d’exploitations utilisant le multi-fenêtrage comme le celui du Mac, l’Atari, l’Amiga, windows 95 …
• et bien-sur toute la bande dessinée.
10 perspectives
Remarques préliminaires :
Il existe de nombreux types de perspectives : l’isométrie, l’axonométrie, la perspective cavalière , la perspective conique, la perspective d’importance (utilisée au moyen âge)…
Actuellement la perspective dite « conique » semble la plus utilisée. Elle est souvent considérée comme le plus « réaliste » et permet donc une très grande implication de l’utilisateur/joueur dans le contenu.
Dans l’utilisation de cette perspective conique se pose maintenant le choix de l’emplacement de la caméra.
Ce choix est crucial dans les jeux, chaque position de caméra est signifiante (comme au cinéma), et implique des possibilités et contraintes différentes pour chacune d’elles.
Exemples :
• jeux vidéos :
FPS (First Person Shooter/ jeu de tir à vue subjective)),
par exemple : Unreal, Doom, Rainbow Six ...
TPS (Third person Shooter / jeu de tir à la troisième personne),
par exemple : Max Payne, resident Evil ou Tomb Raider
Il faut aussi noter qu’actuellement les cartes vidéos fournies avec nos ordinateurs sont capables, en Hardware (donc très rapidement), de fournir une visualisation en perspective conique. Il est donc de plus en plus relativement facile techniquement de faire des programmes utilisant ce type de visualisation 3D.
conclusion
J’ai essayé de répertorier les différents types d’utilisation de l’espace que l’on peut trouver sur des programmes interactifs (jeux ou autre).
Actuellement, les programmes se complexifiant de plus en plus, nos machine se perfectionnant aussi, les possibilités interactives semblent infinies.
Mais malgré cela les interface actuelles ne sont que des combinaisons de ces différentes techniques de base inventées il y a bientôt plus de quarante ans.
