DÉMO IDUG
Ergonomie des interfaces tactiles
DÉFINITION DE L’ERGONOMIE
aLain Wisner (1923 -2004)
«L’ensemble des connaissances scientifi ques relatives à l’homme nécessaire pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d‘effi cacité.»
Discipline qui vise l’adaptation d’un système à son utilisateur, afi n que ce dernier puisse mener ses activités avec un maximum d’effi cacité, de satisfaction et de bien-être.
(Wikipédia)
ERGO
Ergon = TravailNomos = Règle
NOMIE
> Etymologie du mot « ergonomie »
CRITÈRES DE BASE DE L’ERGONOMIE
L’UTILITÉ permet de répondre à un besoin et capter l’internaute pour qu’il reste sur un site, et pour profi ter de son utilité, il doit être utilisable. C’est la deuxième grande dimension de l’ergonomie.
L’UTILISABILITÉ permet de faciliter la satisfaction du besoin en les aidant à trouver plus facilement les in- formations voulues. D’après la norme ISO 9241 : “ Un produit est dit utilisable lorsqu’il peut être utilisé avec effi cacité, effi cience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d’utilisation donné”.
QUELQUES RÈGLES D’ERGONOMIE
CohérenCe
Capitaliser sur l’apprentissage interne.
Homogénéité du site dans la localisation des éléments, l’aspect des élément, le comportement des élé- ments interactifs.
Le comportement doit toujours être le même ! Convention
Le site capitalise sur l’apprentissage externe.
Respecter les conventions de localisation, d’interaction des éléments récurrentes sur le web.
L’ergonomie ne permet pas de se démarquer, il faut passer par le design.
Ne pas oublier que l’on préfère ce que l’on connaît, tout simplement.
(Amélie boucher)
QUELQUES RÈGLES D’ERGONOMIE
information
Le site informe l’internaute et lui répond.
Informations ponctuelles et contextuelles, feed-back d’interaction.
Compréhension
Les mots et symboles sont choisis minutieusement.
Icône, bouton, affordances… 75% du travail d’ergonomie , c’est ce qui va faire cliquer (toucher) l’internaute (le lecteur) ou pas.
(Amélie boucher)
SIGNE DE MARQUAGE DE PAGE
Wired Magazine
SIGNE DE MARQUAGE DE PAGE
Wired Magazine
SIGNE DE MARQUAGE DE PAGE AVEC FOLIO
M Le Monde Appliness
TABLETTES VS SMARTPHONE les contraintes écrans
960px
640px
Défini-on
326 dpi
iPhone 4
iPhone 3
Défini-on
163 dpi
9,7ˮ
768px
1024px iPad 1&2
Défini-on
132 dpi
9,7ˮ
1536px
2048px iPad 3
Défini-on
264 dpi
LE CONCEPT D’AFFORDANCE
Capacité d’un objet à suggérer sa propre utilisation (A. Boucher)
Ene sitibus aceped eictae maion nis mi, aut ut alitat esequam enistota dita dolum ullatur re simuste plibus que nimus, offi cto tet occupti berume sit et quamu event quas adit int quo mincturerunt eumquidio. En- daerum est latur arcillor min nate dolorro et andaest,
TAILLE DES ÉLÉMENTS D’INTERFACE
éLéments ContiGUs
Si les éléments sont contigus, la hauteur minimale (1) est d’environ 40/45 pixels pour un Ipad 1 et 2.
Il est consillé d‘utiliser des dimensions plus importantes pour les zones fréquemment utilisées et les actions principales de l’interface (2).
1 2
TAILLE DES ÉLÉMENTS D’INTERFACE
éLéments non ContiGUs
Sur iPad 1 et 2 il est préconisé d’avoir des éléments touchables non-contigus au minimum de 25 pixels de hauteur par 40 pixels de largeur.
Entre ces éléments il est conseillé de laisser un espace d’au moins 10 pixels.
La taille d’un index est d’environ 40 / 45 pixels de large.
25 pixels
GESTION DE LA TYPOGRAPHIE
Pour une lecture confortable, privilégié un corps d’environ 16 à 18 pixels Interlignage d’environ 140%
Ligne de 45 à 65 caractères Respecter les marges (grilles) Mettre en évidence les liens
http://www.adobe.com/type/browser/legal/additional_licenses.html
LES MODES D’APPRÉHENSIONS MANUELLES DES TABLETTES
Posé (Mains libres)
A une main avec une
main libre A deux mains avec pouces actifs
LES MODES D’APPRÉHENSIONS MANUELLES DES TABLETTES
Sur un écran tactile, les différentes zones de l’interface ne sont pas atteignables avec la même facilité.
L’accessibilité des objets est à la fois relative à la taille de l’écran et à l’utilisation d’une ou deux mains.
Comme le montre le schéma suivant, les éléments situés en bas de l’écran sont facilement atteignables alors que l’accès aux informations situées aux extrémités supérieures et notamment à gauche est plus contraignant.
En tactile l’idéal est donc de placer les actions récurrentes ou principales dans la partie basse de l’écran.
À l’inverse les actions occasionnelles ou engageantes seront plutôt à positionner dans la partie haute.
La position des éléments a aussi un impact sur la fatigue qui n’est pas négligeable en tactile.
On évitera d’obliger l’utilisateur à faire des mouvements longs de manière répété. D’autant plus que sur écran tactile la main de l’utilisateur masque toujours une partie de l’interface. En effet, pour aller appuyer sur la partie haute de l’écran l’utilisateur occulte une bonne partie de l’application. Il faut donc veiller à ce que les éléments tactiles soient disposés de telle sorte que les interactions tactiles puissent être effectuées sans nuire à la visibilité de l’écran.
LES MODES D’APPRÉHENSIONS MANUELLES DES SMARTPHONES
Deux mains, pouces actifs
Une main libre Exemple Flipboard
QUELQUES RECOMMANDATIONS
• Il n’y a pas de survol (Rollover) en tactile : veiller à rendre l’interface explicite et ne pas bloquer l’usage.
• Proposer des gestuelles simples.
Les gestuelles complexes peuvent être utilisées pour les fonctions annexes.
• Créer une page qui expliquer à l’utilisateur comment manipuler l’interface.
• Concevoir des objets de taille suffisante pour le toucher.
• Le zoning est primordial : les erreurs de manipulations sont plus fréquentes avec la main qu’avec une souris.
• Prendre en compte la fatigue qu’impliquent les mouvements du bras et de la main.
• Enrichir l’expérience utilisateur en optimisant les modes portrait et paysage.
• Organiser des tests utilisateur pour vérifier la pertinence des fonctionnalités et l’utilisabilité de l’interface
• Optimiser les contenus, afin que le magazine ne soit pas trop lourd à télécharger.
