Les mobinautes ont tous ce point commun qui est d’accéder le plus rapidement à l’information recherchée. Pour cela il est impératif que les informations sur ces petits écrans soient hiérarchisées pour une efficacité de lecture maximale.

Un écran = une information = une action

Hiérarchiser l’information sur les écrans commence en amont du projet par la création d’une architecture claire de l’application et du parcours utilisateur. Cela évite de vouloir tout mettre sur un même écran. Il est impératif de garder en vue l’objectif idéal de n’avoir qu’une seule information importante par écran ainsi qu’une seule action : c’est une des clefs de la réussite.

Les zones importantes

Pour faciliter la hiérarchisation, il faut se baser sur des mises en pages simples, verticales.

Il faut éviter d’avoir trop de zones en colonnes.

Lecture en Z

Pour que les informations soient facilement lisibles par l’utilisateur, il est important de bien les situer. La zone centrale doit contenir les informations principales, les zones de header et de footer permettent de placer des boutons d’actions ou de navigation en second plan sans pour autant que l’utilisateur les cherche.

Le schéma ci-dessous montre les zones les plus regardées et met en avant une lecture en Z.

Guidelines = structure usuelle

Plus une application mobile suit les préconisations faites par les guidelines des différentes plateformes ( iOS et Android ), plus l’utilisateur aura de facilités à trouver l’information.

De plus, les guidelines aident à utiliser les bons éléments graphiques, les bonnes tailles de polices, les bonnes compositions usuelles.

Éléments bien séparés au scroll

L’utilisateur parcourt les écrans via le scroll vertical et cela très rapidement. Chaque groupement d’éléments doit être bien séparés des autres pour que l’utilisateur les repèrent facilement.

Styles de textes

Les styles de textes ont une importance capitale dans la hiérarchisation des informations textuelles. Il faut utiliser des styles bien différenciés entre titre, sous titre et texte courant.

Ces différences peuvent être accentuées par des couleurs ou des teintes de gris différentes.

Les blancs tournants

Le blanc tournant (espace vide autours d’un bloc de texte) est la manière la moins lourde visuellement de séparer des blocs et de faciliter la lecture.

Astuces pour des écrans moins chargés

Des astuces existent pour alléger visuellement l’écran :

• Le floating button : bouton flottant fixe en bas d’écran permettant d’ouvrir un menu secondaire, ou un volet d’informations complémentaires. Jamais masqué, il est idéal pour minimiser le nombre de bouton dans l’écran.
• La gestuelle : les supports mobiles permettent d’effectuer des actions via des gestuelles (swipe, le tap long, le pinch etc… ). Cela permet d’avoir des actions possibles sur une zone sans pour autant avoir besoin d’un bouton ou d’un texte qui viendrait surcharger l’écran.
• Les éléments déroulants : un volet déroulant, ou un menu en accordéon par exemple, permettent de minimiser le nombre d’informations à mettre en page.
• Exploiter la verticalité : le scroll vertical permet d’avoir des contenus très longs sans rebuter l’utilisateur car moins de contenu est visible à l’écran.

Passer par une phase de conception UX Design est indispensable afin de concevoir les écrans de votre future application en cohérence avec les attentes fonctionnelles et surtout les comportements d’usage de la part des utilisateurs finaux.

Envie d’approfondir vos connaissances sur le numérique ?