Créer son ap­pli­ca­tion mobile native, partie 3 : le design

Notre série de huit articles sur comment créer son ap­pli­ca­tion portait dans une première partie sur la pla­ni­fi­ca­tion puis sur la mise en place technique d’une ap­pli­ca­tion mobile native. Dans ce nouveau volet, nous parlerons de la con­cep­tion du design et vous dé­voi­le­rons des conseils précieux auxquels il est bon de faire attention. Fi­na­le­ment, il n’est pas si important de savoir si l’ap­pli­ca­tion 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é­sen­ta­tion cohérente et de porter grande attention à son uti­li­sa­bi­lité (de l’anglais « usability »). Des outils divers peuvent par con­sé­quent être d’une grande aide.   

Dès que vous savez comment vous concevrez votre ap­pli­ca­tion d’un point de vue technique, il devient opportun de s’in­té­res­ser à l’agen­ce­ment de son interface uti­li­sa­teur graphique (raccourci GUI ou UI en anglais pour [graphical] user interface). Cette interface est au cœur du design de l’ap­pli­ca­tion mobile ; c’est ici que ce reflète toute l’identité visuelle de votre ap­pli­ca­tion. Il serait donc une grande erreur de vouloir négliger cet aspect. Pour beaucoup de dé­ve­lop­peurs, c’est aussi important que le contenu de l’ap­pli­ca­tion. En effet, même si une ap­pli­ca­tion peut éveiller l’intérêt de nombreux uti­li­sa­teurs grâce à une fonction ex­cep­tion­nelle et être largement té­lé­char­gée, un mauvais design peut jeter de l’ombre sur son uti­li­sa­tion et faire ra­pi­de­ment fuir les uti­li­sa­teurs.

Le design d’une ap­pli­ca­tion 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 ca­rac­tères, les couleurs ou les teintes : l’ensemble des éléments gra­phiques, y compris leurs fonctions et boutons de commandes, contribue au design d’une ap­pli­ca­tion mobile. Il est par con­sé­quent important de soigner les liens entre tous ces éléments. L’in­tui­ti­vité de l’ap­pli­ca­tion va dépendre fortement du po­si­tion­ne­ment des contenus, de leurs tailles et de leurs agen­ce­ments. 

Con­cer­nant les appareils mobiles, deux grandes par­ti­cu­la­ri­tés vont in­fluen­cer l’affichage des in­ter­faces : d’une part, la taille et la ré­so­lu­tion de l’écran sur lequel elles seront affichées, varient gran­de­ment d’un appareil à un autre. D’autre part, l’uti­li­sa­tion de l’écran tactile (touchs­creen) fixe de nouvelles exigences pour l’agen­ce­ment des éléments gra­phiques. Si ces ca­rac­té­ris­tiques semblent banales, elles vont pourtant con­si­dé­ra­ble­ment con­di­tion­ner votre travail sur le design de votre ap­pli­ca­tion. Nous vous dévoilons comment prendre soin de votre interface graphique et vous pré­sen­tons quelques principes de con­cep­tion pour une pré­sen­ta­tion agréable et une bonne usabilité de votre ap­pli­ca­tion.

Par pré­sen­ta­tion ou layout, on entend la con­cep­tion visuelle de l’interface et l’agen­ce­ment de son contenu. Pour la pré­sen­ta­tion de votre ap­pli­ca­tion native, vous pouvez vous tourner vers de nombreux packs (appelés souvent UI kits), qui proposent une panoplie d’éléments pré­fa­bri­qués pour votre interface uti­li­sa­teur et des modèles pour bien les placer et struc­tu­rer. Ils com­por­tent souvent des icônes, templates, widgets, couleurs etc… A noter : certains sont dis­po­nibles gra­tui­te­ment sur le Web.

Google propose gra­tui­te­ment dans son « Material Design » divers éléments pour les in­ter­faces de vos ap­pli­ca­tions que vous pouvez té­lé­char­ger gra­tui­te­ment (comme les templates ou les icônes). De même, Apple offre gra­tui­te­ment (et peut-être de manière plus complète) des éléments pour votre pré­sen­ta­tion sur iOS dans ses offres Web Developer. En outre, certains pro­gram­ma­teurs mettent également à dis­po­si­tion des kits UI qu’ils ont dé­ve­lop­pés (par exemple sur design+code pour iOS ou sur sket­chapp­sources.com pour Android).

L’avantage de ces packs stan­dar­di­sés est de pouvoir mettre en place des designs cohérents sans trop d’effort. Ils sont de plus très faciles d’uti­li­sa­tion. Tout avantage a mal­heu­reu­se­ment na­tu­rel­le­ment ses in­con­vé­nients : les pos­si­bi­li­tés de création sont limitées, les options réduites et l’uti­li­sa­tion de ces modèles crée une certaine dé­pen­dance aux pla­te­formes qui ont aidé à les installer.

