Plus du même
Si vous n'avez jamais entendu parler d'un modèle d'interface utilisateur, voici une explication rapide : comme pour la plupart des choses, en particulier lors du développement de logiciels, un grand nombre d'éléments peuvent souvent être regroupés, car ils forment un modèle reconnaissable. Un exemple pour le logiciel serait la définition de modèles architecturaux ou de modèles liés à un langage de programmation spécifique.
Pourtant, il existe également des modèles communs lors de la conception de l'interface utilisateur. En jetant un coup d'œil rapide à certaines applications sur l'appareil sur lequel vous lisez cet article, certaines choses finissent par se répéter :
- vues modales avec une action de sauvegarde, d'annulation et/ou de suppression
- des sections d'éléments contenant du texte, par exemple des listes avec une action de balayage pour chaque élément de la liste
Alors, en pensant un peu plus loin, existe-t-il des ressources auxquelles vous pouvez puiser pour concevoir vous-même une interface utilisateur ? Peut-être une collection de motifs que d'autres créateurs ont déjà reconnus et formalisés ? Eh bien, je ne poserais pas cette question si je n'avais pas déjà la réponse ! C'est l'heure du chapitre deux !
Chapitre deux (celui annoncé)
À la recherche d'une définition formelle, l'équipe Carbon Design d'IBM en a une excellente : les modèles sont des solutions de meilleures pratiques pour la façon dont un utilisateur atteint un objectif. Ils présentent des combinaisons réutilisables de composants et de modèles qui répondent aux objectifs communs des utilisateurs avec des séquences et des flux.
Voyons quelques exemples. Les entrées suivantes sont extraites du site Carbon Design d'IBM ainsi que de la page de modèle Material UI de Google. Je n'ai pas trouvé de site pour Microsoft Fluent Design, mais j'ai quand même lié leur page de démarrage dans l'addendum.
Rechercher
La recherche de contenu est l'un des éléments essentiels de la plupart des applications, c'est donc un choix parfait pour définir un modèle d'interface utilisateur. Indépendamment de son utilisation finale (soit une recherche globale ou une recherche spécifique sur une page de contenu), l'interface utilisateur de recherche doit offrir
- une saisie de texte
- un espace réservé textuel si aucune entrée n'est encore disponible
- une icône indiquant clairement le but de la saisie de texte, par exemple à l'aide d'une loupe, ainsi que servant de déclencheur pour une nouvelle recherche
Dans certains cas, une étiquette de conseil peut aider à distinguer les différents types de contenu ou fournir de l'aide en cas d'entrée invalide. Plus une recherche doit gérer de conditions, mieux une recherche peut s'adapter à cette exigence en ajoutant des menus de filtres explicites.
Dialogue
L'un des modèles d'interface utilisateur les plus importants. Les boîtes de dialogue permettent à une application d'afficher une information sans perdre le contexte global d'un site. Ceci est accompli en ne couvrant pas toute la fenêtre mais seulement une plus petite partie. Les boîtes de dialogue interrompent le flux de travail actuel de l'utilisateur et ne doivent donc être considérées comme nécessaires que lorsqu'un arrêt du flux de travail est réellement valide. Ils ne doivent gérer que de petites tâches et se concentrer clairement sur ce qu'ils doivent accomplir. Par exemple, annulez des modifications non enregistrées ou effectuez une action importante.
États vides
Même si cela peut sembler étrange au début, les états vides sont très courants dans les applications. Il est important de communiquer à l'utilisateur qu'aucune donnée n'est disponible et, idéalement, d'expliquer pourquoi c'est le cas. Selon le contexte, un indice sur la façon de résoudre l'état vide peut beaucoup aider à créer une bonne UX. Par exemple, un utilisateur a recherché quelque chose mais n'a rien trouvé. Cela peut être un cas d'utilisation où suggérer une requête de recherche différente peut aider l'utilisateur à accomplir la tâche. Dans tous les cas, chaque vue qui représente un état vide doit être contextuelle. Un exemple négatif serait quelque chose comme « Cela n'a pas fonctionné. Réessayez plus tard".
Ne traitez pas les états vides comme une réflexion après coup dans votre processus de conception d'interface utilisateur. S'ils sont correctement mis en œuvre, ils permettent aux utilisateurs de poursuivre le flux de travail en douceur. Les états vides qui arrêtent tout le flux de travail sont en fait le pire des cas, à l'exception des plantages d'applications.
Juste un début
C'était un rapide coup d'œil sur certains modèles d'interface utilisateur que j'ai choisis dans Carbon Design d'IBM ainsi que sur la page de modèles de Material UI. L'application de modèles d'interface utilisateur à votre application peut également grandement aider à réduire les frictions entre le flux de travail d'un utilisateur et l'interface utilisateur pour accomplir la tâche. La conception de l'interface utilisateur peut être assez difficile, donc se tenir sur les épaules de géants en apprenant des études UX existantes aide beaucoup à améliorer la perception de vos utilisateurs sur le comportement de votre application.
