Synthèse Web

ILM Web – D.
Leynen Solveig TONGLET
Introduction aux Langages Médiatiques :

Web
Introduction
Qu’est-ce que le ‘web’ ?

Le web… Est-ce un media? Si oui, de quel type de média s’agit-il ?
Classification des médias - on a tendance à distinguer :

- Médias fixes (graphisme et photo)
- Médias de flux/narratif (audiovisuel et son)
- Web… ?
Qu’est-ce qu’on entend par web ? Le site web ? Les réseaux sociaux ?
On ne peut pas réduire le web au numérique (digital) sachant qu’aujourd’hui, tous les médias sont
numériques (traitent de l’information informatique).
Différencier les médias par rapport

- À la façon dont on peut contrôler la temporalité, qui contrôle la consultation :
o Médias fixe : c’est NOUS qui déterminons le temps de consultation
o Médias de flux : c’est la source/l’émetteur de la création qui détermine le flux, la
temporalité (ex : musique)
- Selon la différence entre le caractère simple ≠ caractère composite
o Son = non composite, pure
o Graphisme , audiovisuel = composite, càd combinaison de différentes formes
d’expression
➔ Web est à la croisée des chemins. Ce n’est pas par défaut un média narratif, ni un média
linéaire bien que ça puisse l’être.
Le web est en tout cas un média d’interaction et d’intégration par excellence :
Par défaut, un site web est le mixe intelligent structuré de différents contenus médiatiques :
Base de texte, enrichie de dimension plurimédiatique + de l’image (fixe ou animée), photo,
vidéo, organisation visuelle des contenus et hiérarchisation facilitée (graphisme)…
Il faut ajouter à ce mélange une organisation la plus adéquate possible peu importe le support, et
surtout une complexité d’intégration de différents médias qui doit être la plus intuitive possible pour
l’utilisateur.
→ Notions d’interface utilisateur et expérience utilisateur :

Comment faire coexister, dans un même espace / au sein d’un même écran, de l’information et des
éléments d’interaction qui peuvent être une navigation, des formulaires, couche d’information et
couche de logiciel ? Il faut que le produit complexe mis à disposition soit le plus intuitif possible pour
les utilisateurs.
Il y a toute la couche de communication et d’organisation du contenu de l’information en vue de la

diffuser vers un public.
L’histoire nous éclaire toujours, les choix techniques modulent les usages.
1
ILM Web – D. Leynen Solveig TONGLET
Aux origines européennes du web
Les inventeurs du web

Tim BERNERS-LEE (UK) = inventeur du World Wide Web
Robert CAILLAU (BE) = informaticien, il est le 2e inventeur du web
Fin des années ’80 : invention du web.

BERNERS-LEE et CAILLAU travaille au CERN. Tous les deux s’intéressent à la notion d’ « HyperText ».
En 1989, Tim BERNERS-LEE soumet à son supérieur un projet de gestion des informations intitulé
« Information Management : A Proposal ». L’idée est de permettre le partage de documents
informatiques entre ordinateurs grâce au principe de l’hypertexte et via le réseau Internet. L’idée
géniale de Berners-Lee est d’associer deux technologies informatiques qui n’ont a priori rien à voir
entre elles.
BERNERS-LEE et CAILLAU ont l’idée de combiner deux technologies : internet et hypertexte → va
amener au W3C.
Hypertexte = système permettant de lier des documents entre eux à l’aide d’hyperliens.
Internet = réseau permettant à des ordinateurs d’être interconnectés et d’échanger des données
(découpées sous forme de « paquets »)
/!\ Ne pas confondre internet et web

Internet = l’infrastructure du réseau
Web = un service permettant d’acheminer l’information sur le réseau/ qui tire parti du réseau
Internet.
Le CERN
CERN = Centre Européen de Recherche Nucléaire
Fondé en 1954, le CERN est un laboratoire scientifique européen qui regroupe des milliers de
chercheurs venus du monde entier. Ceux-ci travaillent sur des projets de recherche fondamentale en
physique.
Le CERN est situé à Genève, et est composé d’installations principalement sous terre.
LHC : une des installations du CERN pour une expérience particulière. 27km de circonférence à 100m
sous terre.
Le web tombe dans le domaine public
En 1993, le CERN annonce que les technologies du web sont libérées, à savoir : le code relatif au client,
au serveur et les bibliothèques de code partagé. Il verse les technologies et les logiciels du web dans
le domaine public.
Quand deux ordinateurs communique entre eux sur le web , il y a un client (nous, notre écran, notre
navigateur) et le serveur (ordinateur connecté en permanence sur le web, en attente d’une requête
d’un client, et qui transmet les documents demander par le client).
2
Le CERN cède tous les droits de propriété intellectuelle liés à ce code, tant le code source que le
binaire. Tout le monde est désormais libre de l’utiliser, de le dupliquer, de le modifier et de le diffuser.
Intention : favoriser la compatibilité, les pratiques communes et les normes en matière de

réseaux et de collaboration assistée par ordinateur.
Le CERN émet ensuite une version de l’application sous licence libre, une façon plus sûre de maximiser
sa diffusion. Leur objectif est que le web reste un outil libre utilisable par tous, dont personne ne
puisse devenir le propriétaire unique.
Objectif : que le web reste un outil libre utilisable par tous, dont personne ne puisse devenir
le propriétaire unique.
En 1994, Tim BERNERS-LEE quitte officiellement le CERN pour rejoindre le MIT, et fonde le Consortium
international World Wide Web : le W3C.
W3C = organisation internationale qui regroupe tous une série d’acteurs (> 440 membres).
Mission : définir les standards techniques d’un web libre et ouvert.
« Leading the Web to its full potential. »
La première page web

