SlideShare une entreprise Scribd logo
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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 %)
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
HAUSSE DU TEMPS PASSÉ SUR INTERNET
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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é
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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 :
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Introduction
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Définition : Desponsive Design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Définition : Desponsive Design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Définition : Desponsive Design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Définition : adaptative design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Définition : adaptative design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Définition : adaptative design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Définition : adaptative design
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Définition : adaptative design
CHAPITRE 2
35
CONNAITRE LES ÉVOLUTIONS
DE SOLUTIONS DIGITALES
UTILISANT LES TECHNOLOGIES
DU WEB
1 – Adaptativeet responsive
2 – Mobile First et applications mobiles
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Sites vitrine
38
Produits / services
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Sites e-commerce
39
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Sites Institutionnels
40
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Sites communautaires
41
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Intranets
42
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Sites immersifs
43
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Web app & PWA
44
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Les métiers
47
• Administratif
• Commercial
• Technique
• Editorial
• Graphique
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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 :
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Règles & normes W3C
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Règles & normes W3C
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Règles & normes W3C
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)
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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é
3 - Contenu textuel,visuel et interactif
4 - Architecture organisationnelle des pages
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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)
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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…)
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
DISTINGUER LES ANCIENS
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’un site classique
1 - Définition des principes d’accessibilité
3 - Contenu textuel,visuel et interactif
4 - Architecture organisationnelle des pages
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Evolution à travers le temps
66
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Evolution à travers le temps
67
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Evolution à travers le temps
68
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Evolution à travers le temps
69
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Evolution à travers le temps
70
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Eléments de contenu
72
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Eléments de contenu
73
CHAPITRE 1
74
DISTINGUER LES ANCIENS
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’unsite classique
1 - Définition des principes d’accessibilité
3 - Contenu textuel, visuel et interactif
4 - Architecture organisationnelle des pages
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Contenu textuel, visuel et interactif
75
CHAPITRE 1
76
DISTINGUER LES ANCIENS
CODES DE
CONSTRUCTION D’UN
SITE DES NOUVEAUX
2 - Règles de composition d’unsite classique
1 - Définition des principes d’accessibilité
3 - Contenu textuel, visuel et interactif
4 - Architecture organisationnelle des pages
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Connaitre l’histoire duweb Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Composition d’un site web
86
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : HTML
89
HyperText Markup Language
Informationsinvisible mais importantpour l’affichage de la page
Architecturedu contenu de la page : texte,image, boutons,liens
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : HTML
90
Début Titre Listes
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : HTML
91
Image d’un dossier Image d’internet
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : CSS
92
HTML CSS
Architecture de la page Design de la page
(taille, couleur, etc)
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : CSS
93
HTML CSS
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Langages : CSS
94
HTML CSS
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Les Designers : UX
101
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Les Designers : UI
102
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Les Designers : UX vs UI
103
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Les Développeurs
105
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Web App
110
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Progressive Web App (PWA)
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Progressive Web App (PWA)
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Progressive Web App (PWA)
115
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
UX Design
122
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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 ?
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Méthodologies
124
5 grandes étapes
1. Recherche
2. Définition
3. Idéation
4. Conception
5. Design d’interface
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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).
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Ateliers
131
User Stories
Phraseà déterminer : L’utilisateur est ……………. , il a besoin de ……………. en raison de ……………. .
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Ateliers
132
Scénarios d’usage
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Ateliers
133
Story mapping
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
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.
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Déterminer les types d’utilisateurs
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Déterminer les types d’utilisateurs
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
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Projet
140
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Projet
141
Analyserla composition
d’une solutiondigitale
Analyserla compositiond’une
solutiondigitale
Maitriser lesrèglesdu
web
Utilisateursetsolutions
digitales
Projet
142

Contenu connexe

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

Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
i-breed et associés
 
2 focus web
2 focus web2 focus web
2 focus webABES
 
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
PraTIC / projet de l'UQAM
 
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
PraTIC / projet de l'UQAM
 
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
PraTIC / projet de l'UQAM
 
Les Tice pour les Nuls
Les Tice pour les NulsLes Tice pour les Nuls
Les Tice pour les Nuls
Elisabeth Buffard
 