De tels packs et kits UI pour Android et iOS il­lustrent bien que certains standards pour la pré­sen­ta­tion d’une ap­pli­ca­tion mobile native se sont établis. Il en va pour les polices de ca­rac­tères, les choix de couleurs ainsi que quelques lignes di­rec­trices et variantes qui tiennent compte de la diversité des tailles d’affichage et des ré­so­lu­tions d’écran.

Toute ap­pli­ca­tion comporte du texte. Même si les images et symboles sont pré­pon­dé­rants sur certaines ap­pli­ca­tions, des segments de textes vont tout de même être obli­ga­toires : par exemple les con­di­tions d’uti­li­sa­tion ou les mentions légales. Mais pour les autres contenus ré­dac­tion­nels 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é­sen­ta­tion.

Con­cer­nant les polices de ca­rac­tères, il est possible de garder sim­ple­ment la ty­po­gra­phie propre au système de la pla­te­forme de l’ap­pli­ca­tion. 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é­ve­lop­peurs optent à juste raison la police standard d’Android ou de iOS : ces styles d’écriture sont en effet optimaux pour ces systèmes d’ex­ploi­ta­tion et per­met­tent de garder une ap­pli­ca­tion épurée. De plus, elles peuvent être utilisées im­mé­dia­te­ment alors que les autres polices doivent être préins­tal­lées.

Toutefois, il peut valoir la peine de mettre en place une autre ty­po­gra­phie, surtout si votre ap­pli­ca­tion comporte beaucoup de texte et si vous souhaitez vous dif­fé­ren­cier de la con­cur­rence. Vous pouvez té­lé­char­ger gra­tui­te­ment de nom­breuses polices depuis Internet. Bien choisir le style d’écriture va dépendre souvent du thème de votre ap­pli­ca­tion et de son contenu. Pour un concept ar­tis­tique, nous vous con­seil­lons par exemple d’adopter une ty­po­gra­phie originale qui reflétera votre style. Pour des contenus jour­na­lis­tiques, 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 ap­pli­ca­tion comporte beaucoup de texte. « Open Sans » ou « Lato » sont par exemple bien adaptés à de nombreux genres d’ap­pli­ca­tion car elles se révèlent fines et élégantes.

Les couleurs de votre ap­pli­ca­tion doivent permettre à votre interface de présenter un beau jeu de contraste. En effet, cela peut faciliter son uti­li­sa­tion, les ap­pli­ca­tions étant souvent utilisées en extérieur et ne bé­né­fi­ciant pas toujours d’une bonne lu­mi­no­sité. Le choix de la couleur va dépendre du thème de l’ap­pli­ca­tion et de votre cible. Si l’ap­pli­ca­tion est en lien avec une en­tre­prise ou un projet précis qui est déjà iden­ti­fiable par des codes couleurs, il est né­ces­saire d’orienter son site selon cette identité visuelle. Outre le code couleur, le logo et encore une fois la police de ca­rac­tères doivent témoigner de l’ap­par­te­nance à l’entité et établir une cohérence. De manière générale, les éléments de votre interface uti­li­sa­teur doivent être uni­for­mi­sés. Vous trouverez d’autres conseils pour un bon concept graphique dans notre article sur les principes fon­da­men­taux du Web design. Les in­di­ca­tions et astuces pré­sen­tées peuvent se mettre en place aisément pour les ap­pli­ca­tions.

L’affichage sur l’écran de l’uti­li­sa­teur va dé­ter­mi­ner au cas par cas la place dis­po­nible pour présenter votre contenu. Cette place va en effet varier d’un appareil à un autre. On peut noter une dif­fé­rence énorme en termes d’affichage et de ré­so­lu­tion entre les dif­fé­rents smart­phones. Les écarts sont encore plus grands si l’on prend en compte les tablettes dis­po­nibles sur le marché. Bien que les ap­pli­ca­tions iOS et Android vont s’adapter au­to­ma­ti­que­ment aux écrans sur lesquels elles s’affichent, ces ajus­te­ments ne se limitent qu’à une mise à l’échelle des éléments de l’interface uti­li­sa­teur. Le layout ne change pas et peut donc ra­pi­de­ment créer du désordre et de la confusion.

Par exemple : une pré­sen­ta­tion optimisée pour l’affichage d’un iPhone ne va pas être ap­pro­priée à l’écran d’un iPad qui est nettement plus large : les boutons du menu vont en effet ap­pa­raî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é­sen­ta­tion spé­ci­fique pour les tablettes et les smart­phones. Pour les tablettes, vous pourrez vous permettre d’ajouter du contenu.

