Interface

Interface

L’utilisateur moyen n’existe pas

Design d’interface : l’utilisateur moyen n’existe pas.

La réussite des projets informatiques tient en grande part au facteur humain. Tous les maillons de la chaîne sont précieux pour réussir son projet.

Certes la qualité de la méthodologie, de l’usine de développement sont cruciaux, mais le facteur différenciant est la qualité d’écoute que les responsables métier ou technique sont capables d’offrir à l’utilisateur final.

Car au bout du compte, pour qui fait-on une application métier si ce n’est pour des utilisateurs ?

Il convient d’identifier clairement dès le début du projet quels seront les utilisateurs finaux du système avant toute chose. Et surtout garder à l’esprit que l’utilisateur « moyen » – celui que croit connaître le responsable métier ou encore l’idée que s’en fait le chef de projet fonctionnel voire celui rêvé par le designer graphique – N’EXISTE PAS.

On ne suppose pas que quelqu’un travaille comme ceci ou comme cela. Un utilisateur travaille d’une certaine façon, ses besoins sont réels et les manques qu’il subit au quotidien affectent non seulement la qualité de son travail mais altèrent aussi chez lui le sens du travail « bien fait ».

Il est donc nécessaire de déterminer des profils type d’utilisateurs finaux, pour les pousser à émerger nous employons la méthode de l’observation et la méthode des personas.

L’observation des utilisateurs

Design d’interface : l’observation des utilisateurs

Pour un design d’interface réussi, il convient d’identifier les véritables utilisateurs du futur système, d’après une observation sur le terrain et une analyse des données complémentaires.

Plus ou moins poussée, l’observation doit permettre au concepteur de comprendre comment les opérateurs procèdent pour réaliser un ensemble plus ou moins complexe de tâches. Cette observation permet de dresser un constat des actions réalisées et des résultats obtenus, la prise et la nature des informations et leur supports, et les outils et moyen de communication.

L’observation nécessite la mise en place d’un protocole rigoureux car il s’agit bien d’observer le travail d’un opérateur de façon neutre et non pas de se mettre « à sa place » pour imaginer les raisons des actes de celui-ci : « Il suspend son geste » ne doit pas être observé en tant que « Il hésite ».

Cette observation peut être utilement complétée par l’analyse des problèmes remontés par les utilisateurs (hot-line, assistance aux utilisateurs, etc.).

A la suite de cette étape il est possible d’identifier des types d’utilisateur et de créer des personas. A l’encontre du Marketing, les personas ne correspondent pas à des profils ou à une segmentation mais correspondent plutôt à la synthèse des données récoltées pour élaborer plusieurs archétypes d’utilisateurs de l’application. Chaque persona est décrit dans une fiche, toutes ses caractéristiques sont relatives à l’usage du futur système et servira de guide aux concepteurs de l’application.

Web mobile révolution

Pourquoi une révolution ?

Un marché en devenir

En 2016, il y avait environ 2,6 milliards de smartphones dans le monde. Selon le cabinet Park Associates, ce chiffre devrait atteindre 6,1 milliards d’ici 2020. En comparaison, fin 2010, on recensait environ deux milliards d’internautes sur PC. On peut donc parler de « Web Mobile Révolution » Leur nombre continuera à progresser mais plus lentement. En voici deux raisons importantes :

  • L’équipement en ordinateur dans les pays développés est arrivé à quasi saturation. En comparaison, le marché des smartphones est en pleine croissance et celui des tablettes le sera bientôt.
  • L’essentiel du potentiel de croissance de l’accès à internet des pays émergeants ou en voie de développement se fera par smartphones car ils y sont (et seront) plus aisément accessibles qu’un ordinateur.

Les sites internet pour mobiles (smartphones et tablettes) sont donc appelés à se développer de manière encore plus rapide et spectaculaire que leurs frères aînés pour ordinateurs il y a 10 ou 15 ans.

Un usage différent

Si le socle technique des sites internet pour mobiles est identique à celui des ordinateurs, il en va différemment de leur utilisation. En effet, ces sites correspondent à un besoin et un usage différent :

  • Un mobinaute peut être pressé, l’information doit donc être accessible très rapidement.
  • Il peut aussi chercher un passe-temps, le site doit être récréatif tout en étant adapté à son support de consultation dont les dimensions sont plus réduites.
  • Un site pour mobile ne doit pas nécessiter de concentration particulière car son visiteur n’est pas nécessairement dans des conditions propices (transports, en déplacement, en groupe).
  • Il doit limiter au maximum les interactions manuelles peu faciles sur un mobile, surtout lorsque celui-ci est utilisé d’une seule main.
  • Il doit s’adapter à l’utilisateur car un smartphone est avant tout un objet personnel bien souvent utilisé comme support pour les réseaux sociaux.
  • Il doit tirer parti au mieux du caractère nomade de son support pour offrir au mobinaute des services adaptés à sa localisation.

