Une guidelines c’est quoi ?

Les guidelines ( Human interface Guidelines ) sont un ensemble de règles préconisées par une plateforme pour obtenir des applications efficaces, tant en termes de conception de l’application mobile (visuel et ergonomie) que du développement mobile. Ces règles concernent par exemple les tailles de polices à utiliser, les compositions standard, les éléments natifs recommandés etc.

Utiliser les habitudes d’usage

Les guidelines permettent une homogénéisation des designs entre toutes les applications.

Cela permet aux utilisateurs d’avoir des habitudes de lecture pour trouver plus rapidement les informations. Par exemple un bouton de partage sera toujours placé au même endroit et avec la même forme. Les applications deviennent donc intuitives grâce à une récurrence visuelle. Sortir des guidelines c’est prendre le risque de perdre la compréhension des utilisateurs.

Plus de Performance, plus de fluidité, coûts réduits

Les guidelines sont accompagnés d’éléments natifs : bibliothèque de composants spécifiquements développés et optimisés pour la plateforme ( iOS ou Android ).

Ces éléments, comme la barre de navigation ou le floating button, facilite l’utilisation des applications car l’utilisateur en a l’habitude, la reconnaissance visuelle est donc immédiate. Comme ces éléments sont déjà conçus, ils sont moins coûteux à mettre en place pour les développements. Cela facilite aussi les montées de versions. Enfin, Ils sont plus fluides et véhiculent donc une meilleure expérience utilisateur.

Philosophie

Les guidelines portent également la philosophie de chaque plateforme, les utilisateurs choisissent tel ou tel support car ils ont une préférence pour leur interface graphique car elle est plus sympathique ou plus élégante à leurs yeux. Ils souhaitent donc retrouver cette philosophie dans les applications

Concept de la ligne graphique

Les mots clefs de la ligne graphique d’iOS sont :

• clarté
• élégance
• mouvement naturel

Clarté : la ligne graphique met en avant des compositions avec de grands espaces aérés et beaucoup de blanc tournant. Elle tend vers la disparition des lignes de séparation, des cadres, ce qui donne une impression de liberté. Les icônes sont filaires (avec des contours fins).

Élégance : elle est déterminée par le fait d’utiliser le minimum d’éléments nécessaires à la bonne hiérarchisation des vues. Les éléments graphiques doivent être utilisés avec parcimonie. L’utilisation de fonds gris très clairs pour séparer des zones amènent de la douceur. La police est majoritairement dans des teintes de gris et non de noir.

Mouvement naturel : depuis plusieurs année, iOS travaille à obtenir des mouvements fluides et naturels en usant de mouvements avec inertie. Cela donne des interactions “homme-machine” très naturelles.

Quelques éléments graphiques remarquables

Les bords arrondis : ils sont visibles sur les coins des boutons ou popup, sur les icônes de lancement etc…

Navigation en quelques mots : iOS utilise essentiellement des boutons textes pour les actions de navigation (exempe : “Retour”, “Editer”, “Annuler”, “Valider”, “Suivant” etc…) contrairement aux boutons dans la barre d’outils qui sont des icônes.

Police de caractère : SF UI text (Sans Francisco)

Zoning pleine largeur : les éléments de liste, photos ou autre qui utilisent la largeur de l’écran sont en pleine largeur et il n’y a pas de marge gauche et droite.

La nouveauté des titres extra big : iOS se rapproche de l’esprit magazine à l’aide de cet élément marquant qui transforme les titres des pages en réelle accroche magazine.

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