DÉMO IDUG Ergonomie des interfaces tactiles

Transcription

1 DÉMO IDUG Ergonomie des interfaces tactiles

2 DÉFINITION DE L ERGONOMIE alain Wisner ( ) «L ensemble des connaissances scientifiques 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 efficacité.» Discipline qui vise l adaptation d un système à son utilisateur, afin que ce dernier puisse mener ses activités avec un maximum d efficacité, de satisfaction et de bien-être. (Wikipédia) ERGO Ergon = Travail NOMIE Nomos = Règle > Etymologie du mot «ergonomie»

3 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 profiter 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 informations voulues. D après la norme ISO 9241 : Un produit est dit utilisable lorsqu il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d utilisation donné.

4 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)

5 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)

6 SIGNE DE MARQUAGE DE PAGE Wired Magazine

7 SIGNE DE MARQUAGE DE PAGE Wired Magazine

8 SIGNE DE MARQUAGE DE PAGE AVEC FOLIO M Le Monde Appliness

9 TABLETTES VS SMARTPHONE les contraintes écrans iphone 3 ipad 1&2 1024px 640px Défini-on 163 dpi 9,7ˮ 768px Défini-on 132 dpi Défini-on 326 dpi 960px ipad px iphone 4 9,7ˮ 1536px Défini-on 264 dpi

10 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, officto tet occupti berume sit et quamu event quas adit int quo mincturerunt eumquidio. Endaerum est latur arcillor min nate dolorro et andaest,

11 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). 2 1

12 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

13 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

14 LES MODES D APPRÉHENSIONS MANUELLES DES TABLETTES Posé (Mains libres) A une main avec une main libre A deux mains avec pouces actifs

15 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.

16 LES MODES D APPRÉHENSIONS MANUELLES DES SMARTPHONES Deux mains, pouces actifs Une main libre Exemple Flipboard

17 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.