Comment rendre vos idées attrayantes : un guide du débutant pour la conception visuelle d'applications mobiles
Publié: 2015-11-24Vous avez une idée d'application géniale, mais vous ne connaissez pas la différence entre une police et une police de caractères, ou vous pensez qu'un menu de hamburgers est quelque chose que vous ne voyez que dans un drive-in ? Même les entrepreneurs avec peu ou pas d'expérience peuvent créer de superbes applications avec la bonne équipe et les bons outils, mais cela ne fait pas de mal de savoir se débrouiller dans un wireframe.
Que vous débutiez dans la conception d'interfaces utilisateur mobiles, que vous envisagiez de vous lancer dans la création d'applications ou que vous soyez simplement un utilisateur curieux avec quelques bonnes idées, ce guide vous aidera à vous mettre sur la bonne voie lorsqu'il s'agit de rendre votre application attrayante - et , plus important encore, se sentir bien dans la main de l'utilisateur.
Principes de base de la conception visuelle d'applications mobiles
L'une des erreurs de conception visuelle les plus courantes commises par les concepteurs débutants et les entrepreneurs consiste à supposer qu'une application mobile n'est qu'une version plus petite d'une application de bureau ou d'une expérience de site Web, avec le même contenu, les mêmes fonctionnalités, les mêmes fonctionnalités et les mêmes éléments d'interface utilisateur. Si c'est une habitude dans laquelle vous tombez, c'est le moment de l'abandonner et de ne jamais regarder en arrière. La conception de l'interface utilisateur des applications mobiles est un animal distinct, et les contraintes des appareils, des systèmes d'exploitation et du comportement des utilisateurs dictent une expérience très différente de ce qui serait approprié sur un ordinateur plus grand.
Même si vous avez de l'expérience dans la conception pour d'autres médias et que vous avez déjà le don de distinguer un excellent design visuel, la conception d'applications pour tablettes et smartphones nécessite que vous connaissiez au moins quelques éléments sur la technologie avec laquelle vous travaillez. La taille de l'écran est un paramètre évident à surveiller, tout comme la vitesse et la durée de vie de la batterie de l'appareil lui-même.
De plus, Apple et Android ont tous deux leurs propres philosophies de conception et recommandations pour les applications exécutées sur leurs systèmes d'exploitation respectifs. Le respect de ces directives aide vos utilisateurs à ressentir un sentiment de continuité et de compétence lors de l'utilisation de votre application. Après tout, ils utilisent d'autres applications tout au long de la journée.
La même chose se passe lorsque vous concevez pour des appareils portables. Le FitBit Flex ou Charge, par exemple, n'ont qu'une fine bande noire dans laquelle afficher leur interface utilisateur. Comment intègrent-ils des informations telles que le nombre de pas, les étages gravis, les calories brûlées et même la date et l'heure dans un si petit espace ? Et mieux encore, comment le rendent-ils si utilisable et beau ?
En reconnaissant les limites de l'espace, en donnant la priorité à ce que l'utilisateur doit savoir et quand (et, surtout, en permettant aux utilisateurs de modifier l'ordre des écrans en fonction de leurs propres besoins et priorités), et en utilisant des icônes simples et faciles à reconnaître. Il y a une raison pour laquelle tout le monde et leur mère (et même le président des États-Unis !) semblent avoir un FitBit ces jours-ci, et une bonne conception visuelle en fait partie.
Ne submergez pas l'écran
Éliminons l'évidence : les applications mobiles ne vous offrent pas une tonne d'écrans avec lesquels travailler, même à l'ère des phablettes. L'un des aspects les plus importants de la conception visuelle mobile consiste à décider ce qui doit vraiment être affiché à l'écran à un moment donné.
Cela semble simple, non ? Eh bien, une fois que vous commencez à creuser dedans, ce n'est pas toujours complètement coupé et sec. Vous avez peut-être une idée en tête de ce à quoi vous voulez que l'écran de connexion ressemble, mais une fois que vous aurez créé un prototype numérique, vous constaterez peut-être que vous ne pouvez pas remplir tous les formulaires que vous vouliez à l'origine (ou vous le pouvez, mais il a l'air terrible et se sent encore pire). Alternativement, vous pourriez constater que l'écran de connexion élégamment simple que vous aviez à l'esprit n'est pas du tout intuitif pour un utilisateur, qui a besoin de plus de conseils.
Alors, comment décidez-vous ce qui va où? Une grande partie de cela vient avec de la pratique, des tests d'utilisateurs et une idée de ce que les autres applications font correctement, mais il y a quelques directives générales à suivre.
Ne submergez pas l'utilisateur
Lorsque les utilisateurs ouvriront votre application pour la première fois, comment sauront-ils quoi faire ? L'expérience est-elle intuitive ? Si ce n'est pas le cas, comment allez-vous présenter à vos utilisateurs les différentes caractéristiques et fonctionnalités de votre application ?
Deux façons importantes de vous assurer que vous atteignez le point idéal sont de définir un point focal et d'établir une hiérarchie visuelle.
Comme nous l'avons déjà écrit, donner la priorité à votre écran de manière à ce que certains éléments attirent plus l'attention que d'autres n'est qu'une bonne conception visuelle, quel que soit le support - ce n'est pas unique à l'interface utilisateur des applications mobiles. Cependant, votre interface utilisateur échouera sans une hiérarchie claire et solide, et les limitations d'espace rendent particulièrement important que votre point focal soit facile à discerner. Cette hiérarchie aide votre utilisateur à savoir quoi regarder et quoi faire lorsqu'il interagit avec votre application.
Lorsque vous abordez la conception visuelle, prenez tout ce que vous souhaitez inclure sur un écran d'application et décidez ce qui est le plus important pour l'utilisateur. Cet élément - qu'il s'agisse d'une photo, d'un peu de texte, d'un champ de saisie ou d'un bouton - devrait dominer votre écran en termes d'espace et de distinction visuelle. Ensuite, établissez une hiérarchie pour tout ce qui occupera l'écran à ce moment-là.
Utilisons à nouveau l'écran de connexion comme exemple. Les aspects les plus importants de cet écran sont les champs dans lesquels les utilisateurs saisiront leurs noms et mots de passe. Si ces champs sont trop petits ou cachés dans un coin, ils seront non seulement plus difficiles à repérer pour l'utilisateur, mais ils seront également plus difficiles à interagir (personne n'aime avoir à zoomer pour taper).
Gestes et commentaires
Recommandé pour vous:
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
Un rapport met en garde contre un examen réglementaire renouvelé sur l'espace Lendingtech
Attendez - ne parlions-nous pas de conception visuelle, comme dans ce que l'utilisateur voit réellement ? Alors, qu'est-ce que les gestes et les commentaires ont à voir avec cela ? L'une des particularités de la conception visuelle pour les appareils mobiles est que vous ne parlez pas d'une expérience purement visuelle. Ce que l'utilisateur voit doit avoir un sens avec ce qu'il ressent, puisque vos utilisateurs toucheront votre application pour interagir avec elle. Vous ne pouvez pas dissocier la vue du toucher lorsque vous vous approchez de votre interface utilisateur mobile.
Par exemple, il existe plusieurs façons de dire à un utilisateur qu'un bouton est un bouton. Vous pouvez utiliser des ombres ou d'autres indices tridimensionnels pour montrer qu'il s'agit d'un élément sur lequel l'utilisateur doit appuyer ou glisser, ou l'animer de manière à ce que l'utilisateur sache interagir avec lui (et comment pour interagir avec !).
Mais même la façon dont le bouton se déplace peut dépendre de ce que fait l'utilisateur. Par exemple, si l'utilisateur ne balaye pas complètement l'écran, le bouton peut se déplacer un peu sur le côté avant de revenir à sa position d'origine, en attendant un geste plus confiant de l'utilisateur. Ou, si le bouton doit être enfoncé et maintenu, il peut renvoyer un retour haptique indiquant à l'utilisateur quand il peut relâcher. Tous ces facteurs influent sur la façon dont vous concevez et animez vos éléments d'interface utilisateur.
Si tout cela vous semble compliqué, imaginez ce que ressent un utilisateur qui n'a jamais entendu parler de votre application, et encore moins vu les croquis et les tableaux blancs de votre bureau. C'est pourquoi l'intégration des utilisateurs est importante - vous pouvez utiliser des flèches, du texte d'instructions et d'autres indices visuels pour alerter vos utilisateurs des actions qu'ils doivent entreprendre. Faire en sorte que ces indices soient beaux et intuitifs est un autre facteur important à prendre en compte lors de l'approche de la conception visuelle de votre application mobile.
Typographie 101
Il existe de nombreuses polices et polices de caractères. Il n'est pas nécessaire de connaître chacun d'entre eux, ni même la plupart de ce qui existe. La bonne nouvelle est que pour la plupart des applications mobiles, vous n'avez besoin d'en connaître qu'une poignée, car les polices populaires sont populaires pour une raison : un grand nombre de personnes les trouvent belles et lisibles.
Vous êtes probablement familier, par exemple, avec Helvetica (et si vous souhaitez suivre un cours accéléré en typographie, vous voudrez peut-être consulter le documentaire étonnamment divertissant sur Helvetica). Des interfaces utilisateur mobiles aux gares en passant par les logos de marque, Helvetica a un attrait quasi universel (bien que, comme les Beatles ou le chocolat, tout ait au moins quelques détracteurs vocaux). Et il y a une raison à cela : c'est une police simple, lisible et agréable à regarder.
Certaines polices ont été conçues spécifiquement pour les mobiles. Par exemple, l'interface utilisateur Segoe de Microsoft a été conçue pour être très lisible sur les écrans des appareils, même de petite taille. De même, Google a développé Roboto pour Android et Apple utilise l'interface utilisateur de San Francisco. Chaque système d'exploitation a ses propres recommandations et directives en matière de typographie, mais la plupart peuvent se résumer aux mêmes principes de base :
- Gardez-le lisible
Il existe une infinité de polices parmi lesquelles choisir, et certaines sont très flashy et excitantes. En fin de compte, cependant, ce qui compte le plus, c'est la facilité de lecture du texte. Il est préférable de choisir une police simple sans empattement qui ne vous fait pas plisser les yeux qu'une police qui a l'air belle, mais qui fait travailler vos utilisateurs. (Et rappelez-vous : une bonne conception visuelle est une conception visuelle accessible , et bon nombre de vos utilisateurs peuvent avoir des problèmes de vue. Rendez votre interface utilisateur aussi agréable que possible pour les yeux.)
- Tenez-vous en à une ou deux polices
C'est en quelque sorte un corollaire pour "le garder lisible". Il n'est vraiment pas nécessaire, du point de vue de l'interface utilisateur mobile, d'utiliser plusieurs polices de caractères différentes dans votre conception visuelle - et cela peut souvent nuire à la lisibilité. Une police suffit, ou deux si vous pensez que c'est absolument nécessaire. Pour établir une hiérarchie à l'aide de votre typographie, vous devez vous fier à différentes tailles, graisses et styles de police, et non à plusieurs polices de caractères.
- Ne réinventez pas la roue
La typographie est un sujet sur lequel nous pourrions écrire des livres, et il y a beaucoup de gens qui consacrent leur vie à ce sujet. Heureusement, vous n'êtes pas obligé d'en faire partie (à moins que vous ne le vouliez vraiment !). Si vous débutez, jetez un coup d'œil aux polices utilisées par des applications similaires ou utilisez les polices spécifiques recommandées par les directives du système d'exploitation. Bien que cela puisse sembler être une façon moins créative d'aborder la conception visuelle, l'utilisation de SF-UI pour une application iOS ou de Roboto pour une application Android offre à votre utilisateur une expérience d'appareil mobile plus continue et garantit que votre application sera lisible.
Théorie des couleurs pour les concepteurs d'interface utilisateur d'applications mobiles
Les couleurs sont encore plus nombreuses que les polices de caractères. Avec autant de possibilités infinies, il est facile de trouver un jeu de couleurs pour votre application mobile qui est, eh bien, moins qu'extraordinaire. Regardons les choses en face : à moins que vous n'ayez étudié le design visuel ou que vous n'ayez simplement un talent pour cela, vous pouvez vous retrouver avec une interface utilisateur mobile qui ressemble à certaines des pires décisions de garde-robe que vos parents ont prises dans les années 70 (sérieusement, qui a dit à votre père qu'un costume de loisirs jaune moutarde était une bonne idée, surtout avec des plates-formes bleu poudre ?).
Comme pour la typographie, le système d'exploitation pour lequel vous concevez a probablement ses propres directives quant à ce que vous devez rechercher dans un jeu de couleurs. Quel que soit le système d'exploitation, cependant, quelques recommandations sont universelles :
- Limitez votre palette à deux à quatre couleurs
L'interface utilisateur de votre application mobile n'est pas le moment de montrer votre amour pour Lisa Frank. Comme pour les polices, moins c'est plus quand il s'agit de choisir un jeu de couleurs pour votre application. Trop de couleurs et de nuances compliquent votre conception visuelle, ce qui rend plus difficile pour les utilisateurs de se repérer dans votre application et de savoir avec quoi ils doivent interagir.
- Désignez les couleurs primaires et accentuées et utilisez-les de manière appropriée.
Vous devez utiliser la couleur de manière à indiquer aux utilisateurs ce qui se passe ou ce qu'ils doivent faire. Par exemple, les éléments avec lesquels l'utilisateur doit interagir (comme les menus ou les boutons) peuvent être d'une couleur différente - et cette couleur peut changer une fois que l'utilisateur appuie ou balaye l'élément.
Pour chaque palette, vous choisirez une couleur primaire ou un ensemble de couleurs primaires pour les éléments non interactifs de votre interface utilisateur, ainsi qu'une couleur d'accent pour montrer l'interactivité. Pour mettre cela en perspective, vous ne devez pas utiliser votre couleur d'accentuation pour les blocs de texte que l'utilisateur fait simplement défiler ou les illustrations statiques, et vous ne devez pas utiliser vos couleurs primaires sur les boutons. Si vous utilisez systématiquement les couleurs primaires et d'accentuation, vos utilisateurs pourront naviguer dans votre application de manière plus intuitive.
- Utilisez la couleur pour rendre votre design plus lisible et choisissez des couleurs qui s'accordent bien.
Il y a quelques facteurs qui déterminent si vos couleurs fonctionneront bien ensemble dans un schéma. L'une des choses les plus importantes à considérer est le contraste : le jaune vif ne sera pas très visible sur le vert citron, par exemple. Cependant, ce n'est pas parce que deux couleurs ou nuances se contrastent bien qu'elles fonctionneront bien ensemble. Ce jaune vif semblera également "vibrer" s'il se trouve au-dessus ou à côté d'une teinte bleu royal.
La raison pour laquelle cela se produit pourrait remplir son propre article de blog, mais pour commencer à choisir une palette de couleurs, essayez de consulter les palettes que Google et Apple recommandent spécifiquement dans leurs directives de conception visuelle respectives. Encore une fois, ils ont déjà fait une grande partie du travail pour vous en termes de prise de décisions visuellement agréables pour votre interface, afin que vous puissiez vous concentrer sur la fourniture des fonctionnalités et fonctionnalités souhaitées par vos utilisateurs.
Une dernière remarque : votre palette de couleurs fait une grande différence en matière d'accessibilité. Lorsque vous exécutez l'assurance qualité sur l'interface utilisateur de votre application mobile, une chose que vous devez tester est de savoir si l'application sera utilisable pour les personnes daltoniennes (qui peuvent, par exemple, avoir des problèmes de discernement entre le rouge et le vert). Une façon de rendre votre application plus accessible consiste à permettre à vos utilisateurs de choisir parmi une sélection de palettes de couleurs personnalisées, afin que leur expérience personnelle de l'application soit adaptée à leurs besoins et préférences visuels.
Utilisez un prototype d'application mobile pour tester vos côtelettes de conception visuelle
Apprendre à mettre en œuvre efficacement la conception visuelle dans l'interface utilisateur d'une application mobile est un processus graduel, mais l'un des meilleurs moyens de tester vos idées esthétiques consiste à créer un prototype numérique de votre application.
Avec un prototype de conception mobile, vous pouvez rapidement tester différents aspects de votre conception visuelle, des polices aux couleurs en passant par les types de navigation. Non seulement vous pouvez tester l'application vous-même, en faisant les ajustements nécessaires, mais vous pouvez également demander à vos amis, votre famille, vos collègues et les bêta-testeurs de donner leur avis. Après tout, vous pouvez impressionner une salle pleine d'artistes avec un design époustouflant, mais les opinions qui comptent le plus sont celles de vos utilisateurs.
Publié à l'origine sur Proto Blog le 30 octobre.