Rechercher
  • Des usages à la conception et autres
  • digressions autour de l'expérience utilisateur.
Rechercher Menu
Option d'accessibilité sur l'iOs

Design for All, Smartphone et tablette

Vous trouverez ci-dessous la présentation que j’ai réalisé lors du petit déjeuner FLUPA, su 13 mars 2012 sur le thème de l’accessibilité appliqué aux tablettes et aux smartphones.

La présentation

[slideshare id=12001889&doc=flupadesignforall-120314051402-phpapp01]

Le détail de la présentation avec les notes.

Design for all, smartphone et tabletteLe but de cette présentation est de faire le point en matière de conception sur les smartphones et les  tablettes, notamment sur l’aspect accessibilité.

Plan de la présentation : Design for allDans un premier temps nous reviendrons brièvement sur la notion de Design for all. Puis nous ferons un point sur les plateformes et le matériel, puis nous verons un peu de techniques, avant de conclure sur des outils et des liens.

Les principes de conception pour tous

  • Utilisation égalitaire : utile et commercialisable auprès de personnes ayant différentes capacités.
  • Flexibilité d’utilisation : conciliation à une vaste gamme de préférences et de capacités individuelles.
  • Utilisation simple et intuitive : compréhension facile de l’utilisation, indépendamment de l’expérience, des connaissances, des compétences linguistiques de l’utilisateur ou de son niveau de concentration au moment de l’utilisation.
  • Information perceptible : communication efficace de l’information néces- saire vers l’utilisateur, quelles que soient les conditions ambiantes ou les capacités sensorielles de la personne.
  • Tolérance pour l’erreur : réduction au minimum des dangers et des conséquences adverses des accidents ou des actions involontaires.
  • Effort physique minimal : utilisation efficace et confortable, générant une fatigue minimale.
  • Dimensions et espace libre pour l’approche et l’utilisation : une taille et un espace adéquats pour s’approcher, saisir, manipuler et utiliser le bien, quelles que soient la taille, la posture ou la mobilité de l’utilisateur.

Démo de VoiceOver sur iPadSur un iPad, une fois la synthèse vocale activéee, accéder au site FLUPA dans Safari.

Le parcours de la démo

Accueil de l'iPadOn part de l’accueil de l’ipad pour ouvrir Safari

SafariSaisie de l’URL dans la barre d’adresse.

Accés au site Flupa.eu

Site de FlupaLecture du site Flupa

Catachrèse Le design for all peut aussi être détourné par exemple pour lire un livre

Lecture d'un livre avec VoiceOver

Plan, AccessibilitéEtat de l’accessibilité sur les différentes plateformes

Différents type de contenus

  • Web : Un contenu affiché dans un navigateur
  • Web apps : Des applications avec une interface Web construites en HTML, CSS, Javascript
  • Applications: Des applications natives téléchargeables utilisant pleinement les capacités de la tablette ou du smartphone.
  • Applications hybrides : Des applications téléchargeables avec un contenu en HTML, CSS, Javascript et utilisant les capacités de la tablette ou du smartphone.

iOS - iPhone - iPad

Option d'accessibilité sur l'iOsiOs présente nombreuses options d’accessibilité : Zoom, taille des polices, contraste,etc.. C’est l’OS le plus complet et le plus à jour.

Option d'accessibilité sur l'iOs Exemple de contraste négatif

Option d'accessibilité sur l'iOsPrésentation d’ « Assistive touch » qui permet d’associer des gestes à des raccourcis

Option d'accessibilité sur Android Sur Android, seul la dernière version commence a être au niveau avec la prise en compte du multitouch. Dans les versions précédentes, l’accessibilité passe par l’installation de logiciels tiers proposés par Google, par exemple : « Tallback ». Avec parfois des incompatibilités entre version d’Android, smartphone et applications.

Statistique des Synthèses vocales utilisées sur mobile. Il est aussi intéressant de regarder l’usage en matière de mobile. Les chiffres dates de 2010, mais on observe encore une forte présence de Nokia. Android est clairement en retrait.
En 2013, aux USA, une loi impose que tout les smartphones soient accessibles gratuitement aussi bien au niveau du navigateur que l’interface en générale. 21st Century communications and vidéo accessibilité Act, USA.

Plan, Un peu de techniqueUn peu de technique maintenant, mais pas trop !