Le navigateur (browser) illustré dans l’image ci-contre est
historiquement le deuxième navigateur ayant existé. C’est toutefois le
premier navigateur utilisable sur différents systèmes d’exploitation, et
donc en ce sens respectueux d’un des concepts fondamentaux du
« World Wide Web » : l’accès universel.
L’utilisation en ligne de commande (pas de souris à l’époque) rendait

l’utilisation assez limitée. À l’époque, on ne parle pas encore de mise
en page, de couleurs, d’images, etc.
HTTP, HTLM, URL
Il y a 3 dimensions techniques au cœur du fonctionnement du web.
HTML (HyperText Markup Language) = langage de balises permettant

de représenter un document hypertexte.
HTTP (HyperText Transfer Protocol) = protocole de communication

entre machines, qui permet aux ordinateurs de « se comprendre » et
échanger des données.
URL (Uniform Resource Locator) = identifiant unique permettant d’identifier et de localiser une
ressource sur le réseau. On parle aujourd’hui de l’adresse d’un site ou d’une page web.
But de BERNERS-LEE : rendre les choses aussi simples que possible.
Le serveur envoie des données récupérées par notre navigateur (browser) qui va s’occuper de mettre
en forme et lire les documents pour les afficher sur notre écran.
3
La première page web
La première page web parle du web. On retrouve peu de choses dedans :

un titre, du texte informatif, des liens pointant vers d’autres pages et
c’est tout.
Dans ses prémisses, le web est donc uniquement textuel. On n’a pas
encore d’images.
On a déjà des ressources qui existent sur internet mais qui n’utilisent pas les nouvelles technologies
html et http (mails, forums Usenet…).
BERNERS-LEE créer des pages avec des liens vers différentes sources de données…
Au fil du temps, il va créer une liste qui va s’étoffer, et va rajouter chaque nouvelle page/site existant
à cette liste, qu’il organise sous forme de catégories.
Très lentement, vers juillet 1993 : il existe seulement 130 sites web dans le monde, sites très simples
principalement construit dans les premiers temps uniquement de textes, eux-mêmes truffé
d’hyperliens.
Aujourd’hui, il y a plus d’un milliard de sites web qui existent dans le monde.
Selon la volonté de BERNERS-LEE, un navigateur devait permettre à l’utilisateur de lire des documents
web mais également, depuis le même outil, d’en créer et d’en produire.
Premier navigateur composé de deux outils : la lecture et la production/publication de page web.
Avec le temps, cette option de publication simple a disparue.

De nouveaux navigateurs sont apparus (grande époque Netscape).
On a donc laisser les gens se contenter de surfer sur le web sans leur permettre d’être les auteurs de
leur propre contenu.
Aujourd’hui, on peut créer un site web en quelques clics.
FTP (File Transfer Protocol) = permet de se connecter à un serveur et de transférer/déposer des

fichiers. Dès qu’ils sont déposés, on peut y accéder et les modifier via notre navigateur.
Aujourd’hui, on a 3 langages à la base de toutes pages web :

- HTLM : définir la structure / le code source d’un document
- CSS : rajoute la dimension de la couche de graphisme
- JavaScript : langage de programmation, permet de rendre les pages véritablement interactives
4
Les premières années

Les utilisateurs s’emparent des technologies et commencent à les faire évoluer, les enrichir, et les
détourner de leurs usages…
1990
- Première page web
- Première image publiée sur le web par Berners-Lee. L’image illustre un groupe de musique
1992
« Les horribles cernettes » formé au CERN. Ce groupe sera d’ailleurs le premier à avoir son
propre site web.
- Premier moteur de recherche : Aliweb

1993
- Première version de IMDB (Internet Movie DataBase)
- Première webcam à Cambridge. Elle filmait une cafetière pour que les employés puissent
vérifier s’il restait du café dans leur salle de repos.
- Lycos ; premier grand moteur de recherche et restera pendant plusieurs années un des
principaux moteurs de recherche (on commence à avoir des images mais c’est visuellement
1994 encore extrêmement pauvre - peu de choix de polices de caractères)
- Microsoft arrive sur le web
- Pizza Hut arrive sur le web et propose la commande en ligne (Santa Cruz)
- Naissance d’Amazon
- Microsoft lance Internet Explorer, Windows 95 et MSN.com

Windows 95 - destiné aux particuliers - proposait un environnement graphique, une
1995 avancée significative par rapport aux versions précédentes. Windows 95 est la première
version du navigateur Internet Explorer
- Naissance d’EBay
- Première version de Yahoo
- Début de l’essor des « dot com ».
- On comptabilise 30.000 pages web et 40 millions d’utilisateurs (fin 1995).
- Geocities offres des pages personnelles

