SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
LES PRINCIPES
UNIVERSELS ET INTEMPORELS
DE BASTIEN ET SCAPIN
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
2
LES PRINCIPES UNIVERSELS ET INTEMPORELS
Règles universelles et intemporelles à respecter
lors de la conception d’interfaces ou pour identifier
les principaux problèmes d’utilisabilité.
- Critères de Jakob Nielsen
- Critères de Bastien et Scapin
…
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
3
POURQUOI CES PRINCIPES ?
- Avoir une base de discussion commune
- Permettre la comparaison
- Fidéliser les évaluations par le même ergonome
- A utiliser en conception comme en évaluation
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
4
#1 GUIDAGE
Incitation
Groupement / Distinction
Feedback Immédiat
Lisibilité
#2 CHARGE DE TRAVAIL
Brièveté
Densité de l’information
#3 CONTRÔLE DES UTILISATEURS
SUR LEURS ACTIONS
Actions explicites
Contrôle utilisateur
#4 ADAPTABILITÉ DE L’APPLICATION
Fléxibilité
Prise en compte de l’expérience
#5 GESTION DES ERREURS
Protection contre les erreurs
Qualité des messages d’erreur
#6 HOMOGÉNEÏTÉ ET COHÉRENCE
#7 SIGNIFIANCE DES CODES ET
DÉNOMINATIONS
#8 COMPATIBILITÉ
LES PRINCIPES UNIVERSELS ET INTEMPORELS
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#1 Le guidage
Conseiller, orienter, informer et conduire
l’utilisateur lors de ses interactions avec
l’interface.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
6
L’INCITATION
www.airbnb.com
- Accompagner l’utilisateur
dans sa tâche
- Amener l’utilisateur à effectuer
des actions spécifiques
- Renseigner l’utilisateur sur le
contexte dans lequel il se
trouve
- Orienter l’utilisateur.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
7
L’INCITATION
- Accompagner l’utilisateur
dans sa tâche
- Amener l’utilisateur à effectuer
des actions spécifiques
- Renseigner l’utilisateur sur le
contexte dans lequel il se
trouve
- Orienter l’utilisateur.
www.leroymerlin.com
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
8
LE GROUPEMENT / DISTINCTION PAR LA
LOCALISATION
www.fnac.com
- Organiser visuellement les
items d’information les uns par
rapport aux autres
- Prendre en compte la
localisation et le format pour
indiquer : les relations entre
les divers items affichés.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
9
LE GROUPEMENT / DISTINCTION PAR LA
LOCALISATION
www.fnac.com
- Organiser visuellement les
items d’information les uns par
rapport aux autres
- Prendre en compte la
localisation et le format pour
indiquer : les relations entre
les divers items affichés.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
10
LE GROUPEMENT / DISTINCTION PAR LE FORMAT
www.mailchimp.com
- Organiser visuellement les
items d’information les uns par
rapport aux autres
- Prendre en compte la
localisation et le format pour
indiquer : les relations entre
les divers items affichés.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
11
LE FEEDBACK IMMÉDIAT
www.gdrive.com
- Informer l’utilisateur de ce qu’il
se passe suite à ses actions, de
manière immédiate.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
12
LA LISIBILITÉ
www.hipmunk.com
- Faciliter la lecture
- Favoriser la compréhension de
ce qui est affiché à l’écran.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
13
LA LISIBILITÉ
www.arty.com
- Faciliter la lecture
- Favoriser la compréhension de
ce qui est affiché à l’écran.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#2 La charge de travail
Fournir à l’utilisateur les moyens d'atteindre
ses objectifs, de les atteindre rapidement et
le plus facilement possible.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
15
LA BRIEVETÉ
www.apple.com
Garantir la simplicité de
l’interface et la pertinence des
fonctionnalités tout en limitant
le travail de lecture
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
16
LA DENSITÉ DE L’INFORMATION
Limiter la densité
informationnelle de l’interface,
en affichant uniquement les
informations nécessaires.
www.cdiscount.com
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#3 Le contrôle des
utilisateurs sur leurs actions
Montrer que toute action du système
correspond à une demande explicite de
l'utilisateur.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
18
LES ACTIONS EXPLICITES
www.hipmunk.com
Rendre explicite la relation
entre le fonctionnement de
l’interface et les actions des
utilisateurs
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
19
LE CONTRÔLE UTILISATEUR
www.topshop.com
Laisser l’utilisateur contrôler le
déroulement (interruption,
reprise) de ses actions et l’en
avertir si ce n’est pas le cas.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#4 L’adaptabilité de
l’application
Laisser l’utilisateur personnaliser et contrôler
une interface en fonction de ses besoins.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
21
LA FLEXIBILITÉ
www.sarenza.com
Mettre à disposition des
éléments de personnalisation
de l’interface pour les actions
fréquemment utilisées.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
22
LA PRISE EN COMPTE DE L’EXPÉRIENCE
www.gmail.com
Respecter le degrés d’expérience
utilisateur
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#5 La gestion des erreurs
Prévoir que l'utilisateur fera des erreurs et
concevoir des moyens de pallier ces
problèmes.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
24
LA PROTECTION CONTRE LES ERREURS
www.nike.com
Détecter et prévenir les erreurs
ou actions impossibles.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
25
LA QUALITÉ DES MESSAGES D’ERREUR
www.gmail.com
Assurer la bonne compréhension
et la nature de l’erreur.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#6 L’homogénéïté et la
cohérence
Respecter les choix de conception et codes
graphiques effectués sur l’intégralité de
l’interface.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
27
L’HOMOGENEÏTÉ ET COHÉRENCE
www.ingdirect.fr
Respecter les choix de
conception et codes graphiques
effectués sur l’intégralité de
l’interface.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
28
L’HOMOGENEÏTÉ ET COHÉRENCE
www.bouyguestelecom.fr
Respecter les choix de
conception et codes graphiques
effectués sur l’intégralité de
l’interface.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#7 La signifiance des codes
et dénominations
Être compréhensible et utile
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
30
LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS
www.lapeyre.fr
Être compréhensible et utile.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
31
LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS
www.ikea.fr
Être compréhensible et utile.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
#8 La compatibilité
Adapter l’interface aux caractéristiques
de l’utilisateur.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
UXREPUBLIC
33
LA COMPATIBILITÉ
Adapter l’interface aux
caractéristiques de l’utilisateur.
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
DIGITAL THINKING
Agence de Design d’interfaces &
Centre de formation
blog.ux-republic.com
Let’s talk about UX ! hello@ux-republic.com - +33 1 45 61 47 56 - @UXRepublic

