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…