Les applications Web sont de plus en plus répandues sur Internet. Certains diront peut-être qu'il s'agit simplement de sites Web plus complexes. Indépendamment de leur définition; que se passe-t-il lorsque vous concevez de grandes quantités de données fluctuant constamment?
Il existe quelques exemples d'interfaces pilotées par les données, qui doivent toutes gérer un grand nombre de données variées et en constante évolution. Les plus courants sont les zones d'administration et les tableaux de bord analytiques. Les données peuvent prendre plusieurs formes. graphiques, graphiques, tableaux ou texte. Chacun peut être affiché de différentes façons en fonction du contexte et de la signification que vous essayez de transmettre avec les données. Une chose à retenir est que vous pouvez rarement être sûr de la longueur ou montant des données que vous devez prendre en charge; alors pensez simple pour commencer?
Cohérence et prévisibilité
L'un des aspects les plus importants de la conception d'interfaces fortement axées sur les données consiste à les rendre cohérentes. La cohérence permet aux utilisateurs de se familiariser avec un domaine d'une interface et de pouvoir utiliser n'importe quel autre domaine simplement par les schémas créés avec le domaine précédent. Voici comment rendre une interface prévisible. jouer sur les modèles mentaux existants et le comportement appris.
Afin de rendre les zones cohérentes, vous devez comprendre le contexte plus large de l'interface et voir dans quelle mesure vos idées d'interface initiale peuvent résister à l'examen minutieux de données variées.
Par exemple: une table n'a peut-être pas besoin d'être filtrée ou triée dans une vue - mais que se passe-t-il lorsque vous êtes présenté avec une autre table dans une zone différente? Pouvez-vous utiliser la même interface que celle que vous venez de créer si le second tableau doit être filtré et contient des surbrillances nécessitant une clé ou une légende?
La cohérence consiste à permettre à la conception de s’adapter rétrospectivement, en fonction de votre connaissance croissante de la complexité. C'est pourquoi il est préférable de commencer avec des prototypes lo-fi et de tester vos idées avec des cas extrêmes (des choses qui ne se produiront pas très souvent, mais qui risquent de casser le design).
Le modèle de table sera-t-il utilisé dans d'autres zones pouvant avoir des fonctions supplémentaires? Si la plupart des tables doivent être triées, concevez dans cet esprit. L’objectif n’est pas d’avoir à «verrouiller» quoi que ce soit sur un composant existant, afin qu’il ne soit pas à sa place. Il est plus facile de supprimer un bouton d’une barre d’outils que de comprendre comment l’incorporer sans barre d’outils.
Modèles, états et composants pouvant être récupérés
Afin de faire de la cohérence une réalité, vous devez construire intelligemment. Si vous ne concevez pas pour chaque vue individuelle, vous pouvez créer un ensemble de règles pouvant être appliquées à tout vue. Une peinture par numéros si vous voulez. Cela permet à votre client ou à d'autres concepteurs d'assembler rapidement de nouvelles pages ou mises en page avec un minimum de succès.
Les motifs
Un motif est un petit ensemble d'éléments qui vont ensemble. Cela peut être une section d'une barre d'outils, ou peut-être un ensemble de boutons d'évaluation, et constitue généralement un moyen d'organiser des informations connectées. Une étiquette et une entrée constitueraient également un motif dans un formulaire.
Vous trouverez ci-dessous des groupes de modèles issus des produits Google:
- Trier par liste déroulante
- Navigation gauche et droite
- Sélecteur de plage de dates
- Liste déroulante
Les modèles proviennent de différents produits mais sont cohérents et donc prévisibles pour les utilisateurs. Ensemble, ils forment le composant de barre d'outils.
États
Les motifs peuvent avoir différents aspects visuels en fonction d'un ensemble de circonstances. Peut-être y a-t-il une erreur, un bouton est désactivé ou un graphique ne contient aucune donnée. Chacun doit être pris en compte. Généralement, ils appartiennent aux catégories suivantes (vous en reconnaîtrez certains à partir de différents pseudo-sélecteurs CSS):
- Défaut
- Flotter
- actif
- Concentrer
- Erreur
- désactivé
- Vide
Composants
Un composant est plus grand et peut contenir plusieurs motifs, voire plusieurs composants. Lors de la conception de sites fortement axés sur les données, l'objectif est de fournir un ensemble de composants flexibles constitués de modèles réutilisables. Ci-dessous, un pour http://phosho.co sur de petits écrans:
Travailler à partir d'un produit existant
Si vous travaillez à partir d'un produit existant et que vous êtes limité par les flux d'utilisateurs existants (et dans certains cas par la mise en page), vous devez effectuer un «audit de modèle». Répertoriez quelques flux d'utilisateurs clés et prenez une capture d'écran pour chaque étape.
- Sur un Mac, appuyez simplement Commande-Maj-3 pour enregistrer l’écran actuel sur le bureau.
- Sur PC, vous pouvez utiliser un élément appelé Problem Steps Recorder pour enregistrer vos étapes dans un fichier .mht. Vous pouvez ensuite enregistrer les images hors de ce fichier. Il y a un excellent tutoriel ici.
Une fois que vous avez terminé un flux d'utilisateur; ajoutez les captures d'écran dans un dossier décrivant le flux d'utilisateur, tel que "ajouter un nouvel enregistrement". Puis imprimez-les. Tout. Il y a quelque chose à dire pour que chaque écran impliqué dans un flux d'utilisateurs se trouve devant vous. Vous pouvez facilement repérer les similitudes et les différences.
L'idée d'un audit de modèle est de comprendre le nombre de modèles, le nombre de modèles présents sur chaque modèle (et leur état). Pour ce faire, la meilleure solution consiste à les épingler au mur dans une grille et à leur attribuer une lettre pour les colonnes et un numéro pour les lignes (ou tout autre élément avec lequel vous êtes à l'aise). Cela sert de référence lorsque vous écrivez chaque composant.
Par exemple, vous pouvez avoir:
- En-tête de table (A2)
- Corps de table (A2)
- Pied de table (A2)
- Menu latéral - fermé (A1)
- Menu latéral - Ouvrir (B1)
- Calendrier (C3)
- Calendrier - Désactivé (C4)
Cela vous permet de lister tous les modèles existants, mais aussi de les référencer afin de pouvoir rapidement voir à quoi ils ressemblent. Une façon de vérifier si vous avez répertorié tous les modèles et composants consiste à choisir un modèle et à voir si vous pouvez le recréer à partir de la liste des modèles et composants que vous venez de créer. Si vous rencontrez quelque chose qui ne figure pas sur la liste; ajoutez-le.
Travailler à partir de zéro
Lorsque vous travaillez à partir de zéro, vous avez la liberté de créer les motifs de votre choix, mais cela peut aussi être beaucoup plus difficile, car vous n'avez rien à faire au début. Comme indiqué précédemment; lors de la conception de composants réutilisables, vous devez commencer par le lo-fi avec des croquis. Ils ne doivent pas forcément être étonnants, mais ils sont rapides et vous permettent d'explorer facilement différentes options sans vous perdre dans les détails qui se produisent si souvent dans Illustrator ou Photoshop.
- Créer un flux pour une tâche cela doit être complété et liste le contenu qui peut être inclus sur la page.
- Esquisser quelques directions différentes et des idées. Plus c'est mieux. Ensuite, vous pouvez commencer à voir s’il existe des chevauchements avec le contenu et comment il peut être possible de le présenter.
- Les affiner fil de fer et évaluer s’il existe des zones ayant des fonctions similaires mais des solutions différentes. Considérez comment ils peuvent être combinés pour créer une interface plus cohérente. Quels sont les modèles que vous utilisez?
- Casse le.Déclarez délibérément l'avocat du diable et voyez ce que vous devez faire pour casser votre interface. Décidez si l'action de rupture est susceptible de se produire et si cela vaut la peine d'être abordé.
Iconographie
L'iconographie est un moyen de comprendre le sens du contenu par l'utilisation d'une image. Il y a des cas où le texte vaut mieux qu'une icône; généralement lorsque le concept est abstrait et a une faible capacité financière. Chaque action n'a pas besoin d'une icône.
Si vous craignez que les utilisateurs ne puissent pas comprendre une icône. Vous êtes Probablement droite. Un moyen rapide de le tester consiste à isoler l'icône et à demander aux gens ce qu'ils pensent qu'il fait. S'ils ont plusieurs suppositions et qu'aucune d'entre elles n'est proche, vous pouvez avoir un problème. Placez l'icône dans son contexte et répétez le processus. Si le caractère favorable du contexte renforce l’utilisation correcte de l’icône (c’est-à-dire que les utilisateurs peuvent deviner ce qu’il fait de par sa position sur l’interface), alors c’est probablement correct. Si les gens ne peuvent toujours pas deviner, envisagez de changer l’icône ou d’ajouter du texte ou une microcopie.
Réduction progressive
Il existe un concept intéressant, appelé réduction progressive, que vous pouvez appliquer aux situations où vous souhaitez former les utilisateurs du fait qu’une icône inhabituelle se rapporte à une action spécifique. En commençant par une icône accompagnée de texte (pour la rendre évidente lors de la première utilisation) et en simplifiant progressivement l'interface au fur et à mesure de son utilisation, les utilisateurs associent l'icône à une action impossible à deviner en utilisant simplement l'icône seule.
Livrables
Maintenant que vous avez créé des structures filaires raffinées exprimant les principaux flux d’utilisateur, englobant une masse de motifs et de composants réutilisables. qu'est-ce que vous montrez au client?
Un certain nombre de mises en garde peuvent affecter ce que vous livrez, par exemple si vous utilisez vous-même le code HTML / CSS / JS ou si cela est géré par une tierce partie. Dans les deux cas, pour assurer la longévité de la conception et surtout la cohérence lors du déploiement de nouvelles fonctionnalités, vous avez besoin d'une sorte de référence ou de guide que tout le monde peut consulter et (voire même mettre à jour) qui constitue la base de toutes les décisions futures concernant L'interface.
L'évier de la cuisine
Le Kitchen Sink est HTML / CSS et parfois JS. Il affiche tous les différents composants et modèles sur une seule page, ce qui garantit que rien ne se casse (en termes de conception ou de code) lorsqu’ils sont placés dans des ordres divers. Dans sa forme la plus simple, il ne s'agit que d'éléments HTML natifs garantissant que les bases sont couvertes.
- Évier de cuisine HTML 嚙 箭 y a Rand aul Randell
- Pattern Primer par Jeremy Keith
Kits d'interface utilisateur
Les kits d’interface utilisateur sont généralement des fichiers PSD statiques et contiennent des versions stylisées d’éléments HTML fondamentaux. Ils comprennent généralement des boutons, des entrées, des zones de sélection ainsi que des curseurs et des sélecteurs de date. Certaines peuvent être très complètes et sont généralement livrées lorsque le processus de construction sera entrepris par une tierce partie. Ils vous évitent d'avoir à produire une maquette de chaque écran dans chaque état.
- Kits d'interface utilisateur de Dribbble
- Kit d'interface utilisateur transparent de Victor Erixon
- Kit d'interface utilisateur clair de Matt Gentile
- Silky Light UI avec Okidoci
Guide de style visuel
Les guides de styles visuels vont beaucoup plus loin que de simples références visuelles à un dessin. Ils sont instructifs et incluent souvent des instructions pour indiquer quand et où les motifs et composants doivent être affichés et dans quel état. Ils sont mieux produits en code et peuvent être mis à jour au fil du temps.
La clé de la cohérence et du maintien de cette cohérence dans un produit en expansion, fortement axé sur les données, est de disposer d’une base sur laquelle reposent toutes les décisions de conception. Avoir une «copie maîtresse» et un ensemble de règles faciles à suivre signifie que tout le monde peut construire (presque) n'importe quoi et l'adapter au design existant.
Lorsque vous trouvez quelque chose qui n'est pas inclus dans le guide de style, vous pouvez créer une solution à votre problème et y ajouter des éléments, des motifs ou des composants entiers avec des instructions le rendant accessible à tous.
Les guides de style sont évolutifs et ne sont jamais finis. Alors avez besoin d'être maintenu si. Sinon, peu à peu, les gens cesseront de l'utiliser car il devient obsolète et c'est à ce moment-là que les produits commencent à diverger.
- Twitter Bootstrap
- Google Styleguide
- Paul Robert Lloyd Styleguide
- BBC Global Experience Language
- Directives d'interface humaine Apple
Rappelez-vous que vous définissez les attentes de vos clients. Si vous dites que vous allez livrer des maquettes de pixels parfaits, c'est ce à quoi ils s'attendent.
Conclusion
Les utilisateurs sont concentrés sur les tâches et sont souvent sur le "chemin le plus court", ce qui signifie que vous devez les concevoir pour qu'ils puissent mener à bien leur tâche de la meilleure façon possible avec un minimum de tracas.Les modèles réutilisables accélèrent ce processus en permettant aux utilisateurs d'utiliser ce qui a été appris d'un aspect de votre interface et de l'appliquer à un autre. Ils s'empressent d'achever de nouvelles tâches car ils sont plus confiants dans leurs actions.
Une mise en garde de ne pas vous laisser emporter par l'aspect de l'interface plutôt que par la fonction; l'apparence de quelque chose est la dernière chose qui intéresse les utilisateurs. Avant de vous lancer dans Photoshop, souvenez-vous de cela en premier lieu. les utilisateurs se soucient de savoir si quelque chose travaux. La cohérence et la prévisibilité ont un rôle important à jouer à cet égard.
Lecture supplémentaire
Des articles
- Front End Styleguides by Anna Debenham
- Systèmes CSS de Natalie Downe
- Concevoir pour une hiérarchie des besoins… par Steven Bradley
Ressources
- Tap Pattern
- États vides
- Les motifs
- Modèles d'interface utilisateur
- PTTRNS
- Eléments de Design Gallery