Avez-vous un projet d'application mobile dans les travaux? Quel est votre plan de conception? Avez-vous sauté sur le vif, ou vous êtes-vous arrêté pour prendre en compte l'expérience que va avoir l'utilisateur final lors de la première ouverture de l'application?
Il peut être intéressant de penser à une esthétique comportant des techniques d’expérience utilisateur soigneusement étudiées. Un grand nombre des concepts que nous voyons dans la conception de sites Web s'appliquent également aux applications mobiles, mais ils peuvent prendre une forme légèrement différente pour mieux correspondre à la taille d'écran la plus petite. Nous allons examiner ici sept options et exemples intéressants que vous pouvez appliquer à la conception de votre propre application mobile.
1. Typographie "Bold, Stark"
Les caractères plus simples sont plus faciles à lire sur un petit écran, particulièrement contre le contre-jour ou dans des conditions environnementales médiocres. Ce seul fait aide à comprendre pourquoi la typographie sans empattement est l'option idéale pour les applications mobiles.
Et bien que mince fût il y a quelques années, le pendule a basculé, de sorte que les concepteurs optent pour des largeurs de trait plus épaisses et des options plus audacieuses. La taille est également importante. De plus en plus d'applications utilisent des écrans de démarrage avec caractères de type surdimensionné ou des écrans d'accueil avec des caractères gras sur fond contrasté pour aider les utilisateurs à naviguer dans l'application.
Ce qui est bien avec cette tendance, c’est que la lisibilité est au centre de nos préoccupations. (Quel est le point de tout texte, non?) La partie de cette tendance dont il faut se méfier consiste à utiliser trop de mots ou de phrases en majuscules. Toutes les majuscules peuvent être une bonne option pour un seul mot, tel que? SUNNY? Dans l'application The Weather Channel ci-dessus, cela peut être lourd pour des blocs de texte plus longs.
Pour utiliser cette tendance, gardez à l’esprit deux choses:
- La typographie et la langue doivent être simples.
- Le contraste entre le fond et le lettrage doit être intense pour une lisibilité maximale.
2. Couches et Profondeur
La conception des matériaux a été maintes fois soulignée comme l'une des principales tendances en matière de design à surveiller cette année. Et il y a une bonne raison.
Premièrement, c'est la plate-forme de conception que Google a adoptée. Lorsqu'un géant se lance à fond dans quelque chose, il est certain que beaucoup d'autres suivront. (Et ils le sont.) Deuxièmement, il s'agit d'un concept très intuitif avec une interface facile à utiliser et agréable à regarder.
L’une des parties les plus marquantes de Material Design est la création de couches pour aider les utilisateurs à interagir avec la conception. C'est le seul élément qui apparaît vraiment dans les interfaces, y compris dans les applications Apple.
Le truc pour faire fonctionner ces couches est la subtilité. Les couches se superposent avec de petites ombres (presque invisibles, mais naturelles) pour différencier les éléments. Ces couches sont également des indices d'interaction. La couche de base ou arrière-plan est le portail d'informations et les couches supérieures incluent des outils d'interaction.
Regardez Uber, ci-dessus, par exemple. La carte est au bas de l'écran. Appuyez sur le bouton Lieu de prise en charge pour définir une adresse ou accédez aux couches d’adresses situées au-dessus pour modifier les lieux. Chaque couche offre à l'utilisateur plusieurs façons de travailler avec l'application.
3. Palettes de couleurs monotones
L'utilisation d'une couleur unique avec des accents en noir et blanc est un excellent moyen de créer un intérêt visuel sur un petit écran. Optez pour une option de couleur vive, audacieuse ou inhabituelle pour vous démarquer le plus. Vous pouvez également intégrer plusieurs de ces options dans l’interface et permettre aux utilisateurs de contrôler le jeu de couleurs.
C'est exactement ce que fait l'application Streaks, ci-dessus. Le concept est si simple: fixez des objectifs et l'application vous rappellera de cocher les tâches. L'utilisateur peut définir une couleur d'arrière-plan en fonction du groupe de tâches. De simples notifications vous rappellent ce que vous devriez faire.
La couleur, l'iconographie et le type simple constituent une combinaison frappante facile à lire et à utiliser. La conception est si épurée que vous avez presque envie d'ajouter plus de tâches à votre liste de tâches.
4. Focus sur les micro-interactions
Et en parlant d’interactions, chaque bonne application comprend des micro-interactions transparentes. Les micro-interactions sont ces petits signaux qui peuvent passer inaperçus, mais qui constituent un élément essentiel de la façon dont les utilisateurs interagissent avec des applications spécifiques ou dépendent de celles-ci.
Les micro-interactions doivent être conçues pour aider l'utilisateur à faire quelque chose. D'une notification par message texte à une alarme à un média social? ces petits divots sont partout. Et ils devraient faire une chose: réjouir l'utilisateur.
En termes simples, les micro-interactions ont tendance à faire trois choses:
- Communiquer vos commentaires, par exemple aimer quelque chose sur Instagram
- Voir une action, ce même? Comme? faire en sorte que le cœur devienne rouge
- Aide l'utilisateur à voir ou à voir quelque chose, comme une notification indiquant que votre image a été appréciée.
5. Cartes, cartes et plus de cartes
La révolution de la carte a peut-être commencé avec Pinterest, mais l'esthétique continue de gagner du terrain, en partie grâce à Material Design et à l'adoption par d'énormes sites Web tels que Facebook et SoundCloud (ci-dessus).
Les cartes sont un excellent moyen d’organiser et de développer d’énormes quantités de contenu de manière facile à digérer. Chaque élément est une unité qui fait une seule chose dans la conception. Ce qui est bien avec ces unités, c'est que chacune peut réellement faire quelque chose de différent.
Ainsi, une carte peut vous permettre de regarder une vidéo et la carte suivante de la séquence est liée à une autre application. La carte suivante contient un long bloc de texte à lire. L'autre avantage des cartes, en particulier dans les applications, est qu'elles sont si faciles à utiliser. La plupart des applications divisent l'écran en deux pour obtenir deux cartes, telles que SoundCloud, ou utilisent une carte par format d'écran pour que tout ce que vous touchez conduise à l'élément souhaité. (Pas de soucis pour? Gros doigts? Ici!)
6. Navigation simple
Les menus cachés, la navigation contextuelle et les gros boutons sont un gros problème. Le nombre d'applications avec la navigation dans l'écran d'accueil diminue. Presque tout le monde adopte un style caché pour tirer le meilleur parti de chaque centimètre d'espace précieux à l'écran.
Et les utilisateurs ne semblent pas s'en soucier.Ils ont adopté l'idée d'un bouton pour afficher la navigation assez facilement. L'astuce consiste à s'assurer que, lorsque cet élément de navigation est visualisé, il est hautement fonctionnel.
Slack est l'un des meilleurs exemples de cela. En fait, la navigation apparaît à gauche et à droite de l'écran. La fonctionnalité principale de l'application provient du côté droit (ci-dessus), mais la navigation spécifique à votre chaîne se trouve dans le menu de gauche.
7. Touches d'animation
Les éclairs d'animation apportent une touche spéciale à votre application pour la rendre extraordinaire. L’animation peut ajouter à la convivialité, orienter l’utilisateur et servir de lieu de prédilection.
Étant donné que vous ne pouvez pas nécessairement déterminer où les utilisateurs accéderont à une application - et quel type de connexion Internet ils pourraient avoir -, il est important d'intégrer des animations petites, légères et ne faisant pas appel à la connectivité.
Strava regorge de minuscules animations. (Si minuscules que vous risquez de les manquer si vous ne faites pas attention.) Il existe des transitions intéressantes entre les écrans, telles que l'option de défi présentée ci-dessus. Les points de carte incluent une animation puisée et vous pouvez réellement voir votre point se déplacer le long des chemins tout au long de votre activité.
Conclusion
Lorsque vous envisagez de nouvelles façons de donner vie à une application mobile, examinez d'abord les tendances de la conception numérique du jour, puis réfléchissez à la façon de les appliquer à une plus petite échelle. Ce qui pourrait vous surprendre, c’est que penser plus petit peut en fait inclure une conception plus grande (en termes d’échelle de toute façon).
Quelles sont les tendances en matière de conception d'applications qui vous intéressent le plus? Y a-t-il d'autres tendances que vous souhaitez simplement éliminer? Faites-moi savoir sur Twitter (tag @carriecousins et @designshack), je suis toujours à la recherche de nouvelles idées à essayer? et éviter.