Quelles particularités ont les systèmes d’exploitation mobile ? Comment adapter le design de son application à l’interface ? En détaillant les spécificités UX de chaque, on peut identifier les méthodes appropriés pour optimiser le rendu d’une application.
Chaque constructeur a pour conviction d’unifier leurs interfaces en imposant aux applications des lignes directrices en matière de design UX. Sans compter le code qui est différent pour chaque OS mobile, les designers doivent également prendre en considération les contraintes graphiques imposées par Android, iOS ou encore Windows Phone ( désolé pour Blackberry <3 ). L’architecture de l’information, l’adaptation à l’écran, les principes d’interaction et l’interface globale, sont tout un ensemble d‘étapes de conception qu’il faut respecter pour qu’une application soit optimale. On peut alors se demander qui parmi des trois géants du smartphone offrent la meilleure expérience utilisateur ?
Mobile : Chaque OS a son propre design UX Cliquez pour tweeterUniversaliser, le maître mot de Windows Phone
Microsoft a construit sa renommé grâce à son système d’exploitation (aujourd’hui plus d’un ordinateur sur deux tourne sur Windows 7) alors qu’à peine deux téléphones sur dix sont équipés de l’OS. Méthodiquement l’enseigne a voulu équilibrer la tendance en adaptant son OS mobile à l’interface d’écran d’ordinateur. Ce qui donne le Windows 8 que tout le monde connait : une horreur sur une interface non-tactile. Pourtant l’idée d’harmoniser les différents supports en créant une grille adaptative, c’est évidemment une solution adéquate de nos jours. Peut-être que l’introduction faite sur ordinateur n’était pas la bonne et que celle faite sur mobile était trop tardive…
Différent format de vignette, notamment présente dans le “tunnel d’applications” de Windows 8
La taille d’écran Windows varie de 4 à 5 pouces pour le téléphone et de 5,5 à 7 pouces pour la tablette. Cependant on constate lors de l’utilisation sur tablette, que le format paysage ( à l’horizontal ) est beaucoup plus ergonomique et adapté que lorsque le contenu est restreint en largeur. A croire que c’est difficile pour Windows de se détacher de l’interface ordinateur.
Différentes adaptations de la même application sur 3 formats d’écrans différents.
La réelle innovation de Windows en matière de design d’interaction c’est l’interface en vignette ou “tuile animée”. Une regroupement d’applications triées sous forme de grille de 3 colonnes (pouvant aller jusqu’à 6, depuis WP 8.1). Personnalisable et interactif, la signature de Windows Phone apporte un atout unique face à ses concurrents.
La grille de l’écran d’accueil de Windows Phone
Concernant l’UX, on constate tout de même un effort de différenciation avec ses concurrents. La volonté de Windows de (quasiment) tout regrouper sur une seule zone scrollable, c’était risqué et cela a dû amener à des contraintes de hiérarchie d’informations.
Navigation dite hiérarchique ( en hauteur ) et navigation dite homologique ( en longueur )
Ainsi la navigation se fait principalement à la verticale (sur mobile) , sous plusieurs niveaux de hiérarchie. Le principe de liste et/ou d’onglet est utilisé afin de ne pas perdre l’utilisateur dans le fond d’une application et devoir lui imposer plusieurs retours en arrière fastidieux.
Emplacement du bouton retour, en fonction de la taille d’écran
L’affichage grille et l’affichage liste offrent des possibilités intéressantes en matière de placement d’éléments. Ainsi les utilisateurs habitués à la navigation sous forme de tuiles animées, auront une meilleure expérience sur les applications telles que Flipboard, Pinterest, Netflix. Pour résumer, Windows Phone c’est pratique pour faire du classement d’items.
Mouvement panoramique horizontal avec une liste/grille à défilement vertical
Les applications Flipboard et Netflix s’adaptent trèx bien à ce principe de navigation en grille
L’interface utilisateur de Windows est majoritairement brute et opaque, basée sur des couleurs sombres, elle assure un certain professionnalisme. Des titres larges avec des interlignes imposants laissent penser que WP est conçu pour les non-habitués de l’environnement smartphone. Pour les utilisateurs en manques d’affordances, ceux qui préfèrent voir directement les options s’offrant à eux et qui utilisent une gestuelle tactile plutôt basique comme moyen de navigation, Windows Phone leur conviendra. Contrairement aux connaisseurs qui optent pour la rapidité, la prédictibilité et le multitâches.
L’interface des boutons en fonction de leurs états / Espace occupé par la barre de contrôle et le menu supérieur
Imposer une interface concentrée sur l’explicité du contenu peut s’avérer utile dans certains types d’utilisation mais de manière générale, une telle grille avec une police aussi importante ne plaît pas à tous les concepteurs d’application.
En conclusion, l’architecture de l’information et l’interface globale chez Windows Phone manque de pluralité fonctionnelle, ce qui n’a pas séduit un grand nombre d’applications et de consommateurs.
Le guide de conception et les éléments d’interface ( Illustrator et PowerPoint ) :
Modèle de conception Windows Phone
Humaniser l’interface, le coeur de la stratégie d’Android
Google a la chance d’avoir un OS mobile libre de toute contrainte de support ou d’adaptation. En effet Android est conçu principalement pour les smartphones et tablettes. Contrairement à Microsoft et Apple qui ont respectivement leur propre système d’exploitation ordinateur : Microsoft Windows et Mac OS. Android quant à lui est concentré uniquement sur les portables, pourtant il n’est pas le premier constructeur du mobile supportant l’OS.
Mobile First, c’est donc la devise de Google et cela se fait sentir dans son implication à opter pour le design d’interaction sensoriel. Le doigt n’est pas une souris et ça Google l’a bien compris. La touche de l’écran est bien plus complexe que le déplacement d’un curseur sur une page, c’est pourquoi Android ajoute des animations à chaque mouvement. On ne pourra bientôt plus toucher l’écran sans qu’une animation ne se passe. L’objectif : faire comprendre à l’utilisateur qu’une action est en cours et aussi pouvoir apporter différentes solutions dans la même interaction.
Concernant l’interface utilisateur, Android a pris parti d’ajouter un menu système en bas de l’écran, en plus des moyens de navigations natifs des mobiles utilisant l’OS. Cela laisse une liberté dans la conception d’application et permet aussi d’harmoniser les différents constructeurs de smartphones.
Espace occupé par la barre de contrôle et le menu supérieur / Barre d’action utilisée sur toutes les applications Google
Pour le reste des interactions, la majorité se fait sur le haut de l’écran, grâce à une hiérarchie des items et à l’utilisation de menu hamburger, Google a implanté un profil type de navigation. Souvent copié mais jamais égalé, l’enseigne mondiale a doté toutes ses applications de ce principe afin que les utilisateurs puissent s’y accommoder rapidement. C’est aussi un bon moyen de pouvoir afficher votre profil Google sur le fameux menu déroulant de gauche.
Différent niveau de position des éléments, l’ombrage varie en fonction de la hauteur de l’item
Avec la venue de Inbox, Android a testé une nouvelle approche d’interaction avec l’ajout d’une pastille flottante en bas à droite de l’écran. Agissant parfois comme un menu contextuel, ce point immobile permet d’interagir avec la page affichée en fond. Un réel atout dans l’expérience utilisateur car l’action est plus explicite et accessible à tout moment. Il peut également se transformer en nouveau composant ou encore en liste, ce qui fait de lui un vrai bouton multifonctions.
Positionnement et spécifications de la pastille flottante de Google.
L’arrivé du Material Design a donné un coup de fraîcheur aux services Google. Sur le même principe qu’une maquette en papier, le design visuel est fait à bases d’ombres et de surfaces planes. La vraie innovation dans cette interface, c’est le mouvement apporté aux éléments (les icônes, les textes, les lumières, les formes, les images,..). En s’appuyant des tracés imprécis du doigt, les items réagissent au contact et apportent une fluidité d’interaction en ajoutant des étapes transitoires à peine perceptibles par l’utilisateur. Cela permet d’ajouter subtilement une continuité dans le chemin parcouru par les utilisateurs à travers une application. Un véritable procédé de design émotionnel et un exemple de storytelling.
On peut en conclure que Google est sur le point de révolutionner le design d’interface web grâce à l’adoption d’un design intuitif qui s’applique déjà à merveille sur mobile (écrans tactiles).
Logiciel de conception d’application Android, spécialisé pour le codage :
Logiciel de conception “Android Studio”
Caractéristique technique et visuelle du material Design de Google :
Guide de conception : Material Design
Apple et sa transparence du détail
Lorsqu’on apprend l’UX design, vous pouvez être sur d’entendre à plusieurs reprises : “Ce n’est pas le contenant qui importe, mais le contenu qui prime !” Ce n’est pas faux, pourtant l’iPhone est le contre-exemple parfait. Ce qui a fait le succès de ce dernier c’est principalement un design séducteur que l’utilisateur a su s’approprier. Depuis l’arrivé de Jony Ive à la direction de la compagnie au pôle graphique Humain-machine, le design d’iOS a bien changé. En effet iOS 7 & 8 ont apporté de gros changements en matière de design d’interface. Bien sûr que le contenu et les fonctionnalités sont restés une priorité pour Apple qui veut satisfaire le besoin des utilisateurs. Cependant un repositionnement hiérarchique des éléments visuels et la refonte graphique de l’UI et des icones natifs, ont éclairci la visibilité et allégé la navigation.
Le menu inférieur de iOS3 à iOS8 / Application message sous iOS3 / écran d’accueil iOS7
Concernant l’anatomie des applications, l’iPhone avantage la barre d’items positionnée en bas d’écran, comme il ne dispose pas de boutons de navigation natif à cet endroit. Ce qui permet de laisser place au titre et à des options basiques sur la barre supérieur. L’important sur mobile c’est de simplifier le contenu et de l’enrichir avec des animations qui apportent du sens. iOS est le seul système d’exploitation mobile à offrir un menu caché en bas ( paramètres et son ) et en haut ( notifications et infos générales ). Ainsi l’écran d’accueil est un mur d’applications et d’accessoires personnalisables.
Principaux emplacements et éléments de navigation d’iOS
Une fois rentré dans une application, vous n’avez qu’un seul moyen d’en sortir ( appuyer sur le bouton principal en bas de l’iPhone ) donc le parcours de l’utilisateur est pensé pour afficher directement ce que recherche l’utilisateur sans qu’il se sente perdu. De plus, sa bagatelle d’icônes filaires et l’utilisation quasi omniprésente du menu contextuel laisse aux concepteurs d’application une liberté de disposition dans l’espace central.
Espace occupé par la barre de contrôle et le menu supérieur / Ecran d’accueil d’iOS 8
Les applications qui utilisent le principe du storytelling, avec des interactions qui ont un commencement, une continuité et une fin, seront plus adaptés à l’interface iOS. Apple incite les créateurs d’applications à sauvegarder les datas lors de la navigation car l’utilisateur peut à tout moment la quitter pour en rejoindre une autre ( répondre à un sms par exemple ) puis ensuite retourner à sa tache première. Le multitâches et l’affichage à l’horizontal sont devenus des points forts de l’iPhone sur lesquels il faut enrichir l’expérience utilisateur.
Ecran de multitâches avec fonctionnalités / Ecran d’accueil adapté à l’horizontal
Des traits fins, des couleurs vivantes et des polices sans empattements permettent une lisibilité générale des labels qui est appréciable chez iOS. Aucune ombre, seulement de la transparence et des dégradés légers façonnent l’interface mobile de la firme.
Tous les icones liés à la modération de contenu
Toutes les couleurs utilisées par le thème iOS 8
Le nouveau challenge d’iOS sera d’être aussi concis que sur la montre, avoir autant de mobilité que le smartphone et proposer autant de fonctionnalités que l’ordinateur. Ce sera donc la prochaine étape d’Apple en matière de design: harmoniser ses différents supports, entre la toute dernière Apple Watch, le mastodonte iPhone et le persévérant iMac. Ce n’est pas si simple lorsqu’on connait le nombre de tailles d’écran différentes à adapter juste avec l’évolution de l’iPhone et la résolution Retina.
Différentes tailles d’écrans en fonction de l’iPhone
On peut conclure que pour Apple, le design a toujours primé sur le reste, l’importance de faire assimiler rapidement aux utilisateurs le principe d’une fonctionnalité, c’est primordial. Le design émotionnel est tellement bien incorporé qu’on le perçoit à peine pourtant la fluidité et la simplicité sont toujours au rendez-vous lors de la prise en main du smartphone.
Kit de conception graphique pour iOS8 :
Sources de mockup et interface iOS8
Librairie de ressources pour développer sur iOS :
En résumé
Les 3 OS offrent des avantages uniques pour l’utilisateur, avec l’uniformisation des plateformes, les tendances convergent vers un même résultat : l’adaptation.
Trêve de bavardage, avec cette comparaison des écrans de contrôle des paramètres natifs, vous comprendrez le raisonnement globale de chaque OS.
Source : iGeneration pour les photos, Ivo Mynttinen pour le guide du design sur OS, The UX of Mobile Settings et les sites des constructeurs Windows, Google et Apple.
Crédit image
No Comments