Aujourd'hui le web est omniprésent dans la sphère professionnelle et personnelle ( loisirs, shopping...) Le comportement des internautes évolue avec la multiplication des supports connectés. Un même consommateur est plusieurs, en fonction de son device. Pour faire face à cette omniprésence du web et ces divers comportements, les entreprises doivent évoluer pour répondre au mieux aux attentes des utilisateurs. En remettant l'utilisateur au cœur de l'expérience numérique, quelles sont les évolutions techniques, ergonomiques et visuelles à mettre en place pour faire face à ces nouveaux comportements ? Animé par E-COD, Ecole de la Communication et de la Création Digitale, à Bordeaux. Orgnisé en partenariat avec le Pole Numérique de la CCIB

1.
Nouveaux comportements
des consommateurs :
quelles évolutions
techniques, ergonomiques,
visuelles mettre en place ?
Jeudi 7 avril 2016
Organisé en partenariat avec E-COD
Ecole Professionnelle de la CCI de Bordeaux
Connexion wifi salle Margaux :
*33-WorldSom(Bd9

2.
➢Etude de faisabilité : veille, aide au cahiers des charges pour site web…
➢Mise en œuvre (audit de site, stratégie de présence en ligne, gestion de la
e-reputation…)
➢Actions e-marketing (réseaux sociaux, e mailing marketing, newsletter,
Gestion de la relation client..)
➢Appui juridique (permanence d’avocats du numérique…)
➢Appui à la dématérialisation des échanges de données et à la sécurisation
➢Recherche de financements
www.bordeaux.cci.fr /polenumerique
05 56 79 5000
Le Pôle numérique : au service de la Transformation numérique des
entreprises
Nos conseillers vous accompagnent tout au long de votre projet

3. Evolution du web
Quelles solutions ergonomiques,
esthétiques et techniques ?
Le point de vue d’un intégrateur

4. Thomas Catinaud
intégrateur web - formateur
thomascatinaud.com
hello@thomascatinaud.com
Thomas Catinaud

5. Intégrateur web ?
(ou le plus beau métier du monde)

6. « L’intégrateur Web est chargé de traduire et de transposer les
maquettes fournies par l’équipe graphique dans un langage
informatique : le HTML. Il compose la mise en page du site Web en y
intégrant les éléments des maquettes graphiques : textes, sons,
images. Il participe à la qualité du site, dans le respect des normes
d’accessibilité, de référencement et d’ergonomie.»
Portail des métiers de l’Internet
http://www.metiers.internet.gouv.fr/metier/integrateur-web
SOURCE

7. Web designer Intégrateur Développeur
Réalise les
maquettes graphiques
Créé des
templates HTML
(code côté client)
programme les
fonctionnalités du site
(code côté serveur)

8. Et vous ?
qui êtes vous ?

9. Avant de commencer

10. Deux points essentiels
L’entreprise
Les utilisateurs/

11. L’entreprise Valeurs
Clients
Marchés
Stratégie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets

12. Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caractéristiques
Habitudes de navigation
Habitudes de consommation

13. Définir ses utilisateurs…

14. … pour mieux les connaître
Qui sont-ils ?
Quels sont leurs attentes ?
Quels sont leurs besoins ?
Quels sont leurs habitudes de navigations ?

15. un utilisateur = un humain
un utilisateur n’est pas monsieur-tout-le-monde
… pour mieux les connaître

16. une méthode efficace :
Les personas
Personas
Personnalités
Situation maritale : mariés
Enfants : 2 (2 et 5 ans)
Ages : 32 (Mei) et 33 (Tao)
Professions : professeurs
Nationalité : chinois
Site
Provenance : bouche à oreille
Fonctionnalité : réservation
Page : découvrir, chambre, réservation
Technique : ordinateur, tablette, smartphone
Voyage
Durée : 1 semaine
Date : août
Activités : shopping, visites, plages
Mei et Tao Niu
Mei et Tao veulent partir en vacances en France. Ils ont choisi Bordeaux car
c’est une petite ville comprenant toutes les commodités : plages (Arca-
chon), visites de chateaux, shopping, etc.
Voyage avec les enfants
Dépaysement

17. Restons accessible

18. Tout le monde peut accéder au contenu des
sites et applications web de façon égale
quelque soit son handicap.

19. sclérose en plaque
sensoriel
moteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmité motrice cérébrale
spina bifida
cécité
malvoyance
amblyopie
achromatopsie
surdité
maladies bipolaires
schizophrénie
hypochondriaque
épilepsie

20. sclérose en plaque
sensoriel
moteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmité motrice cérébrale
spina bifida
cécité
malvoyance
amblyopie
achromatopsie
surdité
maladies bipolaires
schizophrénie
hypochondriaque
épilepsie
maladie
matériel
support
bruit
environnement
luminosité

21. aujourd’hui

22. De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles problématiques

23. L’évolution des mobiles

24. Une augmentation fulgurante
L’accès à l’Internet mobile double chaque année
Gartner
http://www.gartner.com/newsroom/id/2977917
SOURCE

25. +183% d’augmentation de revenus sur mobiles
en 2015 pour Alibaba.

26. Une augmentation fulgurante
StatCounter
http://gs.statcounter.com/
SOURCE

27. Une augmentation fulgurante
Mediamétrie
SOURCE

28. The mobile moment
Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1841
SOURCE

29. The mobile moment
Adwords, « Building for the next moment » - 5 mai 2015
http://adwords.blogspot.fr/2015/05/building-for-next-moment.html
SOURCE
« And at these times, consumers are increasingly picking up their
smartphones for answers. In fact, more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan. This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumer’s
path to purchase. »

30. Des supports différents

31. Saisie Ecran Configuration Connexion
Ordinateur Clavier, souris
Grande - très grande
taille
(> 10")
Outils puissants
Stable (Ethernet,
WIFI, fibre, …)
Tablette
Ecran tactile, clavier
(optionnel)
Taille moyenne
(sans compter l’iPad
Pro)
(7 à 12")
Outils moins
puissants
Stable (WIFI, fibre, …)
Smartphone
Ecran tactile, clavier
numérique
Petite taille
(<6")
Outils moins
puissants
Aléatoire

32. Des utilisations différentes

33. Utilisation Environnement
Ordinateur Utilisation prolongée assis sur un bureau Stable
Tablette Utilisation informelle sur le canapé ou au lit Relativement stable
Smartphone
Brèves salves d’activités dans des lieux divers au
fil de la journée
Aléatoire

34. Des utilisations à des moments
différents
Pocket
https://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
SOURCE

35. Desktop
un environnement - généralement - bienveillant

36. Mobile
un environnement - parfois - hostile

37. La taille compte
(comme quoi)

38. Des curseurs différents
Desktop
(souris)
Mobile
(doigt)
1 pixel
(ou presque)
Plusieurs pixels

39. Des curseurs différents
Les bateaux mouches
http://www.bateaux-mouches.fr/fr
SOURCE

40. Des curseurs différents
Les bateaux mouches
http://www.bateaux-mouches.fr/fr
SOURCE

41. Espacer les éléments cliquables
Lien
B O U T O N > 7mm
> 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien

42. Améliorer la lisibilité du texte
Des paragraphes trop larges réduisent
la lisibilité.
Compter en moyenne 60 caractères par ligne.
Wikipédia - J.R.R. Tolkien
https://fr.wikipedia.org/wiki/J._R._R._Tolkien
SOURCE

43. Améliorer la lisibilité du texte
Dorigati
http://www.dorigati.it/en/
SOURCE
Le texte justifié sur
des petites largeurs
réduit la lisibilité.
X

44. Améliorer la lisibilité du texte
Dorigati
http://www.dorigati.it/en/
SOURCE

45. Un contenu lisible
URSSAF
https://www.urssaf.fr/portail/home.html
SOURCE
Un corps de texte
suffisamment grand.
À minima, 14px sur mobile
(dépend de la typographie)
X

46. Un contenu lisible
Korben
http://korben.info/
SOURCE

47. Le survol du curseur n’existe pas sur
mobile

48. Délit de mode
http://www.delitdemode.com/
SOURCE
Touch me now
Le sous menu est inaccessible sur mobile : le clic sur un onglet du
menu charge une nouvelle page sur tous les supports.

49. Cdiscount
http://www.cdiscount.com/
SOURCE
Touch me now
Sur mobile, le clic d’un menu ne change plus la page mais ouvre
le sous menu.

50. Les sites web doivent évoluer

51. Un exemple avec Mail Chimp
2001 2016
Mail Chimp http://mailchimp.com/
UX Timeline http://uxtimeline.com/
SOURCE

52. Comment être présent sur
ces supports ?

53. Plusieurs solutions existent

54. « Application native »

55. Comscore, « The U.S. Mobile App Report » - 21 août 2014
http://www.comscore.com/Insights/Presentations-and-Whitepapers/2014/The-US-Mobile-App-Report
SOURCE
« Application native »

56. « Application native »
• Utilise au maximum les caractéristiques de l’appareil (accès
aux contacts, aux paramètres, etc.)
• Des applications très performantes
• Une utilisation optimisée pour le support
Les plus

57. • Demande une validation sur certaines plateformes de
téléchargement
• Des languages différents en fonction des plateformes de
téléchargement
• Doit être téléchargée sur une plateforme.
• Les mises à jour doivent parfois être validées par l’utilisateur
Les moins
« Application native »

58. Site dédié
BlaBlaCar - version desktop
https://www.blablacar.fr/
SOURCE

59. Site dédié
BlaBlaCar - version mobile
https://m.blablacar.fr/
SOURCE

60. Site dédié
• Du contenu optimisé pour chaque version
• Une expérience utilisateur optimisée pour chaque version
• Des performances optimisées
• Une url différente pour chaque version
Les plus

61. Site dédié
• Du contenu dupliqué, non SEO friendly
• Une mise à jour lourde
• Une orientation vers la bonne version pas toujours pertinente
Les moins

62. Responsive web design
http://monsite.com
Well, the way they make shows is,
they make one show. That show's
called a pilot. Then they show
that show to the who make
shows, and on the strength of
that one show they decide if
they're going to make more
shows. Some pilots get picked
and become television programs.
Some don't, become nothing.
She starred in one of the ones
that became nothing.
=
+ +
Un seul code source
Plusieurs résolutions
Une seule urlUn seul contenu

63. Responsive web design
Youtube
https://www.youtube.com/watch?v=yfBJKtUAwIQ
SOURCE

64. • Pas de contenu dupliqué (duplicate content)
• Un seul code source
• Maintenance simplifiée
• Coût plus intéressant qu’un développement spécifique sur
chaque version
Les plus
Responsive web design

65. • Sites souvent moins performants
• Accès aux caractéristiques du support limités
Les moins
Responsive web design

66. Quelle(s) solution(s) choisir ?

67. Plusieurs solutions possibles

68. Plusieurs solutions possibles
Leboncoin
http://www.leboncoin.fr/
SOURCE

69. Doit surtout être définie par les
attentes des utilisateurs

70. Responsive web design
allons plus loin…

71. Le responsive web design, n’est pas
qu’une histoire de repositionnement

72. Brad Frost Web - Beyond Media Queries: An Anatomy of an Adaptive Web Design. Smashing Conférence - 2012
https://vimeo.com/55076713
SOURCE

73. Le contenu avant tout
Téléstar
http://telestar.fr
SOURCE
X

74. Le contenu avant tout
Téléstar
http://telestar.fr
SOURCE
X

75. Le contenu avant tout
Publicité pour l’application
Header
Publicité
Contenu
Téléstar
http://telestar.fr
SOURCE
X

76. Le contenu avant tout
Caisse épargne
https://www.caisse-epargne.fr/
SOURCE
X

77. Le contenu avant tout
Les Pages Jaunes
http://www.pagesjaunes.fr/
SOURCE
X

78. Le contenu avant tout
Publicité pour l’application (fixe)
Header (fixe)
Géolocalisation (fixe)
Contenu
Les Pages Jaunes
http://www.pagesjaunes.fr/
SOURCE
X

79. Un contenu directement visible
Hirondelle USA
http://hirondelleusa.org/SOURCE
X
Début du contenu

80. Un contenu directement visible
Hirondelle USA - Where We Work
http://hirondelleusa.org/our-partners/SOURCE
X
Début du contenu

81. Un contenu directement visible
Semaine digitale de Bordeaux
http://citedigitale.bordeaux.fr/SOURCE
Début du contenu

82. Adapter le contenu
Arngren
http://www.arngren.net/SOURCE
X

83. Arngren
http://www.arngren.net/
SOURCE
X
Prioriser le contenu

84. Stéphanie Walter
https://www.stephaniewalter.fr
SOURCE
Prioriser le contenu

85. Prioriser le contenu
Libération - vue desktop
http://www.liberation.fr/
SOURCE

86. Prioriser le contenu
contenu
secondaire
contenu
secondaire
contenu
secondaire
Libération - vue desktop
http://www.liberation.fr/
SOURCE

87. Prioriser le contenu
Libération - vue mobile
http://www.liberation.fr/
SOURCE

88. Optimiser l’affichage
Libération
http://www.liberation.fr/
SOURCE
Affichage desktop Affichage mobile

89. Une méthode efficace :
le mobile first

90. ou commencer par concevoir et développer
sur les plus petites résolutions
Mobile first

91. Mobile first
• Un site souvent plus clair, plus lisible
• Des fonctionnalités filtrées : seules les plus importantes
doivent rester
• Une performance améliorée
• Un code plus clair
Les plus

92. Mobile first
Stéphanie Walter - inspiré de Brad Frost Web
https://blog.stephaniewalter.fr/freebies-illustration-strategie-responsive-mobile-first/
SOURCE

93. Les points de ruptures entre
deux affichages

94. Les points de ruptures
Capital Public Radio
http://www.capradioraffle.org/
SOURCE
Largeur des écrans
0px 320px 600px 800px

95. Chaque support a ses dimensions
Screen Siz.es
http://screensiz.es/
SOURCE

96. Il est essentiel de
ne pas choisir les points de ruptures
en fonction des supports mais
en fonction du contenu.

97. Un processus de création
différent

98. Processus standard
Préparation
AnalyseDéfinition du besoin
Cahier des charges
Benchmark
Utilisateurs cibles
Ergonomie
Zoning
Wireframes
Définition et hiérarchisation du contenu
Arborescence
Tendances graphiques
Charte graphique
Spécifications techniques et fonctionnelles
Recette
Tests
Debug
Graphisme
Maquettes graphiques
Intégration
Templates HTML
Développement
Développement de l’application
Mise en ligne
Mise en ligne
Suivi

99. De nouvelles contraintes
performance, experience utilisateurs, multi supports, etc.
Des métiers plus collaboratifs
=

100. Préparation
AnalyseDéfinition du besoin
Cahier des charges
Benchmark
Utilisateurs cibles
Ergonomie
Zoning
Wireframes
Définition et hiérarchisation du contenu
Arborescence
Tendances graphiques
Charte graphique
Spécifications techniques et fonctionnelles
Recette
Tests
Debug
Graphisme
Maquettes graphiques
Intégration
Templates HTML
Développement
Développement de l’application
Mise en ligne
Mise en ligne
Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests

101. Créer des prototypes
Prototype de l’agence Heroku - pour le site American Association for Homecare
http://aafh-css.herokuapp.com/wireframes
SOURCE

102. Utiliser une méthode de travail
plus agile

103. Une méthode agile : le scrum
Stand-up quotidien
Sprint
(souvent 2 semaines)
Projet Lots
Produit
fini

104. Mais comment tester ?

105. Console Chrome sur le site Iutopi
http://www.iutopi.com/
SOURCE
Test sur le navigateur

106. Resizer
http://design.google.com/resizer/
SOURCE
Test sur des sites spécialisés

107. BrowserStack
https://www.browserstack.com/
SOURCE
Test sur des emulateurs

108. Luke Wroblewski - directeur produit Google
http://www.lukew.com/
SOURCE
Test sur les supports cibles

109. Performance

110. Comment se charge une page web ?

111. Ordinateur utilisateur
Serveur DNS
Serveur web
Base de données
1
2
3
4
1. Envoi de la requête http (http://
monsite.com)
2. Transformation du domaine en adresse IP
(http://127.0.0.21)
3. Compilation du serveur de l’hébergeur
4. Renvoi du site sur le navigateur client
Etape 1
récupération du document HTML

112. Etape 2
création du DOM et chargement des ressources

113. Etape 3
mise en forme du document

114. Etape 4
chargement des polices
et des dernières ressources

115. Un constat
après 3 secondes, plus de 50% des
utilisateurs ont quitté le site

116. Imaginons,
nous sommes en déplacement et souhaitons :
- vérifier des horaires de train
- réserver une chambre

117. Connexion 2G (450kb/s)
60 requêtes effectuées
473 Kb chargées
10,19 secondes (chargement à 100%)
Voyage SNCF
Voyage-sncf
http://voyages-sncf.mobi/
SOURCE
2,43 sec 3,83 sec
pas de texte
5,93 sec 9,61 sec
aïe, reflow
9,96 sec
état final

118. Connexion 3G (750kb/s)
70 requêtes effectuées
1,7Mb chargées
19,21 secondes (chargement à 100%)
AirBnb
AIrBnb
https://www.airbnb.fr/
SOURCE
4,36 sec 6,80 sec
pas de texte
7,37 sec 10,29 sec
aïe, reflow
10,46 sec
état final

119. Un web de plus en plus
obèse

120. Des pages très lourdes
Restaurant Le Duc
http://restaurantleduc.com/
SOURCE
8.8 Mb de données
téléchargées

121. L’évolution du poids des pages
HTTP Archive
http://httparchive.org/
SOURCE
Décembre 2010 Mars 2016

122. et même si vous l’avez…

123. …tous les utilisateurs n’ont pas la fibre
pensons-y !

124. Comment améliorer ce chargement ?

125. Limiter le nombre de
requêtes

126. Requêtes aux chargement
• Réunifier les images (sprites)
• Utiliser des fonts icônes
• Limiter le nombre de plugins utilisés
• Concatener les ressources

127. Charger les médias à la demande
Images chargées
Image en cours
de chargement
Images non
chargées
fenêtre navigateur
(viewport)
Page
Images chargées
Image en cours
de chargement
Images non
chargées
Scroll

128. Trop c’est trop

129. Limiter le nombre de dépendance
• CMS (Content Management System) : WordPress, Joomla,
Prestashop, Magenta, …
• Frameworks : Bootstrap, Ink, Skeleton, …
• Plugins
• Librairies : jQuery, VanillaJS, …
• Thèmes

130. Les dépendances
• Éléments directement fonctionnel
• Mises à jours
• Gain d’argent
• Gain de temps
Les plus

131. • Failles de sécurités
• Conflits entre dépendances
• Maintenance plus complexe
• Perte de performance
Les moins
Les dépendances

132. Eviter le reflow

133. Le reflow est un processus permettant
de recalculer les positions et
dimensions d’un élément.
Ce calcul a un impact sur
le reste de la page

134. Un exemple
Estelle Blog Mode
http://www.estelleblogmode.com/
SOURCE
Chargement à 50% Chargement à 100%

135. Afin d’éviter le reflow, il faut
prévoir la place des éléments

136. Un exemple
Amazon
https://www.amazon.fr/
SOURCE

137. Les images

138. Choisir le bon format
Type d’image Format
Photo jpeg
Logo jpeg, png, svg
Icône font icon, png 8, gif, svg
Icône avec transparence font icon, png 24, gif (ne gère pas l’opacité), svg
Image animée svg, gif animé

139. Bien compresser les images

140. Les écrans full HD…
… des résolutions pouvant dépasser les 300dpi

141. Utiliser des images vectorielles
Wikipédia - Scalable Vector Graphics
https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics
SOURCE
Attention, le svg n’est pas compatible sur tous les navigateurs

142. Ou d’autres méthodes
• Utiliser des images 2x plus grandes mais réduites (attention
au poids)
• Utiliser l’élément HTML <picture>
• Utiliser l’attribut HTML srcset

143. Les typographies
une longue histoire…

144. Historiquement,
les navigateurs web utilisent un
nombre restreint de typographies
Georgia
Arial
Arial Black
Helvetica
Palatino
Times New Roman
Comic sans MS
Impact
Tahoma
Trebuchet MS
Verdana
Courrier New
Courrier
Monaco

145. Depuis les années 2010,
le web peut utiliser
de nouvelles polices
Font Smith
http://www.fsmillbank.com/
SOURCE

146. Mais !
• Est parfois trop lourde (performance)
• N’a pas le même rendu en fonction des navigateurs / écrans
• N’est pas compatible sur tous les navigateurs
• Est chargée à la fin du CSSOM
Une typo non native comporte des inconvénients

147. « System fonts can be beautiful.
Webfonts are not a requirement for great typography.»
Adam Morse
http://mrmrs.io/writing/2016/03/17/webfonts/
SOURCE

148. Il faut donc
limiter l’utilisation des typographies
non système

149. l’HTML5 apporte de nouvelles
API
(Interface Application de Programmation)

150. La Géolocalisation
Jardiland
http://www.jardiland.com/
SOURCE

151. Le WebGL
Firefox Hello
https://www.mozilla.org/fr/
SOURCE

152. … et plein d’autres
etc.
Notification
Plein écrans
Historique de navigation 3D
Accès à la luminosité du support
Accès à la batterie du support
Hors connexion
Accès aux médias (micro, webcam) du support
Web storage
Canvas

153. Certaines anciennes versions de
navigateurs persistent

154. Connaître les
navigateurs cibles et leurs versions

155. Quand cela est possible,
évoluer vers les dernières
versions de languages…

156. …tout en restant navigable
sur les vieux navigateurs

157. Cdiscount - sur Internet Explorer 7
http://www.cdiscount.com/
SOURCE
NB : Internet Eplorer 7 - 8 et 9 sont
officiellement obsolètes.

158. Créer une icône de favoris (favicon)
visible sur tous les supports

159. Un générateur de favicon
Real Favicon Generator
http://realfavicongenerator.net/
SOURCE

160. visible sur tous desktop…
Thomas Catinaud
http://thomascatinaud.com
SOURCE

161. …et sur mobile (toutes plateformes)
Thomas Catinaud
http://thomascatinaud.com
SOURCE
Possibilité de rajouter
des sites sur les
panneaux d’écrans
mobiles.

162. Pour aller plus loin
E-COD
vous propose de suivre la formation « intégrateur
frontend » du 25 avril au 28 juin 2016
D’autres modules courts de formation continue sont possibles sur
différentes thématiques : Référencement, e-réputation, e-commerce,
réseaux sociaux…
Renseignements ecod@formation-lac.com ou 05 56 79 50 43

163. Merci