Propose d’héberger gratuitement les pages personnelles de ses utilisateurs. Les pages web
commencent à avoir plus de personnalités : couleurs, images, et surtout gifs animés
1996
commencent à faire ‘bouger’ le web.
- Le père de tous les mêmes : Dancing Baby, à l’origine c’est un modèle issu d’un logiciel
d’animation 3D. En 1996, un développeur web en fait un GIF animé et le poste en ligne. Le
dancing baby deviendra très vite viral au point de se retrouver partout sur le web mais
également à la télévision, dans des jeux vidéo, etc.
5
The Uncanny Valley Theory = plus un robot androïde est similaire à un être humain, plus
ses imperfections nous paraissent monstrueuses.
- Révolution Macromedia Flash*
Flash*
Macromedia Flash a révolutionné le web.
Jusque-là, les sites web sont statiques et limitent les animations aux gifs. Ils sont également assez
pauvres visuellement, pauvreté due aux limitations des langages HTML et CSS.
Flash permet de concevoir et réaliser les animations et interactions les plus folles et les plus riches, le
tout dans un format vectoriel et donc assez léger, critère crucial à une époque où les vitesses de
connexions sont encore très lentes.
Flash a servi à servi à la création d’animations, de sites web entiers, de jeux en ligne, dessins animés…
La mort annoncée de Flash coïncidera avec la sortie du premier iPhone. Steve Jobs refuse de porter le
player Flash sur son IOS. Il est trop gourmand en ressources et présente des failles de sécurité.
Adobe (qui a racheté Macromedia en 2005) a cessé le support de Flash fin 2020.
Ce que Flash permettait à une époque est aujourd'hui possible par l'utilisation combinée de HTML5,
CSS3, SVG, JAVASCRIPT.
La technologie Flash a donc eu une grande importance sur le développement du web et

principalement le web design. Ça a permis une explosion de créativité et d’intégration média.
En réalité, Flash n’a pas totalement disparu.

Aujourd’hui, Flash est redevenu un outil d’animation sous le nom d’ « Adobe Animate », qui reprend
les mêmes principes que ceux de Flash à l’époque - à savoir :
- Langage de programmation permettant l’interaction
- Capacités d’animation à partir d’images clés (ligne du temps)
6
Architecture client-serveur
Quand on surfe sur le web, on fait appel à un mode d’organisation entre des machines, on fait
dialoguer deux machines : client & serveur.
Coopération traduit par un échange de données entre un client et un serveur. Ce dialogue est permis
parce que le client et le serveur parle le même langage, càd le ou les mêmes protocoles (en
l’occurrence http).
Client = programme qu’on utilise, càd notre navigateur.
Serveur = machine/ordinateur avec un programme qui tourne en permanence et qui est en

attente d’une requête client.
S’il a la page, il la renvoie. S’il n’a pas la page, il renvoie un message d’erreur.
Fonctionnement :
On lance notre navigateur (Chrome, Safari, Edge…), on fait une recherche et on clique sur un lien.
En cliquant sur un lien, le client initie un échange avec un serveur.
ON est le client et ON demande l’accès à une page web. (Dans cette architecture, c’est toujours le
client qui initie un échange.)
Le serveur lui est à l’écoute d’une requête éventuelle d’un client.
Le serveur rend un service : il reçoit la requête, la traite puis va prendre les fichiers correspondant à
la requête pour les envoyer au client.
Après ça, la communication ‘s’arrête’ entre le serveur et le client. Le client récupère les fichiers et se
charge d’analyser les documents html pour les afficher sur notre écran.
Le serveur peut répondre à plusieurs requêtes en même temps, avec une certaine limite bien sûr.
Attaque par déni de service = attaque informatique qui consiste à rendre un serveur indisponible
en le bombardant de requêtes.
En bref : le navigateur et serveur parlent le même langage, utilisent le même protocole et s’échangent
des documents html.
7
CloudComputing : la logique client-serveur continue à exister même dans le cadre du Cloud. Les
ressources sont distribuées/partagées, et un site web n’est plus sur un seul serveur unique, mais sur
un ensemble de ressources qui sont des serveurs interconnectés entre eux (représenter par nuage)
Premier acteur niveau CloudComputing au monde est le site Amazon (Amazon web serveur est la
première source de bénéfices).
Langages
HTML
HTML = HyperText Markup Protocol
Historique…
> Langage de balisage
Utilise des balises (markup, tag) pour indiquer la structure du document et la fonction de chacun de
ses éléments.
La plupart des balises fonctionnent par paires : balise d'ouverture / balise de fermeture.
Certaines balises peuvent s'emboîter les unes dans les autres. <balise> contenu </balise>
Certaines balises peuvent être complétées par des attributs.
Ces balises vont permettent pleins de choses

- Déterminer de quel type de texte il s’agit (titre, paragraphe)
- Insérer à un endroit précis une image, un son, vidéo, lien , formulaire, etc.
- …
Un document html est uniquement composé de texte : à la fois le texte de la page + toute une série
de balises qui organisent ce contenu, et qui pointent vers des éléments médias composant la page
dans le navigateur.
Exemple : quand on a une image dans une page web, l’image n’est pas dans le code html, elle est à
côté. Dans le code se trouve une balise qui dit ‘à tel endroit je veux que tu m’affiches telle image qui
s’appelle + nom’.
8
En pratique, si on veut réaliser une page html, on a besoin de deux logiciels qui se trouvent déjà sur
nos machines : un simple éditeur de texte & un navigateur.
Structure type d’une page web :
Html = description de la structure d’un document + indication sur les contenus
Le langage html n’a pas été conçu pour définir quelle était la mise en forme des contenus (côté design
graphique).
Au fil du temps, il y a eu des balises plus axées sur la mise en forme que sur la structure du document…
La demande étant assez forte, un autre langage a été développé, destiné à compléter le langage html :
le langage CSS.
CSS
CSS = Cascading Style Sheet
Langage de styles (standardisé par le W3C).
Objectif : mise en forme des pages web.
Permet d'appliquer des styles à des éléments sélectionnés dans un document html.
Les styles peuvent être placés : au sein d'une balise / dans l’en-tête du document html / dans un
document externe.
Les styles s'appliquent en cascade : le style le plus "récent" / "proche" de l'élément s'applique.
Sélecteur balise {
prop: valeur ;
}
Règle(s) de style
HTML/CSS
Le document HTLM = le contenu
Le document CSS = les styles appliqués au contenu
9
Séparer la forme du contenu :
Le contenu est donc séparé de la mise en forme. Il devient donc indépendant du support qui l'affiche.
La mise en forme peut être adaptée sans devoir changer le document ni sa structure.
Document CSS Document HTML
Centralisation des styles :
Une feuille de style peut être reliée à plusieurs documents html.
Avantages :
- Centralisation des styles
- Adaptation facilitée
- Cohérence visuelle garantie entre les pages d’un site
Site statique VS. site dynamique
Site statique Site dynamique
Les documents html préexistent à la requête client. Les documents html sont générés par le serveur
Ils sont déjà sur le serveur, codés "en dur". lors de la requête client.
Pertinent uniquement si le contenu ne change Les contenus sont stockés dans une base de
jamais. données (DB : DataBase).
Avantage : les pages sont délivrées très rapidement "Obligatoire" si le contenu doit être mis à jour ou
au client si de nouveaux contenus sont ajoutés
régulièrement.
Nécessite un langage additionnel permettant de
générer du html (le plus courant = PHP).
10
Outils de création
Il existe 4 grandes familles d’outils :
Éditeurs de code source
Logiciels d’édition de texte conçu pour la programmation.
- On y manipule directement le code.

- La syntaxe peut être vérifiée.
- Autocomplétion / colorisation automatique
Contrôle total sur le code, mais on doit tout coder nous-même.
Ex : sublimeText, brackets.io ...
Éditeurs WYSIWYG
WYSIWYG = What You See Is What You Get
Permet de créer des pages web sans connaissance / sans maîtrise du code.
- Le logiciel génère le code en arrière-plan.

- Pas de contrôle sur le code généré (ou uniquement à posteriori).
- Le code généré est rarement optimal.
Ex : Adobe Dreamweaver
CMS
CMS = Content Management System
Solution de création & modification de contenus / sites web.
Un CMS tourne souvent online (sur le serveur) et est accessible via navigateur.
Leader : WordPress (40% sites web / +60% CMS)
Autres CMS : Drupal, Joomla!, Magento…
(LMS : Learning Management System < Ex : Learn !)
Mouvance ‘no code’
La tendance récente. Promet de pouvoir lancer un site web ou une app sans devoir maîtriser de
langages.
Avantage : facilité illusion de contrôle. Permet de déployer rapidement une solution digitale (SAAS).
Inconvénient : être lié à la solution choisie.
Hype ou réelle nouvelle voie ? L’avenir nous le dira…
Nous sommes passés du clavier à la souris, puis au doigt avec le mobile. Aujourd’hui, la voix prends de
plus en plus de place. Et demain ? Quel futur pour les interfaces ?
La voix couplée à l’IA ? La réalité virtuelle ? La réalité augmentée ? Affaire à suivre…
11
Expérience utilisateur
Des pionniers à aujourd’hui

Époque de pionniers : tout était à expérimenter, inventer (ex : métaphore de l’aviation).
→ Donc, époque de très grande liberté mais aussi de combat féroce pour imposer ses standards.
Le site web est un objet technique & de communication : permet transmission d’information, diffusion
de contenu, actions/interactions.
Dans tous les cas, on est face à un espace virtuel qui s’affiche sur un écran sur lequel on interagit.
Peu importe le type d’interface, il y a toujours un choix → design d’interface, d’interaction,
d’information.
Le web fait émerger toute une série de nouvelle façon de penser la conception des sites web et
application. Plusieurs concepts vont émerger : architecture d’information, UX designer, etc.
Toutes ces notions prennent leur racine dans une seule notion centrale : notion d’ergonomie…
Évolution de l’ergonomie des objets technologiques
Ergonomie (usability) = Ergôn (travail) + Nomos (loi)

