L'accessibilité des sites Web et des applications pour les mobiles

Comportement des mobinautes : le point de vue d’un ergonome

Romain ROUYER, UX Designer – Smile Digital

Ergonome, spécialisé dans les interfaces homme-machine, Romain met quotidiennement en place des méthodologies de conception centrée utilisateur au sein de l’agence Digitale du groupe Smile. Il sensibilise ses collègues et clients au développement de sites web accessible. Son bagage technique lui permet d’en comprendre les rouages pour faciliter son discours face aux développeurs. Romain est également à l’initiative d’un laboratoire ouvert dédié aux Sciences Cognitives à La Paillasse, un hackerspace.

Particularités d’un utilisateur mobile

En France, 61% de la population possède un mobile et passe en moyenne 1 heure quotidienne sur son smartphone. 40% d’entre eux regardent leur smartphone au réveil.

L’usage d’un mobile est très particulier, car peu souvent dans des situations idéales :

• 
  L’utilisateur est occupé et continuellement distrait par son environnement
  
• 
  Le contexte d’usage n’a pas de limite : dans le métro, à la maison, en marchant, à la plage, …
  
• 
  La variété technologique des smartphones est très hétérogène (taille, qualité, performance, système d’exploitation)
  
• 
  Un objet technologique ultra personnel et personnalisable, chaque utilisation est unique
  
• 
  L’aisance et la capacité d’apprentissage varient en fonction des générations, classes sociales et milieux culturels
  

Difficultés et freins en situation de mobilité

La lisibilité

Notre œil à un angle de vision limité et l’écran d’un mobile est très petit. Le mobinaute doit donc adopter une posture particulière, souvent néfaste pour la colonne vertébrale.

Son usage est universel, en intérieur, dans le noir, mais aussi en plein soleil rendant la lecture des informations et la distinction des couleurs parfois très difficile.

La taille des boutons

Pour des personnes valides, nous sommes sur une utilisation exclusivement tactile. Contrairement à une souris, notre pouce est large et la main masque la zone de contact. La taille des boutons doit être suffisamment importante pour permettre leur utilisation.

La norme ISO 9241–9 indique que la taille des boutons doit correspondre, au minimum, à la largeur maximum de la dernière phalange de l’index de 95% de la population mâle, soit environ 22mm. Par convention la taille minimale est fixée à 44 pixels.

La taille peut également être adaptée en fonction des persona. Par exemple, pour une application de GPS en mode piéton, l’utilisateur est en mouvement, impliquant une attention et des gestes moins précis, et potentiellement une visibilité dégradée.

Le nombre d’erreurs est également important lorsque les boutons sont trop près les uns des autres.

Zones d’accessibilité

Quelques études permettent d’identifier des zones d’utilisations privilégiées et variant beaucoup en fonction de l’utilisateur et de son contexte.

Parmi ces utilisations, nous distinguons :

• 
  La posture des mains : une ou deux mains, gaucher ou droitier, avec souvent l’utilisation d’un pouce et un index. La posture évolue beaucoup
  
• 
  La taille de l’écran : un écran plus large sera plutôt maintenu avec les deux mains
  
• 
  L’orientation de l’écran : généralement utilisé en mode portrait, une vidéo un jeu ou certaines applications seront par contre orienté en paysage
  
• 
  La présence d’un étui ou coque de protection peu réduire la zone d’accessibilité
  

La posture est également un bon référentiel, nous distinguons un mobinaute :

• 
  Assis, un maintien stable, généralement à deux mains (ex : au bureau ou à la maison)
  
• 
  Debout, une utilisation plutôt à une main, la seconde pouvant servir à sécuriser le maintien du smartphone ou améliorer notre précision (ex : métro)
  
• 
  Marchant, utilisation et maintient presque exclusivement à une main, la zone d’accessibilité est fortement dégradée (ex : piéton)
  

Multitâches

L’interruption d’une tâche et la perte d’attention sont très fréquentes en situation de mobilité, de quelques secondes à un abandon total, en fonction de nombreux paramètres.

• 
  Notre environnement et posture.
  
• 
  La réception d’une notification (ex : alterner SMS et jeux dans le métro)
  
• 
  Un chargement long. Au bout de 5s d’attente, un site consulté sur mobile perd 74% de ses visiteurs, souvent liée à une connexion lente ou à des performances faibles
  
• 
  La perte de connexion réseau
  

Les tâches les plus fréquentes d’un mobinaute :

1. 
   Accéder à ses e-mails
   
2. 
   Échanger des SMS / téléphoner
   
3. 
   Aller sur internet
   
4. 
   Aller sur les réseaux sociaux
   
5. 
   Recevoir des actualités
   
6. 
   Jouer
   
