Concevoir le design d’une application mobile ?
UX et UI, on vous en parle souvent, mais vous ne savez toujours pas ce que c’est ? Ou vous avez une idée brève du sujet, mais pas trop non plus ? Pas de panique, on vous explique le principal et surtout comment concevoir le design d’une application mobile, car on est quand même là pour ça.
Dans cet article, on parlera des termes techniques, des étapes de réalisation, des tendances du moment et des outils pratiques pour parvenir à notre but. Vous avez déjà tout votre projet en tête j’imagine. Ici, nous allons créer son ergonomie et son design afin d’approfondir votre idée de base, tout en la rendant plus fluide et agréable à regarder.
UX (User eXperience)
L’expérience utilisateur est souvent méconnue du grand public. C’est un peu la partie non visible de l’iceberg, et pourtant, elle est bien présente dans tous les projets. Ici, on travaille sans couleur et sans typo. Pour l’instant, cela ne nous intéresse pas. L’UX, c’est surtout l’ergonomie de notre application mobile. On peut voir ça comme la structure globale, la facilité d’utilisation, de navigation interne, etc. On peut même aller plus loin dans les recherches et définir l’anticipation de l’utilisateur, lui ouvrir un tunnel pour le guider. Bref, l’UX, c’est un tout pour s’imaginer, à travers de simple mockup, comment notre solution se composera.
L’UX passe par l’étude de schématisation de notre application mobile. On va définir où se trouve notre menu : à droite, à gauche, en bas (le fameux menu drawer ou burger ), en haut, s’il faut plusieurs menus selon certaines pages, ou si on en a pas besoin du tout car notre application est une suite logique d’enchaînement d’écrans. On va définir comment nos pages se refresh, etc.
Voilà à quoi peut ressembler l’UX de notre projet. C’est un petit projet pour bien comprendre l’enjeu. Il y a toujours à parfaire bien sûr.
UI (User Interface)
L’interface utilisateur vient compléter l’expérience utilisateur. Maintenant qu’on sait comment est structuré notre projet (car on a déjà fait un gros travail en amont pour rendre l’interface fluide et intuitive), on va ajouter la couche de design dans notre application mobile. Cette fois-ci, on va uniformiser les codes couleurs, la typographie, les tailles de police, nos boutons de sélection, et bien d’autres choses encore pour guider notre utilisateur. On l’aide et on le guide grâce à des rappels visuels. On lui donne envie et confiance. L’utilisateur doit facilement se repérer au sein de l’interface.
Voici un exemple d’UI fait à partir de notre UX
Inspiration et Tendance
En manque d’inspiration ? Internet et de nombreux site regorgent d’exemples UX et UI pour vous aider à choisir votre vision. On trouve rapidement des sites comme dribble ou collectui ou encore pttrns pour ne citer qu’eux. Tout ceci reste bien sûr un métier, et rien ne vaut le savoir et l’expérience d’un professionnel. On est plus là pour essayer de comprendre le métier et essayer de créer quelque chose par soi-même avant de donner les rênes à un expert.
Les tendances cette année restent à peu près les mêmes. On favorise le minimalisme avec du vide du vide et du vide, le flat design avec ses formes simples depuis 5 ans ou le deep flat, les couleurs toujours plus colorées, les polices en gras pour faire sortir une information particulière, les animations utiles sans en avoir de partout (des chargements de pages moins basiques qu’avant, des pages d’erreurs travaillées), des transitions de navigation pour accompagner la fluidité, de l’automatisation comme l’autocomplétion de champs texte, etc.
Les logiciels pour concevoir le design d’une application mobile
Sans surprise de ce côté là également, les outils qui restent les plus utilisés sont votre papier et crayon pour vos départs d’UX avec une mise au propre sous balsamiq mockup par exemple pour vos wireframes, Photoshop, sketch et bien d’autres pour votre UI, et InVision pour ajouter de l’interaction à vos écrans. On peut même commencer à faire tester notre app à notre entourage pour avoir des premiers retours bien avant de développer la solution. Vous voilà prêts à concevoir le design d’une application mobile.
