Design for all : smartphone et tablettes

Publié: 03/13/2012 dans Uncategorized
Tags:,

Voyons ensemble les idées fortes des derniers speechs sur le design universel, et sur l’accessibilité via terminaux mobiles avec quelques conseils pratiques et outils utiles.
Session présentée par l’ergonome Raphaël Yharrassarry (entreprise Iergo).

Apple : le prix de la qualité ?

DESIGN UNIVERSEL

Le design universel se caractérise par :

  • une utilisation équitable,
  • une flexibilité d’utilisation,
  • simplicité et intuitivité,
  • avec une tolérance à l’erreur,
  • requérant peu d’effort physique (prise en compte de la taille et du poids).

L’environnement IOS est beaucoup plus en avance sur l’ergonomie que ses concurrents : voiceover, luminosité et contraste, etc.


L’ACCESSIBILITE SUR SMARTPHONES ET TABLETTES

Matériel :

  • Résolution augmentant de plus en plus
  • Taille stable du téléphone (relative à celle de la main, et de la distance bouche-oreille), idem pour les tablettes (taille livre et/ou magazine)

Conseils :

  • Choisir la bonne taille des cibles touchables :
    – au minimum : largeur de 0,74cm;
    espacement de 0,38cm
    – pour plus de confort : largeur de 0,9cm; espacement de 0,38cm
  • Utiliser types et attributs HTML, force l’affichage du clavier spécifique : lettres ou chiffres
  • Respecter les normes (balises, structuration, sémantiques), et séparer le contenu de la forme
  • Utiliser les guidelines relatives à l’accessibilité : iheni.com

La tendance est clairement au responsive design, récemment reconnu par le W3C : il s’agit d’utiliser 1 feuille de style par résolution ou par terminal. Les tailles sont toutes relatives (em, %) pour s’adapter aux résolutions variables.

Outils :

  • Adobe Shadow : permet de répliquer la page web d’un ordinateur vers tous les terminaux pour voir le résultat et “inspecter” le contenu de la même manière que l’on utilise l’outil Firebug.
  • Testez si votre site est mobile-friendly avec le validateur W3C mobileOK Checker
  • Test simulateur : pauljadam.com
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s