SlideShare une entreprise Scribd logo
1  sur  136
Télécharger pour lire hors ligne
Conception
ISCOM — Master 2 CCN 2016
Laurent Barbat - @lbarbat
Au sommaire…
Adapté du livre « Méthodes de design UX », Lallemand / Gronier — 2015
CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION
Création
Concevoir puis développer le
produit ou service.
Arborescence
Wireframes
Prototype
Cadrage Exploration Synthèse Création ÉvaluationIdéation
Maquettes graphiques
Principes de conception
Les Théories de la Gestalt ou la
Psychologie de la Forme
Loi de Proximité
Nous regroupons les points d’abord les plus
proches les uns des autres.
Loi de Proximité
Loi de Proximité
Loi de Proximité
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.
Loi de Similitude
Similitude et Proximité
SIMILITUDE PROXIMITÉ
Taille
Couleur
Intensité
Forme
Orientation
Longueur
Contour
Position
Loi de Fitts
Une cible est d’autant plus facile à atteindre 

qu’elle est proche et grande.
Loi de Fitts
« Une cible est d’autant plus facile à atteindre
qu’elle est proche et grande »
Enregister
Enregistrer
Michel
Legrand
Michel
Legrand
versus
Loi de Hick
Le temps qu'il faut à un utilisateur pour prendre une décision 

est fonction du nombre de choix à sa disposition.
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
Loi de Hick
Le temps qu'il faut à un utilisateur pour prendre une décision est
fonction du nombre de choix à sa disposition.
L’Affordance
Capacité d’un système ou d'un produit à suggérer sa
propre utilisation.
Comment ouvrir cette porte ?
Comment ouvrir cette porte ?
Comment ouvrir cette porte ?
Comment ouvrir cette porte ?
Source image : http://www.doctordisruption.com/design/principles-of-design-51-affordance/
La charge cognitive
Barrières cognitives
Source : http://uxmag.com/articles/cognition-the-intrinsic-user-experience
Charge cognitive
Le Feedback
Écrire pour le web
Constat
Les internautes scannent les pages…
…Et ne lisent attentivement que lorsqu’ils
pensent avoir trouvé ce qu’ils cherchent.
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
Bonnes pratiques d’écriture
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
1. L’information importante en premier
contenu important
contenu moins
important
SYNTHÉTIQUE
EXHAUSTIF
2. Une idée = un paragraphe
UNE PAGE
= UN MESSAGE
UN PARAGRAPHE
= UNE IDÉE
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
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
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é
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
4. Relire pour réduire
5. Écrire plus gros
16 pixels
est la taille de confort pour la plupart des écrans.
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
On récapitule…
1. L’information importante en premier
2. Une idée = un paragraphe
3. Écrire simple, précis, court
4. Relire pour réduire
5. Aérer
6. Forcer les contrastes
7. Last but not least…
Un titre court et porteur de sens
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
Une dernière chose…
CLIQUEZ-ICI
NEIN !
Un autre point de vue sur le
déroulement d’un projet UX
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.
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
Source : The Elements of User Experience, Jesse James Garrett
Correspond à la phase de
Création
Inclut la phase de
Recherche
Le « profil en T » 

d’un UX Designer
Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN
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
Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
Le « profil en T » d’un UX Designer
UX DESIGN
Le « profil en T » d’un UX Designer
RECHERCHEUTILISATEUR
STRATÉGIEDECONTENU
ARCHITECTUREDEL’INFORMATION
DESIGNGRAPHIQUE/UI
DESIGND’INTERACTION
BUSINESS
TECHNIQUE
UX DESIGN
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…
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.
11 Règles ergonomiques
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.
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
Architecture
Le produit est bien structuré
1
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
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
Organisation visuelle
La page est bien organisée
2
Des exceptions…
Cohérence
le produit capitalise sur 

l'apprentissage interne
3
Convention
le produit capitalise sur l'apprentissage
externe
4
Des conventions internationales
Le poids des conventions
Clavier AZERTY
Clavier Dvorak
Information
le produit informe l'internaute et lui
répond
5
La bonne info au bon moment
La bonne info au bon moment
Une information à jour
Compréhension
Les mots et symboles sont choisis
minutieusement
6
Une app officielle qui ne prend pas
ses responsabilités
Le sujet sensible des données
personnelles
Des partis pris farfelus
Utiliser le concept d’affordance
Assistance
Le produit aide et dirige l'internaute
7
Aider la saisie des informations
Beaucoup de données, 