Dispositifs connectés médicaux
Dispositifs connectés médicauxDispositifs connectés médicaux
Dispositifs connectés médicaux
Antoine SEILLES
 
Abf normandie formation 1 les outils de la communication
Abf normandie formation 1 les outils de la communicationAbf normandie formation 1 les outils de la communication
Abf normandie formation 1 les outils de la communication
Sophie C.
 
Outils communication du WEB
Outils communication du WEBOutils communication du WEB
Outils communication du WEB
Triangles Formations
 
Les reseaux sociaux en entreprise : l'Artisanat
Les reseaux sociaux en entreprise : l'ArtisanatLes reseaux sociaux en entreprise : l'Artisanat
Les reseaux sociaux en entreprise : l'Artisanat
Xavier Masclaux
 
Initiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outilsInitiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outils
URFIST de Paris
 
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
Nadia Berg
 
2015 01 08_presentation-culture-web
2015 01 08_presentation-culture-web2015 01 08_presentation-culture-web
2015 01 08_presentation-culture-web
kattass mourad
 
Veille Aec Arpel 26032009
Veille Aec Arpel 26032009Veille Aec Arpel 26032009
Veille Aec Arpel 26032009
UNITEC
 
Les Reseaux sociaux
Les Reseaux sociauxLes Reseaux sociaux
Réseaux Sociaux Numérique et information
Réseaux Sociaux Numérique et informationRéseaux Sociaux Numérique et information
Réseaux Sociaux Numérique et information
wallace04
 
Le web 2.0 bientot en entreprise?
Le web 2.0 bientot en entreprise?Le web 2.0 bientot en entreprise?
Le web 2.0 bientot en entreprise?
Hervé Kabla
 
Socle Commun de la médiation numérique en bibliothèque
Socle Commun de la médiation numérique en bibliothèqueSocle Commun de la médiation numérique en bibliothèque
Socle Commun de la médiation numérique en bibliothèque
Bruno Méraut
 
Future of internet
Future of internetFuture of internet

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

Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
2 focus web
2 focus web2 focus web
2 focus web
 
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
 
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
 
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
 
Les Tice pour les Nuls
Les Tice pour les NulsLes Tice pour les Nuls
Les Tice pour les Nuls
 
Dispositifs connectés médicaux
Dispositifs connectés médicauxDispositifs connectés médicaux
Dispositifs connectés médicaux
 
Abf normandie formation 1 les outils de la communication
Abf normandie formation 1 les outils de la communicationAbf normandie formation 1 les outils de la communication
Abf normandie formation 1 les outils de la communication
 
Outils communication du WEB
Outils communication du WEBOutils communication du WEB
Outils communication du WEB
 
Les reseaux sociaux en entreprise : l'Artisanat
Les reseaux sociaux en entreprise : l'ArtisanatLes reseaux sociaux en entreprise : l'Artisanat
Les reseaux sociaux en entreprise : l'Artisanat
 
Initiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outilsInitiation au web 2.0 : principes et présentation des différents outils
Initiation au web 2.0 : principes et présentation des différents outils
 
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
 
2015 01 08_presentation-culture-web
2015 01 08_presentation-culture-web2015 01 08_presentation-culture-web
2015 01 08_presentation-culture-web
 
Veille Aec Arpel 26032009
Veille Aec Arpel 26032009Veille Aec Arpel 26032009
Veille Aec Arpel 26032009
 
Les Reseaux sociaux
Les Reseaux sociauxLes Reseaux sociaux
Les Reseaux sociaux
 
Les réseaux sociaux.gil
Les réseaux sociaux.gilLes réseaux sociaux.gil
Les réseaux sociaux.gil
 
Réseaux Sociaux Numérique et information
Réseaux Sociaux Numérique et informationRéseaux Sociaux Numérique et information
Réseaux Sociaux Numérique et information
 
Le web 2.0 bientot en entreprise?
Le web 2.0 bientot en entreprise?Le web 2.0 bientot en entreprise?
Le web 2.0 bientot en entreprise?
 
