Soutenance mémoire
Impacts des Smartphones et tablettes sur les interfaces applicatives, théorie et mise en œuvre actuelle
Introduction
Selon une infographie de Experience Dynamics1, on estime que 70 % des projets échouent dû au manque d’acceptation de l’utilisateur final par rapport au produit. L’un des motifs d’adoption d’une application est son efficacité et sa facilité d’utilisation. Les utilisateurs pensent que 72 % du temps, c’est ce point qui décide de l’acceptation d’une application. Les fonctionnalités proposées ne représentent que 16 % du critère de choix d’adoption.
Autre statistique intéressante, dépenser 10 % du budget de développement pour l’ergonomie d’un programme informatique augmenterait l’acception par rapport à l’utilisateur de 83 %. En moyenne, les entreprises investissent 11.5 % du budget de développement d’un projet dans l’expérience utilisateur. Nul doute que le design des interfaces graphiques est donc un des points essentiels du succès d’une application. L’aspect esthétique et l’ergonomie doivent être bien pensés afin de livrer une solution agréable et efficace en termes d’utilisation. Mais, depuis 2007, 2 nouveaux supports ont vu le jour : les smartphones et les tablettes. Pourquoi et comment ces appareils ont-ils changé notre manière de concevoir les interfaces utilisateurs des applications d’aujourd’hui ?
Définitions
Glossaire, abréviations et termes techniques
UX (User eXperience) est une abréviation anglaise désignant l’expérience utilisateur. UI (User Interface) est une abréviation anglaise désignant l’interface utilisateur. CSS (Cascading Style Sheets) est un langage informatique utilisé pour mettre en forme le contenu d’une page web. W3C (World Wide Web Consortium) est l’organisme de standardisation des technologies web. OS (Operating System) est une abréviation anglaise désignant le système d’exploitation d’un ordinateur. Un IDE (Integrated Development Environment) est un environnement de développement facilitant la programmation d’applications. Du code natif est du code qui est exécuté directement par la machine, ce qui offre des performances optimales. En comparaison, du code web est exécuté par un intermédiaire (le navigateur Internet) et voit ses performances réduites.
L’expérience utilisateur et l’interface utilisateur
L’expérience utilisateur désigne les interactions d’un utilisateur final avec un produit ou un service. On y retrouve les attentes exactes du client, le contenu à proposer, la structure de l’information, la conception visuelle et interactive ainsi que l’ergonomie. Le but de cette science est qu’un public cible ait envie d’utiliser le produit ou le service en question et qu’il s’y fidélise. Pour arriver à une excellente expérience utilisateur, plusieurs outils et méthodologies existent comme la recherche des besoins de l’utilisateur, la définition de profils types d’utilisateurs finaux, la définition des cas d’utilisation, du prototypage et des tests d’utilisation par un utilisateur final sur une portion ou la totalité du produit.
Changements provoqués par les appareils mobiles
Les ventes
Le premier smartphone à avoir révolutionné le marché n’est autre que l’iPhone. Sorti en 2007 par Apple, cet appareil a posé les fondements de ce qui caractérise un téléphone intelligent : un écran tactile, un appareil photo et un système d’exploitation mobile capable de naviguer sur Internet, lancer des applications ainsi que d’en télécharger d’autres à l’aide d’un magasin en ligne. Ce système d’exploitation mobile s’appelle iOS. La sortie de l’iPhone a été rapidement suivie par le HTC G1, premier smartphone Android qui est le système d’exploitation mobile développé par Google. Ce téléphone propose des caractéristiques similaires à l’appareil d’Apple. 3 ans après l’arrivée du premier iPhone, Apple décide de bouleverser à nouveau le marché en proposant la tablette iPad. À mi-chemin entre un ordinateur portable et un smartphone, on reconnait ce produit par son écran tactile d’une taille très proche à un ordinateur portable, mais en étant démunie d’un clavier et d’une souris. L’iPad a le même système d’exploitation et les mêmes capacités que l’iPhone. Bien évidemment, les premières tablettes Android sont rapidement arrivées par la suite. Depuis l’iPhone premier du nom, les ventes de smartphones n’ont cessé d’augmenter. On ne dénombre rien que 1.47 milliard de livraisons de smartphone en 2016. Pour les tablettes, on compte 1,067 milliard d’appareils vendus depuis 2010, date de sortie du premier iPad.
Google, plus grand moteur de recherche web et concepteur du système d’exploitation Android, a très bien compris l’importance de ces supports portables et a ainsi œuvré pour la satisfaction des clients utilisant ces appareils. Le 21 avril 2015, Google a décidé d’inclure l’optimisation mobile faite par un site dans son algorithme de recherche. Par conséquent, si un site web est adapté pour mobile, par exemple avec une version mobile ou un page s’adaptant au support de consultation, il sera alors propulsé vers les meilleurs résultats par rapport à un autre site qui n’est pas optimisé pour une navigation mobile. Le but de cette initiative est de motiver la conception orientée mobile des sites web existants et à veni
Les marchés d’applications
Les systèmes d’exploitation des smartphones et des tablettes incluent des marchés d’applications. On retrouve l’App Store pour les appareils iOS d’Apple et le Play Store pour Android de Google. Avec 149 milliards de téléchargements de produits applicatifs pour 61 milliards de dollars de chiffres d’affaires annuels en 20162 , les marchés d’applications ont une importance capitale dans ces appareils mobiles. On compte 2.8 millions de programmes informatiques sur le Play Store contre 2.2 millions sur l’App Store.
Des prévisions pour 2021 annonceraient le nombre de téléchargements d’applications à 352 milliards et des revenus à 139 milliards de dollars
Utilisation de ces nouveaux supports
Ces appareils ont des caractéristiques différentes par rapport à un ordinateur de bureau et offrent une nouvelle manière d’interagir avec un système informatique. L’écran est une des principales nouveautés. Pour les smartphones, la taille des écrans est plus petite par rapport à un ordinateur personnel. Celle des tablettes est plutôt proche d’un PC. Mais ce qui change, c’est la navigation faite par le toucher de l’écran avec les doigts et non pas par un mouvement de souris. L’affichage prend aussi en compte l’orientation : si, par défaut d’utilisation, l’appareil est tenu à la verticale, il est possible de le tourner pour avoir un affichage à l’horizontale.
Pratiques actuelles
Plusieurs bonnes pratiques, servant à améliorer l’expérience utilisateur et à perfectionner les éléments des interfaces graphiques, se sont développées depuis l’arrivée des appareils mobiles. Des documentations comme le Material Design de Google et l’Human Interface Guidelines d’Apple fournissent une multitude d’informations sur le design d’interface utilisateur pour les applications. Elles ont été créées dans le but d’expliquer comment offrir une expérience utilisateur cohérente et consistante. Rapidement adoptées par les développeurs, ces bonnes pratiques sont maintenant utilisées sur les applications mobiles et web. D’autres conseils ont vu le jour à travers d’articles et de marches à suivre, jusqu’à devenir aussi des références pour la conception d’interface.
Tactile
Les supports mobiles ont, comme caractéristiques principales, des écrans tactiles qui permettent à l’utilisateur d’interagir directement avec le système en appuyant avec les doigts dessus. De ce fait, la précision de pression sur l’écran est à revoir. En effet, le toucher de doigt a une zone de pression de 10mm sur 10mm, ce qui nécessite d’agrandir la taille de nos éléments interactifs afin d’être atteignable sans difficulté. Apple recommande une zone de 44 pixels sur 44 pour un confort optimal.
Les gestes
L’interaction avec un écran tactile peut se faire de plusieurs manières. En effet, il est possible d’interagir à l’aide de divers gestes. Le but de ces derniers est d’alléger l’affichage en enlevant des éléments de navigation et d’offrir une interaction naturelle. Mais, la courbe d’apprentissage d’utilisation de l’application augmente si on intègre plusieurs gestes. En effet, c’est à l’utilisateur de les découvrir pour interagir avec l’application. Pour qu’il ne soit pas perdu, il est bon de proposer des indications concernant les gestes réalisables. C’est pourquoi Google et Apple recommandent d’utiliser des gestes standards. Les utilisateurs s’attendent à ce que ces gestes aient le même résultat à travers diverses applications
La typographie
La typographie est l’élément le plus important lors de la conception d’une interface utilisateur. Il est nécessaire de rendre la lecture le plus agréable que possible. Pour cela, plusieurs bonnes pratiques existent. Premièrement, un trop grand nombre de polices d’écriture différente dégage un aspect général non structuré. Il est bon de n’en garder que 3 au maximum. Google et Apple recommandent même de rester sur la police d’écriture de base de l’appareil sur lequel on se trouve : Roboto pour Android et San Francisco pour iOS.
La taille minimale d’un élément textuel dépend du support de consultation :
• Pour les PC et tablettes, 16 pixels sont recommandés.
• Pour smartphones, il faut compter 11 pixels.
Il faut ensuite jouer avec la taille, l’intensité et la couleur pour différencier les zones de texte telles que les titres ou les boutons par exemple. C’est pourquoi il faut choisir une police d’écriture qui s’accorde bien à ces changements. Limiter le nombre de caractères par ligne à 60 sur PC et à 30 40 sur appareils mobiles permet une lecture fluide, un rythme agréable et donc une fatigue amoindrie des yeux.
Les animations
Les animations permettent d’apporter des indications supplémentaires de l’état de l’application à un utilisateur. Elles informent sur le statut actuel de l’application (si elle est en chargement par exemple) et donnent un retour par rapport à une action effectuée par un utilisateur, comme le fait de montrer une transition de « glissement » lors d’un changement de page. Elles ont pris une place importante dans les interfaces utilisateurs, car un élément peut alors prendre vie et avoir un comportement naturel. Elles facilitent la compréhension d’une application et peuvent avoir un aspect visuel très plaisant. Bien évidemment, une animation ne doit pas distraire un utilisateur des informations affichées à l’écran. Google va plus loin en définissant certains critères :
• Une animation se doit d’être rapide pour ne pas impatienter l’utilisateur. Une animation normale sur smartphone dure, en moyenne 300 millisecondes. Une animation sur tablette dure 390 millisecondes, ce qui représente 30 % de plus que sur smartphone. Quant au PC, il faut se baser sur la distance de déplacement d’un élément et animer de sorte que ce soit rapide et naturel.
• Plusieurs rythmes d’animations existent, mais le timing recommandé est quand une animation prend du temps à atteindre sa vitesse maximum et ralentie progressivement à la fin. On parle alors de « ease in out » ou d’atténuation au début et à la fin.
• Le terme « chorégraphie » désigne plusieurs éléments animés en même temps. Cette animation doit être claire, simple et cohérente avec l’affichage actuel pour ne pas créer de confusion
Tiroir de navigation
Le tiroir de navigation a été mis en avant par Google dans le Material Design. Comme l’espace est très limité sur les écrans mobiles, le tiroir de navigation, appelé aussi le tiroir latéral, est devenu un élément de navigation populaire. En effet, les fonctionnalités ne sont pas affichées directement sur l’écran. Elles sont présentes sous forme de liste dans un composant qui s’affiche au-dessus de la page actuelle lors de l’appui sur l’icône représentant ce menu de navigation. Appelé péjorativement « hamburger menu » à cause de la ressemblance de l’icône avec un hamburger, il est aussi très critiqué, car il cache les fonctionnalités de l’application à l’utilisateur. En outre, il faut effectuer une action de plus, c’est-à-dire cliquer sur le bouton du menu, pour accéder à une fonctionnalité. Il est à noter que cette icône est devenue la représentation standard de ce composant pour les utilisateurs au sein des applications.
Développement des applications natives avec les outils officiels
Le développement d’une application native procure un avantage certain face à une application web : on peut utiliser toute les fonctionnalités offertes par l’appareil en question comme la pleine puissance du processeur par exemple. De plus, elle se retrouve sur le marché des applications, qui est un endroit avec une exposition importante.
En contrepartie, si on souhaite viser les 2 OS mobiles principaux, il faut alors développer une application spécifique pour chaque support, car chaque système d’exploitation utilise un langage de programmation différent. Google et Apple offrent aux développeurs un IDE pour leurs OS. Google propose Android Studio et Apple propose Xcode. Ces IDE permettent de créer des interfaces utilisateurs de manière visuelle. En effet, chaque IDE propose de glisser-déposer des composants dans une page afin de concevoir facilement une interface. Chaque élément a des propriétés éditables, semblables à ce qui est utilisé en CSS. Il suffit de les changer pour arriver au résultat escompté.
CSS : Media Queries
Recommandées depuis le 19 juin 2012 par la W3C, les Media Queries sont des règles CSS qui permettent de viser un type de média avec des conditions particulières. En définissant ces règles dans une page web, on peut ainsi s’adapter à un support spécifique qui consulterait la page. Plus précisément, les Media Queries permettent de sélectionner plusieurs types de médias tels qu’un écran, une impression, une télévision, un appareil auditif, un appareil de synthèse vocale, un appareil de lecture Braille et bien plus. On peut ensuite restreindre un média en définissant des conditions telles que la résolution d’un média, le ratio d’affichage, l’orientation d’écran ou les couleurs d’affichage disponibles.
Finalement, dans les Media Queries, on y écrit les contraintes de style voulues pour le support visé
Mobile First
L’approche « Mobile First » part du principe que le design est plus dur à réaliser sur une petite taille d’écran que sur une grande. C’est pourquoi il faudrait commencer par concevoir les interfaces applicatives pour les smartphones et réaliser pour les autres supports dans l’ordre croissant de la taille des écrans, c’est-à-dire les tablettes et les PC. Comme on est restreint par la petite taille de l’écran, on ne va y inclure que les éléments essentiels. Du coup, on se retrouve avec un design réfléchi pour un téléphone, doté d’une expérience utilisateur optimisée, qu’il suffit d’adapter aux tablettes et ensuite aux PC. Il est facile alors de rajouter des éléments au fur et à mesure que l’espace d’affichage s’agrandit. C’est à l’opposé de l’approche appelée « Graceful Degradation » ou dégradation progressive, où on se retrouve en tout premier avec une version pensée pour le PC, qui est très complète avec tous les composants essentiels et optionnels. Ensuite, cette version est réduite en enlevant certains éléments pour tenir sur un écran d’affichage plus petit. Le problème est qu’il est difficile de distinguer entre tous ces éléments ce qui est essentiel à une expérience utilisateur. Au final, on se retrouve avec une version qui n’est pas forcément adaptée à un smartphone, car elle a subi plusieurs réajustements depuis la version initiale. L’approche Mobile First place le contenu en priorité dans le design de l’interface applicative. En effet, l’utilisateur utilise une application pour le contenu offert. On adopte alors une vision centrée sur le besoin de l’utilisateur. Après avoir défini comment le contenu se présente sur un affichage réduit, il est plus facile de l’adapter à un écran plus grand qu’à l’inverse, l’adapter à un écran plus petit.
Analyse de l’interface utilisateur d’une application
Pour cette analyse, l’application choisie est Instagram, qui est un réseau social de partage de photos et de vidéos qui a vu le jour en 2010. En 2012, Facebook rachète Instagram pour 1 milliard de dollars américains, mais décide de laisser l’application en tant que telle et ne pas la rattacher à ses services. Instagram compte 700 millions d’utilisateurs actifs en avril 2017. L’analyse se focalisera sur la version Android, iOS et la version web. Il est à noter que l’affichage de l’application web et native sur smartphone et sur tablette est identique sur la plupart des points. C’est pourquoi ces affichages sont regroupés, selon si on parle en termes d’OS ou en termes de supports. L’analyse se fera en utilisant l’approche « Atomic Design », expliquée précédemment dans ce mémoire. Nous verrons 4 catégories possibles d’éléments : atomes, molécules, organismes et modèles de page. En effet, la catégorie « page » n’apporte rien de plus dans l’analyse.
De plus, les icônes « retour en arrière » et « plus d’options » respectent bien les spécificités liées à chaque plateforme.
Les icônes propres à une seule version sont celles de la boussole (n’apparais que sur PC) et de l’ajout d’ami (n’apparais que sur la version mobile web). L’icône de la boussole représente la fonctionnalité « Découvrir ». Cette dernière est accessible sur les versions mobiles à l’aide de l’icône de la loupe. Sur mobiles, cette fonctionnalité permet d’accéder à une barre de recherche ainsi que d’avoir des propositions de contenus. C’est pourquoi ce changement sur la version web PC s’explique par la présence en permanence de la barre de recherche, et de ne donc pas utiliser une icône de la loupe pour la fonctionnalité « Découvrir ».
Le logo de la marque est le même sur les versions mobiles, mais, sur la version PC, le logo change. Pour le reste des icônes sur la version web, elles proviennent de la version iOS.
En mettant ensemble l’icône de l’appareil photo, le logo Instagram et l’icône de l’avion en papier, cela forme la barre principale de la page d’accueil. Selon l’OS mobile, les icônes changent. Mais, il n’y a pas de labels qui accompagnent ces logos pour expliquer leur sens. Le logo Instagram est aligné au centre que ce soit sur Android ou iOS, alors que sur Android, la bonne pratique veut qu’il soit aligné à gauche. Lorsque l’on est sur la page d’un profil ou d’une photo, la barre principale change. On se retrouve avec un composant qui respecte totalement les best practices des 2 OS : les icônes spécifiques et le texte aligné selon les recommandations. Sur la version web mobile, la barre principale est dénuée des icônes présentes sur iOS, car ces fonctionnalités ne sont pas implémentées sur la version web. Par contre, l’icône d’ajout d’ami fait son apparition quand on est sur la page d’accueil sur la version web mobile. Pour la version web PC, la barre principale devient plus complexe et passe dans la catégorie « Organisme ».
Native nous permettent de coder de manière similaire pour le web et pour la version native. L’une des règles fondamentales en développement est le fait d’éviter de répéter du code. L’approche Atomic Design couplée à la séparation du visuel de la logique répond à merveille à cette demande :
• Les éléments visuels sont réutilisables à travers l’application en ayant de la logique différente si nécessaire.
• Un composant visuel complexe peut être écrit en 2 fichiers séparés visant chacun un OS et utiliser la même logique par la suite pour cet élément séparé en 2.
• La réutilisation des composants web vers les supports natifs ou inversement est facilitée, car on peut réutiliser toute la logique et ne devoir réadapter que les composants visuels présents dans le dossier « components ».
• Le projet peut grandir facilement, car la structure est établie pour répondre à un ajout d’un nouveau contexte à l’application tout en gardant un aspect visuel cohérant.
Afin d’offrir un produit adapté pour chaque support de consultation, il faut aussi adopter l’approche « Mobile First » en commençant par concevoir l’interface graphique des versions smartphones, pour ensuite l’adapter pour les tablettes et finir par l’ajuster pour une navigation parfaite sur PC. Pour une version web optimale, il suffit de reprendre les principes expliqués dans le point 6.2.1 « Responsive Web Design ».
Conclusion
Du fait de leur grande adoption par les utilisateurs finaux, les tablettes et principalement les smartphones ont pris une importance capitale lors de la conception d’un produit applicatif. Il n’est plus possible de les ignorer, au risque de décevoir le marché cible, voire même de ne plus être visible pour celui-ci. On constate qu’iOS et Android sont les grands gagnants des systèmes d’exploitation mobiles. Les spécificités de ces nouveaux supports bouleversent la manière d’interagir avec un système informatique. C’est pourquoi Google et Apple ont apporté des lignes directrices de design d’applications pour leurs appareils. D’autres institutions et personnalités ont aussi apporté leur pierre à l’édifice. Le but de toutes ces recommandations est de concevoir une expérience utilisateur agréable et une prise en main facile pour l’utilisateur. En analysant Instagram, on observe à la fois le respect des bonnes pratiques et la prise de liberté sur certains points. Étant donné que ce sont des conseils, il n’y a pas d’obligations de les employer à la lettre. Mais, le fait de trop s’éloigner de ces recommandations peut rendre une application difficile à utiliser ou peut causer des problèmes d’esthétiques. Tout cela peut provoquer une baisse d’adoption de l’application. Il est nécessaire de bien réfléchir aux choix faits pour les interfaces, afin de toujours offrir une expérience utilisateur optimale.
|
Table des matières
1. Introduction
2. Définitions
2.1 Glossaire, abréviations et termes techniques
2.2 L’expérience utilisateur et l’interface utilisateur
2.3 Définition d’une application
3. Changements provoqués par les appareils mobiles
3.1 Les ventes
3.2 Le trafic web
3.3 Google
3.4 Les marchés d’applications
3.5 Utilisation de ces nouveaux supports
4. Courant de design digital
4.1 Skeuomorphisme
4.2 Flat design
5. Pratiques actuelles
5.1 Tactile
5.2 Taille d’écran des smartphones
5.3 Boutons
5.3.1 Floating Action Button
5.4 Les gestes
5.4.1 Pression
5.4.2 Double pression
5.4.3 Pression longue
5.4.4 Glisser le doigt vers une direction
5.4.5 Écarter / Pincer
5.5 La typographie
5.6 Les icônes
5.7 Les animations
5.8 Menus de navigation
5.8.1 Barre principale
5.8.2 Tiroir de navigation
Impacts des Smartphones et tablettes sur les interfaces applicatives, théorie et mise en œuvre actuelle
AVELINO Fabio v
5.8.3 Barre d’onglets
5.9 Disposition
5.9.1 Espacement
5.9.2 Orientation
6. Développement des interfaces utilisateurs depuis l’arrivée des appareils mobiles
6.1 Développement des applications natives avec les outils officiels
6.1.1 Affichage adaptatif
6.2 Web Design
6.2.1 Responsive Web Design
6.2.1.1 CSS : Media Queries
6.2.1.2 Grille de disposition
6.2.1.3 Exemple
7. Nouvelles méthodologies de développement
7.1 Mobile First
7.2 Atomic Design
7.2.1 Atomes
7.2.2 Molécules
7.2.3 Organismes
7.2.4 Modèle
7.2.5 Page
8. Analyse de l’interface utilisateur d’une application
8.1 Analyse atomique
8.1.1 Atomes
8.1.1.1 Icônes
8.1.1.2 Typographie
8.1.1.3 Autres éléments
8.1.2 Molécules
8.1.2.1 Barre principale
8.1.2.2 Barre d’onglets
8.1.2.3 Barre d’interaction avec une photo
8.1.2.4 Profil de la personne ayant publié le contenu
8.1.2.5 Nom du profil et commentaire
8.1.3 Organismes
8.1.3.1 Barre principale sur la version web PC
8.1.3.2 Contenu principal : Photo ou vidéo
8.1.4 Modèle de page
8.2 Conclusion de l’analyse
9. Proposition de solution
9.1 React et React Native
9.2 Structure du projet
9.3 Création d’un composant natif
Impacts des Smartphones et tablettes sur les interfaces applicatives, théorie et mise en œuvre actuelle
AVELINO Fabio
9.4 Explication de ces choix
10. Conclusion
Télécharger le rapport complet
