Cours 4 : ergonomie et mobilite

20
1 Ludovic Maindron Ingénieur UTC en génie logiciel DESS ergonomie Paris V 12 ans d’expérience en conception d’Interfaces Homme Machine 1 1 / 0 1 / 2 0 1 2 L u d o v i c M a i n d r o n I H M C o n s u l t i n g Cours 4 : Ergonomie et mobilité

description

Ergonomie et mobilite

Transcript of Cours 4 : ergonomie et mobilite

Page 1: Cours 4 :  ergonomie et mobilite

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 4 :Ergonomie et mobilité

Page 2: Cours 4 :  ergonomie et mobilite

22

Les différents niveaux de mobilité

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

• Non mobile : type bureautique Position fixe Temps d’utilisation long : plusieurs heures, rarement interrompu Posture assise et environnement confortable Attention exclusive permettant de se concentrer à 100%

• Semi mobile : type tablette Position variable mais sur un lieu fixe (maison, travail) Temps d’utilisation moyen : quelques dizaines de minutes Postures variées (assis, sur les genoux, couché ou allongé)

• Mobile : type smartphone Usage en déplacement, à une ou deux mains Temps d’utilisation faible, en temps volé Postures variées (debout en marchant, assis, allongé) Environnements variés : intérieur (train, voiture…) et extérieur Attention faible car la tâche est secondaire

Page 3: Cours 4 :  ergonomie et mobilite

33

De nouvelles situations d’usages

•80% des utilisateurs de tablette ont un usage exclusif à la maison via Wifi

Page 4: Cours 4 :  ergonomie et mobilite

44

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

• Une grande variabilité Tailles physiques Densités d’affichage Rapport hauteur/largeur

• Une résolution réduite Problématique de lisibilité Basculement portrait/paysage Impossible d’afficher de nombreuses informations

• Conséquences Responsive design fortement recommandé Limiter les informations à afficher

Caractéristiques des écrans

Page 5: Cours 4 :  ergonomie et mobilite

55

• Clavier virtuel Tâche de saisie par défaut ingrate Moins de touches Pas de combinaison ni de raccourcis Taille réduite des touches Usage fréquent à un seul doigt

• Conséquences Risque d’erreur important Considérer l’utilisation du clavier virtuel comme un dernier recours Limiter les tâches de saisie au maximum Aides à la saisie indispensables

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Saisie au clavier

Page 6: Cours 4 :  ergonomie et mobilite

66

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

• Les interactions tactiles sont différentes de la souris Plus intuitif Moins précis (surface plutôt que point) Plusieurs points de contact Notion de « gestures » Pas de double clic

• Conséquences L’IHM doit être pensée pour des interactions tactiles

Interface tactile

Page 7: Cours 4 :  ergonomie et mobilite

77

Des contraintes logicielles1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

• Normes propres au système d’exploitation Guidelines par plateforme Composants graphiques spécifiques (Ex : pas de tableaux sous iOS) Plus de variabilité entre OS qu’en environnement bureautique

• Qualité du réseau Accès intermittent et aléatoire Débit limité Risques de latence et de délai d’attente

• Standards de qualité plus élevés Niveau de qualité des applications iOS très élevé Réactivité très bonne Design très soigné L’utilisateur mobile est habitué à une très bonne expérience utilisateur

Page 8: Cours 4 :  ergonomie et mobilite

88

Des capacités propres• Nombreux capteurs

GPS : géo localisation Accéléromètre : principe du lancer pour les barres de défilement Gyroscope : basculement portrait/paysage Caméra : photo (Ex : saisie par QR code) ou vidéo Téléphonie : passer un appel

• Possibilité d’interagir avec les applications installées Planifier des tâches : agenda Gestionnaire de contacts

• Les questions à se poser Comment mettre à profit les capteurs pour améliorer le service ? Comment interagir avec les applications existantes ?

Page 9: Cours 4 :  ergonomie et mobilite

99

Mon retour d’expérience• Absence de remise en question des structures projet

Portage bête et méchant de ce qui existe en situation fixe Méconnaissance des contraintes liées à la mobilité

• Sous exploitation des capacités du smartphone Exploitation inexistante ou à la marge des capteurs Utilisation gadget du système de notification push

• IHMs trop complexes Présence de fonctions inutiles car inexploitable en situation de mobilité Trop de saisie (Ex : formulaire de contact ou saisie d’un N° de colis)

• IHMs peu lisibles Boutons ou libellés trop petits Zones défilables trop nombreuses et peu identifiables Mode paysage non exploité

Page 10: Cours 4 :  ergonomie et mobilite

1010

Les questions à se poser• A quoi sert l’application ?

La réponse doit être simple… 3 fonctions maximum

• Comment mettre à profit les capteurs pour améliorer le service ? Qu’apporte la géo localisation ? Comment exploiter l’appareil photo ? …

• Comment interagir avec les applications existantes ? Envoi de SMS, déclenchement d’un appel téléphonique Enrichir le carnet d’adresse plutôt qu’un simple lien vers un contact Possibilité de poser un RDV ou un rappel dans l’agenda

• Comment se comporte l’application hors ligne ? • Comment exploiter le mécanisme de notification ?

Page 11: Cours 4 :  ergonomie et mobilite

1111