Dans un cadre pro­fes­sion­nel, créer dif­fé­rentes versions d’ap­pli­ca­tion pour les adapter aux ré­so­lu­tions et tailles variées des appareils mobiles coule presque de source pour les gra­phistes. De nom­breuses en­tre­prises mettent en effet en place trois, quatre ou même encore plus de versions pour leur ap­pli­ca­tion, et ce par­ti­cu­liè­re­ment si elles sont bien établies sur le marché, ou si elles y aspirent. Bien sûr, un travail con­sé­quent et de nouvelles dépenses sont né­ces­saires pour cela.

Par ailleurs, il ne faut pas perdre à l’esprit que deux types d’orien­ta­tion sont possibles pour les smart­phones et tablettes. Pour passer d’une orien­ta­tion portrait à paysage, l’affichage doit rester har­mo­nieux. Fi­na­le­ment, le nombre de pré­sen­ta­tions que vous aurez réel­le­ment 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 dif­fé­rents ajus­te­ments va fortement nuire à votre usabilité.

Si une ap­pli­ca­tion a une forte usabilité, elle est gé­né­ra­le­ment dite intuitive. Cela signifie que son uti­li­sa­tion est facile, limpide et struc­tu­rée selon des modèles simples. Ce sont au final les uti­li­sa­teurs qui vont toujours dé­ter­mi­ner si une ap­pli­ca­tion est facile d’uti­li­sa­tion. C’est pourquoi, il est vital de connaître les pré­fé­rences et attentes de votre cible et d’orienter votre ap­pli­ca­tion et design selon ces dernières. L’enjeu n’est pas d’exhiber les fonctions ex­traor­di­naires qu’offre votre ap­pli­ca­tion, mais bien plus de favoriser la meilleure des ex­pé­riences à votre groupe cible.

Une ap­pli­ca­tion est souvent intuitive si elle est claire, ordonnée et com­pré­hen­sible en clin d’œil. Cela est un réel challenge pour les smart­phones qui possèdent notamment un petit écran. Par con­sé­quent, faites attention à la masse d’in­for­ma­tions que vous souhaitez insérer à votre ap­pli­ca­tion et qui ap­pa­raî­tra sur l’écran. L’ap­pli­ca­tion ne doit pas se retrouver sur­char­gée. Limitez le contenu de votre ap­pli­ca­tion et ses fonctions à l’essentiel. Cela vous permettra de placer vos éléments de manière suf­fi­sam­ment grosse et de laisser de la place pour respirer. Une interface épurée rend les ap­pli­ca­tions plus har­mo­nieuses.

Le menu de votre ap­pli­ca­tion doit être im­mé­dia­te­ment repérable à l’ouverture de votre ap­pli­ca­tion et iden­ti­fiable en tant que tel par les uti­li­sa­teurs. Les menus dé­rou­lants sont la plupart du temps utilisés car ils per­met­tent de gagner beaucoup de place. Les rubriques du menu ne doivent pas dérouter les uti­li­sa­teurs. Souvenez-vous que votre menu doit être clair, précis et aller droit au but. Si votre ap­pli­ca­tion offrent de nom­breuses fonctions, présentez d’abord les plus im­por­tantes dans un menu général et placez celles qui sont moins sig­ni­fi­ca­tives dans des sous-menus.

Pour atteindre une fonction précise, il faut à tout prix éviter que l’uti­li­sa­teur n’ait à effectuer trop de clics. De nombreux experts indiquent que l’uti­li­sa­teur doit pouvoir atteindre ce qu’il recherche en seulement deux clics. Suivant votre ap­pli­ca­tion, vous pourrez définir si vous pouvez réel­le­ment rap­pro­cher vos fonctions. Dans tous les cas, il faut s’efforcer à offrir des chemins courts. Des struc­tures de menus trop complexes peuvent dé­con­cer­ter les uti­li­sa­teurs et les perdre dans l’uti­li­sa­tion de l’ap­pli­ca­tion.

Un autre facteur important pour une bonne usabilité est la mise en place intuitive des éléments in­te­rac­tifs. Une attention toute par­ti­cu­lière doit être portée à la taille, l’ordre et le design des boutons au sein de votre interface uti­li­sa­teur. Les éléments in­te­rac­tifs (menus dé­rou­lants, boutons, liens etc.) doivent être fa­ci­le­ment re­con­nais­sables et ac­ces­sibles sans heurts. En effet, n’oubliez pas que certains uti­li­sa­teurs ont des mains larges et donc parfois plus de dif­fi­cul­tés à cliquer sur ces éléments. Des boutons trop petits ou mal po­si­tion­nés peuvent amener les uti­li­sa­teurs à cliquer à coté de ce qu’ils re­cher­chaient, ce qui peut créer de l’éner­ve­ment et de la frus­tra­tion. De plus, il est de bon ton d’informer de manière graphique l’uti­li­sa­tion en cours d’un élément in­te­rac­tif choisi. Cela concerne surtout les actions qui demandent un temps de char­ge­ment plus long : IONOS conseille vivement de faire ap­pa­raître un symbole ou une animation qui témoigne du process en cours. Cela favorise une certaine trans­pa­rence sur les processus de char­ge­ment ou de recherche. Con­trai­re­ment aux ap­pli­ca­tions Web ou aux ap­pli­ca­tions hybrides, le design d’une ap­pli­ca­tion native s’adapte dans une large mesure aux pla­te­formes sur les­quelles 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 pro­grammes spé­cia­li­sés peuvent aider. Il existe en effet dif­fé­rents outils pour mettre au point le design final de votre ap­pli­ca­tion mobile. Ils per­met­tent de vi­sua­li­ser 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 pro­to­types (appelés également maquettes ou mock-ups).

L’uti­li­sa­tion 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’uti­li­sa­tion de votre ap­pli­ca­tion. Le prototype peut être ensuite testé sur un smart­phone ou une tablette, per­met­tant d’ex­pé­ri­men­ter l’ap­pli­ca­tion en balayant l’écran (swipe) par exemple ou en ef­fec­tuant d’autres gestes courants pour son uti­li­sa­tion po­ten­tielle.

Ses outils fa­ci­li­tent la mise en place très simple de pro­to­types, sans né­ces­si­ter de con­nais­sances en pro­gram­ma­tion. Avec un peu de travail, les mock-ups peuvent presque égalés dans leur fonc­tion­ne­ment l’ap­pli­ca­tion réelle. Nous vous pré­sen­tons ici les portraits des deux outils design les plus connus et les plus appréciés.

L’uti­li­sa­tion de InVision est par­ti­cu­liè­re­ment adaptée aux pro­fes­sion­nels. L’outil est proposé éven­tuel­le­ment en version gratuite mais il faut accepter de renoncer à certaines fonctions. Ainsi, vous pouvez mettre en place assez ra­pi­de­ment et sim­ple­ment un prototype pour la pré­sen­ta­tion complète de votre ap­pli­ca­tion en insérant et ajustant des modèles de design. Ensuite, vous pouvez le tester sur un appareil mobile : grâce aux diverses con­fi­gu­ra­tions, il est possible de naviguer sur sa maquette de manière très similaire à une ap­pli­ca­tion réelle.

L’une des ca­rac­té­ris­tiques prin­ci­pales de l’outil est sa sim­pli­fi­ca­tion du travail en équipe. Non seulement de nombreux uti­li­sa­teurs peuvent par­ti­ci­per à la maquette mais ils peuvent également laisser des notes sur les pro­to­types et s’échanger des com­men­taires pour partager leurs idées sur le design. De nom­breuses grandes en­tre­prises comme IBM, Twitter, Netflix, ou Sound­cloud ont utilisé InVision pour leur prototype.

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

La version gratuite limite toutefois les pro­to­types à un maximum de 10 écrans. C’est en général in­suf­fi­sant pour effectuer un test complet d’une ap­pli­ca­tion mais vous pouvez toujours tester sans frais et aussi longtemps que vous le souhaitez les dif­fé­rentes fonctions de cet outil de design pour ap­pli­ca­tion.

Pour concevoir le graphisme de son ap­pli­ca­tion 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 po­ten­tiels, les deux outils de design pour ap­pli­ca­tion mobile présentés ci-dessus vont faciliter vos démarches. Si ces pro­grammes n’ont toutefois pas réussi à vous con­vaincre, vous pourrez toujours vous tourner vers l’une des nom­breuses autres al­ter­na­tives. Lorsque vous avez trouvé le design parfait, il ne faut pas oublier qu’il doit être ap­pli­cable pour dif­fé­rents formats et ré­so­lu­tions d’écran. Ainsi, IONOS vous re­com­mande de créer dif­fé­rentes versions de l’ap­pli­ca­tion pour que votre contenu puisse être adapté aux dif­fé­rents formats d’affichage. Vous avez défini votre design et développé votre ap­pli­ca­tion ? Le lancement de votre projet se rapproche à toute vitesse… Il est toutefois né­ces­saire de tester votre ap­pli­ca­tion. Notre quatrième article s’intéresse donc à la manière dont vous pouvez mener vos tests pour ap­pli­ca­tion.