Post on 29-Jul-2015
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 THINKINGAgence 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