une comparaison peu évidente
Prendre le point de vue de l’utilisateur
Répondre aux vraies questions des
consommateurs
Gestion des erreurs
Le produit prévoit que l'internaute se
trompe
8
Contextualiser les messages d’erreur
Anticiper les erreurs avant
validation du formulaire
Permettre de revenir en arrière
Rapidité
L'internaute ne perd pas son temps
9
Contrôle
C'est l’internaute qui commande
10
Définir ses préférences
Définir ses préférences
À propos de la connexion via
Facebook, Twitter
Accessibilité
Un produit facile d’accès pour tous
11
Accessibilité physique…
…Accessibilité technique
…Accessibilité technique
…Accessibilité technique
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
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
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

Contenu connexe

Tendances

Marketing écologique
Marketing écologiqueMarketing écologique
Marketing écologiqueAwatef Groun
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandCarine Lallemand
 
les bases de la communication interpersonnelle
les bases de la communication interpersonnelleles bases de la communication interpersonnelle
les bases de la communication interpersonnelleSami Lamqaddam
 
Marketing expérientiel - présentation étudiants CELSA
Marketing expérientiel  - présentation étudiants CELSAMarketing expérientiel  - présentation étudiants CELSA
Marketing expérientiel - présentation étudiants CELSADeborah Marino
 
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies Gagnantes
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies GagnantesOmniCanal Luxe et Prêt-à-Porter : 9 Stratégies Gagnantes
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies GagnantesStephany Gochuico
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandCarine Lallemand
 
CE-Presentation.pdf
CE-Presentation.pdfCE-Presentation.pdf
CE-Presentation.pdfHamidtj
 
La promotion des ventes
La promotion des ventesLa promotion des ventes
La promotion des ventesTaha Can
 
Management des equipes projet et leadership
Management des equipes projet et leadership Management des equipes projet et leadership
Management des equipes projet et leadership Aymen Foudhaili
 
La Process Communication : un management sur mesure
La Process Communication : un management sur mesureLa Process Communication : un management sur mesure
La Process Communication : un management sur mesureShake Your Mind
 
Marketing sonore et marketing sensoriel en magasin
Marketing sonore et marketing sensoriel en magasinMarketing sonore et marketing sensoriel en magasin
Marketing sonore et marketing sensoriel en magasinAlain Goudey
 
'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'Jinyong Kim
 
La communication interpersonnelle
La communication interpersonnelleLa communication interpersonnelle
La communication interpersonnelleS/Abdessemed
 
Le comportement du consommateur
Le comportement du consommateurLe comportement du consommateur
Le comportement du consommateurCamille Durand
 
Communication interne en entreprise
Communication  interne en entrepriseCommunication  interne en entreprise
Communication interne en entrepriseLotfi Mekouar
 
Cours information communication : qu'est-ce qu'une stratégie de communication ?
Cours information communication : qu'est-ce qu'une stratégie de communication ?Cours information communication : qu'est-ce qu'une stratégie de communication ?
Cours information communication : qu'est-ce qu'une stratégie de communication ?Adrien Quenette
 
Les fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfLes fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfSonia SAHLI
 

Tendances (20)

Positionnement
PositionnementPositionnement
Positionnement
 
Marketing écologique
Marketing écologiqueMarketing écologique
Marketing écologique
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
 
les bases de la communication interpersonnelle
les bases de la communication interpersonnelleles bases de la communication interpersonnelle
les bases de la communication interpersonnelle
 
Satisfaction du client
Satisfaction du clientSatisfaction du client
Satisfaction du client
 
Marketing expérientiel - présentation étudiants CELSA
Marketing expérientiel  - présentation étudiants CELSAMarketing expérientiel  - présentation étudiants CELSA
Marketing expérientiel - présentation étudiants CELSA
 
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies Gagnantes
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies GagnantesOmniCanal Luxe et Prêt-à-Porter : 9 Stratégies Gagnantes
OmniCanal Luxe et Prêt-à-Porter : 9 Stratégies Gagnantes
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
 
CE-Presentation.pdf
CE-Presentation.pdfCE-Presentation.pdf
CE-Presentation.pdf
 
La promotion des ventes
La promotion des ventesLa promotion des ventes
La promotion des ventes
 
Management des equipes projet et leadership
Management des equipes projet et leadership Management des equipes projet et leadership
Management des equipes projet et leadership
 
La Process Communication : un management sur mesure
La Process Communication : un management sur mesureLa Process Communication : un management sur mesure
La Process Communication : un management sur mesure
 
