-- Cours n°5/7 donné Master 2 Création et Communication Numérique à l'ISCOM, Année 2016/2017.

1. Conception
ISCOM — Master 2 CCN 2016
Laurent Barbat - @lbarbat

2. Au sommaire…
Adapté du livre « Méthodes de design UX », Lallemand / Gronier — 2015
CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION

3. Création
Concevoir puis développer le
produit ou service.
Arborescence
Wireframes
Prototype
Cadrage Exploration Synthèse Création ÉvaluationIdéation
Maquettes graphiques

4. Principes de conception

5. Les Théories de la Gestalt ou la
Psychologie de la Forme

6. Loi de Proximité
Nous regroupons les points d’abord les plus
proches les uns des autres.

7. Loi de Proximité

8. Loi de Proximité

9. Loi de Proximité

10. Loi de Similitude
Si la distance ne permet pas de regrouper les
points, nous nous attacherons ensuite à repérer
les plus similaires entre eux pour percevoir une
forme.

11. Loi de Similitude

12. Similitude et Proximité
SIMILITUDE PROXIMITÉ

13. Taille

14. Couleur

15. Intensité

16. Forme

17. Orientation

18. Longueur

19. Contour

20. Position

21. Loi de Fitts
Une cible est d’autant plus facile à atteindre
qu’elle est proche et grande.

22. Loi de Fitts
« Une cible est d’autant plus facile à atteindre
qu’elle est proche et grande »
Enregister
Enregistrer
Michel
Legrand
Michel
Legrand
versus

24. Loi de Hick
Le temps qu'il faut à un utilisateur pour prendre une décision
est fonction du nombre de choix à sa disposition.

25. L’expérience des pots de confiture
6 pots en dégustation
40% des passants s’arrêtent pour gouter
30% achètent
Sur 100 passants, 12 achètent
24 pots en dégustation
60% des passants s’arrêtent pour gouter
3% achètent
Sur 100 passants, 2 achètent

26. Loi de Hick
Le temps qu'il faut à un utilisateur pour prendre une décision est
fonction du nombre de choix à sa disposition.

28. L’Affordance
Capacité d’un système ou d'un produit à suggérer sa
propre utilisation.

29. Comment ouvrir cette porte ?

30. Comment ouvrir cette porte ?

31. Comment ouvrir cette porte ?

32. Comment ouvrir cette porte ?
Source image : http://www.doctordisruption.com/design/principles-of-design-51-affordance/

34. La charge cognitive

35. Barrières cognitives
Source : http://uxmag.com/articles/cognition-the-intrinsic-user-experience
Charge cognitive

36. Le Feedback

38. Écrire pour le web

39. Constat

40. Les internautes scannent les pages…
…Et ne lisent attentivement que lorsqu’ils
pensent avoir trouvé ce qu’ils cherchent.

41. Les 3 niveaux de lecture
1 Repérage
(exploration)
Recherche de
points d’entrée
Vision,
Pré-attention
Système
visuel)
1 à 3
sec
2 Balayage
(synthèse)
Analyse,
Phase de décision
Perception,
Attention
Mémoire
courte (5 à 9
éléments)
15 à
30 sec
3
Lecture
profonde
(mot à mot)
Lecture suivie,
Intérêt capté
Mémorisation,
Répétition
Mémoire
longue
(culture)
Min,
Heure
s

42. Bonnes pratiques d’écriture

43. Quelques bonnes pratiques d’écriture
pour le web
1. Mettre l’info importante en premier
2. Une idée = un paragraphe
3. Faciliter la compréhension : simple, précis, court
4. Relire pour réduire
5. Écrire plus gros
6. Forcer les contrastes

44. 1. L’information importante en premier
contenu important
contenu moins
important
SYNTHÉTIQUE
EXHAUSTIF

45. 2. Une idée = un paragraphe
UNE PAGE
= UN MESSAGE
UN PARAGRAPHE
= UNE IDÉE