= discipline scientifique qui s’occupe des interactions entre l’homme et les systèmes techniques.
> Objectif : optimiser le bien-être au travail.
On vit au milieu d’artefacts qu’on ne se rend même plus compte que tout ce qui nous entoure a été
conçu, en prenant compte des contraintes du monde physique, des univers virtuels (contraintes de la
taille de l’écran, de la manière dont on peut interagir).
Sur un écran, tout est possible, avec le risque évidemment de rendre le site web incompréhensible et
inutilisable, et potentiellement source de frustration pour l’utilisateur.
Conception d’un site web : à toutes les étapes de conception et réalisation, il est essentiel de prendre
en compte et mettre au centre de sa démarche l’utilisateur final !
Évolution de l’ergonomie des objets technologiques :
Ce qui va nous intéresser : interaction hommes-machines.
L’histoire des objets manufacturés est très courte et son évolution permet un positionnement plus
naturel → ça a surtout amené un grand changement dans les objets connectés / complexes.
L’évolution peut se faire sur des objets physiques comme sur du virtuel (site web, app...).
Souvent, quand on ne parvient pas bien à utiliser un objet, c’est souvent un problème lié à des mauvais
choix de design plutôt que de la malchance ou incompétence de notre part.
Lors du développement, que ce soit un objet physique ou un site web, il y a 2 questions à se poser :
Qu’est-ce qu’il permet de faire (fonctionnalité)? Comment il effectue ces actions, arrive à ce
résultat (intervention de l’UX)?
12
L’ergonomie web est le sous-ensemble le plus récent de l’ergonomie web
La frontière entre ergonomie web & ergonomie logicielles a tendance à s’estomper un peu, car de plus
en plus les sites web, grâce aux avancées des nouveaux types d’algorithmes, permettent d’effectuer
des actions aujourd’hui qui avant étaient réservées aux logiciels.
UX / UI : expérience utilisateur / interface utilisateur

L’expérience utilisateur est de l’ordre du ressenti, qui se concrétise dans une interface utilisateur (ce
qui est affiché).
Donald NORMAN, à propos de l’UX :
C’est une notion dans laquelle se retrouve tout et son contraire. Ce terme recouvre toute l’expérience
que l’on peut avoir avec un « objet ».
« UX is not about how a product works on the inside. UX is about how it works from the outside,
where a person comes into contact with it and has to work with it. » - Jesse James Garrett
On interagit avec les interfaces de tous les objets, physique & virtuel.
The Norman Doors : it’s not you
Donald NORMAN s’est intéressé à des objets simples du quotidiens, y compris les portes → il y a
parfois un manque d’indication pour savoir s’il faut pousser ou tirer une porte.
Norman door = 1) A door where the design tells you to do the opposite of what you are actually
supposed to do. 2) A door that gives the wrong signal and needs a sign to correct it.
Ce sont les détails qui rentrent en compte lors du design d’expérience (manipulation, achat…).
Prendre en compte le « user experience », c’est aller au-delà du simple design. La dimension
esthétique et la dimension fonctionnelle ne suffisent pas.
→ La meilleure expérience utilisateur est quand on oublie qu’on utilise un produit tellement les choses
sont intuitives.
> Volonté d’une web-App intuitive/ d’une interface intuitive. Il faut masquer la complexité intrinsèque
et potentielle de l’app ou du site.
13
Video : What the #$%@ is UX Design?
L'expérience utilisateur (UX) fait référence à quoi, quand, où, pourquoi et comment une personne utilise un produit,
ainsi qu'à qui cette personne est. C'est à peu près tout ce qui affecte l'interaction d'un utilisateur avec ce produit.
UX designer = une personne qui conçoit ces interactions et qui doit constamment poser une tonne de questions. Ce
sont les réponses à ces questions qui façonnent la conception d'un produit.
Les UX designers doivent également tenir compte des besoins de l'entreprise. Il ne sert à rien d'avoir un produit que les
gens adorent s'il n'aide pas l'entreprise à atteindre ses objectifs.
Le UX designer vise ce point idéal où les besoins de l'utilisateur et ceux de l'entreprise se chevauchent.
Comment s’y prennent-t-ils?

Un designer UX suit ce que l'on appelle un "user-centered design process" (= processus de conception centré sur
l'utilisateur) : nous utilisons un ensemble d'outils et de techniques pour prendre en compte les besoins des utilisateurs
à chaque étape du cycle de vie du produit.
On dit ‘produit’ car ces techniques s'appliquent aux applications web, mobiles, de bureau, ou même aux produits
physiques.
Pourquoi cela devrait-il nous intéresser? 4 raisons pour lesquelles ces techniques sont si importantes et qu’on devrait
les connaître :
1) On fait probablement déjà certaines de ces choses : lorsqu’on comprend comment on fait ce qu’on fait, on devient
infiniment meilleur.
2) Le ‘user-centered design’ est un processus, ce qui signifie qu’il est pratiquement scientifique, tout comme la méthode
scientifique qui utilise l'analyse et la mesure, et l'applique aux humains et à leur comportement.
3) Ce n'est pas si difficile : n'importe qui peut apprendre les bases des tests utilisateurs, du tri des cartes, de l'écritur e
de scénarios, de la création de maquettes, ce qui est en fait très simple.
4) C'est amusant : ce domaine est fascinant, intéressant, stimulant, gratifiant, bien rémunéré et présente une barrière
à l'entrée très faible.
La conception UX est la conception derrière les visuels (la conception visuelle n'en est qu'une petite partie). Un UX
designer n’est pas quelqu’un qui fait simplement du graphisme.
Surface brings everything together visually: What will

the finished product look like ?
Traduit avec www.DeepL.com/Translator (version gratuite)
Skeleton makes structure concrete: What components
will enable people to use the site ?
Structure gives shape to scope: How will the pieces of the

site fit together and behave ?
Scope transforms strategy into requirements: What

features will the site need to include ?
Strategy is where it all begins: What do we want to get