C’est pourquoi les sites internet pour mobiles doivent être pensés différemment. 2 Nouvelles contraintes, nouvelle approche Avant de se lancer dans le développement d’un site pour mobiles, il est utile de se rappeler quelques éléments essentiels qui vont conditionner cette réalisation.

De nouvelles contraintes

La diversité des navigateurs internet

Alors que le monde des ordinateurs personnels est caractérisé par une faible variété de navigateurs internet, celui des smartphones est beaucoup plus hétérogène. Parmi ceux qui existent, on pourra noter les plus répandus :

  • les déclinaisons du noyau Webkit sur les appareils Apple (iPhone, iPad), sur les appareils fonctionnant sur Androïd, et sur quelques plateformes propriétaires
  • Opera Mobile et Opera Mini
  • Internet Explorer Mobile

Il en résulte une difficulté accrue pour réaliser un site qui soit compatible avec les différentes plateformes. Il existe cependant des possibilités de tester son site sur différents types d’appareils en utilisant des émulateurs. On retiendra toutefois que l’application de quelques règles de bonnes pratiques associées à l’utilisation de standards favorise considérablement la portabilité d’un site.

Les limitations matérielles

Malgré les progrès spectaculaires réalisés lors des derniers mois, la configuration matérielle des smartphones reste inférieure celle des PC de bureau. Si les résolutions d’écran ont atteint un palier tout à fait acceptable (résolution de 800×400 points voire plus), la taille de l’écran est et restera un facteur limitatif. Ceci a un impact, non pas pour l’affichage des informations, mais en tant que dispositif tactile de pointage. A moins d’utiliser un stylet peu pratique et fort facile à perdre, les doigts du mobinaute offre une surface de contact importante, et donc peu précise. Il faut donc concevoir les éléments actifs de l’interface qui soient adaptés à cette contrainte (boutons, listes, …).

La plupart des smartphones ne disposent pas d’un clavier matériel. Celui-ci est remplacé par un clavier virtuel affiché à l’écran. Pour les même raisons que celles présentées ci-dessus, ce clavier virtuel occupe une place importante de l’écran, réduisant ainsi la surface d’affichage des pages du site. Les claviers des smartphones, qu’ils soient matériels ou virtuels n’offrent pas une ergonomie suffisante pour permettre la saisie de textes longs. Cette limitation doit également être prise en compte dans la réalisation d’un site web pour mobile. Enfin, le débit offert par les réseaux mobiles sur internet n’est pas encore aussi important qu’avec une connexion filaire classique. Cette contrainte qui tendra à s’atténuer dans le futur est aujourd’hui à prendre en compte si le site internet propose le téléchargement de gros volumes de données.

Quelques bonnes pratiques

Le W3C a énoncé les 6 commandements à respecter pour la réalisation d’un site web pour mobiles :

  • Epargnez le réseau
  • Libérez les utilisateurs
  • Appliquez les principes du web
  • Soyez flexible
  • Exploitez les terminaux mobiles
  • Optimisez les temps de réponse

Sans détailler tous ces points, il convient de souligner les quelques bonnes pratiques qu’il convient d’appliquer :

Faire preuve de simplicité

Cette règle est à appliquer en termes de présentation du site. Celle-ci doit être linéaire et intuitive. L’iconographie doit être explicite et universelle (des symboles plutôt que des textes). Les enchaînements de page doivent être logiques et la navigation implicite. Le style doit être épuré pour correspondre à un maximum de configurations.

Minimiser la taille

La taille des images doit être adaptée aux résolutions des mobiles (idéalement pas plus de 300 pixels de large). Elle doit être explicitement définie dans la page pour éviter toute adaptation du navigateur. Si cela est possible, prévoyez un mécanisme d’adaptation des images sur le serveur du site. La taille des pages doit aussi être limitée. En effet, si le défilement sur un écran d’ordinateur est une chose aisée, cela ne l’est plus avec un mobile. Cette opération doit donc être réduite si possible.

Aider l’utilisateur dans ses actions

