LES PRINCIPES
UNIVERSELS ET INTEMPORELS
DE BASTIEN ET SCAPIN
© Copyright UX-Republic 2015 - blog.ux-republic.com - Alexand...
UXREPUBLIC
2
LES PRINCIPES UNIVERSELS ET INTEMPORELS
Règles universelles et intemporelles à respecter
lors de la conceptio...
UXREPUBLIC
3
POURQUOI CES PRINCIPES ?
- Avoir une base de discussion commune
- Permettre la comparaison
- Fidéliser les év...
UXREPUBLIC
4
#1 GUIDAGE
Incitation
Groupement / Distinction
Feedback Immédiat
Lisibilité
#2 CHARGE DE TRAVAIL
Brièveté
Den...
#1 Le guidage
Conseiller, orienter, informer et conduire
l’utilisateur lors de ses interactions avec
l’interface.
© Copyri...
UXREPUBLIC
6
L’INCITATION
www.airbnb.com
- Accompagner l’utilisateur
dans sa tâche
- Amener l’utilisateur à effectuer
des ...
UXREPUBLIC
7
L’INCITATION
- Accompagner l’utilisateur
dans sa tâche
- Amener l’utilisateur à effectuer
des actions spécifi...
UXREPUBLIC
8
LE GROUPEMENT / DISTINCTION PAR LA
LOCALISATION
www.fnac.com
- Organiser visuellement les
items d’information...
UXREPUBLIC
9
LE GROUPEMENT / DISTINCTION PAR LA
LOCALISATION
www.fnac.com
- Organiser visuellement les
items d’information...
UXREPUBLIC
10
LE GROUPEMENT / DISTINCTION PAR LE FORMAT
www.mailchimp.com
- Organiser visuellement les
items d’information...
UXREPUBLIC
11
LE FEEDBACK IMMÉDIAT
www.gdrive.com
- Informer l’utilisateur de ce qu’il
se passe suite à ses actions, de
ma...
UXREPUBLIC
12
LA LISIBILITÉ
www.hipmunk.com
- Faciliter la lecture
- Favoriser la compréhension de
ce qui est affiché à l’é...
UXREPUBLIC
13
LA LISIBILITÉ
www.arty.com
- Faciliter la lecture
- Favoriser la compréhension de
ce qui est affiché à l’écra...
#2 La charge de travail
Fournir à l’utilisateur les moyens d'atteindre
ses objectifs, de les atteindre rapidement et
le pl...
UXREPUBLIC
15
LA BRIEVETÉ
www.apple.com
Garantir la simplicité de
l’interface et la pertinence des
fonctionnalités tout en...
UXREPUBLIC
16
LA DENSITÉ DE L’INFORMATION
Limiter la densité
informationnelle de l’interface,
en affichant uniquement les
i...
#3 Le contrôle des
utilisateurs sur leurs actions
Montrer que toute action du système
correspond à une demande explicite d...
UXREPUBLIC
18
LES ACTIONS EXPLICITES
www.hipmunk.com
Rendre explicite la relation
entre le fonctionnement de
l’interface e...
UXREPUBLIC
19
LE CONTRÔLE UTILISATEUR
www.topshop.com
Laisser l’utilisateur contrôler le
déroulement (interruption,
repris...
#4 L’adaptabilité de
l’application
Laisser l’utilisateur personnaliser et contrôler
une interface en fonction de ses besoi...
UXREPUBLIC
21
LA FLEXIBILITÉ
www.sarenza.com
Mettre à disposition des
éléments de personnalisation
de l’interface pour les...
UXREPUBLIC
22
LA PRISE EN COMPTE DE L’EXPÉRIENCE
www.gmail.com
Respecter le degrés d’expérience
utilisateur
© Copyright UX...
#5 La gestion des erreurs
Prévoir que l'utilisateur fera des erreurs et
concevoir des moyens de pallier ces
problèmes.
© C...
UXREPUBLIC
24
LA PROTECTION CONTRE LES ERREURS
www.nike.com
Détecter et prévenir les erreurs
ou actions impossibles.
© Cop...
UXREPUBLIC
25
LA QUALITÉ DES MESSAGES D’ERREUR
www.gmail.com
Assurer la bonne compréhension
et la nature de l’erreur.
© Co...
#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’in...
UXREPUBLIC
27
L’HOMOGENEÏTÉ ET COHÉRENCE
www.ingdirect.fr
Respecter les choix de
conception et codes graphiques
effectués ...
UXREPUBLIC
28
L’HOMOGENEÏTÉ ET COHÉRENCE
www.bouyguestelecom.fr
Respecter les choix de
conception et codes graphiques
effe...
#7 La signifiance des codes
et dénominations
Être compréhensible et utile
© Copyright UX-Republic 2015 - blog.ux-republic....
UXREPUBLIC
30
LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS
www.lapeyre.fr
Être compréhensible et utile.
© Copyright UX-Republ...
UXREPUBLIC
31
LA SIGNIFIANCE DES CODES ET DÉNOMINATIONS
www.ikea.fr
Être compréhensible et utile.
© Copyright UX-Republic ...
#8 La compatibilité
Adapter l’interface aux caractéristiques
de l’utilisateur.
© Copyright UX-Republic 2015 - blog.ux-repu...
UXREPUBLIC
33
LA COMPATIBILITÉ
Adapter l’interface aux
caractéristiques de l’utilisateur.
© Copyright UX-Republic 2015 - b...
DIGITAL THINKING
Agence de Design d’interfaces &
Centre de formation
blog.ux-republic.com
Let’s talk about UX ! hello@ux-r...
Prochain SlideShare
Chargement dans…5
×

Les Heuristiques de Bastien et Scapin

1 973 vues

Publié le

UX-REPUBLIC
Agence de Design d'interfaces & Centre de formation.
www.ux-republic.com

156 boulevard Haussmann - 75008 Paris
+33 1 45 61 47 56 - hello@ux-republic.com

Alexandra Bernards
https://www.linkedin.com/in/alexandrabernards

Publié dans : Design

Les Heuristiques de Bastien et Scapin

  1. 1. LES PRINCIPES UNIVERSELS ET INTEMPORELS DE BASTIEN ET SCAPIN © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. #8 La compatibilité Adapter l’interface aux caractéristiques de l’utilisateur. © Copyright UX-Republic 2015 - blog.ux-republic.com - Alexandra Bernards
  33. 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. 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

×