Marketing sonore et marketing sensoriel en magasin
Marketing sonore et marketing sensoriel en magasinMarketing sonore et marketing sensoriel en magasin
Marketing sonore et marketing sensoriel en magasin
 
'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'
 
La communication interpersonnelle
La communication interpersonnelleLa communication interpersonnelle
La communication interpersonnelle
 
Le comportement du consommateur
Le comportement du consommateurLe comportement du consommateur
Le comportement du consommateur
 
Communication interne en entreprise
Communication  interne en entrepriseCommunication  interne en entreprise
Communication interne en entreprise
 
cours sur la publicité
cours sur la publicitécours sur la publicité
cours sur la publicité
 
Cours information communication : qu'est-ce qu'une stratégie de communication ?
Cours information communication : qu'est-ce qu'une stratégie de communication ?Cours information communication : qu'est-ce qu'une stratégie de communication ?
Cours information communication : qu'est-ce qu'une stratégie de communication ?
 
Les fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfLes fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdf
 

Similaire à 5. Grands principes de conception

L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les NulsPALO IT
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXZenika
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebValtech Canada
 
Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)ElodieDescharmes
 
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webCours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webElodieDescharmes
 
Organisation visuelle
Organisation visuelleOrganisation visuelle
Organisation visuellemsk10
 
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.ツ Thomas Nicot
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueElodieDescharmes
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXNewflux UX/UI News
 
AMECQ_Notes_Patrice_Leroux
AMECQ_Notes_Patrice_LerouxAMECQ_Notes_Patrice_Leroux
AMECQ_Notes_Patrice_LerouxPatrice Leroux
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une IntroductionFabien Tersoglio
 
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...Valtech Canada
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014Loic Nunez
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Jean Claude GROSJEAN
 
UX & Accessibilité : les clés pour réussir
UX & Accessibilité : les clés pour réussirUX & Accessibilité : les clés pour réussir
UX & Accessibilité : les clés pour réussirChristophe Clouzeau
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueXavier Lambert
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXNewflux UX/UI News
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignCatherine Verfaillie
 

Similaire à 5. Grands principes de conception (20)

L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les Nuls
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
 
Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)
 
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webCours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
 
Organisation visuelle
Organisation visuelleOrganisation visuelle
Organisation visuelle
 
Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"
 
Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.Donner forme : fabriquer un produit.
Donner forme : fabriquer un produit.
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
AMECQ_Notes_Patrice_Leroux
AMECQ_Notes_Patrice_LerouxAMECQ_Notes_Patrice_Leroux
AMECQ_Notes_Patrice_Leroux
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une Introduction
 
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
 
UX & Accessibilité : les clés pour réussir
UX & Accessibilité : les clés pour réussirUX & Accessibilité : les clés pour réussir
UX & Accessibilité : les clés pour réussir
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numérique
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
 
Ux
UxUx
Ux
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
 

5. Grands principes de conception

  • 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
  • 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.
  • 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.
  • 16. 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.
  • 27.
  • 28. L’Affordance Capacité d’un système ou d'un produit à suggérer sa propre utilisation.
  • 32. Comment ouvrir cette porte ? Source image : http://www.doctordisruption.com/design/principles-of-design-51-affordance/
  • 33.
  • 35. Barrières cognitives Source : http://uxmag.com/articles/cognition-the-intrinsic-user-experience Charge cognitive
  • 37.
  • 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
  • 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
  • 55. 2. Une idée = un paragraphe
  • 56. 3. Écrire simple, précis, court
  • 57. 4. Relire pour réduire
  • 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
  • 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
  • 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
  • 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
  • 81.
  • 82.
  • 83. Organisation visuelle La page est bien organisée 2
  • 84.
  • 85.
  • 86.
  • 88. Cohérence le produit capitalise sur 
 l'apprentissage interne 3
  • 89.
  • 90.
  • 91. Convention le produit capitalise sur l'apprentissage externe 4
  • 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
  • 96.
  • 97. La bonne info au bon moment
  • 98.
  • 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
  • 107.
  • 108. Beaucoup de données, 
 une comparaison peu évidente
  • 109. Prendre le point de vue de l’utilisateur
  • 110.
  • 111. Répondre aux vraies questions des consommateurs
  • 112.
  • 113. Gestion des erreurs Le produit prévoit que l'internaute se trompe 8
  • 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
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 127.
  • 128. À propos de la connexion via Facebook, Twitter
  • 129. Accessibilité Un produit facile d’accès pour tous 11
  • 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