Mais conteúdo relacionado

Mais procurados

What is UX Strategy?
What is UX Strategy?What is UX Strategy?
What is UX Strategy?Peter Inyang
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
L'UX design, qu'est-ce que c'est vraiment ?
L'UX design, qu'est-ce que c'est vraiment ?L'UX design, qu'est-ce que c'est vraiment ?
L'UX design, qu'est-ce que c'est vraiment ?Carole Laimay
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb BaraaHarb
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
UX Design - Soutenance 2016 Marie Glandus
UX Design - Soutenance 2016 Marie GlandusUX Design - Soutenance 2016 Marie Glandus
UX Design - Soutenance 2016 Marie GlandusMarie Glandus
 
CV chef de projet digital
CV chef de projet digitalCV chef de projet digital
CV chef de projet digitalEmily BARSANTI
 
C1. Stratégie d'influence sur les réseaux sociaux
C1. Stratégie d'influence sur les réseaux sociauxC1. Stratégie d'influence sur les réseaux sociaux
C1. Stratégie d'influence sur les réseaux sociauxCap'Com
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 
UX lesson 3: Usability First
UX lesson 3: Usability FirstUX lesson 3: Usability First
UX lesson 3: Usability FirstJoan Lumanauw
 
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK
 
Content Design: Where IA and content strategy converge
Content Design: Where IA and content strategy convergeContent Design: Where IA and content strategy converge
Content Design: Where IA and content strategy convergeBrain Traffic
 
Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®COMPETENSIS
 
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...Aurore Hondarrague
 

Mais procurados (20)

