Comprendre les concepts d’ergonomie des OS mobiles

Partager cet article

Quelles sont les grandes lignes et les bonnes pratiques ergonomiques pour concevoir des applications IOS, Android et Windows ? Voici quelques éléments de réponses à adapter à votre contexte.

Apple - iOS

Les concepts centraux

Clarté et lisibilité sont les maitres mots : icones claires et contraste élevé.
Respect du contenu et sa mise en avant. Rien ne doit entraver la fonction première du contenu : être visible et lisible.
Profondeur et volume : le contenu est mis en avant grâce à un design de la profondeur. Cela découle d’une approche de Skeuomorphisme adapté aux interfaces digitales et tactiles. Aujourd’hui, le référentiel visuel du réel tend à s’estomper vu le niveau d’adoption et d’expérience des utilisateurs.

Les guidelines de design

Peu de couleur sur l’interface elle-même (ou utilisé avec parcimonie) pour donner priorité au contenu.

iOS fonctionne généralement sur un concept de pages organisée de gauche à droite. Des boutons de retour dans la partie haute permettent une navigation prévisible qui sécurise l’utilisateur (calqué sur la logique du livre dont on tourne les pages) et vont du plus général (accueil) au plus spécifique (détails de sous-sections).

IOS Design

La navigation se place généralement en haut alors que les outils de contrôle (ou les fonctions) sont situés dans des onglets (généralement en bas pour maximiser l’utilisabilité à une main).

La profondeur est gérée par la superposition et le flou. Par exemple, en faisant défiler le fil de conversation de l’appli iMessage, les bulles disparaissent sous la barre de navigation haute. La transparence floutée de cette barre laisse deviner que le fil de la conversation est bien passé sous la barre de navigation et permet donc une compréhension du fonctionnement intuitive.

Les listes de fonctions riches (tel que l’outil de transformation d’un texte par exemple) sont affichées dans des fenêtres qui se superpose au contenu (pop-over).

Les animations d’iOS sont plutôt subtiles et ont pour rôle d’illustrer l’origine de l’interaction. Par exemple, ouvrir une app donne lieu à un zoom en avant qui souligne le lancement de l’app à proprement parlé. Encore une fois, les animations sont conçus pour appuyer la lisibilité et permettre d’anticiper une fonction et non pas détourner l’attention.

Détails du design

  • Font : San Francisco ;
  • Couleurs : légères et pastel ;
  • Rendu : léger flou et superposition des éléments.

Device cibles

  • Interface : tactile, stylet et voix ;
  • Smartphone (4'', 4.7'' et 5.5'') ;
  • Tablette (7,9'', 9.7'' et 12,9'').

Pour en savoir plus sur les principes d'IOS : IOS Human Interface Guidelines

Google Android - Material Design

Les concepts centraux

Material design tente de marier l’interface digitale et le réel par une utilisation de la profondeur et de l’animation. Il s’agit d’une forme de Skeuomorphisme (basé sur l’encre et le papier) subtil qui se manifeste par l’exploitation de la profondeur par une superposition des "couches" de fonctions (et manifesté visuellement par des ombres portés) tel que rendrait des feuilles de papiers superposées. Material Design est pensé pour être similaire sur tous les écrans (devices) grâce à un design adaptable.

Le contraste est également au cœur de ce design d’interface grâce à l’utilisation de couleurs complémentaires plus ou moins vives.

Android Design

Material Design se veut rationnel et élimine les éléments non prioritaires ou les proposent au moment opportun. Il s’agit de créer une adéquation de la fonction avec le contexte pour permettre à l’utilisateur un maximum d’efficacité pour un minimum de distraction visuelle. Il s’agit donc de prioriser les éléments grâce à une forte hiérarchisation des fonctions

Les guidelines de design

Le FAB (Floating Action Button) : la fonction principale est mise en avant par un bouton flottant (généralement en bas à droite pour maximiser l’utilisabilité avec le pouce) de couleur.

Le concept de carte est massivement utilisé. Il consiste à (pour des raisons de scalability entre écrans) encapsuler le contenu dans des « cartes » qui se redimensionnent en hauteur/largeur à la volé.

Android Design

