DÉMO IDUGErgonomie 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  =  Travail  

Nomos  =  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érenCeCapitaliser 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 !

ConventionLe 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

informationLe site informe l’internaute et lui répond.Informations ponctuelles et contextuelles, feed-back d’interaction.

CompréhensionLes 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 PAGEWired Magazine

SIGNE DE MARQUAGE DE PAGEWired Magazine

SIGNE DE MARQUAGE DE PAGE AVEC FOLIO

M Le Monde Appliness

TABLETTES VS SMARTPHONEles 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’AFFORDANCECapacité 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, o� 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 ContiGUsSur 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 TYPOGRAPHIEPour une lecture confortable, privilégié un corps d’environ 16 à 18 pixelsInterlignage d’environ 140%Ligne de 45 à 65 caractèresRespecter 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 TABLETTESSur 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.

www.ziggourat.com