46. 3. Écrire simple, précis, court
• Écrire simplement
- Utiliser des constructions simples Sujet/Verbe/Complément
- Utiliser des mots concrets, courants
- Éviter le jargon et les métaphores
• Écrire avec précision
- Éviter les mots-valises comme «faire»
- Se méfier des adverbes, dont la nuance n’est pas toujours comprise.
Ex : « les logiciels ont souvent des erreurs » risque d’être compris comme « les
logiciels ont des erreurs »
• Écrire court
- Rédiger des phrases de 12-15 mots (20 mots max)
- Éviter la forme passive et les tournures négatives
- Scinder en deux une phrase quand elle contient deux verbes conjugués, un
participe présent ou une subordonnée
- Éviter de donner plus d’un chiffre par phrase
- Un message clé par page

47. 3. Faciliter la compréhension
NE PAS ÉCRIRE
Utilisation
Excessivement
Antérieurement
Suffisant
Sélectionne
Constamment
Absolument essentiel
Rassemblés en commun
Désappointé
ÉCRIRE
Usage
Trop
Avant
Assez
Choisir, trier
Toujours/souvent
Essentiel
Rassemblés
Déçu

48. 3. Faciliter la compréhension
NE PAS ÉCRIRE
Tout à fait unique
D'une longueur d'un mètre
Bilan total
Le premier de tous
De couleur rouge
Entièrement éliminé
ÉCRIRE
Unique
Un mètre
Bilan
Le premier
Rouge
Éliminé

49. 3. Faciliter la compréhension
NE PAS ÉCRIRE
Prendre une décision
Mener une enquête
Faire usage de
Permet d’expliquer
Procéder à un examen
ÉCRIRE
Décider
Enquêter
Utiliser
Expliquer
Examiner

50. 4. Relire pour réduire

51. 5. Écrire plus gros
16 pixels
est la taille de confort pour la plupart des écrans.

52. 6. Forcer les contrastes
À 40 ans la quantité de lumière qui passe à
travers la rétine est 50% plus faible qu’à 20 ans.
À partir de 60 ans, c’est seulement 20%.
LE TEXTE LE TEXTE LE TEXTE

53. On récapitule…

54. 1. L’information importante en premier

55. 2. Une idée = un paragraphe

56. 3. Écrire simple, précis, court

57. 4. Relire pour réduire

58. 5. Aérer

59. 6. Forcer les contrastes

60. 7. Last but not least…
Un titre court et porteur de sens

61. Et écrire pour le mobile ?
1. Mettre l’info importante en premier
2. Une idée = un paragraphe
3. Faciliter la compréhension : simple, précis, court
4. Relire pour réduire
5. Écrire plus gros
6. Forcer les contrastes

62. Une dernière chose…
CLIQUEZ-ICI
NEIN !

63. Un autre point de vue sur le
déroulement d’un projet UX

64. Source : The Elements of User Experience, Jesse James Garrett
Les « 5 éléments
de l’expérience
utilisateur »
structurent la création
d’un produit.
Chaque étape s’appuie
sur la précédente.

65. Surface : Le graphisme.
Skeleton : L’ergonomie, la
hiérarchie de l’information sur
la page.
Structure : La structure du site,
l’arborescence, le système de
navigation.
Scope : Le périmètre du projet,
la liste des contenus et des
fonctionnalités.
Strategy : Les objectifs du site,
la stratégie de l’entreprise. Les
moyens humains et matériels
mis en oeuvre.
Source : The Elements of User Experience, Jesse James Garrett

66. Source : The Elements of User Experience, Jesse James Garrett
Correspond à la phase de
Création
Inclut la phase de
Recherche

67. Le « profil en T »
d’un UX Designer

68. Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN

69. RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
Le « profil en T » d’un UX Designer
UX DESIGN
Transmet aux autres
Maitrise le sujet
Connait les bases

70. Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN

71. RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
Le « profil en T » d’un UX Designer
UX DESIGN

72. Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN

73. Source : The Elements of User Experience, Jesse James Garrett
User researcher
Designer graphique
Architecte de l’info
Stratège de contenu
Business
Technique
Designer d’interaction
Pour simplifier…

74. Source : The Elements of User Experience, Jesse James Garrett
Une meilleure approche est de commencer l’étape suivante un
peu avant que l’étape actuelle soit terminée.
On favorise ainsi la collaboration.
Toutefois, imposer de terminer chaque étape avant de
commencer la suivante n’est pas la meilleure solution.

75. 11 Règles ergonomiques

76. L’ergonomie en 11 règles
Les règles d’ergonomie permettent d’optimiser la qualité
d’utilisation d’un produit selon un double mouvement : d’une
part, elles influencent la conception, d’autre part elles sont un
outil pour évaluer une interface existante.

77. 11 Règles ergonomiques
Architecture : le produit est bien structuré
Organisation visuelle : la page est bien organisée
Cohérence : le produit capitalise sur l'apprentissage interne
Convention : le produit capitalise sur l'apprentissage externe
Information : le produit informe l'internaute et lui répond
Compréhension : Les mots et symboles sont choisis minutieusement
Assistance : Le produit aide et dirige l'internaute
Gestion des erreurs : Le produit prévoit que l'internaute se trompe
Rapidité : L'internaute ne perd pas son temps
Contrôle : C'est l’internaute qui commande
Accessibilité : Un produit facile d'accès pour tous
1
2
3
4
5
6
7
8
9
10
11
Source : Ergonomie Web, Amélie Boucher

78. Architecture
Le produit est bien structuré
1

79. Faciliter la recherche de l’information
LISTE CLIENTS
FICHE CLIENT
RECH. IDENTIF.
CLIENT
ARBORESCENCE
Application vendeur Aigle
PANIER
INFOS CLIENT
INFOS DE
PAIEMENT
INFOS DE
LIVRAISON
CONFIRMATION
RECAP
SCAN
LISTE DE
PRODUITS
FICHE PRODUIT
CONF AJOUT +
CROSS-SELL
MENU +
RECHERCHE
CONFIRMATION
INSCRIPTION
Catalogue
Scanner
Client
Programme
de fidélité
Mon profil
Commander
MODULE
VENDEUR
LOGIN
VENDEUR