What is UX Strategy?
What is UX Strategy?What is UX Strategy?
What is UX Strategy?
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
L'UX design, qu'est-ce que c'est vraiment ?
L'UX design, qu'est-ce que c'est vraiment ?L'UX design, qu'est-ce que c'est vraiment ?
L'UX design, qu'est-ce que c'est vraiment ?
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UX Design - Soutenance 2016 Marie Glandus
UX Design - Soutenance 2016 Marie GlandusUX Design - Soutenance 2016 Marie Glandus
UX Design - Soutenance 2016 Marie Glandus
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
Research Methods in UX
Research Methods in UXResearch Methods in UX
Research Methods in UX
 
CV chef de projet digital
CV chef de projet digitalCV chef de projet digital
CV chef de projet digital
 
C1. Stratégie d'influence sur les réseaux sociaux
C1. Stratégie d'influence sur les réseaux sociauxC1. Stratégie d'influence sur les réseaux sociaux
C1. Stratégie d'influence sur les réseaux sociaux
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
Ux design process
Ux design processUx design process
Ux design process
 
UX lesson 3: Usability First
UX lesson 3: Usability FirstUX lesson 3: Usability First
UX lesson 3: Usability First
 
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
 
Content Design: Where IA and content strategy converge
Content Design: Where IA and content strategy convergeContent Design: Where IA and content strategy converge
Content Design: Where IA and content strategy converge
 
Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®
 
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...
[Mémoire] En quoi l’émergence des médias sociaux bouleverse-t-elle les straté...
 

Semelhante a Les Heuristiques de Bastien et Scapin

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoTUX REPUBLIC
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Technology
 
Atelier 5 VEM7 - La conception de sites web en mode mobile first
Atelier 5 VEM7 - La conception de sites web en mode mobile firstAtelier 5 VEM7 - La conception de sites web en mode mobile first
Atelier 5 VEM7 - La conception de sites web en mode mobile firstSalon e-tourisme #VeM
 
Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceNet Design
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Immacon
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson
 
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018YOODx
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileAudrey CHATEL
 
Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8SOAT
 
Chp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications MobilesChp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications MobilesLilia Sfaxi
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalAkiani
 
Améliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXAméliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXMicrosoft Ideas
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptxssusercb2b311
 
Drupagora 2019 : Drupal, accessibilité et RGAA
Drupagora 2019 : Drupal, accessibilité et RGAADrupagora 2019 : Drupal, accessibilité et RGAA
Drupagora 2019 : Drupal, accessibilité et RGAAALTER WAY
 
Star d'UX bordeaux #5 - service design et design persuasif
Star d'UX bordeaux #5 - service design et design persuasifStar d'UX bordeaux #5 - service design et design persuasif
Star d'UX bordeaux #5 - service design et design persuasifUX Republic Bordeaux
 
Retour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueRetour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueXWiki
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence BackeliteIdean France
 
Book 2016 michaël boitin
Book 2016 michaël boitinBook 2016 michaël boitin
Book 2016 michaël boitinMichael Boitin
 

Semelhante a Les Heuristiques de Bastien et Scapin (20)

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
 
Atelier 5 VEM7 - La conception de sites web en mode mobile first
Atelier 5 VEM7 - La conception de sites web en mode mobile firstAtelier 5 VEM7 - La conception de sites web en mode mobile first
Atelier 5 VEM7 - La conception de sites web en mode mobile first
 
Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performance
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...
 
SQLI - Club des DSI - Mobilité
SQLI - Club des DSI - MobilitéSQLI - Club des DSI - Mobilité
SQLI - Club des DSI - Mobilité
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson Portfolio
 
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8
 
Chp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications MobilesChp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications Mobiles
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canal
 
Améliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXAméliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UX
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
Drupagora 2019 : Drupal, accessibilité et RGAA
Drupagora 2019 : Drupal, accessibilité et RGAADrupagora 2019 : Drupal, accessibilité et RGAA
Drupagora 2019 : Drupal, accessibilité et RGAA
 
Star d'UX bordeaux #5 - service design et design persuasif
Star d'UX bordeaux #5 - service design et design persuasifStar d'UX bordeaux #5 - service design et design persuasif
Star d'UX bordeaux #5 - service design et design persuasif
 