La navigation est généralement sous forme de burger menu. Cela suppose cependant d’avoir les fonctionnalités primaires sur la page d’accueil et que les fonctions sous le Hamburger menu ne sont pas utilisées trop fréquemment. Enfin, une parade à la difficulté d’accès du burger menu (éloigné du pouce lors d'un usage à une main) consiste à déplier le menu en glissant depuis le côté gauche de l’appli.
Les couleurs sont plutôt vives et 2 couleurs sont utilisées à minima : couleurs principale et couleur complémentaire (pour les boutons d’actions par exemple).
Les animations ont une place centrale : les boutons, les menus et tout autre type de mouvement sur les pages sont animés. Exemple : Hamburger menu devient une croix (fermer) lorsque le menu est ouvert.

Détails du design

  • Font : Roboto / Noto ;
  • Couleurs : vives et complémentaires ;
  • Rendu : ombre porté et lumières pour rendre la profondeur et la hiérarchie des fonctions (l’élévation et donc l’ombre porté créer une hiérarchie).

Device cibles (extrêmement atomisées)

  • Interface : tactile, stylet et voix ;
  • Smartphone (de 4'' à 6'' environ) ;
  • Tablette (de 7'' à 12'').

Pour en savoir plus sur les principes du Material Design : Google Design

Microsoft - Universal Windows Platform (UWP)

Les concepts centraux

Centrer sur la consistance entre les appareils, le UWP adresse donc diverses résolutions d’écrans, formats d’écrans, contrôles (tactile, clavier, manette, etc.) et natures des appareils. L’objectif est de définir une interface connue et commune entre les appareils.
La hiérarchisation est également centrale dans la conception des app Windows. Le principe de navigation est simple et reprends une barre de navigation haute qui comprends la majorité des actions possible. Initialement inspiré par l’UI d’Office, cette tendance se généralise (avec plus ou moins d’adéquation) sur la plateforme. Cependant, on ne retrouve que peu (voir pas du tout) de profondeur car les points de référence au réel sont presque inexistant. En effet, après presque 10 ans d'usages massif des interfaces tactiles, Microsoft est partie d'un constat de maturité des utilisateurs.

UWP Design

Le point central de UWP est la scalabilité des interfaces et des IHM (stylet, voix, tactile, manette) pour rendre une expérience cohérente entre les appareils.

Les guidelines de design

Navigation organisé autour de "Pivot" : une navigation horizontale qui défile facilement en faisant glisser les écrans de droite ou de gauche et illustré par des une navigation en haut de(s) écran(s), les commandes/actions sont positionnées en bas pour en maximiser l'accessibilité avec le pouce.

UWP Design

La navigation positionné en haut se retrouve (souvent) sur un volet à gauche lorsque les applications passent en mode tablette/desktop. Aujourd'hui, Microsoft n'impose pas de règle absolu aussi (par exemple, une navigation horizontale en mode tablette est également possible), il est difficile d'être catégorique sur les bonnes et les mauvaises pratiques

Enfin, l'un des incontournables de l'UWP est le burger menu (généralement en haut à gauche). Né de la contrainte de s'adapter à (presque) n'importe quel écran, le menu est soit déplié par défaut (en mode tablette ou desktop) ou plié (smartphone) pour permettre l'accès à différentes fonction ou pour naviguer.

L'UWP est, par essence assez différent des autres langages visuels car il est né nettement plus tard que les autres et n'a donc pas eu un gérer l'historique de ses mises à jour et gérer les utilisateurs initiaux. De manière générale, il diffère sur une logique de navigation qui est plus horizontale là ou elle reste très verticale sur iOS et Android. Les deux points d'entrés s'opposent car l'horizontalité est hérité du livre (réflexe naturel) alors que la verticalité est plus basé sur les usages du web (basé sur un usage). L'UWP reste un langage d'interface qui continue à se transformer rapidement du fait de sa moindre maturité faceà ses concurrents.

Détails du design

  • Font : Segoe UI ;
  • Couleurs : Ensemble clair ou obscure avec des couleurs vives associés aux actions ;
  • Rendu : Icones filaire et design plat (Flat) pour les boutons et les éléments d'interfaces. La taille des polices marquent la hiérarchie. Les couleurs marques généralement les menus et autres boutons d'actions.

Device cibles (extrêmement atomisées)

  • Interface : tactile, clavier/souris, stylet, manette (Xbox), voix, Kinect (gestes) ;
  • Smartphone (de 4'' à 6'' environ) ;
  • Tablette (de 7'' à 12'') ;
  • Ordinateur (laptop ou desktop) avec fenêtrage des apps ;
  • Console Xbox (périphérique TV).

Pour en savoir plus sur les principes de Universal Windows Platform : Conception et interface utilisateur

Article publié le 7 février 2017

Partager cet article
Maxime Aurian

Maxime Aurian

Consultant Digital

Vous souhaitez échanger sur vos projets de développement d’applications mobiles, contactez-nous