Design : le choix «logique» pour des prototypes dynamiques et complexes

En tant que concepteur d’expérience pour Conseil en slalom, nous utilisons régulièrement Sketch, InVision, Axure RP et Figma en fonction du projet et des besoins du client. Comprendre quand employer chacun est une décision importante qui peut vous faire gagner du temps, des maux de tête et fournir les résultats nécessaires pour le résultat souhaité.

Mon équipe et moi avons récemment collaboré à un projet utilisant Figma. Il s’agissait d’un prototype conceptuel géant qui comprenait un CRM personnalisé parmi d’autres produits d’entreprise. Figma a été un jeu d’enfant pour collaborer sur l’architecture de l’information et la conception des pages. Ensuite, nous sommes arrivés à la partie où nous testons les interactions lors du prototypage. Repérez les violons.

Ensuite, nous sommes arrivés à la partie où nous testons les interactions lors du prototypage.

Repérez les violons.

Après avoir passé une trentaine de minutes avec mon équipe, nos curseurs sifflant à travers les images, basculant dans et hors du mode prototype, le problème était très clair: Figma n’autorise pas plusieurs états dynamiques pour plusieurs composants simultanément.

Nous avions l’intention d’avoir un contrôleur segmenté pour le contenu dans un cadre qui respecte plusieurs états sur les autres composants de la page. Cela signifie que l’on peut naviguer dans un sous-menu tout en changeant les états des autres éléments en dessous. La seule façon de le faire est de «simuler» avec des superpositions. Si vous n’avez qu’une seule série de composants de taille similaire (c’est-à-dire le contenu à onglets ou la série de cercles ci-dessous), vous pouvez le faire sans problème en échangeant les superpositions avec les cercles suivants (« deux » et « trois »), et en fermant les superpositions lorsque vous cliquez sur « un ». Interagir avec l’exemple ici.

Comme vous pouvez le voir dans l’exemple ci-dessus, le problème est que Figma ne vous permettra pas de contrôler plusieurs superpositions simultanément. C’est mutuellement exclusif. Cela signifie que nous avons dû créer des pages distinctes pour les différents onglets et utiliser des superpositions pour les autres contenus dynamiques ci-dessous pour que les utilisateurs accomplissent leur tâche dans le plan de test des utilisateurs. Que se passe-t-il lorsque vous Trois des ensembles de contenu contrôlé dynamiquement sur une page? Répliquer un hôte de toutes les combinaisons de pages possibles?

Non – vous lancez Axure RP.

Ce que nous voyons dans l’exemple ci-dessus est la capacité d’Axure RP à autoriser toute la gamme des combinaisons potentielles de contenu contenues dans une seule page. Il n’y a pas de duplication d’efforts et vous obtenez une expérience aussi proche de la production que vous allez en avoir.

Cela est possible en utilisant des panneaux dynamiques pour le contenu à onglets et les états de «widget» (ensembles standard de formes et d’interface utilisateur d’Axure) pour les cercles. En outre, vous pouvez voir les états de survol qui font griser les onglets et les cercles, et les états sélectionnés qui rendent le style de police en gras. Interagir avec l’exemple ici.

Utilisation de panneaux dynamiques pour le contenu à onglets

Panneaux dynamiques sont essentiellement des conteneurs de contenu où vous pouvez créer des événements ou des «cas» et faire appel aux panneaux avec certains déclencheurs, comme cliquer sur un bouton (les onglets, dans ce cas).

La compréhension et l’utilisation des panneaux dynamiques sont essentielles pour fournir du contenu dynamique imbriqué tel que du contenu dans des menus, des conteneurs de défilement et des contrôleurs segmentés (onglets).

Vous pouvez même définir des dépendances, mais c’est pour une autre discussion.

Sélectionnez les styles d’interaction pour les onglets et les cercles

Cela signifie pour les cercles que vous créez une widget de cercle avec plusieurs styles comme les couleurs de remplissage et de bordure, les styles de police, la taille, parmi de nombreuses autres possibilités.

Vous pouvez également définir leurs interactions ou actions de déclenchement respectives telles que le chargement de la page, le survol de la souris, les balayages, les glissements / baisses, le focus d’entrée, etc.

La définition de styles d’interaction par des états standard peut être effectuée sans définir de cas ou d’événements. Vous pouvez définir des états par défaut et par événement déclenché si vous le souhaitez.