Cette aide doit prendre plusieurs formes :

  • Limiter les entrées manuelles
  • Guider et contrôler la saisie avant envoi au serveur pour minimiser le risque d’erreur
  • Mémoriser les préférences pour éviter à l’utilisateur de devoir refaire des opérations identiques systématiquement à chaque visite.
Optimiser les échanges de données

Il faut compresser les données nécessaires au chargement des pages et éviter des envois inutiles de données au serveur si ces dernières ne servent que du côté client (stocker localement les données sur le mobile).

Quels supports pour réaliser un site ?

Un site internet est constitué d’un assemblage de composants technologiques dont les rôles sont complémentaires : HTML, CSS, Javascript, images, vidéos. Il existe différentes versions et différents formats pour ces composants. Voici quelques conseils pour bien les choisir :

La famille HTML

Il existe plusieurs déclinaisons du langage HTML et de ses dérivés (XML et XHTML). En ce qui concerne les sites web pour mobiles, le W3C préconise fortement l’emploi du Document Type XHTML 1.0 Strict lorsqu’on souhaite rendre compatible un site à la fois pour les ordinateurs et les mobiles. Le Media Type recommandé pour les fichiers html est text/html.

Du style avec CSS

Les feuilles de style en cascade, aussi appelées CSS de manière abrégée, permettent d’appliquer des styles de présentation au contenu d’un site. Il existe plusieurs versions de syntaxe pour ces feuilles de style. Ces versions sont appelées niveaux. Un niveau a même été conçu spécifiquement pour les sites mobiles : le profil CSS Mobile. Si le site cible doit être compatible à la fois pour les ordinateurs et les mobiles, il est conseillé de choisir le niveau 1 car il est proche du profil CSS Mobile.

Javascript : Le langage de script pour internet

Javascript est le principal langage de script utilisé sur le web aujourd’hui. Le support de Javascript sur les navigateurs mobiles est très contrasté, allant d’une absence complète de prise en charge, au support des fonctions des dernières versions. Dans ce cas, la solution la plus appropriée est de s’appuyer sur une librairie qui prend en charge la gestion de ces différents contextes. JQuery est l’une des principales librairies pour les développements de site sur ordinateur. Une version dédiée aux mobiles JQueryMobile a vu le jour récemment et simplifie énormément la préparation d’un site pour mobiles.

Images

On distingue 2 types d’images : les images vectorielles et les images en mode point (dîtes aussi bitmap). Pour les images vectorielles, il existe aujourd’hui 2 formats répandus : Flash et SVG. Nous recommandons l’utilisation de SVG car le format Flash n’est pas supporté sur certaines plateformes (comme celles d’Apple qui est un acteur important du marché). Pour les images bitmap, le choix se fera entre JPEG (si une altération légère de l’image est tolérée, comme cela peut être le cas pour des dessins) et PNG (à retenir si les images représentent des diagrammes, des logos ou des icones).

Vidéos

Contrairement aux images, les vidéos ne sont pas des éléments qui étaient nativement reconnus par les navigateurs avant l’arrivée d’HTML version 5. Il fallait donc avoir recours à des plug-ins pour exécuter ces dernières. Cette approche est problématique pour les sites à destination des mobiles. En effet, la disparité des plateformes et la difficulté ou l’impossibilité d’installation de plug-in sur ces dernières rend très difficile un choix de format de vidéo. HTML 5 a introduit une nouvelle balise pour résoudre ces problèmes. Pour autant, la gestion des différents formats de vidéos n’est toujours pas un standard car ces derniers continuent à évoluer rapidement.

S’il faut faire un choix, il conviendrait sans doute d’adopter l’un des 3 formats suivants : H.264, Theora ou WebM. Actuellement Google a annoncé renoncer à supporter le format H.264 et promeut le format WebM. Inversement, un consortium comprenant Apple et Microsoft défend le format propriétaire H.264 et tente de faire valoir des brevets sur le codec VP8 intégré au format WebM.

Autres composants

Il existe d’autres composants présents sur les sites web classiques. Le format PDF est ainsi largement répandu. Mais ces derniers ne disposent pas (encore) d’un support suffisamment grand sur les mobiles pour prendre le pari de les intégrer dans des sites dédiés. 3 2 sites différents pour PC et mobiles ? Avec tous les éléments présentés dans le point précédent, il apparaît nécessaire de prévoir 2 sites différents, l’un pour les PC et l’autre pour les mobiles. Pour autant, la réalisation et la maintenance de 2 sites représente un travail supplémentaire non négligeable. Il est donc important d’étudier comment réduire ce surcoût de travail. Pour cela, il existe 2 approches différentes.

Préparer 2 sites, tout en mutualisant au maximum leur développement