80. Faciliter la recherche de l’information
Fiche ApartHotel
Accueil
Résultats de recherche
Découvrez Adagio
100 aparthotels dans le monde (carte)
Offres spéciales Programme de fidélité Mon compte, ma réservation
Comparateur
Demande de devis
Long séjour
Recherche
Confirmation de
demande de devis
Informations
personelles
Préférences
Newsletters
Tableau de bord
Réservations
Réservations
en cours
Historique
Mon profil FAQ Club
Créer un compte
Modifier
une réservation
Confirmation
de modification
Mot de passe oublié
e-mail de renouvellement
de mot de passe
Nouveau mot de passe
Confirmation de
changement de mot de passe
Confirmation de
création de compte
e-mail de confirmation
de création de compte
e-mail de confirmation
de modification
PLAN DE SITE - ADAGIO v2
Mon Dec 01 2014
LÉGENDE
FAQ
Contact
Mentions légales
+ CGV, Données perso
Presse
Recrutement
Investisseurs
Franchises
Landing page Destination
Pays / Région / Ville
Twitter
Facebook
Liste des marques Accor / P&V
Pierre & Vacances
Page de redirection vers hotel
du Groupe Accor
Page 404
Popin Web Callback
Page Accor
(gris clair)
Page Adagio
(gris foncé)
Module
(ce n'est pas une page)
Pile de pages
(même template)
e-mail envoyé
1. Choix de l'appartement
2. Options
3. Récapitulatif
4. Paiement
5. Confirmation
e-mail de confirmation
Le Mag Adagio
FOOTER
LP Segments :
Acheteurs, CE, ...
e-mail de confirmation
de demande de devis
LP Offre :
Petit prix dès 4 nuits
Développement durable
Consulter ou Annuler une réservation
(sans connexion)
Vers
"réservations
en cours"
e-mail de partage de l'aparthotel
Gammes Adagio / Adagio Access
+ Premium?
Pour un déplacement professionnel
Garantie du meilleur prix
Avis clients sur Adagio
Long séjour
Appartements
Services
Localisation et Accès
Galerie photo / vidéo
À proximité
Google+
Pinterest
PAGES TRANSVERSES
partenaire
du site

83. Organisation visuelle
La page est bien organisée
2

87. Des exceptions…

88. Cohérence
le produit capitalise sur
l'apprentissage interne
3

91. Convention
le produit capitalise sur l'apprentissage
externe
4

92. Des conventions internationales

93. Le poids des conventions
Clavier AZERTY
Clavier Dvorak

94. Information
le produit informe l'internaute et lui
répond
5

95. La bonne info au bon moment

97. La bonne info au bon moment

99. Une information à jour

100. Compréhension
Les mots et symboles sont choisis
minutieusement
6

101. Une app officielle qui ne prend pas
ses responsabilités

102. Le sujet sensible des données
personnelles

103. Des partis pris farfelus

104. Utiliser le concept d’affordance

105. Assistance
Le produit aide et dirige l'internaute
7

106. Aider la saisie des informations

108. Beaucoup de données,
une comparaison peu évidente

109. Prendre le point de vue de l’utilisateur

111. Répondre aux vraies questions des
consommateurs

113. Gestion des erreurs
Le produit prévoit que l'internaute se
trompe
8

114. Contextualiser les messages d’erreur

115. Anticiper les erreurs avant
validation du formulaire

116. Permettre de revenir en arrière

117. Rapidité
L'internaute ne perd pas son temps
9

124. Contrôle
C'est l’internaute qui commande
10

125. Définir ses préférences

126. Définir ses préférences

128. À propos de la connexion via
Facebook, Twitter

129. Accessibilité
Un produit facile d’accès pour tous
11

130. Accessibilité physique…

131. …Accessibilité technique

132. …Accessibilité technique

133. …Accessibilité technique

134. 11 Règles ergonomiques
Architecture : le produit est bien structuré
Organisation visuelle : la page est bien organisée
Cohérence : le produit capitalise sur l'apprentissage interne
Convention : le produit capitalise sur l'apprentissage externe
Information : le produit informe l'internaute et lui répond
Compréhension : Les mots et symboles sont choisis minutieusement
Assistance : Le produit aide et dirige l'internaute
Gestion des erreurs : Le produit prévoit que l'internaute se trompe
Rapidité : L'internaute ne perd pas son temps
Contrôle : C'est l’internaute qui commande
Accessibilité : Un produit facile d'accès pour tous
1
2
3
4
5
6
7
8
9
10
11
Source : Ergonomie Web, Amélie Boucher

135. Excellente ressource sur les bonnes
pratiques de conception UX/UI
Le Pixel Perfect Precision Handbook
de l’agence ustwo :
Interaction When creating designs for touch-based
devices, always consider how easy they are to
operate using fingers and thumbs. We usually
base our designs on a minimum touch area of
7mm × 7mm, which is the rough size of the
contact area between a finger and screen, and
then leave at least a 2mm gap between items
so they don’t get pressed accidentally. If
you’ve got components that will be primarily
thumb-operated, then make those wider, as
the average width of an adult thumb is 25mm.
Naughty Nice
48Pixel Perfect Precision
Touch Targets
7mm
7mm

136. Il semble que la
perfection soit
atteinte, non
quand il n’y a plus
rien à ajouter
mais quand il n’y
a plus rien à
retrancher.
Antoine de Saint-Exupéry
“
”
Une question, une suggestion ? http://bit.ly/feedback-ux