La valeur d'Axure dans la conception réactive
Je m'interroge simplement sur l'opinion du public plus large sur la valeur de l'utilisation de l'outil prototype Axure lors de la conception d'un site réactif.
J'ai un projet où le livrable est un site réactif. Cependant, je me demande simplement si la conception du site doit être abordée en utilisant Axure pour prototyper le site en premier lieu. Ou passez de fragmentaires et les équipes de développement UX et front-end travaillent en étroite collaboration et en étroite collaboration.
Ma réserve en utilisant d'abord Axure (ou tout autre outil de prototypage) est que vous pouvez faire le contenu, la mise en page et la structure faire ce que vous voulez. Cependant, l'utilisation du balisage HTML entraînerait certaines contraintes et considérations. Ces problèmes ne peuvent pas être entièrement capturés dans un outil de prototypage mais le seraient dans le balisage HTML.
Évidemment, il y a plus d'avantages et d'inconvénients, je voudrais juste entendre ce que vos camarades UXer ont à dire à ce sujet.
Si vous allez créer un site réactif, il est probable que vous utilisiez Twitter Bootstrap ou un autre cadre pour le travail).
Par conséquent, vous pouvez bloquer tous vos prototypes en HTML statique avec Bootstrap CSS/JS dans le. Vous pouvez même brancher les boutons si vous voulez faire un tour, les boutons se chargeant la page statique suivante.
À chaque étape, vous pouvez voir si cela fonctionne sur un vrai navigateur. Ou un vrai téléphone.
Une fois que vous avez tout bloqué avec les polices Bootstrap polices/couleurs/espacement, vous avez en fait quelque chose. Vous savez que vous pouvez le coder et vous savez que vous pouvez le styliser. Vous pouvez également travailler sur le tester avec chaque changement que vous faites, disons que la police fantaisie rompt l'alignement de la zone de saisie, alors vous pouvez étouffer le problème dans l'œuf, ne pas l'avoir là pour vous déclencher plus tard.
De plus, le temps que vous passez à apprendre à faire les choses sur Twitter Bootstrap façon, par exemple, faire fonctionner les modaux, faire en sorte que les formulaires s'alignent correctement n'est pas du temps perdu). loin d'apprendre les trucs utiles.
Ou passez de fragmentaires et les équipes de développement UX et front-end travaillent en étroite collaboration et en étroite collaboration.
Toujours choisissez cette option lorsqu'elle est disponible.
Attendez, laissez-moi reformuler cela.
Choisissez toujours cette option lorsqu'elle est disponible !!!
Voilà, c'est mieux. :)
Le seul moment de ne PAS suivre cette voie est si vous n'avez tout simplement pas de compétences de développeur front-end pour aider. Dans ce cas, bien sûr, quelque chose comme Axure peut vous aider.
Mais le problème avec la conception réactive est qu'il ne prend pas 3 `` conceptions '' distinctes et les fait ensuite fonctionner comme un document HTML, mais plutôt en prenant un document HTML et en faisant fonctionner comme 3 conceptions distinctes.
Les problèmes que je rencontre lorsque j'essaie de traduire des livrables de type PSD ou Axure en HTML réactif est que la personne qui les a assemblés ne comprend tout simplement pas la logique sous-jacente qui va dans le HTML et le CSS. Par exemple, dans PhotoShop, il est facile de retourner l'image et le texte en fonction de la taille de l'écran, mais cela peut ne pas se traduire logiquement en CSS.
Donc, pour répondre à la question: La valeur d'Axure est qu'elle peut aider une équipe UX qui n'a pas de ressources de prototypage frontales internes à communiquer à un client ce qu'une page Web réactive peut ressemble à.
Toutes les réponses ici ont été magnifiquement écrites sur la valeur de l'Axure en matière de conception réactive. J'aimerais aborder l'aspect le plus fondamental de la façon de communiquer votre conception une fois que vous avez compris comment vous voulez que vos wireframes répondent aux différents points d'arrêt (conception réactive) pour lesquels vous avez décidé d'optimiser et voici Axure porter secours.
En tant que développeur, il déploie trop d'efforts pour redimensionner le navigateur à chaque fois, archivez différents navigateurs et versions, différentes plates-formes, etc. ce qui permet de se concentrer moins sur le fonctionnement du prototype et plus sur la conception.
La configuration de vues adaptatives est simple: vous utilisez des points d'arrêt prédéfinis ou les personnalisez vous-même. Vous placez le contenu dans la vue "de base", qui peut être votre vue la plus large ou la plus étroite, selon l'endroit où vous souhaitez commencer.
d'autres points qui me font aller avec Axure
- permet aux concepteurs de créer des prototypes interactifs très avancés rapidement et sans aucune connaissance du codage frontal
- prototypez des sites Web très complexes, des applications iPhone, des applications iPad, 10ftUI (interfaces utilisateur de dix pieds) pour les décodeurs et les téléviseurs connectés
- incroyable collaboration d'équipe
- a un client SVN intégré dans son noyau afin que les membres de l'équipe puissent vérifier les pages et maîtriser les widgets in/out
- Axure exporte au format HTML et peut s'exécuter dans n'importe quel navigateur sans que l'utilisateur final n'ait besoin d'installer une visionneuse spéciale.
- cela rend les tests utilisateur super faciles
- test utilisateur à distance non modéré avec des services comme usertesting.com
L'autre partie de la communication est de reconnaître que vous ne pouvez pas et ne devez pas parfaitement prototyper chaque élément de votre conception. Obtenez les idées principales et commencez à coder. Une fois que cela se produit, tant que vous avez un dialogue ouvert et régulier avec les développeurs, vous pouvez résoudre les nombreux petits problèmes que vous n'avez pas pris en compte dans votre conception ou que vous pensiez plus faciles à mettre en œuvre qu'ils ne l'étaient . Il est souvent beaucoup plus facile de Tweak dans l'environnement de développement que d'essayer de le comprendre dans un outil de prototypage.
À moins que vous n'envisagiez de créer/tester un prototype qui doit être réactif, je recommanderais en fait de ne pas utiliser la fonctionnalité de vues adaptatives intégrée dans Axure 7 - je l'ai trouvé plus frustrant qu'utile. J'ai travaillé sur un site réactif et ce que nous avons retenu comme la meilleure approche est de faire des wireframes plats d'une vue mobile et d'une tablette (768px), puis de passer rapidement à une version HTML réelle avec une création - se concentrer uniquement sur ces 2 tailles nous a permis d'évoluer vers des points d'arrêt plus grands avec l'hypothèse que les plus grandes tailles "s'étireront" essentiellement tout en conservant les proportions (bien que dans certains cas, nous ayons eu besoin d'un ajustement supplémentaire à 1024+).
Les fils plats Axure se sont révélés utiles pour donner un premier sens de la structure. Si vous travaillez dans une petite équipe avec d'excellentes compétences de développeur front-end, vous pouvez probablement ignorer l'étape Axure et passer directement des croquis, mais dans notre cas, nous avons une très grande équipe qui a besoin d'un peu plus de documentation à l'avance et cela sert de bonne référence.
"(...) en utilisant d'abord Axure (...), vous pouvez faire en sorte que le contenu, la mise en page et la structure fassent ce que vous voulez."
En fait, vous pouvez faire ce que vous voulez non seulement dans Axure mais aussi dans un outil comme Sketch, Photoshop ou tout autre outil de conception. Le fait que l'outil n'offre pas les possibilités d'imiter les interactions ne signifie pas qu'elles ne sont pas planifiées/conçues par le concepteur. Simplement, au lieu de créer le prototype cliquable, elle conçoit plusieurs états de l'écran pour représenter l'interaction. Je suppose que c'est encore plus éloigné de la réalité. Axure n'introduit donc pas vraiment de risque supplémentaire dans ce domaine. Et le fait que le concepteur UX conçoive quelque chose qui n'est pas techniquement réalisable est complètement un autre problème - probablement lié à l'un ou aux deux:
- Votre concepteur UX ne comprend pas la plate-forme avec laquelle il travaille. Une formation devrait aider.
- La communication entre UX et d'autres services ne fonctionne pas. Si le concepteur consulte et partage les esquisses initiales avec les développeurs, les problèmes comme celui-ci devraient se produire très souvent.
Enfin, les prototypes cliquables apportent beaucoup de valeur lorsque l'utilisateur teste le produit.
J'utilise également Axure pour les sites Web réactifs. Même si je dois dire que pour simuler le site Web, je ne le recommanderais pas. Cela n'a pas vraiment de sens pour moi de mettre en œuvre toutes les interactions, car le développeur doit le faire de toute façon. Ce que je fais, c'est que je prévois surtout le 960 et certains écrans qui sont plus difficiles j'ajoute une vue mobile. Nous utilisons les wireframes axure (low fi) comme outil de discussion, également avec le client, car il est très rapide de se faire une idée de la page, sans réellement la "concevoir" ou la coder. Lorsque le client accepte la fonctionnalité et le contenu de base, nous le montrons dans la conception réelle. Donc, Axure est pour moi davantage un outil pour démarrer une discussion, sans entrer dans le "j'aime plus le bleu que le rouge". J'adore vraiment l'invision pour le prototypage rapide, car il faut 2 minutes pour faire un prototype, si les conceptions sont prêtes.
Donc: Axure: Wireframes Low fi (Pas de couleur, pas trop conçu), montrer la fonctionnalité et peut-être le contenu. Notez certaines spécificités pour les développeurs.
Invision: Prototypage rapide avec des écrans de conception.
Pour simuler un comportement réactif, je recommanderais toujours un "vrai" prototype comme mentionné précédemment.
J'ai utilisé par exemple gumby pour implémenter une mise en page réactive. Avec la webframe dans axure, vous pouvez facilement inclure du contenu en ligne dans votre prototype axure. Cela dépend de vos besoins, sachez que vous pouvez rencontrer des problèmes en ce qui concerne l'interaction croisée entre une fonctionnalité Axure et javascript.