Retour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ AfriqueRetour d'expérience CANAL+ Afrique
Retour d'expérience CANAL+ Afrique
 
UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
 
Book 2016 michaël boitin
Book 2016 michaël boitinBook 2016 michaël boitin
Book 2016 michaël boitin
 

Mais de UX REPUBLIC

Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieUX REPUBLIC
 
UX vs CX @UXRepublic
UX vs CX @UXRepublicUX vs CX @UXRepublic
UX vs CX @UXRepublicUX REPUBLIC
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublicUX REPUBLIC
 
Le web en perspective @UXRepublic
Le web en perspective @UXRepublicLe web en perspective @UXRepublic
Le web en perspective @UXRepublicUX REPUBLIC
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseUX REPUBLIC
 
Le rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperienceLe rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperienceUX REPUBLIC
 
Le Design empathique @UXRepublic
Le Design empathique @UXRepublicLe Design empathique @UXRepublic
Le Design empathique @UXRepublicUX REPUBLIC
 
Jeux d'innovation - UXDAY @UXRepublic
Jeux d'innovation - UXDAY @UXRepublicJeux d'innovation - UXDAY @UXRepublic
Jeux d'innovation - UXDAY @UXRepublicUX REPUBLIC
 
Le design éthique
Le design éthiqueLe design éthique
Le design éthiqueUX REPUBLIC
 
Tips digital communication victoria pereira
Tips digital communication   victoria pereiraTips digital communication   victoria pereira
Tips digital communication victoria pereiraUX REPUBLIC
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublicUX REPUBLIC
 
Web real time communication @UXRepublic
Web real time communication @UXRepublicWeb real time communication @UXRepublic
Web real time communication @UXRepublicUX REPUBLIC
 
UX made in China @UXRepublic
UX made in China @UXRepublicUX made in China @UXRepublic
UX made in China @UXRepublicUX REPUBLIC
 
Offline first @UXRepublic
Offline first @UXRepublicOffline first @UXRepublic
Offline first @UXRepublicUX REPUBLIC
 
Le système cognitif par l’exemple @UXRepublic
Le système cognitif par l’exemple @UXRepublicLe système cognitif par l’exemple @UXRepublic
Le système cognitif par l’exemple @UXRepublicUX REPUBLIC
 
Les magasins de demain @uxrepublic
Les magasins de demain  @uxrepublicLes magasins de demain  @uxrepublic
Les magasins de demain @uxrepublicUX REPUBLIC
 
SEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublicSEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublicUX REPUBLIC
 
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublic
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublicL'importance du croquis dans la phase de conception par Marie Desnos @UXRepublic
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublicUX REPUBLIC
 
La vérité sur les utilisateurs
La vérité sur les utilisateursLa vérité sur les utilisateurs
La vérité sur les utilisateursUX REPUBLIC
 
Les principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesignLes principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesignUX REPUBLIC
 

Mais de UX REPUBLIC (20)

Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative Technologie
 
UX vs CX @UXRepublic
UX vs CX @UXRepublicUX vs CX @UXRepublic
UX vs CX @UXRepublic
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublic
 
Le web en perspective @UXRepublic
Le web en perspective @UXRepublicLe web en perspective @UXRepublic
Le web en perspective @UXRepublic
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entreprise
 
Le rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperienceLe rôle du développeur front dans la User eXperience
Le rôle du développeur front dans la User eXperience
 
Le Design empathique @UXRepublic
Le Design empathique @UXRepublicLe Design empathique @UXRepublic
Le Design empathique @UXRepublic
 
Jeux d'innovation - UXDAY @UXRepublic
Jeux d'innovation - UXDAY @UXRepublicJeux d'innovation - UXDAY @UXRepublic
Jeux d'innovation - UXDAY @UXRepublic
 
Le design éthique
Le design éthiqueLe design éthique
Le design éthique
 
Tips digital communication victoria pereira
Tips digital communication   victoria pereiraTips digital communication   victoria pereira
Tips digital communication victoria pereira
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublic
 
Web real time communication @UXRepublic
Web real time communication @UXRepublicWeb real time communication @UXRepublic
Web real time communication @UXRepublic
 
