Guidelines mobiles

Métiers InteractivitéVeille
Programmes Interactivité

Les guidelines sont des lignes directrices qui permettent de définir des codes généraux de compréhension. Ces lignes permettent aux applications tierces d’être cohérentes entre elles et surtout avec le système. Les deux principaux systèmes mobiles étant Android et iOS, nous allons rapidement survoler leurs guidelines graphiques.

Android (Material Design)

Résolution

Android a comme principale différence avec iOS son support de plusieurs résolutions d’écran pour supporter son grand parc d’appareils. L’unité globale, le point par pouce (dpi en anglais), est complètement indépendante de la résolution de l’écran contrairement aux pixels.

Icône

L’icône d’une application est elle, assez libre de création. En effet, on peut produire différentes tailles et formes en partant du carré au bord aigu, jusqu’en allant à une forme totalement circulaire.

style_icons

https://material.io/guidelines/style/icons.html#icons-system-icons

Typographie

La typographie principale d’Android est la Roboto, elle fut choisie pour sa lisibilité et sa neutralité.

Grille

Le système de grille d’Android se base sur des multiples de 8 pour rester cohérent à travers le système.

capture-decran-2017-06-01-a-13-24-04

https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing

Animations

Les animations sont très importantes dans le Material Design. Pour une compréhension globale de l’animation, il doit y avoir une continuité dans celle-ci. Les éléments physiques qui s’agrandissent ne doivent en aucun cas disparaître pendant l’animation. Lors de l’ouverture d’un élément, tous ses enfants doivent apparaître en même temps. La norme de durée de celles-ci est d’environ 300ms, pour ne pas paraître trop lent ni trop rapide.

voir la démonstration en vidéo : https://material.io/guidelines/motion/material-motion.html

Ombres

Le Material Design s’inspire d’éléments physiques et existants, ainsi, chaque couche d’une interface doit se différencier avec des effets d’ombres et d’élévation.

capture-decran-2017-05-10-a-13-11-36

https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows

Boutons

On peut reconnaître deux catégories de boutons dans le Material Design : les rectangulaires et les circulaires. Les boutons rectangulaires apparaissent pour des actions générales dans la page. Tandis que les boutons circulaires ont un sens particulier : ils représentent l’interaction principale de la page, elle sera la plus utilisée par les utilisateurs.

Barre du bas

La barre du bas permet une navigation complète dans l’application. Elle contient les éléments d’interactions principaux de la page et on l’utilise à partir d’un minimum de 3 pages. On ne peut pas défiler horizontalement pour y rajouter plus de pages. On peut également noter, lors de l’ouverture d’une page, celle-ci doit être différenciée pour une compréhension globale de l’utilisateur.

capture-decran-2017-06-14-a-14-10-40

https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage

iOS

Résolution

Sur iOS, le nombre de résolutions différentes est grandement réduit : 3. Le système se base sur des multiplicateurs simples : la résolution de base (aussi appelée @1x), la résolution “retina” (@2x) et la nouvelle résolution @3x.

resolutionios

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

Icône

La forme des icônes est forcée, c’est un carré aux coins arrondis. Une grille est proposée pour garantir une cohérence entre chaque application, même si elle n’est pas obligatoire.

app-icon-grid

http://ivomynttinen.com/blog/ios-design-guidelines

Typographie

iOS utilise la San Francisco comme police de système, elle est donc fortement conseillée. Avec Dynamic Type, iOS propose des tableaux prédéfinis de propriétés de texte, ce qui permet aux utilisateurs de personnaliser la taille de police même dans les applications tierces qui ont suivis ces tableaux.

Barre de statut

La barre de statut est un élément important du système, il faut donc éviter de la cacher. Elle est disponible uniquement en noir ou en blanc. Si le contenu derrière est autre qu’une couleur unie, appliquer un léger flou de fond pour qu’elle reste lisible.

unknown-1

http://ivomynttinen.com/blog/ios-design-guidelines

La barre de navigation

La barre de navigation est une partie centrale de la majorité des applications sur iOS. Au centre, on retrouve le titre qui doit représenter le niveau hiérarchique actuel. À gauche, le retour doit mettre en avant le niveau hiérarchique précédent (en évitant le simple “Retour”). À droite, un bouton d’action principal de la page.

ios-nav-bar

http://ivomynttinen.com/blog/ios-design-guidelines

Barre d’onglets

La barre d’onglets complète la barre de navigation en offrant cette fois-ci une navigation non hiérarchique. Chaque onglet doit amener à une partie bien distincte de l’application, et un onglet ne doit pas servir de bouton d’action. Enfin, pour différencier l’onglet actif des autres, il faut une différence de couleur et l’icône doit être pleine contrairement à filaire.

unknown

http://ivomynttinen.com/blog/ios-design-guidelines

Alertes et Contrôles

Les alertes permettent d’avertir l’utilisateur ou de lui demander des informations. Il est conseillé de les personnaliser graphiquement pour être cohérent avec l’application.

iOS offre aussi différents contrôles du système, qui restent personnalisables. Le bouton divisé permet de proposer plusieurs choix à l’utilisateur, tout en restant graphiquement succinct. Les icônes aux extrémités du curseur peuvent être personnalisées pour mieux représenter la donnée derrière celui-ci. Enfin, la couleur des boutons commutateur peut être changée pour mieux se marier avec l’application.

Autres

En plus des guidelines graphiques, les systèmes mobiles ont aussi des guidelines pour leur magasin d’applications. Ici, les lignes directrices vont dicter choses à faire ou ne pas faire pour être accepté sur ces magasins.

Sinon, créer des guidelines n’est pas réservé aux systèmes. Certaines marques, avec des équipes Design suffisamment développées, ont dans leur intérêt de développer un système cohérent pour tout leurs futurs projets (“design system” en anglais). Ces projets organisent les différents modules souvent utilisés par la marque.

Conclusion

Ces lignes directrices sont pour la plupart des conseils plutôt que des contraintes, pour permettre à la plateforme d’être entièrement cohérente et apprendre des bonnes pratiques aux designers d’applications tierces. Il faut savoir être original tout en se conformant dans le système.

Sources

https://material.io/guidelines/
https://developer.apple.com/ios/human-interface-guidelines/
https://developer.apple.com/app-store/review/guidelines/
https://play.google.com/about/developer-content-policy/
https://github.com/alexpate/awesome-design-systems

Article rédigé par Marc Bouchenoire et Kévin Scotet

Partager cet article

Articles liés

3552 vues
wide-open
Capture de mouvements et usagesjuin 30, 2017 par Juliette PAUGAM
351 vues
lobby_fonctions_draw
Les objets connectées et la domotiquejuin 29, 2017 par Pierre PHILOUZE
327 vues
L'une d'elles
Les serious game par Chloé BIGORRE

Articles Populaires

Laisser un commentaire