Les composants mobiles• Absents

Les onglets : remplacés par une barre d’outil avec un bouton poussoir Les tableaux : remplacés par des listes Menu hiérarchiques Arbres

• Adaptés Boutons : visuel Combo box, Date picker : sélection par case,

• Nouveaux Indicateur de pagination

Page 12: Cours 4 :  ergonomie et mobilite

1212

Listes

• Contenu des cellules potentiellement complexe : textes, images, boutons

• Bien plus que le composant habituel : Menu arborescent Formulaire (Ex : Paramétres sous iOs)

Page 13: Cours 4 :  ergonomie et mobilite

1313

Principe de navigation

• Enchainement arborescent d’écrans Chaque écran a un titre Accès à un ou plusieurs écrans fils Retour à l’écran parent via un bouton portant le titre de l’écran cible

• Remplace l’empilement de fenêtre• Similaire à la navigation web mais sans bouton Suivant• Cas particulier d’Android : navigation multi applications

Page 14: Cours 4 :  ergonomie et mobilite

1414

Navigation avancée : split view

• Combinaison d’un maitre/detail avec une ou deux barres de navigation Uniquement sur iPad Gestion automatique du basculement

portrait/paysage Métaphore du client de messagerie iOS

Page 15: Cours 4 :  ergonomie et mobilite

1515

Ce qu’il ne faut pas faire• Raisonner à l’identique d’une application web ou bureautique

Portage d’une application existante sans repenser l’IHM Introduire du fonctionnel nécessitant de nombreuses interactions de saisie Application vitrine non utilisée : « Run Once, then remove »

• Adopter la logique du toujours plus Reproduire des fonctions déjà disponibles (Ex : agenda) Trop de fonctionnalités : complexité toujours rejetée en mobilité Trop de champs : lisibilité prioritaire, éviter les barres de défilement

multiples Trop d’écrans : 4 ou 5 écrans maximum

• Ne pas tenir compte du contexte mobile Oublier que l’utilisateur est en mouvement Oublier que l’utilisateur fait autre chose Oublier que l’utilisateur mobile est « Mr tout le monde » Oublier les capacités propres d’un Smartphone

Page 16: Cours 4 :  ergonomie et mobilite

1616

Conclusion1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

• Si l’ergonomie est un plus sur les applications bureautiques, c’est une exigence en mobilité Les contraintes des situations d’usage mobile sont trop fortes pour

compter sur l’adaptation de l’utilisateur La taille limité de l’écran et le mode de saisie change les principes de

visualisation et d’intéractions

• Une application mobile doit rendre un véritable service à l’utilisateur La valeur ne vient pas de l’accumulation de fonctions mais de la

pertinence du service rendu Une application = une fonction

• La difficulté consiste à raisonner différemment Logique du toujours moins Projection en situation de mobilité

Page 17: Cours 4 :  ergonomie et mobilite

1717

Le cloud et le multi device• Le concept de cloud est ancien mais présentait des verrous

Techniques : compatibilité entre OS, mémoire limitée sur les serveurs Psychologiques : réticence à communiquer des informations

personnelles, usage privatif de l’ordinateur

• Vision du cloud côté client Multiplication des terminaux : smartphone, tablette, PCs, TVs… Besoin d’accès à des fonctionnalités, en tout lieu, à tout instant et dans

toutes les situations Un même utilisateur alterne des sessions sur ses différents terminaux Architecture n-tiers : un serveur et plusieurs clients dans des

technologies différentes Quelques exemples : Dropbox, Projet voltaire

• Vers une révolution ? L’utilisateur choisira toujours le terminal offrant la meilleure expérience

utilisateur. Vers une spécialisation des IHMs par situation d’usage ?

Page 18: Cours 4 :  ergonomie et mobilite

1818

Les IHMs de demain• Toujours plus de capteurs

Caméra à reconnaissance du mouvement : analyse des postures, commandes gestuelles

Micro géolocalisation • Les tendances

« Online everywhere » : connexion internet permanente

« Use everywhere » : continuité d’usage sur plusieurs terminaux

• Réalité augmentée : du virtuel dans le réel Un calque sur le champ de vision Mise à jour en temps réel Une nouvelle dimension au sens de la vue

• Google glass : prochaine révolution ? Tête haute : IHM dans le champ de vision Flux entrant : tactile et vocale Libère les mains : nouveaux usages

Page 19: Cours 4 :  ergonomie et mobilite

1919

Les IHMs du futur• Bio informatique

Puces sous cutanées : identification, paiement… Prothèses cybernétiques : progrès à faire pour le

sens du toucher Interfaces neurales : communication directe

cerveau machine, l’IHM ultime ?• Vers l’effacement

Toujours plus discrètes, bientôt invisibles Toujours plus indispensables L’homme augmenté : de nouvelles facultés

physiques ou intellectuelles induites par des prothèses ou des implants électroniques

• Des questions philosophiques Vers une connexion internet permanente ? Vers la fin de la vie privée ? Conséquences psychologiques de la fusion de

l’homme et de la machine ? Des augmentations uniquement pour les riches ?

Page 20: Cours 4 :  ergonomie et mobilite

2020

Vos Questions ?1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

gLudovic Maindron Consultant ergonome

[email protected]

06 28 07 22 35

@ludolmn