out of the site ? What do our users want ?
Dans un processus normal, on commence à lire ce schéma par le bas.
Idée, objectif < besoin utilisateur < définition des fonctionnalités/caractéristiques du site <
organisation et interaction entre plusieurs écrans < organisation au sein d’un même écran < choix
design graphique
14
Les éléments du développement d’interface utilisateur
La dualité :
Le web a été originalement conçu comme étant un espace de diffusion d’informations sous forme de
liens hypertextes, mais le développement de technologies de plus en plus sophistiquées a encouragé
l’utilisation en tant qu’interface d’applications distantes (RSI – Remote Software Interface).
Cette dualité a créé une certaine confusion lorsque les experts en développement d’interface
utilisateur ont tenté d’adapter leur terminologie à la nouvelle réalité du web. Le but de ce document
est de définir certains termes dans un contexte approprié et de clarifier les relations entre les
différents éléments.
L’image est incomplète :
Le modèle présenté ici ne tient pas compte des tâches secondaires (comme celles durant le
développement technique ou la création du contenu) qui peuvent influencer les décisions durant le
développement de l’interface utilisateur. De plus, ce modèle ne décrit pas les étapes de
développement et ne définit pas les rôles dans une équipe de développement d’interface utilisateur.
Le modèle tente plutôt de démontrer les considérations principales à prendre en considération dans
le développement d’une interface utilisateur pour le web.
> Considérations d’interaction avec l’utilisateur et de transmission d’information → Lié à la dimension

communicationnelle de l’objet site web.
On commence toujours un projet par les couches les plus abstraites, puis on termine par le concret.
On doit lire ce schéma de bas en haut :
- Plan 1 : plan stratégique. Le pourquoi/ la raison d’être du projet. Les objectifs doivent être le
plus explicites possible pour orienter correctement le projet de développement du site.
15
- Plan 2 : définir la façon dont les éléments stratégiques vont se transformer en fonctionnalité
et en type de contenu. Lister les fonctionnalités d’un site, ses caractéristiques techniques.
Permet de définir la direction dans laquelle le développement doit aller, d’évaluer les
ressources nécessaires, etc. Tout ce qui touche à la couche d’interaction potentielle que va
proposer le projet.
- Plan 3 : plan de la structure, donner forme au plan 2. Point de bascule entre la couche
d’abstraction et la couche de concrétisation. Design d’interaction : façon dont le système va se
comporter quand l’utilisateur effectue une action. Architecture de l’info : organisation des
infos et des contenus à travers l’ensemble du site.
- Plan 4 : plan du squelette. Concrétise les choses, la forme que vont prendre les éléments définit
au plan 3. Questions de présentation et de détails. Organisation des éléments dans chacun des
écrans, sans encore prendre en considération la couche graphique → Wireframe.
- Plan 5 : couche de surface/ de design graphique. Tout va s’unir dans des choix stylistiques.
Couche très importante car c’est la première impression que vont voir les utilisateurs. Couche
qui relève de l’UI (impact sur la perception de l’utilisateur).
Les 5 plans sont étanches les uns aux autres.

Il y a des mouvements d’aller-retour (réajustements) permanents entre les différents étages.
« Les designers de produits issus des technologies numériques ne consistent plus leur travail comme
consistant à faire le design d’un objet physique – beau ou utile – mais comme consistant à faire le
design des interactions avec lui. » - Bill Moggridge
Skeuomorphisme VS Flat design
Skeuomorphisme = tendance de stimuler des éléments d’interface graphique qui reproduisent

des objets physiques (textures, matières, reliefs, etc.).
Flat design = aller aux antipodes en termes de design. Pas de relief, ni d’ombrages.
16
Autres tentatives de cartographies de la notion d’UX
UX à l'intersection de trois ensembles composites :
> Prototypage / Design visuel / Analyse Business

Chaque ensemble se découpe en disciplines qui sont partagées entre elles.
Ex : la simplicité est à la croisée du prototypage fonctionnel, du design graphique, de la couche

business/marketing
Ex : l’architecture de l’information relève du prototypage et du développement visuel
UX constituée par trois pôles :
Usability (utilisabilité́) : fonctionnalités / facilité d'utilisation / intuitivité́ / cohérence
Feel (ressenti) : plaisir d'utilisation, résultat des interactions avec le système
Look (apparence) : design / crédibilité́ / simplicité́ visuelle
17
Diagramme établie par Peter Morville
Useful : le système doit rencontrer les besoins de l'utilisateur
Usable : Le système doit être conçu de telle façon qu'il soit simple à utiliser et facile à comprendre
Desirable : l'aspect visuel doit être attractif
Accessible : même possibilités pour tous les utilisateurs
Credible : le système doit inspirer confiance
Findable : informations faciles à trouver / (fonctionnalités faciles à utiliser)
Valuable : l'utilisation du système doit être source de valeur ou de bénéfices pour l'utilisateur
UX au cœur de strates concentriques mobilisées au travers de 4 dimensions :
Contenu : stratégie de contenu, architecture du contenu, traitement du contenu...
Objectifs business : missions, objectifs marketing...
Objectifs utilisateur : besoins, motivations...
Interaction : avec le système, interactions homme-machine (IHM)…
18
UX comme la ‘face cachée’, ce qu’on ne voit nécessairement pas.

L'UX est définie ici comme toutes les dimensions invisibles mais qui participent néanmoins de façon
essentielle à l'expérience du produit et aux émotions suscitées par cette expérience.
UI (User Interface)
L’UI est une composante de l’UX

