Visualisation et Ergonomie Quelles bonnes pratiques adopter?
Frédéric Chaperon Partner Enablement Manager – Qlik France
06 Mars, 2014
ENJEU
Séquence de lecture
1ère Etape • Bords • Couleurs • Textures
2ème Etape • Motifs • Contours • Mouvement
3ème Etape • Réflection orientée
vers le but
• Concentration sur un petit nombre d’objets
Comment lit-on ?
Agenda
• Visualisation & Perception
• Ergonomie & Design
• 7 points pour une interface
• Pour aller plus loin…
Visualisation & Perception
• Couleurs
– Daltonien ?
– Voir avec le cerveau Vs yeux
• Design confus & Contexte
Attention à …
Daltonien ?
Test de Ishihara
planches « pseudoisochromatiques »
8 % 0,5 %
Test de Ishihara
8 (Daltoniens rouge-vert voient 3)
Test de Ishihara
7
Yeux et Cerveau …..
Design confus : pas assez d’information
Contexte
Laquelle de ces 2 entreprises fait mieux?
Le comportement naturel chez l’homme
Ergonomie
Vs Design
Design vs. Ergonomie
Design vs. Ergonomie
Ergonomie ? • Ergonomie ≠ Design
• L’ergonomie n’est pas spécifique à la BI ou à l’IT
• L’ergonomie n’est ni facile, ni naturelle
L’ergonomie est un ensemble de fonctionnalités qui rendent naturelle et facile l’utilisation d’un outil pour un utilisateur final.
Ergonomie de mon application Qlikview
Base de l’ergonomie d’une application QlikView
• Cohérence
• Ne pas perdre l’utilisateur
• 1 seule façon de faire une action
• Nombre limité de données à l’écran
• Simple (Keep it simple )
Cohérence : l’inconsistance fait peur…
Cohérence: construire un “template”
• Avec … • Objets textes
• Des images et des actions
• 3-4 filtres principaux
… définir et respecter la charte
Graphique
Même police
Même style d’en-tête
Même Couleurs
Fonctionnelle Même terminologie
Même fonctionnalités (actions, …)
Même KPIs
Cohérence : charte graphique
Charte graphique de votre entreprise?
– Réutiliser (couleurs, police, …)
– Logos (?)
– Application Qlikview # www.entreprise .com
– Valider avec le département marketing si nécessaire
Design de mon application Qlikview
K.I.S.S.
?
Rester Simple Keep It Simple / Stupid
Ne pas compliquer les choses
• Le positionnement
Le comportement naturel chez l’homme
3
2 1
4
Quelle lecture avez-vous?
Et ici?
Ou...
un ensemble et on ne sait par où commencer
Le comportement naturel chez l’homme
La taille
Quel cadre regardez-vous en 1er ?
2 Hierarchie Utiliser la taille du texte à son avantage
(le moins important ici )
Contraste
Presentation by Michael Anthony, 2011.
Presentation by Michael Anthony, 2011.
Le comportement naturel chez l’homme
Les couleurs
Trop de couleurs tuent la couleur!
Le comportement naturel chez l’homme
Les couleurs
Du contraste
Le comportement naturel chez l’homme
Les couleurs
Qu’est ce qui ne va pas?
La persistance des couleurs
A
B
C B
C
A
Application Qlikview : 7 points pour une interface
1. Résolution 2. Rendu épuré et professionnel 3. Rendre obligatoire 4. Données compréhensibles 5. Icônes 6. Encombrement 7. Tape-à-l'œil
Résolution
• Standard - 1024x768 résolution (projecteur)
• Réduire la hauteur si utilisation sur tablette
Rendu épuré et professionnel
Utiliser l’espace
Affichage des données compréhensible - Avant
Affichage des données compréhensible - Après
Icônes - Avant
Icônes - Après
Tape-à-l'œil - Avant
Tape-à-l'œil - Après
Pour aller plus loin…
Ressources
• QlikView Developer Tool Kit
• Site de démo : http://demo.qlikview.com/
• QlikCommunity : http://community.qlikview.com/
Et en fonction de votre besoin …
Votre Besoin
• Anticipation ? Formation : bonnes pratiques de visualisation (2 jours)
• Evolution et Revue d’applications ? Département Expert Services pour audit et optimisation
• Information ? Nombreux webinars et évènements sur le sujet
Ne pas oublier …
Business & Intelligence
+
Beauty & Intelligence
Merci
Et à demain…