1

Ludovic MaindronIngénieur UTC en génie logiciel

DESS ergonomie Paris V 12 ans d’expérience en conception d’Interfaces Homme

Machine

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Cours 2:Conception d’une IHM

22

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Architecture logicielle côté client

Composants graphiques

Couche écran

Couche de présentation applicative

APP1 APP2

Patrons de conception

Langage (java, javascript, C#,Objective C...)

Couche composants

…

API graphique

33

Mon retour d’expérience1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

•Méconnaissance des patrons de conception IHMManque de cohérence entre les écransTendance à réinventer des dialogue Homme/Machine pourtant

déjà connu des utilisateursUtilisation de patrons non adapté à la plate forme

•Difficulté à mettre en œuvre les APIs dédiés à l’IHMManque de composants graphiques évolués prêt à l’emploi (Ex :

Swing ou web)Manque d’expertise technique en implémentation d’IHMArchitecture IHM hétérogène difficilement maintenable (Ex :

framework javascript)Coûts de développement très élevés pour maintenir un composant

graphique

44

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Entrer une information•Les tâches de saisie

Facteur très important de pénibilitéSource d’erreurs : problématique de dédoublonnage

•Champ de saisie SimpleEtendu : typée, texte riche…

•Aide à la saisie : accélérer et sécuriser la saisieFiltrage clavierSuggestions et auto-complétion Tolérance à l’erreur : mispellingValeurs par défaut : efficace mais risque d’erreur

55

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Faire un choix•Fixe : moins de 10 éléments

Exclusif : boite à optionCumulatif : case à cocher

•Variable mais limité : quelques dizaines d’éléments

Exclusif : liste déroulante Cumulatif : liste à cocher

•Sans limiteChamp de recherche avec

suggestionsChamp de saisie non éditable avec un

bouton

66

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Les listes et leurs dérivés•Listes

Ensemble d’occurrence d’un même type

Contenu de chaque cellule plus ou moins complexe

•TableauxColonnes : triable, ordonnancable,

largeur variableLignes : hauteur fixeLimites : nombre de lignes et de

colonnes•Arbres

Une liste avec des relations hiérarchiques

Limites : profondeur de hiérarchie

77

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Les boutons•Boutons simples

Déclencher une actionEtats : actif, inactif, appuyé, survoléTexte et/ou icône ?

•PoussoirsChanger de mode d’affichage :

alternative aux onglets en mobilitéPas plus de 4-7 boutons groupés

•DéroulantsAlternative au menuSplit button

•Barre d’outilsPlus ou moins complexes

88

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Navigation et menu•Les menus

Le menu principalTour de contrôle de l’applicationDéfinit le chemin vers les fonctions les plus courantes

Les menus contextuelsUniquement des points d’entrée alternatifs

•MultifenêtrageLogique SDI, MDIEmpilement de fenêtre

99

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Spatialisation ou zoning

•Définition : organiser les composants graphiques pour structurer l’information

Choix de la dimension : éviter troncage du texte et usage d’abréviation

Choix de la position : tenir compte du sens de lecture et du niveau d’importance de l’information

Définit les zones de l’écran et surtout leur imbrication•Objectif : assurer une présentation structurée et cohérente

1010

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Composants dédiés au zoning•Regrouper des informations

Cadre avec titre Ligne avec ou sans titre : structuration

verticale•Onglets

4-7 pages max, principe d’indépendanceUn seul onglet, jamais d’imbrication « Nice to have » : reordonnancement,

cacher/montrer•La face cachée de l’IHM

Barre de défilementPanneau déroulantSplittersAccordéons

1111

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Les boites de dialogues•Notion de modalité

Le système attend une interaction de l’utilisateur pour poursuivre les traitements

Comportement synchrone : le dialogue homme/machine est suspendu jusqu’à le système obtienne une réponse de l’utilisateur

•Boites de dialogues standardsDemande de confirmationMessage d’information ou

d’erreurMessage d’avertissement Message d’attente

1212

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Les raccourcis clavier•Permettent d’accélérer l’utilisation de l’application pour les utilisateurs expérimentés•Les mnémoniques : Alt + Lettre de l’alphabet

La lettre du libellé du bouton, élément de menu ou champ de saisie est souligné : mémorisation inutile

A réserver aux actions fréquentes car leur nombre est limité (26)•Raccourcis standards : en fonction de l’OS

Ctrl + Q : quitter, F5 : rafraichir, Ctrl + C : copier…Touche ENTREE (Bouton par défaut), Touche ESCAPE

•Raccourcis non standards : toute combinaison de toucheAccès possible à une fonctionnalité en tout point avec une seule

toucheDifficile à mémoriser

1313

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Patrons de conception IHM

•Solutions préconçues permettant de résoudre des problématiques récurrentes de dialogue homme machine •Usage répandu dans les applications rendant probable sa connaissance par l’utilisateur•Imbrication de patrons possible

1414

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Formulaire •Définition : saisie séquentielle d’informations•Priorité des informations

1 : Zone supérieure, toujours visible et dont les informations sont lue en premier par l’utilisateur

2 : premier onglet, visible à l’ouverture de l’écran

3 : autres onglets, visible par sélection de l’utilisateur

4 : boutons ouvrant une fenêtre avec informations secondaires

•Problématique de performancesMinimiser les informationsChargement asynchrone des onglets

1515

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Maitre/détail

•Une liste ou un tableau associé à un formulaire•Le formulaire est rempli à chaque changement de la sélection dans la liste•Respecte le sens de lecture naturel (maitre à gauche ou en haut)•Variantes

Arbre et tableau (Ex : explorateur windows) Double liste (relation 1 à plusieurs)Tableau et champ texte (Ex : client de messagerie)

1616

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Liste avec actions

•Une liste ou un tableau, associé à une barre d’outil•Chaque ligne de la liste correspond à une occurrence d’un même type (Ex : un client ou une commande)•Chaque bouton d’action agit sur la ou les lignes sélectionnées•Attention à la charge mentale !

< 500 lignes, < 7 boutons, < 10 colonnes

1717

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Recherche et résultats

•Association d’un formulaire de recherche et d’une liste ou un tableau de résultats•Bouton Rechercher : lance la recherche puis affiche les résultats

Facultatif si un seul champ ou en l’absence de champ de saisie•Problématique de performance : jointure multiple, elastic search•L’utilisateur doit pouvoir identifier la requête

Seuls les champs remplis sont pris en compte suivant un ET logique Opérateur : égalité stricte par défaut, sinon indiqué visuellement

•Variantes : Recherche/détail (1 seul résultat) Tableau ou liste filtrée

1818

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Tableau de bord

•Affichage d’informations clés sur un seul écran sous forme d’une agrégation de sous vues totalement indépendantes : graphiques, liste, tableaux•Affichage paramétrable : dimensionnement et ordonnancement des zones, cacher/montrer des zones•Mise à jour en temps réel•Pas de saisie : interactions de paramétrage et de navigation uniquement

1919

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Assistant

•Enchainement séquentiel d’écrans correspond aux étapes d’un processus•Nombre d’étapes pas forcement fixe car la navigation peut être arborescente.•A utiliser pour lancer un traitement nécessitant de séquencer les informations à saisir (type arbre de décision)

2020

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Paramétrage de l’IHM •Définition : regroupe l’ensemble des paramètres permettant de modifier l’aspect de l’IHM•Besoin de souplesse

Plusieurs contextes d’affichages en fonction du métier de l’utilisateur

Disparité des utilisateurs•Eviter l’écran de paramétrage fourre tout (Ex : word)

Trop de paramètresDifficulté à appréhender l’impact des modifications

•Privilégier le paramétrage impliciteLe principe : retrouver l’application dans l’état où je l’ai laisséLe moyen : personnalisation de l’affichage « in situ » Mémorisation d’un contexte utilisateur sur le serveur

2121

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Web : site ou application ?

•La frontière est floue•Site web : structure orientée document, contenu statique, interactions simples orientées consultation

•Application web : contenu très dynamique, nombreux formulaires et interactions de saisies

2222

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Web : spécificités•Windows : métaphore du bureau

Plusieurs documents (fenêtres) sur un espace de travail (bureau)

Une fenêtre principale et plusieurs fenêtres filles se chevauchant

Largeur et hauteur variable mais limitée à la taille de l’écran => barre de défilement interne

Navigation par empilement de fenêtres•Web : métaphore du journal

Hauteur variable : plutôt un défilement vertical global que des zones internes

Largeur fixe => pas de barre de défilement horizontal

Navigation par hyperlien

2323

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Web : limites•Technologiques

Compatibilité multi navigateurs : risque de tirer l’UX vers le basMultitude de framework orienté UINécessite l’utilisation intensive de javascriptRéactivité

•Historiques : le web n’a pas été conçuPour des interactions de saisiePour des utilisations intensives

•HTML 5 : la solution ?

2424

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : problématique

•Définition : principes de conception adressant la problématique d’affichage d’une IHM sur différents types de terminaux •Problématique ergonomique

Variabilité : ratio, densité, surface physique Petits écrans : lisibilité, effet timbre poste,

boutons non accessibles

Grands écrans : effet loupe, syndrome du plus petit écran commun, perte d’espace utile (bandes latérales), images bitmap trop petites ou pixellisées

2525

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : solutions

•Conception par layoutPolitique de placement des composants graphiques en fonction

de la taille de l’écranLa taille des composants se réduit/s’agrandit en fonction de

l’espace disponible Quelques layouts standards que l’on peut imbriquerNécessite des éléments sur l’activité pour décider quelle sont les

zones prioritaires•Ressources graphiques adaptées

Fournir les images en plusieurs tailles Images agrandissables sans perte de qualité : techniques des 9

images

2626

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : Border Layout

•Zone centrale prioritaire : hauteur et largeur >60%•Pied de page et haut de page facultatif à hauteur fixe•Zone gauche et droite facultative à largeur fixe•Utiliser des panneaux repliables permet de maximiser l’espace utile

2727

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : Flow Layout

•Métaphore de la lecture : les composants sont dessinés sans troncage de gauche à droite puis de haut en bas •Layout par défaut en HTML

2828

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : Table Layout

•Série de n lignes et de n colonnes•Chaque cellule est retaillée uniformément •Similaire au layout des tables HTML•Span ou fusion de cellule : horizontal ou vertical

2929

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Responsive design : Linear Layout

•Cas particulier d’un TableLayout•1 ligne : alignement horizontal•1 colonne : alignement vertical

3030

Vos Questions ?1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

gLudovic Maindron Consultant ergonome

l.maindron.ihmconsulting@gmail.com

06 28 07 22 35

@ludolmn

Sources : http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns