Créer son application mobile native, partie 3 : le design

Notre série de huit articles sur comment créer son application portait dans une première partie sur la planification puis sur la mise en place technique d’une application mobile native. Dans ce nouveau volet, nous parlerons de la conception du design et vous dévoilerons des conseils précieux auxquels il est bon de faire attention.

Finalement, il n’est pas si important de savoir si l’application est lancée sur Android ou iOS lorsque l’on aborde la question du design : les grandes lignes sont en effet les mêmes. Ce qui prime est de concevoir une présentation cohérente et de porter grande attention à son utilisabilité (de l’anglais « usability »). Des outils divers peuvent par conséquent être d’une grande aide.   

Dès que vous savez comment vous concevrez votre application d’un point de vue technique, il devient opportun de s’intéresser à l’agencement de son interface utilisateur graphique (raccourci GUI ou UI en anglais pour [graphical] user interface). Cette interface est au cœur du design de l’application mobile ; c’est ici que ce reflète toute l’identité visuelle de votre application. Il serait donc une grande erreur de vouloir négliger cet aspect. Pour beaucoup de développeurs, c’est aussi important que le contenu de l’application. En effet, même si une application peut éveiller l’intérêt de nombreux utilisateurs grâce à une fonction exceptionnelle et être largement téléchargée, un mauvais design peut jeter de l’ombre sur son utilisation et faire rapidement fuir les utilisateurs.

Le design d’une application mobile peut être considéré comme un terme générique pour les nombreux éléments qui composent une interface. Il englobe en effet bien plus que la simple police de caractères, les couleurs ou les teintes : l’ensemble des éléments graphiques, y compris leurs fonctions et boutons de commandes, contribue au design d’une application mobile. Il est par conséquent important de soigner les liens entre tous ces éléments. L’intuitivité de l’application va dépendre fortement du positionnement des contenus, de leurs tailles et de leurs agencements. 

Concernant les appareils mobiles, deux grandes particularités vont influencer l’affichage des interfaces : d’une part, la taille et la résolution de l’écran sur lequel elles seront affichées, varient grandement d’un appareil à un autre. D’autre part, l’utilisation de l’écran tactile (touchscreen) fixe de nouvelles exigences pour l’agencement des éléments graphiques. Si ces caractéristiques semblent banales, elles vont pourtant considérablement conditionner votre travail sur le design de votre application. Nous vous dévoilons comment prendre soin de votre interface graphique et vous présentons quelques principes de conception pour une présentation agréable et une bonne usabilité de votre application.

Par présentation ou layout, on entend la conception visuelle de l’interface et l’agencement de son contenu. Pour la présentation de votre application native, vous pouvez vous tourner vers de nombreux packs (appelés souvent UI kits), qui proposent une panoplie d’éléments préfabriqués pour votre interface utilisateur et des modèles pour bien les placer et structurer. Ils comportent souvent des icônes, templates, widgets, couleurs etc… A noter : certains sont disponibles gratuitement sur le Web.

Google propose gratuitement dans son « Material Design » divers éléments pour les interfaces de vos applications que vous pouvez télécharger gratuitement (comme les templates ou les icônes). De même, Apple offre gratuitement (et peut-être de manière plus complète) des éléments pour votre présentation sur iOS dans ses offres Web Developer. En outre, certains programmateurs mettent également à disposition des kits UI qu’ils ont développés (par exemple sur design+code pour iOS ou sur sketchappsources.com pour Android).

L’avantage de ces packs standardisés est de pouvoir mettre en place des designs cohérents sans trop d’effort. Ils sont de plus très faciles d’utilisation. Tout avantage a malheureusement naturellement ses inconvénients : les possibilités de création sont limitées, les options réduites et l’utilisation de ces modèles crée une certaine dépendance aux plateformes qui ont aidé à les installer.

De tels packs et kits UI pour Android et iOS illustrent bien que certains standards pour la présentation d’une application mobile native se sont établis. Il en va pour les polices de caractères, les choix de couleurs ainsi que quelques lignes directrices et variantes qui tiennent compte de la diversité des tailles d’affichage et des résolutions d’écran.

Toute application comporte du texte. Même si les images et symboles sont prépondérants sur certaines applications, des segments de textes vont tout de même être obligatoires : par exemple les conditions d’utilisation ou les mentions légales. Mais pour les autres contenus rédactionnels qui vont avoir un fort impact sur l’apparence de votre interface (comme les menus, les articles etc…), il est vital d’adopter une police de caractère adaptée. Définir l’apparence de son texte est un point central de votre présentation.

Concernant les polices de caractères, il est possible de garder simplement la typographie propre au système de la plateforme de l’application. Pour iOS, il s’agit depuis iOS 9 de la police « San Francisco » (les polices des versions précédentes étant « Helvetica » et « Helvetica Neue »). Par ailleurs, Android utilise depuis la version 4.0 « Roboto ». De nombreux développeurs optent à juste raison la police standard d’Android ou de iOS : ces styles d’écriture sont en effet optimaux pour ces systèmes d’exploitation et permettent de garder une application épurée. De plus, elles peuvent être utilisées immédiatement alors que les autres polices doivent être préinstallées.

Toutefois, il peut valoir la peine de mettre en place une autre typographie, surtout si votre application comporte beaucoup de texte et si vous souhaitez vous différencier de la concurrence. Vous pouvez télécharger gratuitement de nombreuses polices depuis Internet. Bien choisir le style d’écriture va dépendre souvent du thème de votre application et de son contenu. Pour un concept artistique, nous vous conseillons par exemple d’adopter une typographie originale qui reflétera votre style. Pour des contenus journalistiques, une police sobre sera en revanche plus adaptée. Soyez dans tous les cas prudent : il est essentiel de préserver la clarté de la lecture, d’autant plus si votre application comporte beaucoup de texte. « Open Sans » ou « Lato » sont par exemple bien adaptés à de nombreux genres d’application car elles se révèlent fines et élégantes.

Les couleurs de votre application doivent permettre à votre interface de présenter un beau jeu de contraste. En effet, cela peut faciliter son utilisation, les applications étant souvent utilisées en extérieur et ne bénéficiant pas toujours d’une bonne luminosité. Le choix de la couleur va dépendre du thème de l’application et de votre cible. Si l’application est en lien avec une entreprise ou un projet précis qui est déjà identifiable par des codes couleurs, il est nécessaire d’orienter son site selon cette identité visuelle. Outre le code couleur, le logo et encore une fois la police de caractères doivent témoigner de l’appartenance à l’entité et établir une cohérence.

De manière générale, les éléments de votre interface utilisateur doivent être uniformisés. Vous trouverez d’autres conseils pour un bon concept graphique dans notre article sur les principes fondamentaux du Web design. Les indications et astuces présentées peuvent se mettre en place aisément pour les applications.

L’affichage sur l’écran de l’utilisateur va déterminer au cas par cas la place disponible pour présenter votre contenu. Cette place va en effet varier d’un appareil à un autre. On peut noter une différence énorme en termes d’affichage et de résolution entre les différents smartphones. Les écarts sont encore plus grands si l’on prend en compte les tablettes disponibles sur le marché. Bien que les applications iOS et Android vont s’adapter automatiquement aux écrans sur lesquels elles s’affichent, ces ajustements ne se limitent qu’à une mise à l’échelle des éléments de l’interface utilisateur. Le layout ne change pas et peut donc rapidement créer du désordre et de la confusion.

Par exemple : une présentation optimisée pour l’affichage d’un iPhone ne va pas être appropriée à l’écran d’un iPad qui est nettement plus large : les boutons du menu vont en effet apparaître trop large sur la tablette s’ils n’ont pas été ajustés. Dans la plupart des cas, il est préférable de créer une présentation spécifique pour les tablettes et les smartphones. Pour les tablettes, vous pourrez vous permettre d’ajouter du contenu.

Dans un cadre professionnel, créer différentes versions d’application pour les adapter aux résolutions et tailles variées des appareils mobiles coule presque de source pour les graphistes. De nombreuses entreprises mettent en effet en place trois, quatre ou même encore plus de versions pour leur application, et ce particulièrement si elles sont bien établies sur le marché, ou si elles y aspirent. Bien sûr, un travail conséquent et de nouvelles dépenses sont nécessaires pour cela.

Par ailleurs, il ne faut pas perdre à l’esprit que deux types d’orientation sont possibles pour les smartphones et tablettes. Pour passer d’une orientation portrait à paysage, l’affichage doit rester harmonieux. Finalement, le nombre de présentations que vous aurez réellement besoin de mettre en place va dépendre de votre projet et de vos objectifs. Gardez tout de même à l’esprit que ne pas investir dans différents ajustements va fortement nuire à votre usabilité.

Si une application a une forte usabilité, elle est généralement dite intuitive. Cela signifie que son utilisation est facile, limpide et structurée selon des modèles simples. Ce sont au final les utilisateurs qui vont toujours déterminer si une application est facile d’utilisation. C’est pourquoi, il est vital de connaître les préférences et attentes de votre cible et d’orienter votre application et design selon ces dernières. L’enjeu n’est pas d’exhiber les fonctions extraordinaires qu’offre votre application, mais bien plus de favoriser la meilleure des expériences à votre groupe cible.

Une application est souvent intuitive si elle est claire, ordonnée et compréhensible en clin d’œil. Cela est un réel challenge pour les smartphones qui possèdent notamment un petit écran. Par conséquent, faites attention à la masse d’informations que vous souhaitez insérer à votre application et qui apparaîtra sur l’écran. L’application ne doit pas se retrouver surchargée. Limitez le contenu de votre application et ses fonctions à l’essentiel. Cela vous permettra de placer vos éléments de manière suffisamment grosse et de laisser de la place pour respirer. Une interface épurée rend les applications plus harmonieuses.

Le menu de votre application doit être immédiatement repérable à l’ouverture de votre application et identifiable en tant que tel par les utilisateurs. Les menus déroulants sont la plupart du temps utilisés car ils permettent de gagner beaucoup de place. Les rubriques du menu ne doivent pas dérouter les utilisateurs. Souvenez-vous que votre menu doit être clair, précis et aller droit au but. Si votre application offrent de nombreuses fonctions, présentez d’abord les plus importantes dans un menu général et placez celles qui sont moins significatives dans des sous-menus.

Pour atteindre une fonction précise, il faut à tout prix éviter que l’utilisateur n’ait à effectuer trop de clics. De nombreux experts indiquent que l’utilisateur doit pouvoir atteindre ce qu’il recherche en seulement deux clics. Suivant votre application, vous pourrez définir si vous pouvez réellement rapprocher vos fonctions. Dans tous les cas, il faut s’efforcer à offrir des chemins courts. Des structures de menus trop complexes peuvent déconcerter les utilisateurs et les perdre dans l’utilisation de l’application.

Un autre facteur important pour une bonne usabilité est la mise en place intuitive des éléments interactifs. Une attention toute particulière doit être portée à la taille, l’ordre et le design des boutons au sein de votre interface utilisateur. Les éléments interactifs (menus déroulants, boutons, liens etc.) doivent être facilement reconnaissables et accessibles sans heurts. En effet, n’oubliez pas que certains utilisateurs ont des mains larges et donc parfois plus de difficultés à cliquer sur ces éléments. Des boutons trop petits ou mal positionnés peuvent amener les utilisateurs à cliquer à coté de ce qu’ils recherchaient, ce qui peut créer de l’énervement et de la frustration.

De plus, il est de bon ton d’informer de manière graphique l’utilisation en cours d’un élément interactif choisi. Cela concerne surtout les actions qui demandent un temps de chargement plus long : 1&1 IONOS conseille vivement de faire apparaître un symbole ou une animation qui témoigne du process en cours. Cela favorise une certaine transparence sur les processus de chargement ou de recherche.

Contrairement aux applications Web ou aux applications hybrides, le design d’une application native s’adapte dans une large mesure aux plateformes sur lesquelles se basent iOS ou Android. C’est pourquoi, il est plus facile de mettre en place un bon design « Look and Feel », ce qui peut avoir un impact très positif en termes d’usabilité.

Si vous souhaitez tester plusieurs layouts, des programmes spécialisés peuvent aider. Il existe en effet différents outils pour mettre au point le design final de votre application mobile. Ils permettent de visualiser sous plusieurs formats d’écran vos modèles de design. Les données visuelles sont insérées dans un outil qui vous permet de créer des prototypes (appelés également maquettes ou mock-ups).

L’utilisation des outils est souvent très simple. Ils s’utilisent pour la plupart grâce à la fonction glisser/déposer et avec un éditeur WYSIWYG (what you see is what you get). Ainsi, il est possible de simuler l’utilisation de votre application. Le prototype peut être ensuite testé sur un smartphone ou une tablette, permettant d’expérimenter l’application en balayant l’écran (swipe) par exemple ou en effectuant d’autres gestes courants pour son utilisation potentielle.

Ses outils facilitent la mise en place très simple de prototypes, sans nécessiter de connaissances en programmation. Avec un peu de travail, les mock-ups peuvent presque égalés dans leur fonctionnement l’application réelle. Nous vous présentons ici les portraits des deux outils design les plus connus et les plus appréciés.

L’utilisation de InVision est particulièrement adaptée aux professionnels. L’outil est proposé éventuellement en version gratuite mais il faut accepter de renoncer à certaines fonctions. Ainsi, vous pouvez mettre en place assez rapidement et simplement un prototype pour la présentation complète de votre application en insérant et ajustant des modèles de design. Ensuite, vous pouvez le tester sur un appareil mobile : grâce aux diverses configurations, il est possible de naviguer sur sa maquette de manière très similaire à une application réelle.

L’une des caractéristiques principales de l’outil est sa simplification du travail en équipe. Non seulement de nombreux utilisateurs peuvent participer à la maquette mais ils peuvent également laisser des notes sur les prototypes et s’échanger des commentaires pour partager leurs idées sur le design. De nombreuses grandes entreprises comme IBM, Twitter, Netflix, ou Soundcloud ont utilisé InVision pour leur prototype.

Si vous n’avez pas encore créé de modèle, Fluid UI regroupe une panoplie d’écrans préétablis, que vous pouvez intégrer à votre prototype. Autrement, le programme n’a pas non plus à rougir de la concurrence : il dispose en effet comme InVision et autrefois Pixate d’un très large éventail de fonctions.

La version gratuite limite toutefois les prototypes à un maximum de 10 écrans. C’est en général insuffisant pour effectuer un test complet d’une application mais vous pouvez toujours tester sans frais et aussi longtemps que vous le souhaitez les différentes fonctions de cet outil de design pour application.

Pour concevoir le graphisme de son application mobile, de nombreux détails doivent être pris en compte. Parce qu’il est souvent utile de faire découvrir son projet à d’autres collègues ou à des sponsors potentiels, les deux outils de design pour application mobile présentés ci-dessus vont faciliter vos démarches. Si ces programmes n’ont toutefois pas réussi à vous convaincre, vous pourrez toujours vous tourner vers l’une des nombreuses autres alternatives. Lorsque vous avez trouvé le design parfait, il ne faut pas oublier qu’il doit être applicable pour différents formats et résolutions d’écran. Ainsi, 1&1 IONOS vous recommande de créer différentes versions de l’application pour que votre contenu puisse être adapté aux différents formats d’affichage.

Vous avez défini votre design et développé votre application ? Le lancement de votre projet se rapproche à toute vitesse… Il est toutefois nécessaire de tester votre application. Notre quatrième article s’intéresse donc à la manière dont vous pouvez mener vos tests pour application.