m102-resume-theorique-6156fa4cb3b91 (1).pdf

IDENTIFIER LES ENJEUX
DIGITAUX CHEZ L’UTILISATEUR
DIGITALDESIGN

OBJECTIF
2
A l’issue de ce module de compétence,
vous serez capable définir les concepts
clés et enjeux concernant le digital et les
méthodes utilisées dans le cadre d’un
projet digital simple avec des utilisateurs
60 heures

3
SOMMAIRE
Connaitre l’histoire et les
éléments du web
Chapitre 1 : Identifier les utilisations du
web
Chapitre 2 : Connaitre les évolutions de
solutions digitales utilisant les
technologies du Web
Chapitre 3 : Identifier l’écosystème du
web
Chapitre 4 : Connaitre les termes
techniques liés aux sites web
Analyserla composition d’un
site
Chapitre 1 : Distinguer les anciens
codes de construction d’un site des
nouveaux
Chapitre 2 : Reconnaître les
différentes parties d’un site
Maitriser les règles du web
Chapitre 1 : Comprendre la
construction d’un site
Chapitre 2 : Connaitre les
différentes évolutions de
conception des interfaces
PARTIE 1 PARTIE 2 PARTIE 3
Lier le web aux utilisateurs
Chapitre 1 : Développer une attitude
tournée vers l’utilisateur
Chapitre 2 : Comprendre la notion
d’utilisateurdans un projet
PARTIE 4

LES ÉLÉMENTS
CONSTITUTIFS D’UNE
SOLUTION DIGITALE
4
PARTIE 1

CHAPITRE 1
5
IDENTIFIER LES
UTILISATIONS DU WEB
1 - Contextehistorique,lexique et vocabulaire
utilisés

Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Introduction
6
On débute de cours théorique parun constant actuel : le web à notre époque. Aujourd’hui,notre
environnement de vie (personnelleou professionnelle)est baigné dans le numérique. Le web est
devenu incontournable.
Chiffres clés en 2021
4,66 Mds
316 M
5,22 Mds
6,66%
d’internautes (59,5 %)
d’internautes supplémentaires en 2020 (+7,3 %)
de mobinautes (+1,8%)
de la populationmondiale utilise mobile

solutiondigitale
web
digitales
Introduction
7
93 M
96,43 Mbps
4,32 Mds
4,2 Mds
6h54
63,4 %
de nouveaux utilisateursde mobile (+1,8 % en un an) (59,5%)
de vitesse de connexion moyenne d’une ligne fixe à Internet(+31,1%)
d’utilisateursd’Internetà partir d’un mobile
d’utilisateursactifsdes réseaux sociaux(53,6% )
passées en moyenne sur Internet (+4 %)
des internautesutilisent le navigateurChrome (-0,4 %)

solutiondigitale
web
digitales
LA DIGITALISATION A TRAVERS LE MONDE
POPULATION
TOTALE
UTILISATEURSDE
SMARTPHONE
UTILISATEURS
INTERNET
UTILISATEURS
RÉSEAUX SOCIAUX
7.83
BILLION
5.22
BILLION
4.66
BILLION
4.20
BILLION

solutiondigitale
web
digitales
HAUSSE DU TEMPS PASSÉ SUR INTERNET

solutiondigitale
web
digitales
Dans le détail,la télévision(en streamingou broadcast)constitue la principale activitéquotidienne des
internautes (3h24),devant les réseaux sociaux (2h25),la lecture de la presse (2h02), l’écoute de la
musique (1h31) et les jeux vidéo (1h12). 54 minutes seraientconsacrées en moyenne à écouter des
podcasts.
Utilisation par type d’activité

solutiondigitale
web
digitales
1
2
3
4
Rechercher des informations(63 %),
Rester en contactavec ses amis et sa famille (56,3%),
Se tenir au courantdes actualitéset des événements (55,6%),
Rechercher des tutos(51,9%),
5 Regarder des vidéos, des émissions de télévision et des films (51,7%).
Les utilisations principales sont :

solutiondigitale
web
digitales
• Réseaux sociaux
• Equipements connectés
• E-commerce
• Publicité
• Services cloud
• Sites internet
• Musique
• Messageries
• Banques
• Administration
• Télévision
Les utilisations au Maroc

solutiondigitale
web
digitales
Introduction

solutiondigitale
web
digitales
On débute de cours théorique parun constant actuel : le web à
notre époque.Aujourd’hui,notre environnementde vie
(personnelle ou professionnelle)est baigné dans le numérique.
Le web est devenu incontournable.
12 Mars 1989 : premièreversion du Web
Le chercheurbritannique Tim Berners-Lee a inventé le World
Wide Web en 1989, lorsqu’il travaillait au CERN.À l’origine, le
projet a été conçu et développépourque des scientifiques
travaillant dans des universités et instituts du monde entier
puissent s'échanger des informations instantanément.
Info.cern.ch était l’adresse du tout premier site et serveurWeb,
qui était hébergé surun ordinateur NeXT du CERN. L’adresse de
la première page Web
était http://info.cern.ch/hypertext/WWW/TheProject.html
Les origines

solutiondigitale
web
digitales
6 Aout 1991 : le Web s'ouvreà tous
TimBerners-Lee annonce le projet surle groupe
alt.hypertext de « Le projet World Wide Web fusionne les
techniques d’extraction d’information et d’hypertexte
pour créer un système d’information global,simple mais
puissant. ».
C’est la première fois que des utilisateurs d’Internet
peuvent l’utiliser en dehors du CERN.
30 avril 1993 : une techno désormais publique
Quelques mois après le lancement du navigateurMosaic,
qui fait exploser l’intérêt pour le WWW,le Cernfait
passer sonprojet dans le domaine public et publie son
code source.
En un an seulement,on passe de quelques 500 serveurs
Web à 10 000 à la fin 1994. Le lancement de Netscape,le
premier navigateur réellement grandpublic, participera
aussi largement à sa démocratisation.
Les origines
Voilà à quoi ressemblait une page Web au début des années 90

solutiondigitale
web
digitales
Janvier 1994 : Yahoo!
Deux étudiants de Stanford,Jerry Yanget David
Filo,décident de créer un gigantesque annuaire
de sites,classés de façonthématique. D’abord
baptisé Jerry’s guide to the World Wide Web, le
site est très vite rebaptisé Yahoo! Il va vite
devenir le portail numéro 1 de la Toile dans la
seconde partie des années 90.
Juillet 1995 : Amazon.com
16 Aout 1995 : Internet Explorer
1998 : Google
15 janvier2001 : lancement de Wikipedia
9 novembre 2004 : première versionstable de Firefox
4 février2004 : Thefacebook.com
2005 : YouTube et le Web 2.0
11 décembre2008 : Chrome
2008 : l'arrivée des applis mobiles
2010 : l'émergence du HTML5,le futurdu Web
Octobre 2013 : Internet Explorer 11,la dernière
versiondu navigateur
2014 : le milliardde sites dépassés
Mars 2019 : plus de 4 milliard d’utilisateurs
Les origines

solutiondigitale
web
digitales
Internet(réseau ouvert)
• Internet est le réseau informatiquemondial que tout le monde connaît.
• Il correspond à une interconnexion d’ungrand nombrede machines entre-elles.Ce réseau Internet rend accessible
au publicun certain nombre de service hébergé.
• Le point commun de tous ces services est le protocole IP (Internet Protocol)qui assure la communicationentre
toutes ces machines via un navigateuret une connexion.
Intranet(réseau interne)
• Un Intranet est un ensemble de services Internet (parexemple un serveur Web, un serveur de messagerie, un
serveurde fichiers)mais à l’échelle d’un réseau local.
• On utilise doncdes technologies Internet qui reposentsurle fameux protocole IPmais à l’échelle du réseau de
l’entreprise.
• Ce réseau privén’est pas visible du réseau Internet.
• Sa particularité est doncd’adopter les grands standards Internet mais de manière privée.
• L’Intranet est particulièrementadapté pour le travailcollaboratif.
Définitions

