L’utilisation des smartphones augmente d’année en année. Plus d’un tiers de la population mondiale actuelle en possède un !
Par conséquent, la création d’applications mobiles a augmenté de manière exponentielle ces dernières années.

Mais attention, pour concevoir une application ergonomique et intuitive, il y a des règles à respecter !

Cela passe par la définition du parcours utilisateur, la prise en compte de la taille de l’écran, se référer aux guidelines iOS et Android, la création d’un univers graphique et considérer où les smartphones sont utilisés.

 

 

 

Définir le parcours utilisateur

Avant de vous lancer dans le design de votre application, il va falloir commencer par définir le parcours utilisateur. Cela va vous permettre d’avoir une vue d’ensemble de votre application. Ainsi, vous allez définir l’enchaînement des différents écrans, mettre en exergue les différentes interactions entre votre utilisateur et votre application. Et pour cela, il y a une règle simple à respecter : 1 écran = 1 action.

 

 

1 écran = 1 action

Cette règle permet d’avoir des écrans intuitifs et ergonomiques. Ainsi, votre utilisateur comprend très rapidement ce qu’il doit faire sur chaque écran. L’enchaînement des actions est fluide et simple. Cela participe à l’optimisation de l’expérience utilisateur et donc la satisfaction de votre utilisateur.
Cette règle est intimement liée à une contrainte technique de taille : la taille de l’écran !

design-mobile-ux-ui-ergonomie

 

La taille de l’écran : principale contrainte

Cela peut sembler évident, mais la taille des écrans est la principale contrainte de l’interface utilisateur lors de la création d’une application mobile. Elle a un impact sur la conception visuelle, l’ergonomie, et même le parcours utilisateur.

Outre la taille de l’écran, l’utilisation des doigts par les utilisateurs pour naviguer sur l’application a un énorme impact sur la conception de l’interface. Il faut identifier les « zones de confort » et les zones à éviter lors des CTA. La zone de confort ou « Thumb Zone » est la zone balayée par le pouce sur l’écran d’un smartphone. C’est la zone la plus confortable à toucher lorsque vous utilisez une seule main. 
Crédit photo : usabilis

zone-confort-design-mobile-ux-ui

 

Les espaces blancs

Un écran est composé de deux types d’éléments : les composants graphiques (comme par exemple une image ou un texte) et les espaces blancs. Ces espaces sont indispensables, car ils permettent de mettre en avant un élément sur un écran ou encore de mettre de la distances entre 2 éléments pour éviter que l’utilisateur se trompe.

Prenons l’exemple du bouton. Les boutons doivent être suffisamment grands pour être visibles et cliquables sans difficulté.
Tous les principaux acteurs de l’industrie mobile donnent les tailles exactes. En plaçant deux boutons côte à côte, avec un espace insuffisant entre les deux, il existe un risque que l’utilisateur clique sur le mauvais bouton, ce qui aura un impact négatif sur l’expérience de l’utilisateur.

whitespace-design-mobile-ux-ui

 

Consultez les guidelines iOS et Android

Concernant la mise en page des différents éléments de chaque écran, et la structuration des écrans, il est judicieux de privilégier une mise en page verticale et simple tout en respectant les guidelines fixées par iOS et Android.
Ces directives expliquent ce qu’il faut faire et ce qu’il ne faut pas faire pour chaque système d’exploitation. Ils sont constitués de styles graphiques (actuellement flat design pour iOS et un material design pour Android) et de composants couramment trouvés (boutons, navigation, typographie, cartes, onglets).

guideline-design-mobile-ux-ui-userexperience

 

Univers graphique

Une fois la structure des différents écrans de votre applications faites, vous allez pouvoir appliquer la couche graphique.
Pour cela, 2 options :
– vous appliquez la charte graphique de votre entreprise
– vous créez un univers graphique correspondant aux valeurs de votre entreprise et à votre utilisateur cible.

Voici un exemple d’univers graphique que j’ai proposé pour une application mobile dans le domaine de la santé.

 

ui-ux-design-mobile

 

Considérez où les smartphones sont utilisés

Enfin, n’oubliez pas de prendre en compte l’environnement dans lequel votre application sera utilisée. Les smartphones sont utilisés littéralement partout : à l’intérieur et à l’extérieur, dans les transports en commun, à pied, en courant … Si l’on prend l’exemple des variations de luminosité (intérieure vs extérieure), le contraste devient encore plus important. Assurez-vous que votre conception est correctement lisible en plein soleil!

 

Pour réussir le design de votre application mobile, il faut commencer par se concentrer sur le parcours utilisateur pour identifier les interactions entre votre application et vos utilisateurs mais aussi les fonctionnalités.
Il faut aussi prendre en compte la taille de l’écran qui a un impact sur le design de votre produit digital.

Avez-vous des questions sur ces 7 points clés ?