Cette approche est la plus coûteuse mais c’est celle qui permet de produire les sites pour mobiles les plus aboutis dont le contenu peut être vraiment spécifique au support. Le travail de conception porte sur la mutualisation de la structure et du contenu qui peuvent l’être sur les deux environnements cibles. Il reste malgré tout un travail conséquent d’adaptation pour les 2 types de sites.

Préparer le squelette d’un site et disposer d’un système de génération de sites pour ordinateurs et pour mobiles

Cette approche est très pratique lorsque le besoin correspond à un CMS. Les dernières versions des principaux CMS, à l’image de Drupal ou SPIP, permettent ainsi de générer à partir d’une base commune des sites pour ordinateurs ou pour mobiles. Cette approche évite de devoir faire la plus grosse partie du travail d’adaptation. Elle requiert toutefois des tests et des ajustements dans certains cas.

Est-il possible de ne pas adapter son site internet PC aux mobiles ?

Il existe une solution gratuite, mais généralement peu satisfaisante. Elle consiste à utiliser les solutions d’adaptation de contenu mis en place par certains opérateurs de réseaux mobiles ou certains moteurs de recherche tels que Google ou Bing. Il est inutile de préciser que cette adaptation se fait selon des règles qui ne tiennent pas compte des spécificités du site puisqu’elles doivent pouvoir s’appliquer à tous les sites transitant par l’opérateur ou le moteur de recherche. C’est un proxy d’adaptation qui se charge de ce travail. Les résultats obtenus sont acceptables pour les mobiles basiques.

Par contre, le système révèle ses limites avec des mobiles plus évolués sur lesquels on peut attendre un rendu plus optimisé. Il est heureusement possible de désactiver ces adaptations automatiques à l’aide de quelques directives insérées dans les pages html. C’est fort utile lorsque l’adaptation a déjà été réalisée à l’aide de l’une des 2 premières solutions.

Dans le cas d’un site spécifiquement conçu pour les mobiles, il ne faut pas oublier de bien communiquer sur cette adaptation. L’utilisation judicieuse d’un suffixe de nom de domaine de type .mobi y contribue sans aucun doute (attention toutefois à respecter les pratiques prescrites par la joint venture mTLD en charge de l’attribution des noms de domaine ayant ce suffixe). 4 Et demain… Les éléments qui ont été abordés dans cet article concernent ceux qu’il est possible de rencontrer aujourd’hui sur un site web. Or, les mobiles apportent des fonctionnalités nouvelles par rapport à un ordinateur. Il est plus que probable que les sites web pour mobiles de demain tireront parti de ces spécificités. Voici donc quelques tendances possibles :

Géolocalisation

La géolocalisation avec un mobile ouvre des perspectives intéressantes pour un ensemble de besoins liés à la position ou à l’itinéraire pour les utilisateurs. De nombreux sites web peuvent ainsi s’enrichir de fonctions clef pour les mobinautes : visite de sites, itinéraire pour aller à une adresse, affichage de cartes, jeux de parcours… Il existe une API Javascript qui offre déjà cette fonctionnalité de géolocalisation qui est exploitable sur l’iPhone, sur Androïd et sur Opera Mobile.

Interactions audio

La fonction première des mobiles était la possibilité d’avoir une conversation téléphonique avec un interlocuteur. L’appareil dispose donc par défaut d’un système d’acquisition de la voix. Il est possible de lui associer un système de reconnaissance vocale. L’intérêt d’un tel système est de pouvoir piloter les applications du mobile à la voix et offrir ainsi une nouvelle manière d’interagir avec ces dernières. Ce système permet de compenser les contraintes liées au clavier et au dispositif de pointage moins aisé à utiliser sur ce type de support. Toutefois, il faut disposer d’API spécifiques permettant de tirer parti de ce nouveau type interaction. Plusieurs groupes travaillent actuellement sur ce type de projet.

Accéléromètre

L’accéléromètre est un autre système qui se retrouve de plus en plus souvent sur les smartphones. Il est actuellement exploité à partir d’applications conçues nativement pour les appareils. Il est tout à fait envisageable d’imaginer de futures API qui exploite cette possibilité. Des projets sont en cours et quelques plateformes bénéficient déjà d’une API Javascript (QtWeb Runtime).

Technologies web et applications natives