solutiondigitale
web
digitales
Extranet(réseau privé) :
• Un Extranet est une extension du système d’informationd’uneentreprise à des partenaires situés au-delà du
réseau de cette entreprise.
• Cette extensionest sécurisée de manière à n’autoriserl’accès uniquement qu’auxpersonnesdésignées.
• Dans ce cas, le réseau Internet est mis à contributionpourvéhiculer l’information,mais l’information n’estpas
accessible du grand public.
• Un Extranet n’est doncni un Intranet,ni un site Internet.
• Il s’agit d’un système supplémentaire offrant parexemple aux clients d’une entreprise, à ses partenaires ou à des
filiales,un accès privilégié à certaines ressources informatiques de l’entreprise par l’intermédiaire d’une interface
Web.
World Wide Web
• Système hypertextefonctionnantgrâce
à l'outil internet et permettantde naviguerde pages en pages sur des sites web.
Définitions

solutiondigitale
web
digitales
Site web
• Un ensemble de pages web et de ressources reliées pardes hyperliens,défini et accessible par une adresse web.Un
site est développé à l'aide de langages de programmationweb,puis hébergé sur un serveur web accessible via le
réseau mondial Internet,un intranet local,ou n'importe quel autre réseau,tel le darknet.
Définitions

solutiondigitale
web
digitales
• Réaliser un QCM imprimé, de 10 questions :les questions portent sur les définitions vues lors du cours.Pour
chaque question,plusieurs réponses sont proposées.Plusieurs réponses peuvent être vraies.Une bonne
réponse correspond à un point.Pourque le point soit validé, toutes les bonnes réponses doivent avoir été
cochées.
• Lorsque le test est terminé, les apprenantséchangent leurscopies avecla personne qui se trouveà côté.
• Le formateurprocèdeensuiteà la correction au tableau,et les apprenants corrigent la copie de leur binôme
avant de leurrestituer cette dernière avecune note sur10.
• Cette évaluationformativepermet aux apprenant de savoirquelles connaissances méritent d’être
approfondies de leurcôté, et de savoirce qui a été assimilé ou non.
QCM

solutiondigitale
web
digitales
Objectif
Prise de conscience de notre utilisationde services digitaux et leur présence dans notre vie quotidienne.
Cet élément de contenu propose une activité d’échange oral entre les apprenants et le formateur.L’idée et
de discuter des utilisations numériques des apprenants,de leurs habitudesd’utilisationet de leurs
connaissances.Le but de cet échange est de montrer aux apprenants que la première partie de cours
correspond en effet à ce qu’ils vivent au quotidien avecle web, mais aussi d’introduire la partie de cours
théorique suivante.
Le formateur va poser des questions ouvertesaux apprenants,et chaque apprenant souhaitant participer va
proposer une réponse.Le formateur écrira toutes les idées et réponses proposées pas les apprenants au
tableau.Lors du cours théoriquesuivant,le formateurpourraalors revenir sur ce qui a été noté, pour
montrer aux apprenants qu’ils ont déjà des connaissances de base acquises par leur quotidien,et qu’ils sont
eux aussi des utilisateurs.
Échange avec les apprenants sur leurs
utilisations et habitudes des outils digitaux

solutiondigitale
web
digitales
Les questions
• Quelles solutions digitales utilisez-vous au quotidien?
• Quelles grandes catégories vous semblentse dégager ?
• Quelles sont les dernières innovationsdans le digital et le web ?
• Quelles entreprises dominentle web ?
• A quels moments de votre quotidienutilisez-vousdes solutions web et digitales ?
• De quels outils avez-vous connaissance/entenduparler,mais que vous n’utilisezpas forcément ?
• Vers quoi va tendre le digital et le web selon vous ?
Échange avec les apprenants sur leurs
utilisations et habitudes des outils digitaux

CHAPITRE 2
23
CONNAITRE LES ÉVOLUTIONS
DE SOLUTIONS DIGITALES
UTILISANT LES TECHNOLOGIES
DU WEB
1 – Adaptativeet responsive
2 – Mobile First et applications mobiles

solutiondigitale
web
digitales
Aujourd’hui,il est devenu évident que le contenu d’une solution digitaleweb doit être accessible sur
différents types d’interfaces.Un site doit pouvoirêtre déployé surtous les écrans.
Cela fait déjà quelques années que la navigation principale des internautes ne se fait plus sur un PC mais
bien souvent depuisun smartphone.Et pourtant,il est encore fréquent d’entendre que la navigation
mobile présente souvent des problèmes.
Introduction

solutiondigitale
web
digitales
Notion créée en 2010 par Ethan Marcotte pour le magazine A List Apart, les sites en responsive Design
sont des sites web dont les pages s’adaptent au viewport du navigateur. Au fur et à mesure que la taille
du navigateur change, le site réorganise le contenu et la mise en page en conséquence afin de fournir à
l'utilisateur une mise en page optimale. L’idée est de rendre le contenu flexible pour qu’il « flotte » et se
disposentdifféremmentselon la taille de l’écran.
Définition : Desponsive Design
Les avantages:
• Peu importe l’appareil que l’onutilize,les pages sont uniques et ne changent pas. Cela nécessite
moins de travail puisque les développeurs doivent seulement créer une seule mise en page, par
oppositionà plusieursmises en page lors de la construction d'un site adaptatif.
• Le site reste cohérent en fonction des appareils utilisés, offrant une meilleure expérience utilisateurs.
On peut prendre comme exemple le fait que 85% des acheteurs en ligne commencent leur achat sur
un appareil et le termine sur un autre.
• Les sites responsive sont adaptés aux moteurs de recherche, notamment Google. En effet, les sites
sont indexés selon leur version mobile par rapport à la version desktop. Si l’on suit cette logique, les
sites responsiveont doncplus de chanced’avoir de meilleursrésultats SEO.
• Les sites en responsive permettent une expérience de visualisation optimale, avec une grande
flexibilité, une bonne vitesseet un bon SEO.

solutiondigitale
web
digitales

solutiondigitale
web
digitales
Les inconvénients:
• Les développeurs ont moins de contrôle sur la façon dont le site est organisé en fonction de l'espace
disponible dans un navigateur. Ils doivent donc prudents et s'assurer que la conception du site web
fonctionnera biensur unegrandevariété d'écrans.
• Les publicités peuvent être perdues lorsque les sites sont réarrangés pour les smartphones. Certaines
peuvent ne pas apparaitre à l’écran et doncréduire les revenus potentiels.
• Les sites peuvent charger plus lentement sur les appareils mobiles que sur les ordinateurs de bureau
en raison de la taille des images sur le site. Les sites développés principalement pour desktop, même
s'ils sont réactifs,peuvent rencontrer ce problème en raisonde la présence d’images lourdes.