La taille ne varie pas. Il faut bien comprendre que la taille des smartphones et des tablettes varie peu. Pour les smartphones, la taille est conditionnée par la taille de la main et la distance bouche oreille. Pour les tablettes, on reprend la taille d’un livre, d’un cahier qui peut être tenu d’une main et utilisé de l’autre.

résolution et iPad Mais la résolution des écrans augmentent régulièrement.
Jusqu’à la semaine dernière, il y avait encore une certaine cohérence entre la taille des écrans et la résolution, permettant de distinguer les tablettes, moins de 768 pixels de large en portrait ou 1024 en paysage, et les ordinateurs avec des écrans plus grands. Aujourd’hui, ce n’est plus le cas ! Merci Apple, pour cette tablette 9 pouces qui affiche une meilleure résolution que bien des ordinateurs en 23 pouces.

Taille des cibles Une question qui revient souvent c’est la dimension à respecter pour les boutons. Pour faciliter la désignation, les cibles (boutons, champs, etc…) doivent avoir une taille minimum de 0,74 cm, et pour être confortable une taille de 0,9 cm. Cela correspond aux normes que l’on trouve sur les calculettes et les télécommandes pour les boutons plats.
Je donne des tailles absolues car une taille en pixels par exemple serait inadapté et non pérennes.

Cas des applicationsPour les applications, il est nécessaire de se référer au SDK (environnement de développement) de la plateforme et des règles spécifiques de chaque environnement.

Web, web appsPour les contenus web et assimilés…

Respect des normes Pour s’en sortir, il est nécessaire de respecter les normes d’accessibilités et techniques du W3C. Bien séparer le contenu de la forme. Le contenu va être dans le HTML, la forme dans la CSS. Le contenu est structuré sémantiquement avec des titres, des en-têtes, des menus,… La forme est dans la CSS et donc en arrive au responsive Design.

Responsive designCe n’est pas nouveau comme technique, il a toujours été possible d’appeler des feuilles de styles suivant le média, pour imprimer par exemple. Il existe même des feuilles styles audio. Il faut bien sur en profiter

Taille relative Dans la CSS, il est indispensable d’utiliser des valeurs relatives (coder en « em ») notamment pour la taille des textes et des objets associés : bouton, champ de formulaires. Pensez à tester le résultat ! L’em est un multiple de la résolution de l’écran, c’est donc en fonction de la résolution de l’écran du terminal que la taille de la police va s’afficher.

Les formulaires La saisie d’information est largement facilitées sur smartphones ou tablettes, mais ce n’est pas encore aussi facile que cela. Un moyen de compenser ces difficultés dans les formulaires est d’utiliser les «types» et les attributs. Les types permettent de déterminer l’usage des champs dans les formulaires. C’est encore diversement supporté par les navigateurs, mais un des avantages c’est que le clavier est adapté au type de champs.

Champ texteLes attributs permettent de guider l’utilisateur et d’éviter les erreurs. Exemple : champs obligatoires, indication, champ focussé. Dans l’exemple, une indication est donnée dans le champs, elle s’efface lors de la saisie

Mot de passe Mot de passe avec la saisie partiellement cachée.

TéléphonesPlus spectaculaire, avec un champ téléphone «tel», le clavier présente uniquement les chiffres.

Menu déroulant Un menu déroulant, le choix est repris dans une interface suffisamment grande et parfaitement utilisable.

Date et heure De même pour la saisie des dates et de l’heure.

Plan, des outils et des liensDes outils et des liens

Liens Resources for mobile accessibility guidelines
Mobile Web Best Practices (MWBP)

W3C, mobileOk checker Un outil de validation automatique proposé par le W3C.

SiteUn site a afficher sur tablette ou mobile et permet de voir les différents comportements.

Adobe shadows Un dernier outil encore en bêta, proposé par Adobe, permet de synchroniser entre différentes tablettes (iOS et Android).

Questions ?

Pour ceux qui sont du coté de Genève, je signale une conférence le 26 avril 2012 sur le même sujet.

Auteur :

Lead UX designer en Freelance depuis le dernier millénaire ! J'aide à concevoir des services, des applications en étant centré sur l'utilisateur et ses usages.


Warning: Undefined array key "share-pages" in /home/clients/8d92eb93db207cb7c6158a9c725c2336/web/blocnotes/wp-content/themes/dorayakichild/footer.php on line 77