Téléchargé parIkramKhaydouche
PDF, PPTX139 vues

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

Ce document traite des enjeux et des concepts fondamentaux du digital, en passant par l'histoire et l'évolution du web, ainsi que les différentes utilisations et solutions digitales dans la vie quotidienne. Il couvre également les techniques de conception de sites web, la maitrise des règles du web, et l'importance de l'expérience utilisateur dans les projets digitaux. Enfin, des méthodes d'évaluation et des activités d'échange entre apprenants sont proposées pour mieux comprendre l'impact du digital dans notre quotidien.

Intégrer la présentation

Télécharger en tant que PDF, PPTX
1 / 142
2 / 142
Plus lue
3 / 142
4 / 142
Plus lue
5 / 142
6 / 142
7 / 142
8 / 142
9 / 142
10 / 142
11 / 142
12 / 142
13 / 142
14 / 142
15 / 142
16 / 142
Plus lue
17 / 142
18 / 142
19 / 142
20 / 142
21 / 142
22 / 142
23 / 142
24 / 142
25 / 142
26 / 142
27 / 142
28 / 142
29 / 142
30 / 142
31 / 142
32 / 142
33 / 142
34 / 142
35 / 142
36 / 142
37 / 142
38 / 142
39 / 142
40 / 142
41 / 142
42 / 142
43 / 142
44 / 142
45 / 142
46 / 142
47 / 142
48 / 142
49 / 142
50 / 142
51 / 142
52 / 142
53 / 142
54 / 142
55 / 142
56 / 142
57 / 142
58 / 142
59 / 142
60 / 142
61 / 142
62 / 142
63 / 142
64 / 142
65 / 142
66 / 142
67 / 142
68 / 142
69 / 142
70 / 142
71 / 142
72 / 142
73 / 142
74 / 142
75 / 142
76 / 142
77 / 142
78 / 142
79 / 142
80 / 142
81 / 142
82 / 142
83 / 142
84 / 142
85 / 142
86 / 142
87 / 142
88 / 142
89 / 142
90 / 142
91 / 142
92 / 142
93 / 142
94 / 142
95 / 142
96 / 142
97 / 142
98 / 142
99 / 142
100 / 142
101 / 142
102 / 142
103 / 142
104 / 142
105 / 142
106 / 142
107 / 142
108 / 142
109 / 142
110 / 142
111 / 142
112 / 142
113 / 142
114 / 142
115 / 142
116 / 142
117 / 142
118 / 142
119 / 142
120 / 142
121 / 142
122 / 142
123 / 142
124 / 142
125 / 142
126 / 142
127 / 142
128 / 142
129 / 142
130 / 142
131 / 142
132 / 142
133 / 142
134 / 142
135 / 142
136 / 142
137 / 142
138 / 142
139 / 142
140 / 142
141 / 142
142 / 142
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

PDF
2 focus web
parABES
 
PDF
Culture Web: Histoire socio-technique du web
parClaire WIBAILLE
 
PPTX
Séminaire de formation : Iinternet et web par Wilfried Adingra
parWilfried Adingra
 
PDF
Web1.0.web2.0 web3.0 et web invisible
partassadit ALLOUNE
 
PPTX
Utilisation de technologie web
parHaceneAYADI1
 
PDF
Exister sur le Web : pourquoi, comment, les risques, les atouts
parEmilie Marquois
 
PPT
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
pari-breed et associés
 
PPT
Les Tendances Du Web2009
parFrançois GOUBE
 
2 focus web
parABES
 
Culture Web: Histoire socio-technique du web
parClaire WIBAILLE
 
Séminaire de formation : Iinternet et web par Wilfried Adingra
parWilfried Adingra
 
Web1.0.web2.0 web3.0 et web invisible
partassadit ALLOUNE
 
Utilisation de technologie web
parHaceneAYADI1
 
Exister sur le Web : pourquoi, comment, les risques, les atouts
parEmilie Marquois
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
pari-breed et associés
 
Les Tendances Du Web2009
parFrançois GOUBE
 

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

PPTX
Internet - Présentation
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PDF
internet-web marketing digital 2 pages .pdf
parzeineb bousnina
 
PDF
CM_Web comprendre les base du web .pdf
parCheickBDiallo1
 
PDF
Architecture de l’Information Remise à niveau en informatique
parCheickBDiallo1
 
PPTX
Cours technologie web débutant CREA Digital 2 - 10/2013
parPierre Ammeloot
 
PDF
Carnet Métiers du WEB
parD.I.C.S.S. Inc
 
PPTX
tic_chapitre_02 une autre version de cours vhdl.pptx
parAlaaMohammedi
 
PDF
Présentation et historique
parChris Gaillard
 
