Conception d'un système numérique haut de gamme sans rendre chaque écran décoratif

L'idée centrale: Le design numérique haut de gamme est le résultat de la…

Le design numérique haut de gamme est le résultat de la hiérarchie, de la proportion, de l'honnêteté matérielle et de l'interaction prévisible plutôt que des effets visuels appliqués partout.

Premium est le mot le plus mal appliqué dans le travail de produit numérique, en grande partie parce qu'il est plus facile à satisfaire dans une capture d'écran. Une image immobile récompense la surface : dégradé, ombre, type généreux, grille inhabituelle. Utilisez quelque chose d'autre, à savoir qu'un contrôle reste là où il était, que le texte à 200 pour cent zoom ne brise pas la disposition, et que la deuxième visite se sent comme la première. Ces qualités photographient mal et sont la base complète sur laquelle un produit se sent cher.

Ce qui a changé, et pourquoi ça compte maintenant: Mesurer le succès des tâches, les régressions visuelles,…

L'écart devient mesurable au niveau des composantes. Les équipes qui construisent des pages vitrine ont d'abord tendance à accumuler des variantes : neuf styles de boutons, quatre traitements de cartes, trois échelles d'espacement que personne ne peut distinguer. Chacun était justifié par une page spécifique. Ensemble, ils signifient qu'une nouvelle page ne peut plus être assemblée, seulement conçue, et le coût de la cohérence augmente avec chaque écran expédié. La réutilisation des composants est le nombre qui expose cela, et elle est généralement bien inférieure à ce que les équipes attendent une fois qu'elles comptent réellement.

Construire le modèle d'exploitation: Sélectionnez cinq écrans haute circulation et supprimez…

Définir la typographie, l'espacement, les rôles de couleur, le comportement des médias, les limites de mouvement et les états des composants avant de composer des pages vitrines. Utilisez le contraste pour clarifier l'importance, pas pour décorer l'espace vide.

La motion mérite un budget explicite plutôt qu'un style. Décider la durée maximale, le nombre de propriétés qui peuvent animer à la fois, et quels états sont autorisés à se déplacer, puis tenir la ligne. Le mouvement non budgétisé est la façon la plus courante dont une interface considérée devient fatigante : individuellement chaque transition est défendable, et collectivement le produit se sent plus lent qu'un produit statique. La même discipline s'applique à l'élévation et aux rôles de couleur, qui s'étendent tous les deux sans que personne ne décide qu'ils devraient.

Mesurer ce que la décision a produit: Un produit numérique haut de gamme est celui où la même…

Mesurer le succès des tâches, les régressions visuelles, la réutilisation des composantes, l'accessibilité et le temps requis pour expédier une nouvelle page cohérente.

L'accessibilité fait partie de cette liste non pas en tant que conformité, mais en tant que substitut de la qualité structurelle. Les défaillances contrastantes, les états de focalisation manquants et les contrôles qui ne peuvent être atteints par le clavier sont habituellement des symptômes d'un système où les décisions visuelles ont été prises avant les décisions structurelles. Un produit qui survit à un passage clavier seulement et un passe de zoom de 200 pour cent est presque toujours un produit dont la hiérarchie est réelle plutôt que décorative, et c'est la même propriété qui fait qu'il se sent cher à un utilisateur de souris qui ne testera jamais non plus.

Lorsque l'exécution cesse: Le design numérique haut de gamme est le résultat de la…

Une conception peut sembler coûteuse dans une image immobile et se sentir peu fiable dans l'utilisation lorsque les commandes se déplacent, le texte déborde et les surfaces décoratives concurrencent le produit.

Il y a une défaillance spécifique qui mérite d'être nommée : les surfaces décoratives rivalisent avec le contenu. Les effets de verre, la translucidité en couches et les milieux animés réduisent le contraste dont dispose l'utilisateur. La conception se lit comme considéré dans l'examen, où tout le monde regarde la conception, et se lit comme bruyant dans l'utilisation, où personne n'est. Le test est de savoir si un utilisateur pour la première fois peut identifier l'action principale en une seconde, et il vaut la peine de fonctionner avec des personnes qui n'ont aucun intérêt dans le résultat.

À quoi cela ressemble dans la pratique: Le design numérique haut de gamme est le résultat de la…

Dans la production cela apparaît comme un système avec moins de pièces que l'équipe prévue et des règles plus strictes à leur sujet. Une échelle de type plutôt que trois. Quatre valeurs d'espacement qui composent de façon prévisible. Deux niveaux d'élévation, car le troisième est presque toujours en train de résoudre un problème de hiérarchie qui aurait dû être résolu structurellement. Les états des composants sont spécifiés ensemble, y compris les cas vides, de chargement, d'erreur et de débordement qui sont généralement découverts tardivement. Le résultat mesurable est qu'une nouvelle page devient un travail d'assemblage avec une durée prévisible, et le résultat qualitatif est que le produit cesse de surprendre la personne qui l'utilise.

