Comment définir les interactions et les animations de manière extensible?
Toute la question, résumée pour la responsabilité:
- Comment serait-il préférable pour un designer de définir des interfaces utilisateur vraiment complexes?
- Serait-ce une bonne approche pour cartographier le fonctionnement du processus de création mentale en outils?
Un jour, je veux faire un meilleur concepteur d'interface utilisateur pour les applications de bureau que ce qui existe actuellement (c'est un projet à long terme), et j'essaie déjà de recueillir des réflexions sur la possibilité ou non d'avoir un cadre vraiment extensible.
Le principal problème que je vois est que vous devez être en mesure d'itérer entre les abstractions de haut niveau, telles que les interactions entre les composants, et les capacités de bas niveau telles que l'application de flou à une surface semi-transparente. Cela nécessite de bons modèles de la composition d'une interface utilisateur.
Une "animation" peut être n'importe quoi, de l'application d'effets à une image (comme un flou, ou du bruit, etc.) à la traduction d'objets en 3D, à faire éclater la lumière à travers un chemin tout en le remplissant, à tout ce que l'on peut imaginer .
Les interactions sont également complexes. Peut-être que vous ne voulez pas qu'une animation se produise si une autre est en cours, ou si certaines données ne sont pas présentes, etc., ou peut-être simplement déclencher une action sur un événement.
Définir tout cela à partir du code, quel que soit le code, n'est pas idéal. Je veux des avis sur la façon dont une telle chose pourrait être "idéale", ou tout simplement mieux, visuellement, du point de vue d'un concepteur.
En d'autres termes, comment serait l'environnement de conception UI/UX de vos rêves?
(Remarque: ces problèmes s'appliquent également à la conception de sites Web ou de mobiles, donc si vous avez des opinions dans ces domaines, ils sont également les bienvenus).
Mise à jour:
Je vais exposer quelques réflexions que j'ai sur la façon dont cela pourrait être fait.
Tout d'abord, l'un des objectifs est de faire une séparation complète entre le travail du concepteur et le travail du programmeur.
Je pense que l'interface utilisateur et l'expérience utilisateur doivent être prises en compte avant d'écrire toute logique d'application - parfois, en voyant une interface graphique, on peut mieux voir quelles fonctionnalités manquent et lesquelles sont inutiles.
Le concepteur devrait donc être en mesure de créer des interactions complexes dans l'interface utilisateur, même si cette interface n'exécute aucun code. Cela facilite également le débogage de l'interface utilisateur.
Ainsi, une application exposerait une API à l'interface utilisateur, composée de:
- "Actions" (avec ou sans paramètres)
- "Propriétés"
- "Demandes" (c'est-à-dire, fonctions avec paramètres. Les fonctions sans paramètre ressembleront à des propriétés)
Le concepteur disposera également d'outils qui fournissent des sources de données dénuées de sens dans un format personnalisé, afin qu'il/elle puisse lier des données à de "fausses propriétés" sur la configuration de débogage, un peu comme un Lorem Ipsum.
Les propriétés exposées au concepteur ne peuvent être aucun objet - elles seront soit un certain nombre de types de données génériques simples, tels que "Texte" (chaîne), Entier, "Décimal" ou même "Image" (par simple je veux dire = simple pour le concepteur, plus d'informations sur la façon de gérer les problèmes de performances plus tard), des tableaux d'un type simple, ou "données composites", similaires à la notion de Tuples , à regrouper plusieurs types de données ou tableaux.
Cela signifie que le concepteur peut simplement demander les données dont il a besoin ou générer facilement de fausses données à des fins de débogage.
Maintenant, qu'en est-il des performances?
Eh bien, nous savons tous que générer la même image encore et encore coûterait cher, mais le concepteur n'est pas censé y penser trop. Au lieu de cela, la demande répétitive au même élément serait mise en cache par un intermédiaire entre le code d'application (fait par le programmeur) et l'interface utilisateur, dans l'API.
Je pense toujours aux détails d'implémentation de cela, mais cela signifiera qu'un programmeur pourrait dire à l'API appelant la même fonction avec les mêmes paramètres encore et encore générera le même résultat et l'API mettra en cache les résultats de cette fonction intelligemment.
De toute façon cela pourrait être mis en œuvre, il sera transparent pour le concepteur, car c'est l'objectif.
À propos de certains concepts auxquels je pense pour la composition de l'interface utilisateur:
(termes assez explicites)
Surfaces: Composants de base de l'interface utilisateur qui ont des propriétés et une forme, et sont liés à un matériau. Représenté en interne en format vectoriel.
Matériau: Élément partagé dans l'interface utilisateur qui peut définir en un seul endroit le style de plusieurs éléments (tels que les remplissages de dégradé ou de texture, les bordures , ombres portées, etc.).
Composants: Des éléments d'interface utilisateur avec une logique propre, qui pourraient faire des choses plus avancées que les surfaces, comme générer effets de particules , en se reliant à d'autres composants d'une manière mutuellement interactive et même en générant leurs propres sous-composants. Cela rendra certains effets comme un cercle de cercles de "chargement" animé ( comme celui-ci ) plus simple à faire. Ils contiendront un langage de script, peut-être un moteur Javascript.
Effets/Transitions: Ceux-ci sont destinés à être déclenchés par d'autres parties de l'interface utilisateur ou des changements d'état. Des choses comme ButtonFoo.Glow ou PanelBar.MoveToLeft nommé et conçu par le concepteur et regroupé dans un système de type espace de noms.
États: Ils représentent l'état actuel de l'interface utilisateur et peuvent être utilisés par des déclencheurs.
Déclencheurs: Ceux-ci déclenchent certains effets ou transitions.
Conditions: Ce sont des vérifications qui peuvent être attachées aux déclencheurs.
Le concepteur pourra également exposer des données au programmeur, par un système qui ressemble aux propriétés consommées du côté du concepteur.
Je pense que l'utilisateur peut se concentrer sur une chose à la fois: il peut s'agir d'une vue dans la hiérarchie des vues (1), sinon lorsque nous avons plusieurs vues d'interaction en même temps, ces vues devraient être (seront bonnes) indépendantes (2 ). Ainsi, dans le cas (1), l'application peut contrôler la vue actuelle de l'état et, dans le cas (2), l'application n'a pas besoin de synchroniser l'état des vues indépendantes.
Par exemple, le développeur doit implémenter une machine à états finis pilotée par les événements pour traiter l'état de toutes les vues dépendantes ou doit utiliser déclencheurs d'interface utilisateur pour lire les animations.