PDF
2015 01 08_presentation-culture-web
parkattass mourad
 
PDF
Internet initiation
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PDF
Formation Culture numerique - Focus sur le Web
parABES
 
PPT
SAPIENS2009 - Module 1 Part 1
parChristophe RUDELLE
 
PPTX
Le web aujourd'hui
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PPT
FAFMRQ groupe 2 - Formation sur les enjeux que soulèvent les pratiques collab...
parPraTIC / projet de l'UQAM
 
PPT
Histoire et anthropologie de l'internet. 2ème partie
parAlexandre Serres
 
PPT
Mon Intro Au Web 20
paranne.wiener
 
PPT
Internet et le site de la FCGA - 1998
parXavier LAIR
 
PPT
Les Tendances Du Web
parFrançois GOUBE
 
PDF
INTRODUCTION8PDF.pdf
parbenfifiaymen36
 
PPT
Le Web aujourd'hui
parStéphane Bazan
 
Internet - Présentation
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
internet-web marketing digital 2 pages .pdf
parzeineb bousnina
 
CM_Web comprendre les base du web .pdf
parCheickBDiallo1
 
Architecture de l’Information Remise à niveau en informatique
parCheickBDiallo1
 
Cours technologie web débutant CREA Digital 2 - 10/2013
parPierre Ammeloot
 
Carnet Métiers du WEB
parD.I.C.S.S. Inc
 
tic_chapitre_02 une autre version de cours vhdl.pptx
parAlaaMohammedi
 
Présentation et historique
parChris Gaillard
 
2015 01 08_presentation-culture-web
parkattass mourad
 
Internet initiation
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
Formation Culture numerique - Focus sur le Web
parABES
 
SAPIENS2009 - Module 1 Part 1
parChristophe RUDELLE
 
Le web aujourd'hui
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
FAFMRQ groupe 2 - Formation sur les enjeux que soulèvent les pratiques collab...
parPraTIC / projet de l'UQAM
 
Histoire et anthropologie de l'internet. 2ème partie
parAlexandre Serres
 
Mon Intro Au Web 20
paranne.wiener
 
Internet et le site de la FCGA - 1998
parXavier LAIR
 
Les Tendances Du Web
parFrançois GOUBE
 
INTRODUCTION8PDF.pdf
parbenfifiaymen36
 
Le Web aujourd'hui
parStéphane Bazan
 

Dernier

PDF
L'ère du savoir augmenté : comment l'IA redéfinit la méthodologie et l'éthiqu...
parRadouane Mrabet
 
PPTX
ن نموذج درس Cours-Info-appliquée-S6_2020.pptx
parServicedelaStatistiq
 
PDF
CoursUML-2025-9-22. ibn tofail kenitra maroc
parkhaoulabr33
 
PPTX
Belladone.pptx film dramatique français.
parTxaruka
 
PDF
🎓 Le Secret des Profs Captivants - 💡 Enseigner, c’est parler - Introduction_v3
parJulien Doureve
 
PPTX
Travaux pratiques cybersécurité : IDS+ Nmap
parhassaadaoui
 
PDF
traitement de valeurs manquantes et aberrantes avec R.pdf
parBERROUANE2
 
PDF
La Philosophie Africaine de la Période Pharaonique.pdf
parSoumanaDobiAli
 
PPTX
Sainte Geneviève, vierge, patronne de Paris.pptx
parMartin M Flynn
 
PPTX
Prise en charge Cancer de la glande thyroïde.pptx
parSenghongChhai
 
PDF
Introduction à Pandas : Manipulation et Analyse de Données en Python pour la ...
parYoussouf EL ALLIOUI
 
PDF
Cours-Topo-Urbanisme-Partie-TOPO.pdf Cours-Topo-Urbanisme-Partie-TOPO
parAbdouBoua1
 
PDF
Memoire de fin d'étude en Master2 Relations internationales.pdf
parnioumantas5
 
PDF
Memoire de fin d'étude en Master2 Relations internationales.pdf
parnioumantas5
 
PDF
Concept-de-liquidite pour trading efficace.pdf
parjeanfabien2025
 
L'ère du savoir augmenté : comment l'IA redéfinit la méthodologie et l'éthiqu...
parRadouane Mrabet
 
ن نموذج درس Cours-Info-appliquée-S6_2020.pptx
parServicedelaStatistiq
 
CoursUML-2025-9-22. ibn tofail kenitra maroc
parkhaoulabr33
 
Belladone.pptx film dramatique français.
parTxaruka
 
🎓 Le Secret des Profs Captivants - 💡 Enseigner, c’est parler - Introduction_v3
parJulien Doureve
 
Travaux pratiques cybersécurité : IDS+ Nmap
parhassaadaoui
 