L'argument le plus fort contre cette: Le design numérique haut de gamme est le résultat de la…

L'objection qu'il convient de prendre au sérieux est que la modération n'est pas une stratégie. Dans les catégories surpeuplées, un produit simplement calme et cohérent est également oublié, et le langage visuel distinctif est un véritable atout concurrentiel que ce cadrage traite comme un coût. C'est juste. La résolution n'est pas moins de caractère mais un endroit plus clair pour elle : le caractère distinctif appartient à la typographie, à la voix éditoriale, à la photographie et à un petit nombre de moments de signature, non distribués uniformément sur tous les contrôles de l'interface.

Le contre-argument expose également un véritable piège de séquençage. Une équipe qui adopte des contraintes strictes avant de comprendre le produit va encoder les mauvaises, et le système devient alors un obstacle que tout le monde se déplace, ce qui est pire qu'avoir aucun système du tout. Les contraintes gagnent leur autorité à partir de preuves sur ce dont le produit a réellement besoin, donc le moment correct pour les formaliser est après qu'il y a suffisamment d'écrans pour voir le modèle, pas au point où le langage de conception est encore découvert.

Une séquence de mise en œuvre de 30 jours: Mesurer le succès des tâches, les régressions visuelles,…

Sélectionnez cinq écrans haute circulation et supprimez chaque style qui n'améliore pas la hiérarchie, la rétroaction, l'identité ou la compréhension.

Première semaine, compter les variantes en production, les boutons et les cartes, les valeurs d'espacement et les ombres, et publier le nombre. Deuxième semaine, définir le plus petit ensemble qui couvre les cas réels et écrire ce que chacun est pour. Troisième semaine, reconstruire les trois écrans de trafic les plus élevés en utilisant seulement cet ensemble et enregistrer ce qui ne pouvait pas être construit. Semaine 4, fixer le système plutôt que les exceptions, et mesurer combien de temps prend le quatrième écran.

Traiter chaque exception comme une recherche sur les produits

Une requête d'exception devrait nommer la tâche de l'utilisateur que le composant actuel ne peut supporter, montrer le contenu et l'état qui exposent l'écart, et déterminer si le besoin est permanent ou spécifique à la campagne. Les évaluateurs devraient répondre de l'une des trois façons suivantes : utiliser un modèle existant et expliquer pourquoi, étendre le système à chaque cas comparable ou approuver une exception temporaire avec une date d'expiration. Cela empêche la bibliothèque de se développer parce qu'une capture d'écran se sentait trop familière, tout en permettant aux preuves provenant d'écrans réels de corriger un système surchargé. Le journal des exceptions devient une archive de recherche : des demandes répétées révèlent des capacités manquantes, et des demandes ponctuelles révèlent où une page essaie de faire de la décoration une décision de produit.

Une fois libéré, échantillonnez les débits de trafic les plus élevés lors de la navigation du clavier, un zoom de deux cents pour cent, un texte traduit de longue durée, un chargement lent, des données vides, une défaillance de validation et un mouvement réduit. Jumeler ces observations avec les comptes de réutilisation et de régression des composants; un taux de réutilisation élevé n'est pas un succès si les équipes dépassent à plusieurs reprises le même état dans les CSS locaux. Revoir les moments visuels de signature séparément des contrôles fonctionnels de sorte que le caractère distinctif ne devienne pas une excuse pour un comportement incohérent. Supprimer les variantes obsolètes aussi délibérément que de nouvelles sont ajoutées, publier la note de migration, et mesurer la page suivante construire. Un système de conception gagne de la confiance quand la simplification survit à la production, pas quand son catalogue semble complet. Demandez aux ingénieurs et à l'équipe de soutien quelles incohérences leur coûtent du temps; leur réponse identifie souvent la prochaine décision du système plus précisément qu'un audit visuel.

Conclusion éditoriale: Un produit numérique haut de gamme est celui où la même…

Un produit numérique haut de gamme est celui où la même décision produit le même résultat à chaque fois, et où l'utilisateur n'a jamais à penser à l'interface assez longtemps pour se faire une opinion. C'est ce qu'on obtient par la contrainte plutôt que par l'addition, c'est pourquoi les systèmes de conception se sentent austères dans l'examen et généreux dans l'utilisation. La capture d'écran n'est pas le produit.