UX made in China @UXRepublic
UX made in China @UXRepublicUX made in China @UXRepublic
UX made in China @UXRepublic
 
Offline first @UXRepublic
Offline first @UXRepublicOffline first @UXRepublic
Offline first @UXRepublic
 
Le système cognitif par l’exemple @UXRepublic
Le système cognitif par l’exemple @UXRepublicLe système cognitif par l’exemple @UXRepublic
Le système cognitif par l’exemple @UXRepublic
 
Les magasins de demain @uxrepublic
Les magasins de demain  @uxrepublicLes magasins de demain  @uxrepublic
Les magasins de demain @uxrepublic
 
SEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublicSEO+UX = SEOUX @UXRepublic
SEO+UX = SEOUX @UXRepublic
 
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublic
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublicL'importance du croquis dans la phase de conception par Marie Desnos @UXRepublic
L'importance du croquis dans la phase de conception par Marie Desnos @UXRepublic
 
La vérité sur les utilisateurs
La vérité sur les utilisateursLa vérité sur les utilisateurs
La vérité sur les utilisateurs
 
Les principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesignLes principes Gestalt appliqués au webdesign
Les principes Gestalt appliqués au webdesign
 

Les Heuristiques de Bastien et Scapin

  • 1. LES PRINCIPES UNIVERSELS ET INTEMPORELS DE BASTIEN ET SCAPIN © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 2. UXREPUBLIC 2 LES PRINCIPES UNIVERSELS ET INTEMPORELS Règles universelles et intemporelles à respecter lors de la conception d’interfaces ou pour identifier les principaux problèmes d’utilisabilité. - Critères de Jakob Nielsen - Critères de Bastien et Scapin … © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 3. UXREPUBLIC 3 POURQUOI CES PRINCIPES ? - Avoir une base de discussion commune - Permettre la comparaison - Fidéliser les évaluations par le même ergonome - A utiliser en conception comme en évaluation © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 4. UXREPUBLIC 4 #1 GUIDAGE Incitation Groupement / Distinction Feedback Immédiat Lisibilité #2 CHARGE DE TRAVAIL Brièveté Densité de l’information #3 CONTRÔLE DES UTILISATEURS SUR LEURS ACTIONS Actions explicites Contrôle utilisateur #4 ADAPTABILITÉ DE L’APPLICATION Fléxibilité Prise en compte de l’expérience #5 GESTION DES ERREURS Protection contre les erreurs Qualité des messages d’erreur #6 HOMOGÉNEÏTÉ ET COHÉRENCE #7 SIGNIFIANCE DES CODES ET DÉNOMINATIONS #8 COMPATIBILITÉ LES PRINCIPES UNIVERSELS ET INTEMPORELS © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 5. #1 Le guidage Conseiller, orienter, informer et conduire l’utilisateur lors de ses interactions avec l’interface. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 6. UXREPUBLIC 6 L’INCITATION www.airbnb.com - Accompagner l’utilisateur dans sa tâche - Amener l’utilisateur à effectuer des actions spécifiques - Renseigner l’utilisateur sur le contexte dans lequel il se trouve - Orienter l’utilisateur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 7. UXREPUBLIC 7 L’INCITATION - Accompagner l’utilisateur dans sa tâche - Amener l’utilisateur à effectuer des actions spécifiques - Renseigner l’utilisateur sur le contexte dans lequel il se trouve - Orienter l’utilisateur. www.leroymerlin.com © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 8. UXREPUBLIC 8 LE GROUPEMENT / DISTINCTION PAR LA LOCALISATION www.fnac.com - Organiser visuellement les items d’information les uns par rapport aux autres - Prendre en compte la localisation et le format pour indiquer : les relations entre les divers items affichés. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 9. UXREPUBLIC 9 LE GROUPEMENT / DISTINCTION PAR LA LOCALISATION www.fnac.com - Organiser visuellement les items d’information les uns par rapport aux autres - Prendre en compte la localisation et le format pour indiquer : les relations entre les divers items affichés. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 10. UXREPUBLIC 10 LE GROUPEMENT / DISTINCTION PAR LE FORMAT www.mailchimp.com - Organiser visuellement les items d’information les uns par rapport aux autres - Prendre en compte la localisation et le format pour indiquer : les relations entre les divers items affichés. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 11. UXREPUBLIC 11 LE FEEDBACK IMMÉDIAT www.gdrive.com - Informer l’utilisateur de ce qu’il se passe suite à ses actions, de manière immédiate. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 12. UXREPUBLIC 12 LA LISIBILITÉ www.hipmunk.com - Faciliter la lecture - Favoriser la compréhension de ce qui est affiché à l’écran. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 13. UXREPUBLIC 13 LA LISIBILITÉ www.arty.com - Faciliter la lecture - Favoriser la compréhension de ce qui est affiché à l’écran. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 14. #2 La charge de travail Fournir à l’utilisateur les moyens d'atteindre ses objectifs, de les atteindre rapidement et le plus facilement possible. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 15. UXREPUBLIC 15 LA BRIEVETÉ www.apple.com Garantir la simplicité de l’interface et la pertinence des fonctionnalités tout en limitant le travail de lecture © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 16. UXREPUBLIC 16 LA DENSITÉ DE L’INFORMATION Limiter la densité informationnelle de l’interface, en affichant uniquement les informations nécessaires. www.cdiscount.com © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 17. #3 Le contrôle des utilisateurs sur leurs actions Montrer que toute action du système correspond à une demande explicite de l'utilisateur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 18. UXREPUBLIC 18 LES ACTIONS EXPLICITES www.hipmunk.com Rendre explicite la relation entre le fonctionnement de l’interface et les actions des utilisateurs © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 19. UXREPUBLIC 19 LE CONTRÔLE UTILISATEUR www.topshop.com Laisser l’utilisateur contrôler le déroulement (interruption, reprise) de ses actions et l’en avertir si ce n’est pas le cas. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 20. #4 L’adaptabilité de l’application Laisser l’utilisateur personnaliser et contrôler une interface en fonction de ses besoins. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 21. UXREPUBLIC 21 LA FLEXIBILITÉ www.sarenza.com Mettre à disposition des éléments de personnalisation de l’interface pour les actions fréquemment utilisées. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 22. UXREPUBLIC 22 LA PRISE EN COMPTE DE L’EXPÉRIENCE www.gmail.com Respecter le degrés d’expérience utilisateur © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 23. #5 La gestion des erreurs Prévoir que l'utilisateur fera des erreurs et concevoir des moyens de pallier ces problèmes. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 24. UXREPUBLIC 24 LA PROTECTION CONTRE LES ERREURS www.nike.com Détecter et prévenir les erreurs ou actions impossibles. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 25. UXREPUBLIC 25 LA QUALITÉ DES MESSAGES D’ERREUR www.gmail.com Assurer la bonne compréhension et la nature de l’erreur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 26. #6 L’homogénéïté et la cohérence Respecter les choix de conception et codes graphiques effectués sur l’intégralité de l’interface. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 27. UXREPUBLIC 27 L’HOMOGENEÏTÉ ET COHÉRENCE www.ingdirect.fr Respecter les choix de conception et codes graphiques effectués sur l’intégralité de l’interface. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 28. UXREPUBLIC 28 L’HOMOGENEÏTÉ ET COHÉRENCE www.bouyguestelecom.fr Respecter les choix de conception et codes graphiques effectués sur l’intégralité de l’interface. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 29. #7 La signifiance des codes et dénominations Être compréhensible et utile © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 30. UXREPUBLIC 30 LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS www.lapeyre.fr Être compréhensible et utile. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 31. UXREPUBLIC 31 LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS www.ikea.fr Être compréhensible et utile. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 32. #8 La compatibilité Adapter l’interface aux caractéristiques de l’utilisateur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 33. UXREPUBLIC 33 LA COMPATIBILITÉ Adapter l’interface aux caractéristiques de l’utilisateur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  • 34. DIGITAL THINKING Agence de Design d’interfaces & Centre de formation blog.ux-republic.com Let’s talk about UX ! hello@ux-republic.com - +33 1 45 61 47 56 - @UXRepublic