Depuis quelques années, il existe un débat autour de l’approche qui doit être faite lors de la réalisation d’une application sur mobile : Faut-il choisir de développer une application native ou bien une application web pour mobile ? Au-delà des querelles de clocher qui peuvent animer les groupes de discussion, il convient de bien garder en tête quels sont les avantages et les inconvénients des deux approches pour faire son choix. A terme, il est tout à fait imaginable d’envisager des applications qui pourraient être mixes pour bénéficier des avantages des deux approches.

Renvois bibliographiques

« Relever le défi du Web mobile » (François DAOUST, Dominique HAZAEL-MASSIEUX – EYROLLES)
« Les bonnes pratiques du web mobile », Site du W3C (http://www.w3c.org/2007/Talks/11-parisweb/#%281%29)
« dotMobi Mobile Web Developers Guide », Site de mobiForge (http://mobiforge.com)

Le design d’interface d’AMJ-groupe

Qu’est-ce que le design d’interface selon AMJ ?

Depuis une quinzaine d’années chez AMJ, nous avons décidé d’ajouter une branche de design d’interface à nos projets, concernant les applications de gestion ou les applications Web.

Cette spécialité est, à l’époque, souvent méconnue et incomprise. Il est parfois difficile de convaincre de la nécessité de ce métier, malheureusement couteux en temps et donc en argent.

Aujourd’hui la notion de design d’interface a fait son chemin et a su se gagner de nombreux partisans en démontrant ses nombreux avantages et sa réelle utilité en terme d’efficacité des interfaces.

Le design d’interface est un vaste assemblage de compétences, qui s’adapte tant à des besoins spécifiques que génériques, à des profils d’utilisateurs multiples ou encore à des applications de tous types.
Ces compétences peuvent être variées d’un designer à l’autre et dépendent ainsi de son parcours professionnel et personnel.

En règle général, chez AMJ, on admet que les champs d’application du design d’interface sont :

  • l’ergonomie d’une application,
  • les besoins fonctionnels,
  • l’accessibilité au plus grand nombre d’utilisateurs,
  • l’organisation des informations,
  • l’enchaînement des écrans,
  • la charte graphique.

La conception centrée utilisateur – introduction

La conception centrée utilisateur

La conception orientée utilisateur

Les normes de « conception centrée sur l’opérateur humain » ne cessent depuis plusieurs années d’évoluer au gré des nouvelles technologies. Bien que l’ancienne norme ISO 13407 ait depuis 2010 rejoint la norme 9241 et ses dérivés (ISO 9241-210:2010), toutes celles-ci ne cessent de privilégier un processus de conception des systèmes interactifs en l’orientant sur les utilisateurs finaux.

Sans rentrer dans le détail, ces normes (ou recommandations) à destination des concepteurs, traitent des manières dont les composants matériels et les logiciels des systèmes interactifs permettent d’améliorer l’interaction homme-système.

Mais en fait plus qu’une norme, il s’agit, dans les faits, d’une démarche de conception, voire une philosophie.

Son concept est d’adapter l’application (et plus spécifiquement l’interface utilisateur) à l’utilisateur final plutôt que de lui imposer un mode de fonctionnement.

Cette démarche se qualifie en termes d’ergonomie, d’utilisabilité et d’accessibilité. Basée sur l’usage, cette étape est généralement pilotée par un designer d’interface.

Voir la suite : La conception centrée utilisateur – Les grands principes

La conception centrée utilisateur – Les principes

La conception centrée utilisateur

Les grands principes de la démarche de la conception centrée utilisateur sont :

  • La prise en compte dès l’amont du projet des utilisateurs, de leurs tâches et de leur environnement
  • La participation active des utilisateurs, garantissant la fidélité des besoins et des exigences liées à leurs tâches
  • La répartition appropriée des fonctions entre les utilisateurs et la technologie
  • L’itération des solutions de conception, jusqu’à satisfaction des besoins et des exigences exprimés par les utilisateurs
  • L’intervention d’une équipe de conception multidisciplinaire, visant une expérience utilisateur optimale

Afin d’intégrer ces principes au sein d’un projet nous avons déterminé des étapes qui fonctionnent sous forme itérative.  Ces étapes sont : Comprendre, Scénariser, Concevoir, Prototyper, Evaluer, valider.

Elle s’adaptent ou sont adaptées selon le projet et nous les intégrons dans ce que nous appelons un cercle vertueux, en voici une représentation :

Le cercle vertueux

Ce cercle vertueux est inhérent à nos méthode de travail c’est pourquoi nous l’appliquons systématiquement, en l’adaptant à l’envergure du projet afin qu’il réponde aux besoins, ni plus ni moins.

Voir l’introduction : La conception centrée utilisateur – Introduction

Retour en haut