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
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.
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
23.
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.
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
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
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
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
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
68. Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN
70. Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
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.
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
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
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