Introduction aux modèles de conception iOS

La plupart des plates-formes mobiles établies ont un ensemble de modèles de conception, des directives écrites ou non écrites sur l'apparence, la convivialité et le fonctionnement des éléments. L'application de modèles de conception éprouvés améliore la convivialité de votre produit, augmente la conversion et procure aux utilisateurs un sentiment de familiarité. Ignorer les normes va dérouter et frustrer les utilisateurs, et chaque concepteur devrait essayer d'éviter autant que possible..

Dans cet article, nous examinons les modèles de conception sur iOS en vous présentant un certain nombre d'exemples illustrant la manière dont les applications existantes appliquent certains de ces modèles..

Quels sont les modèles de conception?

En bref, un motif de conception est une solution récurrente qui résout un problème de conception spécifique. Parce que c'est récurrent et que les utilisateurs le rencontrent souvent, ils se familiarisent rapidement avec la solution fournie par le modèle..

L'icône hamburger, par exemple, est devenue un modèle de conception bien connu. Nous savons tous que cela ouvrira un menu lorsque l’icône est tapée. Ce comportement est tellement ancré qu'il serait source de confusion pour l'utilisateur si le fait de toucher l'icône entraînait une action différente..

Lorsque les concepteurs ne suivent pas les modèles de conception et choisissent plutôt d'implémenter leur propre solution, deux résultats sont possibles:

• L'utilisateur est agacé ou frustré, car il ne comprend pas ce que la conception ou l'interface tente de lui dire ou parce qu'il s'attendait à un résultat différent..
• L'utilisateur est ravi, car la nouvelle solution constitue une amélioration par rapport à la solution existante. Nous considérons souvent cela Conception innovante, parce que cela peut changer la donne, en remplaçant les modèles de conception existants.

Soyez prudent, cependant, car la ligne de démarcation entre une expérience frustrante et un design innovant est souvent plus mince que prévu..

Dans cet esprit, concentrons-nous sur iOS et voyons comment les modèles de conception s'appliquent à la plate-forme mobile d'Apple..

Directives d'Apple

Pour élaborer des normes de conception cohérentes pour la plate-forme iOS, Apple fournit un document appelé Directives d'interface humaine ou HIG. Il définit les normes auxquelles les développeurs et les concepteurs doivent adhérer. Les exemples incluent la disposition de clavier standard, le sélecteur de date et la barre d'état.

Vision de conception

Cependant, les normes de conception ne se limitent pas à l'utilisation d'éléments d'interface utilisateur cohérents. Parallèlement à la sortie d’iOS 7, Apple a également exposé sa nouvelle vision en matière de design, qui englobe trois thèmes principaux, comme indiqué dans les directives d’interface humaine iOS d’Apple:

• Respect. L'interface utilisateur aide les utilisateurs à comprendre et à interagir avec le contenu, sans jamais y faire concurrence.
• Clarté. Le texte est lisible dans toutes les tailles, les icônes sont précises et lucides, les ornements sont subtils et appropriés, et une focalisation plus précise sur la fonctionnalité motive le design..
• Profondeur. Les couches visuelles et les mouvements réalistes confèrent de la vitalité et augmentent le plaisir et la compréhension des utilisateurs.

Regarde et ressent

Le plus grand changement dans iOS 7 était la façon dont nous présentons visuellement les éléments. Design plat a été présenté aux utilisateurs iOS, ce qui était un changement majeur. Beaucoup de gens pensaient que ce n'était pas nécessairement une amélioration.

Curieusement, en regardant en arrière sur iOS 6, l'opinion générale est que la conception skeuomorphic est obsolète. Nos perceptions ont clairement changé.

Lorsque les utilisateurs s'habituent au design plat d'iOS 7, cela signifie qu'ils s'habituent à un style visuel particulier. En d'autres termes, en tant que développeur, vous préféreriez vous en tenir au style visuel d'iOS 7, car c'est ce à quoi les utilisateurs s'attendent d'iOS..

Bien entendu, il ne s'agit pas uniquement de l'apparence de votre application. La façon dont il se comporte et se sent est également un aspect important à considérer. Les animations subtiles sont devenues une marque de fabrique d'iOS 7. Cela a autant d'impact sur l'apparence de votre application que les images..

Les animations que vous utilisez dans votre application importent et font partie des modèles de conception. Les utilisateurs sentent et apprécient les animations raffinées, ce qui signifie que cela vaut la peine de leur donner un effort..

Nous utilisons beaucoup d'iconographie lors du processus de conception d'une application. Les icônes sont un outil important pour les modèles de conception d'interface car elles ont une signification globale, quel que soit le contexte de l'utilisateur..

L'utilisation correcte des icônes est un bon début pour appliquer des modèles de conception, mais l'aspect et la convivialité de ces icônes sont également essentiels. Nous nous sommes familiarisés avec l'iconographie plate et simple. Une iconographie très détaillée signifie que nous ne répondons pas aux attentes de l'utilisateur et que, par conséquent, nous brisons l'efficacité de la conception..

Éléments prenant en charge les modèles de conception

L’un des principaux modèles de conception est l’utilisation de éléments d'interface utilisateur translucides. Le centre de contrôle réorganisé en est un bon exemple. Apple utilise la transparence et le flou pour informer l'utilisateur du contenu en arrière-plan. Il est utile de donner le contexte utilisateur lorsqu’il utilise le centre de contrôle.