7. 
   Écouter de la musique
   
8. 
   Lire
   
9. 
   Regarder des vidéos / films
   
10. 
    Trouver son chemin
    
11. 
    Lampe de poche
    

Quelques bonnes pratiques

L’utilisateur mobile est impatient, son environnement très diversifié et la qualité du réseau aléatoire. Des bonnes pratiques sont à respecter

• 
  Ajuster la taille du texte à la distance de lecture
  
• 
  Dé-corréler la zone visible et la zone interactive des boutons
  
• 
  Il n’y a pas qu’une modalité d’interaction (doigt, main, latéralité)
  
• 
  Ne pas forcer le mode paysage
  
• 
  Être vigilant au maintien d’un bon contraste
  
• 
  Proposer des feedback multimodaux (son, vibration, …)
  
• 
  Penser une interface personnalisable et simple
  

Boite à outil d’un ergonome

Nous employons quasi exclusivement des méthodes permettant l’étude des utilisateurs, émanant d’une discipline scientifique pluridisciplinaire appelée Sciences Cognitives :

• 
  Audit, benchmark
  
• 
  Focus group, questionnaire, interview, tri par carte
  
• 
  Persona, Customer Journey Map
  
• 
  Tests utilisateurs
  

Pour éviter certains biais et enrichir nos études, d’innombrables outils de tracking sont à disposition, les principaux étant :

• 
  Matériel : Occulométrie, caméra, capteurs
  
• 
  Logiciels : JavaScript, OS Mobiles
  

Les baromètres d’observations sont également très utiles et permettent de dégager des tendances générales à plus grande échelle. Ce document s’appuie sur 3 études portant sur les usages des mobinautes (observations) :

• 
  2013 : Steven Hoober a observé 1000 personnes dans les aéroports américains
  
• 
  Juin 2014 & juillet 2015 : « Smartphone Street Observer », l’agence Personae User Lab a observé 1000 personnes dans les rues de Nantes
  
• 
  2015 : Cornelia Laros, travaux de recensement et synthèse de ces études
  

L’intelligence ambiante (capteurs, Big Data, Deep learning) et les interfaces multimodales permettent aujourd’hui de nous aider à concevoir des interfaces mobiles de plus en plus efficientes, affordantes et personnalisées ayant la capacité de s’adapter en fonction de l’usage et de l’environnement de l’utilisateur.

Quelques ressources

Études

• 
  http://www.insee.fr/fr/themes/document.asp?ref_id=ip1452#inter4
  
• 
  http://www.zdnet.fr/actualites/les-francais-toujours-plus-equipes-en-smartphones-et-tablettes-39807091.htm
  
• 
  http://www2.deloitte.com/fr/fr/pages/presse/2014/usages-mobiles-2014.html
  
• 
  http://fr.slideshare.net/dmolsenwvu/developing-a-progressive-mobile-strategy
  
• 
  http://www.criteo.com/resources/mobile-commerce-q1-2015/
  
• 
  http://research.microsoft.com/pubs/75812/parhi-mobileHCI06.pdf
  

Usages

• 
  http://www.agence-csv.com/blog/etude-comportement-mobinautes/
  
• 
  http://fr.slideshare.net/agencedagobert/etat-des-lieux-du-mobile-en-france-mai-2012-13015076
  
• 
  http://www.mediametrie.fr/internet/solutions/l-audience-de-l-internet-mobile.php?id=93
  
• 
  http://www.audiencelemag.com/?article=70
  
• 
  http://insights.mobify.com/understanding-mobile-user-experience-the-3-modes-of-mobile-usage/
  
• 
  http://www.informationweek.com/mobile/google-lays-out-its-mobile-user-experience-strategy/d/d-id/1053921
  
• 
  http://www.smashingmagazine.com/2013/02/25/there-is-no-mobile-internet/
  
• 
  http://alistapart.com/article/organizing-mobile/
  

Interactions & accessibilité tactile

• 
  http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  
• 
  http://fr.slideshare.net/shoobe01/40min-how-peopleholdtouchconveys-30874671
  
• 
  http://realites-paralleles.com/tag/mobile-devices/
  
• 
  http://www.lukew.com/ff/entry.asp?1085
  
• 
  http://sebastien-gabriel.com/designers-guide-to-dpi/
  
• 
  http://www.pompage.net/traduction/ecrans-tactiles-mort-aux-mythes
  
• 
  https://msdn.microsoft.com/en-us/library/bb158589.aspx
  
• 
  http://www.uxmatters.com/mt/archives/2013/11/design-for-fingers-and-thumbs-instead-of-touch.php
  
• 
  http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
  
• 
  http://germanforblack.com/post/39814923293/phone-in-hand