solutiondigitale
web
digitales
Les sites web conçu en adaptativedesign ont leurspages designées pour différentstypes d’appareils.Ils
fonctionnent doncavecdifférentes mises en page.Ces dernières sont créées à l’avance en fonction des
appareilssurlesquels le site doit être navigable.La résolutionde l’appareilest détectée et le site charge
en conséquence une page adaptée à l’écran de l’utilisateur.
Il est doncnécessaire de créer une stratégie de contenu propre à chaque support lors de la conception.
Pource faire, il s’agira doncde débuter le projet parune analyse utilisateurs afin de connaitreleurs
besoins et habitudes de navigation.
Le standard pourdéfinirles paliersde résolutionsd'écran :
• 320 pixels pourles appareils Mobiles
• 760 pixels pourles Tablettes
• 960 pixels pourles navigateurs d'ordinateurs de bureau.
Définition : adaptative design

solutiondigitale
web
digitales
Le système à 6 résolutions :
• 320 pixels pourles appareils mobiles
• 480 pixels pourles mobiles et mini tablettes
• 760 pixels pour les mini tablettes et les tablettes
• 960 pixels pourles grandes tablettes et les ordinateursde bureau
• 1200 pixels pour les ordinateurs de bureauet les grands écrans
• 1600 pixels pour les grands écrans

solutiondigitale
web
digitales

solutiondigitale
web
digitales
Les avantages:
• Les pages étant créées en amont en fonction des tailles d’écran,les sites adaptatifs offrent une
meilleure expérience utilisateur(UX). La création d'une mise en page unique pour les utilisateurs
d’un certain appareil peut leursignifier que vous vous souciez de leur expérience lorsqu'ils naviguent
sur votre site depuis leursmartphone.
• Ce type de site convient aux sites qui utilisent des annonces publicitaires pourgénérer des revenus.
Les développeurs peuvent optimiser chaque mise en page pourinclure correctement les publicités
afin de s'assurer qu'elles seront vues.
• Une collection de mises en page statiquesqui sont positionnées sur des points d'arrêt contribue au
fonctionnementde la mise en page web Adaptif.

solutiondigitale
web
digitales
Les inconvénients:
• Un site adaptatifnécessite beaucoupde travailpourcréer plusieursmises en page d'une même
page. Étant donné la charge de travail pluslourdequ'exige ce choix de développement,les coûts
associés sont plus élevés que ceux du développement d’unsite responsive.De nombreux
développeurs peuvent doncchoisird'utiliserun site adaptatifpourmoderniser leur site existant,ce
qui leurpermet de l'utiliser surplusieurs tailles d'écran.
• Ce type de site peut parfois ne pas tenircompte des utilisateurs lorsque la mise en page n'est pas
optimisée pours'adapter à une taille d'écran moins populaireou moins courante.Par exemple, un
site adaptatifpeut ne pas avoirde mises en page spécialement conçues pour les tablettes ou les
netbooks.
• Le lancement de nouveauxsmartphonesavecdes configurations d'écran uniques exigera également
que les développeurs créent de nouvelles mises en page.C'est ce qui s'est passé quand Apple a lancé
l'iPhone X, qui a posé plusieurs problèmespourles applications et les sites qui n’avaient pas été
conçus pource nouvel environnement.
• Les résultats du SEOpeuvent différer entre la version mobile et la version desktop d'un site adaptatif.
Même si le contenu est identique, certains moteurs de recherche évaluent le référencement sur la
version bureaud'un site différemment que sa version mobile.En conséquence, cela peut affecter
négativementle référencement et doncla performance du site.

CHAPITRE 2
35
CONNAITRE LES ÉVOLUTIONS
DE SOLUTIONS DIGITALES
UTILISANT LES TECHNOLOGIES
DU WEB
1 – Adaptativeet responsive
2 – Mobile First et applications mobiles

solutiondigitale
web
digitales
Mobile First et applications mobiles

CHAPITRE 3
37
IDENTIFIER
L’ÉCOSYSTÈME DU WEB
2 - Liste des différents métiers travaillant sur la
création de contenu digital
1 - Liste des principaux types de sites

solutiondigitale
web
digitales
Sites vitrine
38
Produits / services

solutiondigitale
web
digitales
Sites e-commerce
39

solutiondigitale
web
digitales
Sites Institutionnels
40

solutiondigitale
web
digitales
Sites communautaires
41

solutiondigitale
web
digitales
Intranets
42

solutiondigitale
web
digitales
Sites immersifs
43

solutiondigitale
web
digitales
Web app & PWA
44

solutiondigitale
web
digitales
Natif & hybride
45
Natif
• IOS : Swift, ObjectiveC
• Android :Kotlin,Java
Hybride
• Navigateur mobile + techno Html/CSS/JS
• Flutter

CHAPITRE 3
46
IDENTIFIER
L’ÉCOSYSTÈME DU WEB
2 - Liste des différents métiers travaillant sur la
création de contenu digital
1 - Liste des principauxtypes de sites

solutiondigitale
web
digitales
Les métiers
47
• Administratif
• Commercial
• Technique
• Editorial
• Graphique

solutiondigitale
web
digitales
Les métiers
48
• Data Scientist
• Responsable CRM
• TrafficManager
• SEO Manager
• Responsable Marketing Online
• Community Manager
• Chef de projet web
• Chargé Webmarketing
• Responsable Emailing
• Hacker éthique
• Webdesigner
• Directeur artistique
• SEM Manager
• Webmaster
• Développeur web
• Développeur front
• Développeur back
• Ergonome web
• Ux Designer
• Etc…

49
2 - Notions de base de données et de compte
utilisateur
1 - Règles, hébergement, protocoles,SEO et
normes W3C
CHAPITRE 4
CONNAITRE LES TERMES
TECHNIQUES LIÉS AUX
SITES WEB

solutiondigitale
web
digitales
Règles & normes W3C
50
Un bon site doit respecter certaines règles essentielles qui ne peuvent être négligées.En effet,
certaines bonnes pratiques permettentde s’assurer que l’on utilise les technologies et outils web de la
meilleure manière possible.
Lorsque l'on réalise du développement web,la principale cause d'incertitude provient du fait que l'on
ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateursdu site
web: certains utilisateurs utilisent des mobiles avecdes écrans petits et étroits,d’autres des
ordinateurs portable Windows avecun grand écran secondaire,certaines sont aveugles et utilisent un
lecteur d'écran pour accéder au contenu de la page web ou encore d’autres utilises peut-être un très
vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.
Ne connaissant pas à l’avance comment nos utilisateurs vont interagir avecnotre site, il est
indispensable de ce aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés
puissent yaccéder, même s'ils n'auront pas la même interaction.
Les concepts suivants sont doncà prendre en compte :

solutiondigitale
web
digitales
51
Architecture : Analyser ou anticiper les habitudes de navigationdes permet de définir la
meilleure architecture possible afin derépondre rapidementà leur besoin de recherche. Organiser les
contenus selon leurs habitudes,ranger les éléments par thématique.
Organisation visuelle : il s’agit de limiter la surcharge visuelle afin de simplifier la compréhension.Une page
bien organisée et aérée permet aux visiteurs de bénéficier d'une lecture plus reposante et de ne rencontrer
aucune difficulté à trouverl'information qu'ilsrecherchent.
Cohérence : les barres de navigationsont un repère importantpourle visiteur qu’il ne faut pas
déplacer/modifier au cours de la visite.
La nomenclature doit être respectée pour ne pas perdre le visiteur concernant les termes métiers.
Uniformiser les formats de présentation(comme les liens).Le comportement du site doit toujoursêtre le
même.
Conventions : les utilisateurs ont certaines habitudes de navigationcommunes à quasiment tous les sites
internet et mobiles.Même si cela ne doit pas brider la créativité,il est importantde garder en tête ce
concept.
Information : L’information ponctuelle et contextuelle est très importante et doit être associée à la notion
de feedback.