traitement de valeurs manquantes et aberrantes avec R.pdf
parBERROUANE2
 
La Philosophie Africaine de la Période Pharaonique.pdf
parSoumanaDobiAli
 
Sainte Geneviève, vierge, patronne de Paris.pptx
parMartin M Flynn
 
Prise en charge Cancer de la glande thyroïde.pptx
parSenghongChhai
 
Introduction à Pandas : Manipulation et Analyse de Données en Python pour la ...
parYoussouf EL ALLIOUI
 
Cours-Topo-Urbanisme-Partie-TOPO.pdf Cours-Topo-Urbanisme-Partie-TOPO
parAbdouBoua1
 
Memoire de fin d'étude en Master2 Relations internationales.pdf
parnioumantas5
 
Memoire de fin d'étude en Master2 Relations internationales.pdf
parnioumantas5
 
Concept-de-liquidite pour trading efficace.pdf
parjeanfabien2025
 

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

  • 1.
    IDENTIFIER LES ENJEUX DIGITAUXCHEZ L’UTILISATEUR DIGITALDESIGN
  • 2.
    OBJECTIF 2 A l’issue dece 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 etles é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
  • 4.
  • 5.
    CHAPITRE 1 5 IDENTIFIER LES UTILISATIONSDU WEB 1 - Contextehistorique,lexique et vocabulaire utilisés
  • 6.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales HAUSSE DU TEMPS PASSÉ SUR INTERNET
  • 10.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Introduction
  • 14.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : Desponsive Design
  • 27.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : Desponsive Design
  • 28.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : adaptative design
  • 32.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Définition : adaptative design
  • 33.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Mobile First et applications mobiles
  • 37.
    CHAPITRE 3 37 IDENTIFIER L’ÉCOSYSTÈME DUWEB 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites vitrine 38 Produits / services
  • 39.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites e-commerce 39
  • 40.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites Institutionnels 40
  • 41.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites communautaires 41
  • 42.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Intranets 42
  • 43.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Sites immersifs 43
  • 44.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Web app & PWA 44
  • 45.
    Connaitre l’histoire duwebAnalyserla 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 DUWEB 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les métiers 47 • Administratif • Commercial • Technique • Editorial • Graphique
  • 48.
    Connaitre l’histoire duwebAnalyserla 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 - Notionsde 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 LESTERMES 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
  • 58.
  • 59.
    CHAPITRE 1 59 DISTINGUER LESANCIENS 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 LESANCIENS 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 66
  • 67.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 67
  • 68.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 68
  • 69.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 69
  • 70.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Evolution à travers le temps 70
  • 71.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Eléments de contenu 72
  • 73.
    Connaitre l’histoire duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Eléments de contenu 73
  • 74.
    CHAPITRE 1 74 DISTINGUER LESANCIENS 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 duwebAnalyserla compositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Contenu textuel, visuel et interactif 75
  • 76.
    CHAPITRE 1 76 DISTINGUER LESANCIENS 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 duwebAnalyserla 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ÉRENTESPARTIES D’UN SITE 1 – Composition de la structuration des pages par zone
  • 79.
    Connaitre l’histoire duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 duwebAnalyserla 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 DUWEB 84 PARTIE 3
  • 85.
    CHAPITRE 1 85 COMPRENDRE LA CONSTRUCTIOND’UN SITE 1 - Langages, bibliothèqueet frameworks
  • 86.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Composition d’un site web 86
  • 87.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : HTML 90 Début Titre Listes
  • 91.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : HTML 91 Image d’un dossier Image d’internet
  • 92.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : CSS 93 HTML CSS
  • 94.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Langages : CSS 94 HTML CSS
  • 95.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UX 101
  • 102.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UI 102
  • 103.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Designers : UX vs UI 103
  • 104.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Les Développeurs 105
  • 106.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Web App 110
  • 111.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Progressive Web App (PWA) 115
  • 116.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales WebAR 118
  • 119.
  • 120.
    CHAPITRE 1 120 DÉVELOPPER UNE ATTITUDETOURNÉE VERS L’UTILISATEUR 2 - Techniques de compréhension des utilisateurs 1 - Appréhensionsdesméthodes d’UX Design
  • 121.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales UX Design 122
  • 123.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 ATTITUDETOURNÉ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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 132 Scénarios d’usage
  • 133.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Ateliers 133 Story mapping
  • 134.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 Analyserlacompositiond’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 NOTIOND’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 Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 140
  • 141.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 141
  • 142.
    Analyserla composition d’une solutiondigitale Analyserlacompositiond’une solutiondigitale Maitriser lesrèglesdu web Utilisateursetsolutions digitales Projet 142