C’est un dispositif permettant les échanges et les interactions avec un produit ou un système.
L'UI n'est pas uniquement du graphisme (mise en page, formes, choix typographiques et de couleurs,
etc.).
Buts de l'UI :
- Réagir de façon cohérente et adaptée aux actions de l'utilisateur
- Guider l'utilisateur dans ses choix
- S'adapter aux contextes (d’environnements et d'interactions)
- Apporter un feedback à l'utilisateur
- Contraindre ou ouvrir des options
L'UI peut avoir des composantes visuelle, vocales, tactile, etc.
19
! Le mauvais design est dangereux !
→ Bad UI = Bad UX
Video : Don Norman expose les 3 façons qu’a le design de vous rendre heureux – TED conference
On a reproché à Don Norman d’avoir développer une approche de l’UX trop orientée sur l’efficacité et le résultat au
détriment de la dimension esthétique/émotionnel.
Il a donc fait une conférence TED exposant ‘les 3 façons qu’a le design de vous rendre heureux’.
Il dit que finalement, la dimension esthétique/ le beau a une importance, et participe de l’expérience qu’on
a d’un produit.
Bien sûr, un produit doit être fonctionnel et intuitif dans son utilisation. Mais si en plus il est beau et
esthétiquement pensé et construit avec des choix assumés, ça va renforcer la positivité de l’expérience
utilisateur.
10 principes du « design d’interaction » - par Jacob Nielsen (1994)

- La visibilité de l'état du système (de son statut)
- La correspondance entre le système et le monde réel
- Le contrôle et la liberté de l'utilisateur
- La cohérence et le respect des standards
- La prévention des erreurs
- La reconnaissance plutôt que le rappel
- La flexibilité et l'efficacité d'utilisation
- L'esthétique minimaliste
- L'importance des messages d'erreurs
- L'aide et la documentation
10 principes du « bon design » - par Dieter Rams (1985)

- Un bon design est innovant
- Un bon design rend un produit utile
- Un bon design est esthétique
- Un bon design rend un produit facile à comprendre
- Un bon design est discret
- Un bon design est honnête
- Un bon design dure longtemps
- Un bon design est rigoureux jusque dans les moindres détails
- Un bon design est respectueux de l'environnement
- Un bon design contient aussi peu de design que possible
20
Dark Patterns
Dark patterns = mécanisme mis en œuvre dans la couche d’interface utilisateur pour tromper
l’utilisateur.
Video : Dark Patterns
Dark patterns are features of interface design crafted to trick users into doing things that they might not want
to do, but which benefit the business in question.
Ex: when you try to delete your Amazon account, you have to go all the way through many buttons and click
many links. And even when you find the magic button 'Close my account', you now have to have a chat
conversation with an Amazon associate who's going to tell you all the reasons account deletion is a bad id ea.
Meaning, you can't delete the account yourself; they have to do it for you.
> This is a dark pattern: a crappy user experience that intentionally makes it difficult, almost impossible without
help, to do something that hurts Amazon.
UX specialist Harry Brignull categorizes the specific kind of dark pattern as a 'roach motel': a design that makes
it very easy for you to get into a situation, but very hard to get out.
Brignull is actually the one who coined the term 'dark pattern' in 2010 and he's been cataloguing and lecturing
about the issue ever since. Many of these dark patterns we're all familiar with…
Ex: dark pattern that uses color to misdirect. The mobile game Two Dots carries you through the experience by
offering green buttons. A green button to start the game, a green button to pick a level, a green button to start
the level and three green buttons to continue to the next level, etc. But once you lose a level, the color scheme
changes. The first screen button you see leads you right to an in-app purchase (certainly many people clicked it
reflexively as a Pavlovian response).
> To be fair, this is a pretty benign dark pattern, but it shows how companies can use something as simple as
color to trick you into doing what they want.
Ex: On the more egregious end of the spectrum: stuff like a banner which is made to look like it has a speck of
dust on it, causing people to brush it away and accidentally click the link.
Every once in a while, a company goes a little too far and actually breaks the law. To not face bad consequences,
they mostly stay *just* on the right side of the law, understanding that it's hard to legislate around the
psychological tricks of UX design.
Everything on the internet is fighting for your attention, but there's a difference between those who are taking
the time to build trust and loyalty and the special offer you clicked which actually enrolled you in a monthly
subscription, or the social network that dark-patterned you into letting it sell data that you didn't even know it
had.
Some of the responsibility is on us but some is on design, too. And it's not the fault of the designers -- they're
just doing what they're tasked to do, knowing full well that if they don't, others will.
As Brignull says, "Our best defense against the dark patterns is to be aware of them and shame the companies
who utilize them."
Design is what mediates our interaction with the Internet: it's the language we read it in . It's not too much to
ask that that language be comprehensible and honest.
« Less, but better. » - Dieter Rams
21
Lexique
Hypertexte Système permettant de lier des documents entre eux à l’aide d’hyperliens.
Internet Réseau permettant à des ordinateurs d’être interconnectés et d’échanger des
données (découpées sous la forme de « paquets »)
Web Service permettant d’acheminer l’information sur le réseau/ qui tire parti du
réseau Internet.
CERN Centre Européen de Recherche Nucléaire
W3C World Wide Web Consortium
Organisme de standardisation, chargé de promouvoir la compatibilité des
technologies du World Wide Web
HTML HyperText Markup Language
Langage de balises permettant de représenter un document hypertexte.
HTTP HyperText Transfer Protocol
Protocole de communication entre machines, qui permet aux ordinateurs de
« se comprendre » et échanger des données.
URL Uniform Resource Locator
Identifiant unique permettant d’identifier et de localiser une ressource sur le
réseau. On parle aujourd’hui de l’adresse d’un site ou d’une page web.
FTP File Transfer Protocol
Permet de se connecter à un serveur et de transférer/déposer des fichiers.
Dès qu’ils sont déposés, on peut y accéder et les modifier via notre
navigateur.
The Uncanny Plus un robot androïde est similaire à un être humain, plus ses imperfections
Valley Theory nous paraissent monstrueuses.
Client Programme qu’on utilise, càd notre navigateur.
Serveur Machine/ordinateur avec un programme qui tourne en permanence et qui est
en attente d’une requête client.
Attaque par déni Attaque informatique qui consiste à rendre un serveur indisponible en le
de service bombardant de requêtes.
SEO Search Engine Optimisation
Le fait que le contenu soit lisible par les moteurs de recherche
22
Responsive web Faire en sorte qu’une seule page web (document html) s’affiche
design différemment sur un ordinateur, une tablette, un téléphone. Les contenus se
réagence, s’adapte en fonction du support et de sa largeur d’écran.
HREF Hyperlien Reference
Attribut permettant de donner un lien à suivre
LMS Learning Management System
Sorte de CMS. Système de gestion de contenu (déposer fichiers, rajout de
texte…) dédier à l’enseignement.
SAAS Software as a Service
Software proposé comme un service à travers un navigateur.
UX User Experience
Toute l’expérience (ressenti) qu’un utilisateur peut avoir avec un « objet ».
UI User Interface
Conception homme-machine (IHM) : c’est l’interaction entre l’utilisateur et
l’interface.
Ergonomie Ergôn (travail) + Nomos (loi)
(usability) Discipline scientifique qui s’occupe des interactions entre l’homme et les
systèmes techniques.
> Objectif : optimiser le bien-être au travail.
Skeuomorphisme Tendance de stimuler des éléments d’interface graphique qui reproduisent des
objets physiques (textures, matières, reliefs, etc.).
Flat design Aller aux antipodes en termes de design. Pas de relief, ni d’ombrages.
Dark patterns Mécanisme mis en œuvre dans les interfaces d’utilisateur pour tromper
l’utilisateur.
23