solutiondigitale
web
digitales
52
Assistance : On doit guider l’internaute explicitement grâce aux mots (à défaut d’autre chose) mais aussi
implicitementà travers l’organisation visuelle, le format et le comportement des objets.
Gestion des erreurs : l’utilisateurva se tromper.3 manières de les gérer :
avant l’erreur : protéger ;
après l’erreur : repérage et compréhension de l’erreur ;
au-delà de l’erreur: faciliter la correction.
Performances : les sites Web doivent se charger le plus rapidementpossible, mais aussi qu'ils doivent être
intuitifset faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.
Accessibilité : cela consiste à rendre vos sites web utilisables parle plus grand nombre de catégories de
personnes possible (Un concept lié est la notion de conception inclusive).
Confidentialitéet sécurité : la confidentialité consiste à permettre aux gens de vaquer à leurs occupations
en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin.
La sécurité fait référence à la conception sécurisée d’un site Web afin d'empêcher des utilisateurs
malveillants de voler les informationsqu'il contient,et ce qui vous appartiennentou à vos utilisateurs.

solutiondigitale
web
digitales
53
Normes W3C
Les standards du Web sont différentes technologies et protocoles utilisés sur le Web et en particulier
ceux définis par le W3C sous forme de recommandations.
Cette expression se réfère principalement aux technologies formant le socle principal d'un document
web : le HTML et le XHTML, les feuilles de style en cascade (CSS) et le DOM (Document Object Model)
ainsi que sa manipulation avec Javascript. Cependant, elle peut également, selon les contextes,
s'étendre à un ensemble plus vaste, dont :
AJAX (Asynchronous Javascript and XML)
HTTP (Hypertext TransferProtocol)
PNG (Portable Network Graphics)
RDF (ResourceDescription Framework)
SVG (Scalable Vector Graphics)
SMIL (Synchronized MultimediaIntegrationLanguage)
URI (UniformResource Identifier)
XML (Extensible Markup Language)
WCAG (Web Content Accessibility Guidelines)

solutiondigitale
web
digitales
Protocoles
54
Internet n’est pas uniquement des sites. On retrouve également le protocole HTTP : Un réseau
informatiquemondialsur laquelle des services sont actifs.
DNS
FTP
IRC
ICQ
NTP
P2P
NNTP
SSH
SMTP
permet de retrouverune adresse IP
sert à transporter des fichiers d'un ordinateurà l’autre.
permet de créer des «salons»de discussion en direct.
permet de savoir si quelqu'un est en ligne et de dialoguer aveclui.
permet de mettre les ordinateursà l'heure par internet.
permettent de partager des fichiers à grande échelle.
permet d'accéder à des forums de discussion
permet d'avoirun accès sécurisé à des ordinateurs distants.
permet d'envoyer des emails

solutiondigitale
web
digitales
Hébergement
55
Le nom de domaine est l’adresse d’un site Web, comme par exemple www.monsiteweb.fr. Il indique
aux ordinateurs (et autres devices) où trouver le site sur les serveurs afin qu’ils puissent envoyer et
recevoir des informations.
On retrouve parmi les extensionsles plus utilisées .fr,.com et .io
Nom de domaine
Hébergement
Un serveur est un périphérique qui est connecté à Internet et stocke des fichiers de site. Un service
d’hébergement web permet de louer un espace sur un disque dur afin que les utilisateurs à travers le
monde puissent accéderaux fichiers d’un site pour afficher ce dernier.
L’hébergement Web correspond à un espace de stockage de votre site Web. Sur cet espace vous
stockez vos fichiers de site, correspondantà la mise en page, le contenu, les images, etc

solutiondigitale
web
digitales
Hébergement
56
L’hébergement partagé a plusieurs utilisateurs sur le même serveur, et tous partagent les mêmes
ressources..
Hébergement partagé
VPS
Un VPS (Virtual Private Server ou VDS, Virtual Dedicated Server) est un «serveur privé virtuel».
Plusieurs sites se trouvent sur le même serveur, mais les ressources sont réparties plutôt que
partagées en même temps. Cela signifie que l’on a une quantité spécifique de ressources allouées
pour nous et nous seul. L’avantage est que notre site sera beaucoup plus rapide qu’avec un
hébergement web partagé.
Hébergement dédié
L’hébergement dédié implique que l’on est seul sur le serveur. Cela signifie que toutes les ressources
sont à nous et que nous pouvons contrôler notre serveur. Ce type d’hébergement est idéal pour les
sites ayant besoin d’une rapidité d’affichage instantanée et plus encore si le trafic du site est élevé et
ne peut se permettre d’avoir des coupures intempestives.

CHAPITRE 4
57
CONNAITRE LES TERMES
TECHNIQUES LIÉS AUX
SITES WEB
2 - Notions de base de données et de compte
utilisateur
1 - Règles, hébergement,protocoles,SEOet
normes W3C

COMPOSITION D’UNE
SOLUTION DIGITALE
58
PARTIE 2

CHAPITRE 1
59
DISTINGUER LES ANCIENS
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Contenu textuel,visuel et interactif
1 - Définition des principes d’accessibilité
4 - Architecture organisationnelle des pages

solutiondigitale
web
digitales
4 grands principes
1. Perceptible:
60
L'information et les composants de l'interface utilisateurdoiventêtre proposés à l'utilisateur de façon à ce qu’il
puisse les percevoir partous ses sens.
• On doit trouverun équivalent textuel aux contenus non textuels.On peut les présenter sous d’autres formes :
grands caractères,transcription braille, synthèse vocale symboles, audio-description
• Solutions de remplacement aux médias (audio,vidéo ou animations Flash): Transcriptiontextuelle, Sous-
titrage automatique, Traductionen langue des signes
• Le contenu doit être adaptable et présenté de différentes façons sans perdre l’information ni la structure, par
exemple une mise en page simplifiée
• Distinction entre le fond et la forme du contenu pourune meilleure perceptionvisuelle et auditive(séparation
du premier plan et de l’arrière-plan)

solutiondigitale
web
digitales
4 grands principes
61
2. Utilisable:
Les composants de l'interface utilisateuret de navigationdoiventêtre utilisables.
• Rendre toutes les fonctionnalités accessibles au clavier
• Laisser à l’utilisateurun délai suffisant pourlire et utiliser le contenu - ne pas avoir recours au défilement
automatique
• Fournirà l’utilisateurdes éléments d’orientation pournaviguer,trouverle contenu et se situer dans le site
(hiérarchie des titres,fil d’Ariane, liens explicites,plan de site...)
3. Compréhensible:
Les informationset l’utilisationde l'interface utilisateurdoiventêtre compréhensibles.
• Rendre le contenu textuel lisible et compréhensible (languesprécisées,abréviations explicitées,jargon
explicité)
• Concevoirles pages afin qu’elles apparaissentet fonctionnent de manière prévisible
• Permettre à l’utilisateurd’éviter les erreurs de saisie et de les corriger (messages d’erreurs,aides
contextuelles…)

solutiondigitale
web
digitales
4 grands principes
4. Robuste
62
Le contenu doit être suffisamment robuste pourêtre interprété de manière fiable par un grand nombre
d’utilisateurset technologies d'assistance.

solutiondigitale
web
digitales
12 règles
63
1. Fournirdes équivalents textuelsà tout contenu non textuel.
2. Proposer des versions de remplacement aux médias audio et/ou vidéo.
3. Façonner un contenu adaptable qui puisse être présenté de différentesmanières sans perte d’information ni
de structure.
4. Distinguer le fond de la forme.
1. Perceptible:
2. Utilisable:
5. Rendre toutes les fonctionnalités accessibles au clavier.
6. Ne pas presser l’utilisateuren lui laissant un délai suffisantpour lire et utiliser le contenu.
7. Ne pas concevoirde contenu susceptible de provoquer des crises d’épilepsie.
8. Fournirà l’utilisateurdes éléments d’orientation pournaviguer,trouverle contenu et se situer dans le site.

