L’intérêt se focalise en ce moment sur les interfaces de téléphones mobiles (logicielles et web). L’iPhone est venu cristalliser cet intérêt en même temps qu’il a littéralement décomplexé le design d’applications mobiles (il suffit de jeter par exemple un oeil sur le travail de David Bihanic et de son studio FXDS) et j’y reviendrai avec un benchmark des interfaces les plus intéressantes. Les interfaces mobiles sont pourtant réputées pour receler un monde de contraintes.
Plusieurs récents ouvrages sont dédiés aux interfaces mobiles. Parmi ces ouvrages, Designing for Small Screens, par le Studio 7.5 (Ava Publishing, 2005) est sans doute l’un des plus didactiques.
L’introduction de l’ouvrage pointe la miniaturisation permanente des terminaux informatisés (computerised devices) et leur rôle grandissant dans les usages.De la même façon que l’informatique personnelle était perçue comme un gadget à la fin des années 70, les interfaces mobiles ont longtemps été dépréciées. Les principes de design des “grands terminaux” ne peuvent s’appliquer que dans une mesure très limitée aux “petits terminaux”. L’objectif de l’ouvrage est ainsi d’armer les designers avec les concepts nécessaires pour les préparer à la révolution mobile.
Le 1er chapitre, intitulé Small is Beautiful, se présente sous la forme d’une ligne de temps (timeline) qui témoigne de l’évolution des technologies à travers leur miniaturisation, leur sophistication et leur fonction. De l’invention du téléphone par Graham Bell à la 4G, plus de 130 années d’évolutions marquent la miniaturisation, la numérisation et le développement des réseaux pervasifs. Le chapitre illustre remarquablement bien les inventions marquantes qui ont ponctué la période : la radio de Marconi, la souris d’Engelbart, le premier écran LCD de Fergason, l’interface graphique du Xerox Star etc. jusqu’à la télévision numérique sur les mobiles en Corée. Le chapitre est conclu par des données statistiques, un glossaire et une typologie des batteries destinées aux appareils mobiles.
Le 2ème chapitre s’attache aux particularités des petits écrans et aux techniques qui permettent d’en accroître virtuellement les dimensions pour compenser la faiblesse de l’espace disponible. Le zoom et le défilement d’information en font partie, mais l’utilisation de fenêtres est quasiment exclue en raison du manque de place. Les onglets sont également des éléments d’interfaces robustes, alternatifs aux menus-calques notamment, à limiter au nombre de 5. Les menus-calques (Pull-down et pop-up menus) sont envisageables mais souvent plus adaptés aux terminaux possédant un stylet, qui ne couvre pas le contenu du menu. Le défilement vertical est utilisé dans les interfaces mobiles, mais comme sur le web, par convention le défilement horizontal est évité. En revanche la navigation multi-directionnelle, explicitée à l’aide de flèches (comme sur les cartes GoogleMaps) permet un déplacement aisé autour de l’écran. Le défilement vertical est souvent plus pertinent que la pagination, qui interrompt artificiellement la lecture, sauf si un stylet est utilisé. Le zoom permet de rendre visible et accessible une large surface de contenu et également de souligner les liens logiques qui existent entre différents niveaux hiérarchiques dans l’information contenue par la page [note : l’iPhone utilise précisément la technique du Zooming User Interface). Ce chapitre aborde également la division de l’écran, selon son orientation, et précise que la barre de navigation peut être située en haut ou en bas. L’utilisation du stylet requiert de placer la navigation à droite de l’écran pour que la main de l’utilisateur ne le couvre pas entièrement. Avec l’avènement de terminaux mobiles plus puissants et dotés de résolution d’écran plus grande, beaucoup d’applications des ordinateurs de bureau ont pu être transposées (notamment : calendriers). Le chapitre se clôt sur différents exemples d’interfaces qui permettent un gain de place dans l’information affichée, une synthèse sur les différentes résolutions et tailles d’écrans et les différentes technologies d’affichage (LCD, ELD, OLED, LED, CRT etc.).
Le 3ème chapitre envisage l’interaction physique avec le terminal : avec une main ou deux, et les différents terminaux d’entrée (scroll wheel, clavier). L’interaction physique influence beaucoup plus profondément la conception d’application dans les terminaux mobiles en raison d’un usage et d’un contexte d’usage moins prédictibles que pour les ordinateurs de bureau. L’interaction physique relève ainsi d’un savant équilibre entre la miniaturisation du terminal pour une bonne mobilité et le besoin de conserver un design produit à l’échelle de la main pour une utilisation optimale. L’interaction à une main : la même main est utilisée pour opérer l’application et tenir l’objet. Elle représente un challenge pour le designer d’interaction car le pouce dispose d’un contrôle moteur moins fin que l’index. Cela influence détermine l’utilisation d’un système de navigation “tabulator”. L’interaction à deux mains coordonne les mouvements entre la saisie de données avec un clavier ou un stylet et des mouvements de “support”. Il existe plusieurs techniques d’interaction : la scroll wheel, le mini joystick, la click wheel (iPod), le touchpad, l’écran tactile, le stylet, la voix, le clavier (virtuel ou physique), des touches physiques, etc. Trois grand principes définissent les techniques d’interactions sur les petits écrans : le feedback immédiat du système, l’organisation logique et mémorisable des zones interactives (par rapport au sens de lecture par exemple), et la mémoire musculaire des mouvements (qui rend chaque interaction facilement appropriable). La fin du chapitre détaille l’importance du design des touches de l’appareil, de la saisie de texte et la relation entre le design de l’interface logicielle et celui de l’objet. Enfin, il propose une synthèse des différentes technologies d’écrans tactiles.
Le 4ème chapitre aborde l’organisation du support formel des interfaces mobiles. En d’autres termes, comment organiser de grandes quantités d’information dans une surface d’affichage limitée ? Le modèle mental de l’utilisateur joue un rôle dans la conception des interfaces et leur efficience. Les métaphores sont un exemple de modèle mental. Elles empruntent au monde réel un cadre narratif qui permet d’illustrer plus concrètement le fonctionnement de l’interface. Les points de repère dans l’interface sont beaucoup plus difficile à ancrer que dans le monde réel : la longueur d’un livre peut être définie par l’épaisseur de sa tranche, tandis que la taille d’une application numérique est difficile à déterminer. Dans l’affichage de données chiffrées (ex : l’heure, la taille d’un dossier, le volume), une représentation analogique (exemple : horloge, barre de progression, échelle de volume) est préférable à une représentation numérique. Il existe selon Richard Saul Wurman 5 façons d’organiser l’information : l’emplacement, l’ordre alphabétique, le temps, les thèmes et la hiérarchie. Ces principes peuvent être combinés entre eux. Dans le contexte numérique, la redondance est positive. Ainsi, la location des fonctionnalités à l’écran est-elle primordiale (elle mobilise la mémoire spatiale) : certaines fonctionnalités peuvent être assignées à certains emplacements dans l’interface (ex : navigation). L’ouvrage propose ensuite différents exemples d’interfaces mobiles représentant le temps, la visualisation spatiale de l’information (plans de villes), les métaphores (métaphore du bureau).
Le 5ème chapitre aborde la séparation de la forme et du contenu, et l’implication qu’elle peut avoir sur le développement des applications et le processus design. Les terminaux sont de plus en plus souvent connectés et demandent au designer de penser la forme du contenu en termes de règles d’affichage, des grilles abstraites, qui fonctionnent aussi bien pour de petits ou de grand volumes d’information. Il doit ainsi penser de nombreux scénarios d’usage pour organiser l’information. A l’heure de la synchronisation des différentes plateformes, le défi qui se présente est celui d’une implémentation cohérente avec chaque medium mais aussi de façon globale il s’agit rendre chaque fonction reconnaissable. Plusieurs exemples de terminaux mobiles connectés, et équivalents des interfaces d’un support à l’autre (web, mobile, PDA. Présentation des différentes générations de réseaux mobiles, de la 1G à la 4G, en passant par l’UMTS.
Le 6ème chapitre est dédié aux jeux sur les petits écrans. Il souligne la valeur divertissante de toute interface et particulièrement des interfaces mobiles, plus personnelles, les jeux étant une forme art accomplie du design d’interaction. Quelques exemples d’esthétiques liées aux applications de divertissement : l’ASCII, Deco Mail, les courts métrages “de poche”, Kirairi Mail. Une courte histoire des jeux vidéos et des consoles, leur typologie et le marché.
Le 7ème chapitre aborde la typographie et les icones. Comment améliorer la lisibilité sur de petits écrans ? Comment proposer une représentation dynamique du contenu lors de sa saisie ? Quel est le rôle joué par les icones ? La seconde partie du chapitre revient sur des exemples de typographies, les images, les vidéos. Plusieurs facteurs contextuels déterminent la lisibilité sur un terminal mobile : conditions de lumière, possibilité pour l’utilisateur de se concentrer… Notamment, la luminosité et le contraste doivent être plus important de 20 % sur un terminal mobile que sur un écran conventionnel. Les fonds perturbés ou photographiques sont à éviter, à moins d’y ajouter un aplat contrastant sous le texte. La résolution (en dpi) des petits écrans est désormais souvent supérieure à celle des grands écrans, mais n’est pas toujours supportée par les systèmes d’exploitation. Cela doit guider le choix d’une typographie. Des linéales sans empattements sont à privilégier, et pour les éléments de navigation (peu d’espace disponible), des typographies spécialement développées pour l’écran sont recommandées. L’anti-crénelage (anti-aliasing) ne doit pas être appliqué à des caractères plus petits que 12 pt. Un soin spécifique doit être accordé à l’approche des caractères, des mots et à l’interlignage. Ainsi si l’anti-crénelage est activé, l’espace inter-mots devra être augmenté. L’italique est à éviter car son affichage offre une perception irrégulière en regard de la grille orthogonale de pixels. La mise en valeur d’un contenu peut s’effectuer efficacement à l’aide d’un fond de couleur contrastant. Le défilement du texte (horizontal ou vertical) sur l’écran rend nécessaire de considérer la mise en page comme “dynamique”. Différentes techniques existent pour rendre plus lisibles des caractères, à l’aide de zooms sémantique ou visuel. La saisie de texte est un défi sur les terminaux mobiles en raison de principes d’interaction très différents des grands écrans (absence de clavier, caractères assignés à plusieurs touches, écrans tactiles etc.). Les icones sont des standards fondamentaux des interfaces graphiques. Elle permettent de transposer des concepts d’interactions complexes en des actions simples, empruntées à la vie physique. Les icones permettent de faciliter la compréhension mais une réflexion doit être menée sur le sens qu’elles induisent avant leur implémentation. Des icones animées peuvent également communiquer des informations plus complexes. Toutes les icones d’un même système doivent relever du même degré d’abstraction. Plusieurs critères sont à prendre en compte dans l’utilisation des icones : leur taille (plus elle est grande, mieux elle facilitent l’interaction), leur disposition sur l’écran (elle sollicite la mémoire spatiale de l’utilisateur). Pour les terminaux dotés d’un scroll wheel ou d’un jogdial, les icones jouent le rôle d’un pointeur pour situer l’utilisateur dans l’interface. Les écrans tactiles requièrent un espace plus important : les icones doivent mesurer au moins 15 mm et être espacées de 5 mm. Le chapitre se clôt sur différents exemples de typographies, d’icônes et une comparaison de leur lisibilité.
Le 8ème chapitre détaille la mise en page et les couleurs. Les mêmes principes fondamentaux de design s’appliquent pour les petits écrans que pour les grands écrans. Les lois de la Gestalt doivent ainsi être utilisées : proximité, similarité, clôture, destin commun. La loi de la symétrie et de la régularité, la loi de la continuité. Initialement en noir et blanc, le nombre de couleurs disponibles pour les petits écrans est passé de 16 couleurs à 18 bits (200 000 couleurs). Comme les terminaux mobiles sont utilisés sur une période de temps beaucoup plus courte, la couleur doit être utilisée pour rendre les actions le plus simple possible et guider l’utilisateur. Les effects de contraste et de luminosité jouent un rôle important dans les interfaces des petits écrans. Le chapitre présente différents principes chromatiques qui peuvent être exploités dans les interfaces et prône une utilisation logique des couleurs, assignées à des fonctions (vert : validation, jaune/orange : messages d’alerte, rouge : erreur). Différents exemples d’interfaces mobiles exploitant les couleurs.
Le 9ème chapitre se concentre sur les méthodes et les techniques de conception : prototypage papier ou logiciel. Il détaille deux exemples mettant en exergue les défis des interfaces mobiles et fournit des astuces pour la conception d’interfaces. Liste de ressources en ligne.