Synthèse Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Synthèse Web

Transféré par

Droits d'auteur :

Formats disponibles

ILM Web – D.

Leynen Solveig TONGLET

Introduction aux Langages Médiatiques :

Qu’est-ce que le ‘web’ ?

Classification des médias - on a tendance à distinguer :

Différencier les médias par rapport

Le web est en tout cas un média d’interaction et d’intégration par excellence :

→ Notions d’interface utilisateur et expérience utilisateur :

Il y a toute la couche de communication et d’organisation du contenu de l’information en vue de la

Aux origines européennes du web

Les inventeurs du web

Robert CAILLAU (BE) = informaticien, il est le 2e inventeur du web

Fin des années ’80 : invention du web.

/!\ Ne pas confondre internet et web

Le web tombe dans le domaine public

Intention : favoriser la compatibilité, les pratiques communes et les normes en matière de

« Leading the Web to its full potential. »

La première page web

L’utilisation en ligne de commande (pas de souris à l’époque) rendait

HTTP, HTLM, URL

Il y a 3 dimensions techniques au cœur du fonctionnement du web.

HTML (HyperText Markup Language) = langage de balises permettant

HTTP (HyperText Transfer Protocol) = protocole de communication

But de BERNERS-LEE : rendre les choses aussi simples que possible.

La première page web

La première page web parle du web. On retrouve peu de choses dedans :

Premier navigateur composé de deux outils : la lecture et la production/publication de page web.

Avec le temps, cette option de publication simple a disparue.

FTP (File Transfer Protocol) = permet de se connecter à un serveur et de transférer/déposer des

Aujourd’hui, on a 3 langages à la base de toutes pages web :

Les premières années

- Premier moteur de recherche : Aliweb

- Microsoft arrive sur le web

- Microsoft lance Internet Explorer, Windows 95 et MSN.com

- Première version de Yahoo

- Début de l’essor des « dot com ».

- On comptabilise 30.000 pages web et 40 millions d’utilisateurs (fin 1995).

- Geocities offres des pages personnelles

- Révolution Macromedia Flash*

Macromedia Flash a révolutionné le web.

La technologie Flash a donc eu une grande importance sur le développement du web et

En réalité, Flash n’a pas totalement disparu.

Client = programme qu’on utilise, càd notre navigateur.

Serveur = machine/ordinateur avec un programme qui tourne en permanence et qui est en

En cliquant sur un lien, le client initie un échange avec un serveur.

Le serveur lui est à l’écoute d’une requête éventuelle d’un client.

HTML = HyperText Markup Protocol

> Langage de balisage

Ces balises vont permettent pleins de choses

Structure type d’une page web :

Html = description de la structure d’un document + indication sur les contenus

CSS = Cascading Style Sheet

Langage de styles (standardisé par le W3C).

Objectif : mise en forme des pages web.

Le document HTLM = le contenu

Le document CSS = les styles appliqués au contenu

Séparer la forme du contenu :

Document CSS Document HTML

Centralisation des styles :

Une feuille de style peut être reliée à plusieurs documents html.

Site statique VS. site dynamique

Site statique Site dynamique

Éditeurs de code source