L'utilisation de espace négatif contribue également à rendre les conceptions plus efficaces et utilisables. C'est l'un des composants clés qui rend iOS 7 si différent de iOS 6. Associé à un nombre limité de couleurs clés, cela vous donne les ingrédients essentiels pour une conception bien conçue de l'interface utilisateur. En tant que concepteurs et développeurs, nous sommes obligés de réfléchir davantage aux choix de conception que nous faisons, même aux plus petits..

Un changement majeur, et peut-être controversé, a été le passage à boutons sans bordure, un changement critique dans les modèles de conception iOS. C'est peut-être aussi l'une des raisons pour lesquelles iOS 7 a initialement fait l'objet de nombreuses critiques. C'est une approche plus extrême du design plat. Ce changement illustre parfaitement la ligne de démarcation entre la conception innovante et la conception qui crée de la frustration.

Et bien sûr, pour les éléments de l'interface utilisateur, il y a les détails essentiels à prendre en compte. Les icônes de la barre d’outils et de la barre de navigation, par exemple, doivent avoir une zone tappable d’au moins 44x44 points. Pour les icônes de la barre d'onglets, 50x50 points est recommandé. Le nombre maximal d'icônes dans une barre d'onglets est de cinq pour l'iPhone et l'iPod Touch. Une liste complète des tailles recommandées des différents éléments de l'interface utilisateur est disponible dans les Human Interface Guidelines.

La même chose s'applique aux gestes. L'utilisation de gestes obscurs ou difficiles à deviner pour des actions courantes entraîne la confusion des utilisateurs. Utiliser un geste de pincement pour ouvrir un lien semble être une très mauvaise idée. Droite?

Un autre point majeur de iOS 7 est la typographie. Apple encourage l'utilisation d'une police unique et dynamique au lieu de plusieurs polices.

Il existe également une vision claire en ce qui concerne la stratégie de marque des applications. Même si nous nous sommes habitués aux marques explicites dans les applications, Apple préfère maintenant les marques moins explicites dans la manière dont elles se font connaître et se promouvoir. En d’autres termes, la conception ou l’interface utilisateur doit être au centre des préoccupations, pas de la marque. Les couleurs clés et le langage de conception de l'application sont parfaits pour promouvoir une marque de manière non intrusive.

Interface iPad

Les modèles de conception dictent non seulement les meilleures pratiques pour les conceptions en général, ils sont également spécifiques. Certains appareils ont ou exigent des normes différentes. Certaines interfaces iPad sont un bon exemple.

Les Popovers et les contrôleurs de vues fractionnées, par exemple, sont des éléments d'interface utilisateur que vous ne trouverez pas sur un iPhone ou un iPod Touch. Ces modèles de conception s’adressent à des écrans plus grands, comme ceux que l’on trouve sur les iPad, iPad Air et iPad Mini..

Ce qu'il faut retenir

• Prioriser et présenter les principales fonctionnalités en premier. Identifiez les principales histoires d'utilisateurs. Ceux-ci devraient nécessiter le moins de navigation. 
• Les modèles de conception utilisent souvent des fonctionnalités spécifiques au périphérique pour améliorer la pertinence d'une application et de son contenu. L'emplacement, par exemple, est souvent utilisé pour afficher un contenu pertinent à l'utilisateur..
• Fournissez des indices de navigation pour que les utilisateurs sachent toujours où ils se trouvent dans votre application..
• Les modèles de conception sont souvent axés sur l’optimisation de la appels à l'action Les utilisateurs doivent donc se rappeler à maintes reprises de la prochaine action à prendre. L'application Tumblr illustre bien cela.

• La saisie de l'utilisateur doit être aussi simple et facile que possible. Réduisez le nombre de champs dans un formulaire et utilisez des valeurs par défaut chaque fois que possible. Tumblr est un bon exemple de valeurs par défaut intelligentes.
• Si un élément d'interface utilisateur est paramétrable, assurez-vous que cela est clair pour l'utilisateur via la conception de l'élément..
• Les modèles de conception mobiles consistent souvent en des flux horizontaux plutôt qu'en flux verticaux. Animez automatiquement une nouvelle vue au lieu d'attendre que l'utilisateur fasse défiler l'écran. Il est important de rendre l'expérience fluide et homogène. Contrairement à un site Web, il n'est pas nécessaire de limiter une action particulière (par exemple, effectuer un achat) à une seule vue. Il est souvent plus efficace et élégant de guider l'utilisateur à travers une série de vues en un seul appel à l'action..
• Enfin, comprenez le contexte des appareils mobiles. Les appareils mobiles sont principalement utilisés en courtes rafales, ce qui est très différent de la façon dont nous travaillons avec un ordinateur de bureau ou un ordinateur portable..

Conclusion

Les modèles de conception reposent sur le bon sens et la pratique. C'est inutile de objectif pour un design innovant quand il y a des chances que vous vous retrouviez avec un utilisateur frustré. Respectez les directives lorsqu'elles sont disponibles, utilisez les modèles de conception établis et améliore la convivialité de votre produit..

Recherchez les solutions que d’autres applications utilisent pour résoudre certains problèmes. Comment la plupart des applications gèrent-elles l'enregistrement des utilisateurs? Quelles sont les approches testées pour intégrer le commerce électronique? Comment le partage social est-il le mieux intégré dans une application? Faire attention aux détails tout en utilisant des applications est un excellent moyen de se familiariser avec divers modèles de conception.

Ressources

• Directives d'interface humaine iOS
• Archive UX
• Onboarding utilisateur