solutiondigitale
web
digitales
12 règles
64
9. Rendre le contenu textuel lisible et compréhensible.
10. Faire en sorte que les pages apparaissent et fonctionnentde manière prévisible.
11. Aider les utilisateursà éviter et à corriger les erreurs de saisie.
12. Optimiser le contenu pourle rendre compatible avecun maximum de moyens d’affichage.
3. Compréhensible:
4. Robuste :

CHAPITRE 1
65
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’un site classique

solutiondigitale
web
digitales
Evolution à travers le temps
66

solutiondigitale
web
digitales
67

solutiondigitale
web
digitales
68

solutiondigitale
web
digitales
69

solutiondigitale
web
digitales
70

solutiondigitale
web
digitales
Eléments de contenu
71
On retrouve dans les solutions digitales des éléments de contenu indispensables,qui constituent l’UIde ces
solutions.On peut alors en faire des Kit UI qui présentent les éléments,leurs utilisations et leurs évolutionen
fonction des interactions avecles utilisateurs.
• Textes
• Titres et sous-titres
• Boutons primaires,secondaires, etc
• Cases et formulaires
• Barres de recherche
• Champs de saisie
• Tableaux
• Etc
Pour les éléments interactifs,on doit également présenter leurs différentes formes au survol,au clic, sélectionné,
indisponible, etc

solutiondigitale
web
digitales
72

solutiondigitale
web
digitales
73

CHAPITRE 1
74
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’unsite classique
3 - Contenu textuel, visuel et interactif

solutiondigitale
web
digitales
Contenu textuel, visuel et interactif
75

CHAPITRE 1
76
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’unsite classique
3 - Contenu textuel, visuel et interactif

solutiondigitale
web
digitales
Contenu textuel, visuel et interactif
77
On retrouve dans les solutions digitales des éléments de contenu indispensables,qui constituent l’UIde ces
solutions.On peut alors en faire des Kit UI qui présentent les éléments,leurs utilisations et leurs évolutionen
fonction des interactions avecles utilisateurs.
• Textes
• Titres et sous-titres
• Boutons primaires,secondaires, etc
• Cases et formulaires
• Barres de recherche
• Champs de saisie
• Tableaux
• Etc
Pour les éléments interactifs,on doit également présenter leurs différentes formes au survol,au clic, sélectionné,
indisponible, etc

CHAPITRE 2
78
RECONNAÎTRE LES
DIFFÉRENTES PARTIES
D’UN SITE
1 – Composition de la structuration des pages par
zone

solutiondigitale
web
digitales
Parties principales
79
En-tête(Header)
Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo.C'est là où les
principales informations du site restent d'une page à l'autre.

solutiondigitale
web
digitales
Parties principales
80
Barre de navigation
Elle fait le lien vers les principales parties du site ;d'habitude, elle est présentée sous forme de boutons de menu,
de liens ou d'onglets.Comme l'en-tête, la barre de navigation reste souventcohérente d'une page à l'autre.

solutiondigitale
web
digitales
Parties principales
81
Contenu principal
Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex.la vidéo à
regarder,ou le corps de l'article à parcourir,ou la carte à lire,ou les dernières nouvelles etc.C'est la partie du
site variable de page en page.

solutiondigitale
web
digitales
Parties principales
82
Barre latérale
Quelques informationsautour du sujet,liens,citations,annonces,etc.Habituellement c'est contextuel au contenu
principal (par exemple sur une page d'informations,la barre latérale peut contenir la biographie de l'auteur,ou
des liens vers des articles connexes)mais il y a aussi des cas où vous trouverez des éléments récurrents comme un
système de navigation secondaire