Socle Commun de la médiation numérique en bibliothèque
Socle Commun de la médiation numérique en bibliothèqueSocle Commun de la médiation numérique en bibliothèque
Socle Commun de la médiation numérique en bibliothèque
 
Future of internet
Future of internetFuture of internet
Future of internet
 

Dernier

Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseConseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Oscar Smith
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Iris et les hommes.pptx
Iris      et         les      hommes.pptxIris      et         les      hommes.pptx
Iris et les hommes.pptx
Txaruka
 
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
SYLLABUS DU COURS  MARKETING DTS 1-2.pdfSYLLABUS DU COURS  MARKETING DTS 1-2.pdf
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
Moukagni Evrard
 
Edito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdfEdito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdf
WarlockeTamagafk
 
Système de gestion des fichiers de amine
Système de gestion des fichiers de amineSystème de gestion des fichiers de amine
Système de gestion des fichiers de amine
sewawillis
 
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
mrelmejri
 
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupeCours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Yuma91
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
Friends of African Village Libraries
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
Txaruka
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
cristionobedi
 
Mémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et auditMémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et audit
MelDjobo
 

Dernier (12)

Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseConseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
 
Iris et les hommes.pptx
Iris      et         les      hommes.pptxIris      et         les      hommes.pptx
Iris et les hommes.pptx
 
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
SYLLABUS DU COURS  MARKETING DTS 1-2.pdfSYLLABUS DU COURS  MARKETING DTS 1-2.pdf
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
 
Edito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdfEdito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdf
 
Système de gestion des fichiers de amine
Système de gestion des fichiers de amineSystème de gestion des fichiers de amine
Système de gestion des fichiers de amine
 
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
 
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupeCours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
 
Mémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et auditMémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et audit
 

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

  • 1. IDENTIFIER LES ENJEUX DIGITAUX CHEZ L’UTILISATEUR DIGITALDESIGN
  • 2. 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. 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
  • 5. CHAPITRE 1 5 IDENTIFIER LES UTILISATIONS DU WEB 1 - Contextehistorique,lexique et vocabulaire utilisés
  • 6. 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
  • 7. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 %)
  • 8. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 9. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales HAUSSE DU TEMPS PASSÉ SUR INTERNET
  • 10. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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é
  • 11. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 :
  • 12. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 13. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Introduction
  • 14. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 15. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 16. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 17. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 18. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 19. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 20. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 21. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 22. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 23. CHAPITRE 2 23 CONNAITRE LES ÉVOLUTIONS DE SOLUTIONS DIGITALES UTILISANT LES TECHNOLOGIES DU WEB 1 – Adaptativeet responsive 2 – Mobile First et applications mobiles
  • 24. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 25. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 26. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : Desponsive Design
  • 27. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : Desponsive Design
  • 28. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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. Définition : Desponsive Design
  • 29. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 30. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 Définition : adaptative design
  • 31. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : adaptative design
  • 32. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : adaptative design
  • 33. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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. Définition : adaptative design
  • 34. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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. Définition : adaptative design
  • 35. CHAPITRE 2 35 CONNAITRE LES ÉVOLUTIONS DE SOLUTIONS DIGITALES UTILISANT LES TECHNOLOGIES DU WEB 1 – Adaptativeet responsive 2 – Mobile First et applications mobiles
  • 36. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Mobile First et applications mobiles
  • 37. 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
  • 38. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites vitrine 38 Produits / services
  • 39. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites e-commerce 39
  • 40. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites Institutionnels 40
  • 41. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites communautaires 41
  • 42. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Intranets 42
  • 43. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites immersifs 43
  • 44. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Web app & PWA 44
  • 45. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Natif & hybride 45 Natif • IOS : Swift, ObjectiveC • Android :Kotlin,Java Hybride • Navigateur mobile + techno Html/CSS/JS • Flutter
  • 46. 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
  • 47. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les métiers 47 • Administratif • Commercial • Technique • Editorial • Graphique
  • 48. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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. 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
  • 50. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 :
  • 51. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Règles & normes W3C 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.
  • 52. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Règles & normes W3C 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.
  • 53. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Règles & normes W3C 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)
  • 54. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 55. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 56. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 57. 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
  • 59. 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é 3 - Contenu textuel,visuel et interactif 4 - Architecture organisationnelle des pages
  • 60. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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)
  • 61. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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…)
  • 62. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 63. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 64. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 :
  • 65. CHAPITRE 1 65 DISTINGUER LES ANCIENS CODES DE CONSTRUCTION D’UN SITE DES NOUVEAUX 2 - Règles de composition d’un site classique 1 - Définition des principes d’accessibilité 3 - Contenu textuel,visuel et interactif 4 - Architecture organisationnelle des pages
  • 66. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 66
  • 67. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 67
  • 68. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 68
  • 69. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 69
  • 70. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 70
  • 71. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 72. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Eléments de contenu 72
  • 73. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Eléments de contenu 73
  • 74. CHAPITRE 1 74 DISTINGUER LES ANCIENS CODES DE CONSTRUCTION D’UN SITE DES NOUVEAUX 2 - Règles de composition d’unsite classique 1 - Définition des principes d’accessibilité 3 - Contenu textuel, visuel et interactif 4 - Architecture organisationnelle des pages
  • 75. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Contenu textuel, visuel et interactif 75
  • 76. CHAPITRE 1 76 DISTINGUER LES ANCIENS CODES DE CONSTRUCTION D’UN SITE DES NOUVEAUX 2 - Règles de composition d’unsite classique 1 - Définition des principes d’accessibilité 3 - Contenu textuel, visuel et interactif 4 - Architecture organisationnelle des pages
  • 77. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 78. CHAPITRE 2 78 RECONNAÎTRE LES DIFFÉRENTES PARTIES D’UN SITE 1 – Composition de la structuration des pages par zone
  • 79. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 80. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 81. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 82. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 83. Connaitre l’histoire duweb Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 84. MAITRISER LES RÈGLES DU WEB 84 PARTIE 3
  • 85. CHAPITRE 1 85 COMPRENDRE LA CONSTRUCTION D’UN SITE 1 - Langages, bibliothèqueet frameworks
  • 86. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Composition d’un site web 86
  • 87. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 88. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 89. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : HTML 89 HyperText Markup Language Informationsinvisible mais importantpour l’affichage de la page Architecturedu contenu de la page : texte,image, boutons,liens
  • 90. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : HTML 90 Début Titre Listes
  • 91. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : HTML 91 Image d’un dossier Image d’internet
  • 92. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : CSS 92 HTML CSS Architecture de la page Design de la page (taille, couleur, etc)
  • 93. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : CSS 93 HTML CSS
  • 94. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : CSS 94 HTML CSS
  • 95. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 96. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 97. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 98. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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
  • 99. 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
  • 100. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 101. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UX 101
  • 102. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UI 102
  • 103. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UX vs UI 103
  • 104. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 105. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Développeurs 105
  • 106. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 107. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Designers et développeurs 107
  • 108. 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
  • 109. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 110. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Web App 110
  • 111. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 112. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 113. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Progressive Web App (PWA) 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
  • 114. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Progressive Web App (PWA) 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.
  • 115. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Progressive Web App (PWA) 115
  • 116. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 117. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 118. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales WebAR 118
  • 120. 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
  • 121. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 122. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales UX Design 122
  • 123. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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 ?
  • 124. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Méthodologies 124 5 grandes étapes 1. Recherche 2. Définition 3. Idéation 4. Conception 5. Design d’interface
  • 125. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 126. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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).
  • 127. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 128. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 129. 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
  • 130. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 131. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 131 User Stories Phraseà déterminer : L’utilisateur est ……………. , il a besoin de ……………. en raison de ……………. .
  • 132. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 132 Scénarios d’usage
  • 133. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 133 Story mapping
  • 134. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 134 Parcoursutlisateurs
  • 135. 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
  • 136. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions 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.
  • 137. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Déterminer les types d’utilisateurs 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
  • 138. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Déterminer les types d’utilisateurs 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)
  • 139. 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
  • 140. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 140
  • 141. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 141
  • 142. Analyserla composition d’une solutiondigitale Analyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 142