solutiondigitale
web
digitales
Parties principales
83
Pied de page
Une bande au bas de la page qui contient généralement,en petits caractères,des avis de droit d'auteur ou des
coordonnées de contact.C'est un endroit pour mettre de l'informationcommune (comme l'en-tête), mais il s'agit
dans ce cas d'informationsnon-critiques,voire secondaires parrapportau site Web lui-même.Le pied de page est
aussi parfois utilisé à des fins de SEO, en fournissantdes liens pourun accès rapide à des contenus prisés.

MAITRISER LES RÈGLES
DU WEB
84
PARTIE 3

CHAPITRE 1
85
COMPRENDRE LA
CONSTRUCTION D’UN
SITE
1 - Langages, bibliothèqueet frameworks

Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
web
digitales
Composition d’un site web
86

solutiondigitale
web
digitales
Langages, bibliothèques et frameworks
87
Langage
Expression permettant
de produire un code de communication.
Bibliothèque
Inventaire de fonctionsou de fichiers.
Framework
Regroupement d’outilset de bibliothèques spécifiquespour améliorer la cadre de travail.

solutiondigitale
web
digitales
Langages front-end
88
Javascript
Un site Web peut être composé uniquement d’HTMLet de CSS, mais si on veut lui insuffler un peu de vie on aura
besoin de Javascript,qui lui, est un vrai langage de programmation,avecdes boucles,des conditions…
II est responsable de l’interactivité et de la logique qu’il ya derrière les pages web. Par exemple, si on veut ouvrir
un menu en cliquant surun bouton particulier,on le fera avec du Javascript.
CSS
Le langage CSS – CascadingStyles Sheets – est un langage qui va mettre en forme les pages Web et les desginer
graphiquement.Il désigne les éléments HTML à l’aide de sélecteurs et leur applique un style CSS. C’est ce langage
CSS qui est responsable des couleurs, des tailles, de la mise en page, etc.
HTML
HTML – Hyper Text Markup Langage – est un langage composé de tags, balises en Français.Il permet de
représenter la structure,le squelette des pages Web.
Par exemple : un titre,un paragraphe, uneimage ou une liste.

solutiondigitale
web
digitales
Langages : HTML
89
HyperText Markup Language
Informationsinvisible mais importantpour l’affichage de la page
Architecturedu contenu de la page : texte,image, boutons,liens

solutiondigitale
web
digitales
Langages : HTML
90
Début Titre Listes

solutiondigitale
web
digitales
Langages : HTML
91
Image d’un dossier Image d’internet

solutiondigitale
web
digitales
Langages : CSS
92
HTML CSS
Architecture de la page Design de la page
(taille, couleur, etc)

solutiondigitale
web
digitales
Langages : CSS
93
HTML CSS

solutiondigitale
web
digitales
Langages : CSS
94
HTML CSS

solutiondigitale
web
digitales
Bibliothèques
95
Javascript
Un site Web peut être composé uniquement d’HTMLet de CSS, mais si on veut lui insuffler un peu de vie on aura
besoin de Javascript,qui lui, est un vrai langage de programmation,avecdes boucles,des conditions…
II est responsable de l’interactivité et de la logique qu’il ya derrière les pages web. Par exemple, si on veut ouvrir
un menu en cliquant surun bouton particulier,on le fera avec du Javascript.

solutiondigitale
web
digitales
Bibliothèques
96
Inventaire de fonctionsou de fichiers
Three.js
Graphique 3D
Anime.js
AnimationCSS/ SVG
Data-Driven
Animationde data
ScrollReveal
Révélation au scroll
Granim.js
Dégradé animé
Gsap
Librairie à extensions

solutiondigitale
web
digitales
Framework
97
Inconvénients
Limitation du cadre = Sites complexes
Pas possible de changer
Évolution/ changement
Un frameworkest lié à un langage de programmation(Php,Js,…)
Avantages
• Organisation
• Cohérence
• Maintenance
• Utiliser ce qui a déjà été fait

solutiondigitale
web
digitales
Framework
98
Bootstrap =
Bootstrap est un ensemble d’outils et de fichiers (Css & Js), utile à la création d’interface (sites, app).
Outils construction
+ Outils de graphique
+ Outils d’interaction
+ Préprocesseur intégrés (SASS)
+ Flexbox
+ Bibliothèques icons
+ Kits d’interface
Angular
Par Google
Application
Ex : Gmail, Youtube,Lego, etc
React
Par Facebook
Composants indépendant
Création d’interface
Ex : Facebook, Instagram,
Asana
React
Ancien de Angular
Front d’intranet et transition
site à app par composants
Ex : Letsenhance

CHAPITRE 2
99
CONNAITRELES
DIFFÉRENTESÉVOLUTIONS
DE CONCEPTIONDES
INTERFACES
2 - Aperçu des fonctionnalitésnouvelles
orientées utilisateurs
1 - Différencier les métiers du Design des métier
de développement

solutiondigitale
web
digitales
Les Designers
100
Les différences
La principale différence entre designer et développeur Web est que le Designer (UX ou UI) crée l'apparence de la
solution digitale tandis que le développeur se charge de la programmation pour développer la solution.Un
Designer Web doit donc être imaginatif,créatifet posséder d'excellentes compétences en communication,en plus
des compétences techniques en conception Web,alors qu'un développeur Web doit avoir un esprit logique et
bien connaître les divers langages de programmationet les outils de gestion de code source.
Le designer
Un designer de sites Web est une personne qui crée l'apparence de la solution.Il réalise des pages de style, ajoute
du texte, des images, etc. Il utilise divers logiciels tels que Adobe Photoshop,Sketch,Illustrator,Adobe XD ou
Figma pourcréer une interface fonctionnelle et cohérente.
Il doit avoir diverses compétences pour mener à bien le processus de conception : être imaginatif,créatifet avoir
d'excellentes compétences en communication.Habituellement,les designer appartiennent aux domaines de la
conception graphique et du design.

solutiondigitale
web
digitales
Les Designers : UX
101

solutiondigitale
web
digitales
Les Designers : UI
102

solutiondigitale
web
digitales
Les Designers : UX vs UI
103

solutiondigitale
web
digitales
Les Développeurs
104
Le développeur
Le développeur web va principalementutiliser un éditeur d’open source comme Notepad++ ou d’autres.Il va y
inscrire des lignes de codes dans un langage informatique spécifique. Il crée l’épine dorsale du site web,
généralement à partir de zéro,et connaît les langages spécifiques au web.Le développeur web construit les bases
du site. D’une feuille blanche, il arrive à ce que le site soit fonctionnel,qu’iloffre une bonne expérience de
navigation pour l’internaute et qu’il intègre des fonctions spécifiques et utiles pour le site.
Pour simplifier,le développeur web s’occupe du squelette du site web, c’est-à-dire de son aspect intérieur.
Un concepteur de sites Web doit avoir un esprit logique et d’excellentes compétences non techniquesautres que
les compétences techniques.

solutiondigitale
web
digitales
Les Développeurs
105

solutiondigitale
web
digitales
Designers et développeurs
106
Un objectif commun
Les designers et les développeurs travaillent dans un but unique– créer un site web ou une application qui séduit
et attire des utilisateurs.
Pour ce faire,le design et le développementdoiventêtre bien faits.Un site a besoin de bien paraître et
fonctionner correctement.Les couleurs et les images doivent refléter la marque, et l’interface doit encourager les
visiteurs à réaliser une action souhaitée.
La délimitation entre les designers et les développeursest de plus en plus floue depuis que les designers
apprennent à coder et les développeurs s’intéressent de près au design (c’est une des raison pour laquelle les
articles et tutoriels de design et de développement sont si populaires).Nous commençons tous à nous rendre
compte que le futur de ce domaine comprend le métier de Designer / Développeur Web.
Travaillerensemble
Une des parties les plus difficiles du design et du développement web peut être de travailler ensemble et de
communiquer d’une façon que tout le monde comprend.
Pour éviter les soucis de communication:
• Éviter le jargon.
• Montrercomment les choses devraient être ou fonctionner
• Etre ouvert aux idées.Les designers doivent accepter les concepts de design des développeurs,et les
développeurs doiventêtre ouverts aux idées d’expérience utilisateur des designers
• Apprendre la façon dont l’autre partie du processus de création web fonctionne.

solutiondigitale
web
digitales
Designers et développeurs
107

CHAPITRE 2
108
CONNAITRELES
DIFFÉRENTESÉVOLUTIONS
DE CONCEPTIONDES
INTERFACES
2 - Aperçu des fonctionnalités
nouvellesorientées utilisateurs
1 - Différencier les métiers du Design des métier de
développement

solutiondigitale
web
digitales
Web App
109
Définition
Une Web App ou applicationweb est avant tout une application: il s’agit d’un programme ou d’un logiciel servant
à réaliser des tâches ou des actions précises.Par exemple, un traitement de texte est une application,permettant
à l’utilisateur de créer, rédiger et mettre en forme des documents textes.C’est sa fonction de base.
Une applicationest modulable.En plus de sa fonction élémentaire peuvent s’ajouter des fonctionnalités
supplémentaires qui viennent enrichir l’application.Un gestionnaire d’image, un correcteur orthographique ou la
gestion de l’impressionsont autant de fonctionnalités que l’on retrouve couramment dans une applicationde
traitement de texte,par exemple.
Une applicationse définit doncà la fois par son usage de destination et sa modularité.
Une Web App est doncune application,mais utilisable sur internet.À l’inverse d’une application traditionnelle qui
nécessite une installation sur un poste et s’utilise en local,une Web App est hébergée sur un serveur et peut être
accessible et manipulable depuis n’importe quel poste disposant d’une connexioninternet,sans installation
logicielle.

solutiondigitale
web
digitales
Web App
110

solutiondigitale
web
digitales
Web App
111
Avantages
• Une Web App permet de mettre à dispositionde n’importe quel utilisateur un ensemble de fonctionnalités au
moyen d’une applicationen ligne.Par conséquent,elles sont plus souples que des applications locales car ne
nécessitent pas d’installationparl’utilisateur.Elles peuvent être utilisées immédiatement avecun minimum -
voire aucune - configuration,et se mettent à jour dynamiquement.
• De parleur nature online, les Web App permettent également une plus grande interactivité. La navigationvers
des sites internet tiers depuis l’applicationest possible et permet de proposer à l’utilisateur une expérience
globale et continue.
• Il est également possible d’intégrerau sein de l’applicationdes contenus en provenance de sources externes,
afin d’enrichirl’expérience : images,vidéos,tweets, newsfeed…
• Les Web App peuvent permettre à leurs utilisateurs de communiquer et d'interagir directemententre eux :
messagerie, tchat,appels en visio… ces moyens de communication peuvent s’intégrer à une applicationweb
pourpermettre les échanges entre utilisateurs.Ainsi,ces derniers peuvent par exemple travailler en
collaboration ou encore demander et obtenirde l’aide en direct.

solutiondigitale
web
digitales
Progressive Web App (PWA)
112
Définition
Une progressive web app (ou PWA) est une applicationweb développée avecdes langages de développement
web (HTML5, CSS3, JavaScript…)et exécutée depuis un navigateur web.Son fonctionnement se veut très proche
de ce que pourrait proposer une applicationclassique (téléchargée depuis un store).
Caractéristiques
• Il s’agit d’un site web optimisé pourmobile et pensé pour ressembler à une applicationnative.
• Elles s’exécutent depuis un navigateurweb et les fonctionnalitéschargées sont gardées en cache pour une
utilisationfuture hors-ligne sans passer parun store d’applications.
• Elles utilisent des Services Workers – des scripts qui fonctionnent en parallèle de la page web – pour exploiter
certaines fonctionnalités de l’appareil(GPS, caméra,…).
• Ce nouveau standardweb est porté par Google.

solutiondigitale
web
digitales
113
Avantages
• Le déploiement instantané: au même titre qu’un site web (puisque la PWA est un site web), il suffit de faire la
mise à joursur le serveur pourdéployer la PWA. Par ailleurs,les PWA peuvent être ajoutées au PlayStoreen
version beta (et doncvisibles et trouvables via une recherche).
• L’accès rapide : À l’instard’unsite web standard,il n’ya pas besoin de télécharger toute l’application.Elle peut
aussi être ajoutée sur la home (même si la manipulation n’est pas aussi facile que pour une application native)
pour être accessible comme une applicationnative.Enfin elle est consultable hors-ligne.
• Le référencement : Les PWA étant des sites web, elles profitent doncdes mêmes possibilités de
référencement surles moteurs de recherches (et il paraitrait que Google mettrait même en avant les sites
PWA).
• L’effet mobile-like : L’applicationtend à ressembler le plus possible à une applicationnative:icône sur la
home, design,fonctionnalités, etc

solutiondigitale
web
digitales
114
Inconvénients
• Des fonctionnalités limitées: L’accès auxfonctionnalités du device reste limité à un sous-ensemble. Par exemple, des
fonctionnalités ne sont pas disponibles, comme le Bluetooth, les push sur iOS, les fonctionnalités innovantes
(Machine Learning, Réalité Augmentée), les fonctionnalités background, les extensions (Siri, widget, quick action,
watch, etc.)
• Un support incomplet : Les PWA sont généralement utilisables sur la plupart des navigateurs modernes, mais pas les
anciennes versions. Deplus, les fonctionnalités disponibles ne sont pas les mêmes d’un navigateur à un autre : les
fonctionnalités serontplus larges sur Chrome, par exemple (la technologie étant portée par Google).
• Imitationde l’UX et UI : Lors du développement d’uneapplication native, les guidelines données sont précises et
cadrentl’interface pour une lecture mobile optimisée. Le web a un champ des possibles plus largeet moins encadré,
cela engendre pour les PWA des possibles erreurs, commeune ergonomie pas toujours adaptéeau mobile (boutons
trop petit, rendu différentselon le téléphone…).
• Les technologies Web: L’application est développée en Javascript, quiapporte ses avantages mais aussises
inconvénients. Le langage Javascriptétantplus permissif et moins robuste, il peut être une sourcede bugs.
L’écosystèmeJavaScriptestégalement très volatile et requiert une fortemaintenance pour garder l’utilisation de
librairies fonctionnelles et maintenues.
• L’absence de l’AppStore : Côté Apple, il sera donc impossible de faireréférencer sa PWA dans l’App Store. En effet, la
marqueà la pomme a une politique très stricte : les PWA ne sontpas des applications mais des sites web, donc n’ont
rien à faire sur l’App Store.

solutiondigitale
web
digitales
115

solutiondigitale
web
digitales
WebAR
116
Définition
La WebAR (parfois appelé en Français la RA Web) désigne la technologie qui consisteà proposer des expériences
de Réalité Augmentée directement sur le web (en chargementdirect), depuis un navigateur internet, sans quel’utilisateur
ait besoin de passer par une application mobile ou tablette. Lors dela WebAR sont téléchargés. Ilfaut distinguer 2 types
de WebAR, la WebAR Native et la WebAR pré-installée.
WebAR pré-installée
La WebAR pré-installée utilise des kits de développement déjà présents sur les smartphones ou les tablettes des
utilisateurs. Ces kits de développement sontprésents par défaut sur tous les nouveauxiPhone et iPad, avecARKit.
ConcernantAndroid, ce sontles constructeurs quidécident ou non d’intégrer le kit de Réalité Augmentée Android
(ARCore) dans leurs tablettes ou mobiles.
Le principal avantagede la WebAR pré-installée est la rapidité de chargementde l’expérience, la solution de Réalité
Augmentée étant déjà installé sur le supportmobile de l’utilisateur, ce dernier n’a qu’à charger le modèle 3D en temps
réel pour pouvoir l’afficher dans son environnement.

solutiondigitale
web
digitales
WebAR
117
WebAR native
La WebAR native ne nécessite pas de WebAR pré-installée, mais va charger tout le code nécessaire à la création
d’expérience de Réalité Augmentée directement lors du chargement de la page web. C’estdonc une solution plus lourde
que la WebAR pré-installée, puisqu’en plus du chargementdu modèle 3D en temps réel, le supportmobile va devoir
télécharger tout le code sourcenécéssaire à la création d’unetelle expérience.

solutiondigitale
web
digitales
WebAR
118

COMPOSITION D’UNE
SOLUTION DIGITALE
119
PARTIE 4

CHAPITRE 1
120
DÉVELOPPER UNE
ATTITUDE TOURNÉE VERS
L’UTILISATEUR
2 - Techniques de compréhension des utilisateurs
1 - Appréhensionsdesméthodes d’UX Design

solutiondigitale
web
digitales
UX Design
121
Définitions
UX Design= User Experience Design ou Design de l’Expérience Utilisateur
Ils’agitde la conception de l’utilisation de quelque chose, en fonction de l’expérience et des besoins de quelqu’un.
Objectif : Aider l’utilisateur à atteindre son objectif et à lui faireadopter le système
En moyenne, les feedbacks de 5 utilisateurs peuvent régler 85% des problèmes.

solutiondigitale
web
digitales
UX Design
122

solutiondigitale
web
digitales
Méthodologies
123
Recherche UX
La recherche UX analyse votreproduitou service sous 7 aspects:
Utilité : votreexpérience répond-elle aux besoins des utilisateurs ?
Utilisabilité : commentvotreexpérience est-elle priseen main par les utilisateurs ?
Accessibilité: est-elle accessible à tous les types d'utilisateurs ?
Désirabilité: votreexpérience est-elle attractive pour les utilisateurs ?
Crédibilité : donne-t-elle confiance aux utilisateurs ?
Adoption: votreexpérience donne-t-elle envie aux utilisateurs de souscrire/ utiliser votre service/ produit?
Investissement : votreexpérience est-elle pérenne pour les utilisateurs ?

solutiondigitale
web
digitales
Méthodologies
124
5 grandes étapes
1. Recherche
2. Définition
3. Idéation
4. Conception
5. Design d’interface

solutiondigitale
web
digitales
Méthodologies
125
Tri par cartes
En UX, le tri par cartes ou tri de cartes (Card sorting en anglais) est une des méthodes utilisées pour construire
une architecture de l’information en impliquant les utilisateurs finaux.
L’architecturede l’information est une problématique essentielle lorsquel’on débute la conception ou la refonte d’un site
web ou d’uneapplication. Elle a pour but de catégoriser le contenu d’un produit selon une structurecohérente,
compréhensible rapidement par les utilisateurs finaux.
Cette méthode est facile à mettre en place, peu coûteuse, bien comprisepar les utilisateurs et leur permetde s’exprimer
sur les regroupements des informations.

solutiondigitale
web
digitales
Méthodologies
126
Méthodes quantitatives
L’UX Design est un domaine où les méthodes d’analysequantitative peuventvenir en complément des méthodes
qualitatives. Nous distinguons les mesures de l’UX (mesurer spécifiquement l’expérience utilisateur) et les mesures en
UX (utiliser les méthodes quantitatives dans le domaine de l’UX).
Plusieurs outils de mesure existent selon les critères de l’Expérience Utilisateur (UX) que l’on souhaite mesurer
(utilisabilité, utilité, émotions, confiance, esthétique, etc.) et le type de dispositif concerné.
Réaliser une étude quantitative nécessite des connaissances en statistiques et en méthode scientifique (protocole,
échantillonnage, représentativité, biais, validité des outils de mesure, interprétation, etc.).
Les méthodes quantitatives adressentle « Combien ». Elles permettent de décrire des phénomènes observés sur des
échantillons et d’estimer ce qu’il se passera pour les autres utilisateurs.
On retrouveparmis les études quantitatives les plus utilisées le sondage, L'A/B test ou test multi-varié et la carte de
chaleur (heatmap).

solutiondigitale
web
digitales
Méthodologies
127
Méthodes qualitatives
La recherche UX qualitative est l'étude des comportements humains se concentrantsur le contexte et l’observation
détaillée plutôt que des données statistiques.
Exemples de méthodologies qualitatives : l'entretien individuel, le focus group et le test utilisateurs à distance
Ateliers de co-conception
Un atelier de co-conception, ou co-création, est la mise en œuvred’une méthode où l’utilisateur final d’un site web ou
d’uneapplication collabore de manière active à la conception.La conception participative encouragela créativité de
l’équipe et l’innovation.
Cette méthode permet, à travers denombreuxateliers, de faire travailler ensemble les utilisateurs et les UX designers.
Ces ateliers UX de co-conception peuvent porter sur l’analysedu besoin et donc la définition des fonctionnalités, ou la
conception de maquettes.
Cette collaboration entre utilisateurs et UX designers permet de comprendreles attentes des utilisateurs et favorise
une meilleure adoption des interfaces conçues.

solutiondigitale
web
digitales
Méthodologies
128
La conception participative présente 3 qualités principales :
• Immersion
• Apprentissage mutuel
• Idéation
• Manipulationd’objet
MVP
La MVP (Minimum Viable Product) estun rocessus dedéveloppement rapided'un produit fini et fonctionnel aux
caractéristiques minimales.

CHAPITRE 1
129
DÉVELOPPER UNE
ATTITUDE TOURNÉE VERS
L’UTILISATEUR
2 - Techniques de compréhension des utilisateurs
1 - Appréhensions des méthodes d’UXDesign

solutiondigitale
web
digitales
Ateliers
130
Persona
Objectif : Avoir de l’empathie pour
l’utilisateur type, ce qui permet de
le comprendreet de découvrir ses
motivations et ses attentes.

solutiondigitale
web
digitales
Ateliers
131
User Stories
Phraseà déterminer : L’utilisateur est ……………. , il a besoin de ……………. en raison de ……………. .

solutiondigitale
web
digitales
Ateliers
132
Scénarios d’usage

solutiondigitale
web
digitales
Ateliers
133
Story mapping

solutiondigitale
web
digitales
Ateliers
134
Parcoursutlisateurs

CHAPITRE 2
135
2 - Fonctionnement d’unprojet basé sur les utilisateurs
1 - Notions sur les types d’utilisateurs
COMPRENDRE LA
NOTION D’UTILISATEUR
DANS UN PROJET

solutiondigitale
web
digitales
Déterminer les types d’utilisateurs
136
Persona
Le persona en UX design est un portraitrobot représentatif d'une cible prioritaire de la solution digitales. Ils sontdes
archétypes ; des modèles d'utilisateurs types.
Dans le cadred’un projet peu documenté, l’approchepar persona est efficace pourfaire émerger les attentes et les
besoins potentiels des utilisateurs finaux.
C'est un travailimportant pour aider les équipes de conception. On se situe ici à mi-chemin entre le design stratégiqueet
l'ergonomie. On est donc au coeur de l'UX design.
Pour commencer, c'est l'étude des usages et/ou l'analysedes besoins des utilisateurs qui permettrontde recueillir les
informations nécessaires à la création des profils types d'utilisateurs. Avantde créer des fiches personas, ilfaut identifier
les profils types d'utilisateurs de la solution.
Ils'agit de définir les types de profil à même d’utiliser les services proposés par la solution, mais également d'explorerles
comportements et les stratégies potentielles des usagers. L’approchepar persona estune technique permettant d'assurer
la prise en compte de l’expérience utilisateur dans la conception d’un supportdigital.
Un persona est un modèle type d'utilisateur, ce qui présupposeun travaild'enquête terrain pour réussir à identifier les
caractéristiques de chaque grandetypologie d'usager.
Cette approche, lorsqu'elle se base sur une phased'analyse et sur des données réelles, permet d'aider les équipes de
conception à bien comprendrel'audience du dispositif digital. Une bonne fiche persona permet d’unepart de filtrer et de
synthétiser les données utilisateurs et d’autrepart de fédérer tous les acteurs du projetautour de profils clés.

solutiondigitale
web
digitales
137
Pour que les personas soientutiles, il est préférabled'associer un scenario de visite à chacun d'entre eux. Ilfaudra se
baser sur les entretiens et sur les données réelles pour définir les scénarios de visite. Par exemple :
Je viens sur le site pour réaliser un achat.
Je suis sur le site pour préparer un achat.
Je veuxobtenir un devis.
Je consultele dispositif pour signaler un dysfonctionnement.
Je me connecte pour obtenir du support.
Je ne vais pas sur le site parceque...
EtapesPersona
1. Phased'analyse du besoin utilisateur et enquête terrain
2. Entretien de cadragevisantà faire émerger les profils les plus porteurs
3. Analysede la documentation à disposition
4. Validation des profils à modéliser
5. Création des fiches détaillées pour chaque persona

solutiondigitale
web
digitales
138
Les questions à se poser sur les utilisateurs
• Sont-ils représentatifs de la cible de mon service ou produit? (sociologiquement, économiquement,
géographiquement, en terme d’accessibilité, de tranche d’âge…)
• Sont-ils neutres par rapportà ma marque, ou déjà engagés dans un rapportde fidélité ou au contraired’hostilité?
(Apple versus Windows par exemple…)
• Quelle motivation auront-ils à faire ce test ? (rémunération, récompense, curiosité, expertise…)
• Sont-ils utilisateurs de produits ou services concurrents, ouvont-ils découvrir un nouvelusage ?
• Le panel est-il assez large ou étendu pour permettre l’inférence ? (extrapolation à un ensemble de population plus
global)

CHAPITRE 2
139
COMPRENDRE LA
NOTION D’UTILISATEUR
DANS UN PROJET
2 - Fonctionnement d’un projet basé sur les utilisateurs
1 - Notions surles types d’utilisateurs

solutiondigitale
web
digitales
Projet
140

solutiondigitale
web
digitales
Projet
141

solutiondigitale
web
digitales
Projet
142

m102-resume-theorique-6156fa4cb3b91 (1).pdf

Recommandé

Recommandé

Contenu connexe

Similaire à m102-resume-theorique-6156fa4cb3b91 (1).pdf

Similaire à m102-resume-theorique-6156fa4cb3b91 (1).pdf (20)

Dernier

Dernier (20)

m102-resume-theorique-6156fa4cb3b91 (1).pdf