Le design UX est une discipline fascinante, et pour y travailler correctement, ceux qui la pratiquent doivent connaître différents sujets et compétences. Pour mettre en pratique une méthodologie de conception centrée sur l'utilisateur et créer des solutions innovantes et conviviales aux défis quotidiens de conception de produits, un praticien UX doit créer et comprendre tout, du dessin de base au récit en psychologie cognitive.
Il existe une grande variété d'outils qui peuvent être utilisés, des artefacts générés et des découvertes en cours Conception UX , et sont capturés dans une variété de documents. Et le plus connu, quelque chose d'usage quotidien pour les designers, est le bon vieux wireframe.
Un ensemble de wireframes pour une application mobile
(Par Sunzby )
Les wireframes - généralement des structures de conception monochromes créées pour une évaluation rapide - sont excellentes. Ils nous aident à traduire les contributions de nombreux côtés indépendants en un seul document que tout le monde peut consulter. De nombreuses fonctions de travail différentes évaluent les wireframes; les analystes commerciaux, les chefs de projet, les responsables marketing et toutes sortes de concepteurs et développeurs, spécialistes du marketing et fournisseurs de services, même le public cible lors des tests de produits. Le wireframe aide chacun à voir comment ses besoins individuels seront traités et donne à toute l'équipe une chance de travailler sur les détails avant d'approfondir le projet.
Il y a des avantages et des inconvénients, mais dans certains cas, il est logique de sauter toute l'étape du wireframe. Beaucoup de temps pourrait être économisé si nous livrions la conception UX et visuelle à un niveau de haute fidélité directement après l'étape de découverte. Cela donnerait à beaucoup d'autres la possibilité d'évaluer la fonctionnalité et la façon dont le produit se sent et ressemble en même temps, des participants aux tests utilisateurs aux clients et collègues.
Voyons pourquoi les wireframes peuvent parfois être problématiques, quand il est logique de ne pas les créer, et comment adapter un processus sans wireframes à un processus de travail.
Le problème des wireframes
Que ce soit dans un environnement agile ou semblable à une cascade, le processus de conception typique comprend des phases de recherche, de définition, d'idéation, de prototypage, de test et de mise en service, ainsi que de nombreux autres points clés à examiner avec les parties prenantes en cours de route.
préparer un plan comptableVotre processus de conception comprend probablement ces phases.
(Grâce à Groupe Nielsen Norman )
Examinons le processus de conception pour des exemples de cas où les wireframes peuvent être un goulot d'étranglement:
Raison 1: les clients ne comprennent pas ce qu'ils regardent
Le processus de conception commence généralement par une sorte d'enquête sur le problème. La recherche documentaire, les entretiens avec les parties prenantes et les entretiens avec les utilisateurs sont quelques-unes des activités qui pourraient se produire dans le processus de conception pour acquérir une compréhension plus approfondie du projet. Après avoir effectué des recherches, l'équipe de conception commence à évaluer un certain nombre d'idées et de concepts pour trouver la meilleure solution.
Lorsqu'un concept reçoit plus de substance, l'équipe de conception partagera une série de wireframes avec le client lors d'une session de révision.
Le problème est que les wireframes sont très abstraits.
Ils les décrivent comme quelque chose qui c'est presque le design lui-même, mais pas exactement la conception à développer. A ce stade, les wireframes ne contiendront que des images ou des éléments de référence de toutes sortes à venir, par arrangement uniquement, et des choses à définir, comme dans l'exemple ci-dessous.
Il y a probablement des détails sur les fonctionnalités, les exigences métier et la façon dont les erreurs sont gérées qui seront détaillés dans une grande liste d'annotations. En règle générale, il y aura suffisamment de temps pour peaufiner ces choses en détail, afin que le client puisse les lire par lui-même.
Lors des revues filaires, nous demandons à nos clients de se concentrer sur le concept décrit et d'évaluer s'il semble résoudre ou non un problème utilisateur et métier. Les clients veulent savoir s'il s'agit de la 'version finale' ou s'ils peuvent voir des exemples de photos qui seront vues dans le héros , ou une autre question sur quelque chose qui sera traité pendant la phase de conception visuelle ou de développement.
Les wireframes peuvent être très abstraits pour les clients et même les parties prenantes internes afin qu'ils puissent les évaluer efficacement. Les wireframes indiquent aux gens à quoi ressemblera un design une fois terminé, mais ils doivent encore faire beaucoup de travail mental pour le comprendre dans leur tête. Nos clients peuvent ou non être des penseurs visuels, et il serait trop attendre d'eux lorsqu'ils regardent un plan et imaginent un site ou un produit réussi.
Peu de clients ont spécifiquement demandé d'examiner les conceptions visuelles commentées, car il leur est tellement plus facile de relier les points, d'avoir des discussions plus réfléchies et de donner des retours plus importants.
Raison 2: ils ne sont pas toujours bons pour les tests utilisateur
Espérons que les tests utilisateurs ont été planifiés à l'avance, car c'est un bon moyen de s'assurer de la viabilité de l'ensemble du concept à un niveau de détail à afficher dans une transaction.
Un moyen typique de tester ces éléments est le prototypage.
Les wireframes peuvent et fonctionnent pour le prototypage. L'équipe de conception se limite à tester uniquement le flux et, comme elle ne possède pas de couche de conception visuelle, les styles visuels affectant le comportement de l'utilisateur peuvent être facilement ignorés.
Est-ce le meilleur? La conception UX, visuelle et textuelle a des impacts les uns sur les autres. Il est difficile de les séparer et de les isoler dans un environnement de test. Et à l'instar d'une étude scientifique, les résultats d'une fonction testée isolément ne peuvent pas contrôler - ni prédire comment - elle se comportera à l'extérieur.
Parfois, il est plus efficace de tester toutes ces choses de manière holistique.
Le point ici est: Un produit ou service multilingue. Les langues peuvent avoir une grammaire, des alphabets et des largeurs de caractères différents qui pourraient avoir un impact sur la conception globale.
De plus, comme le copie ou que le contenu du texte affecte l'UX, la traduction elle-même pourrait également affecter l'UX.
Par exemple, nous avons eu une tâche où nous devions tester certaines architectures d'information en raison de la façon dont différents concepts devaient être expliqués dans la langue locale. Nous n'aurions pas réalisé l'impact du contenu et de la traduction sans tester le contenu lui-même dans l'interface utilisateur.
javascript design patterns questions d'entretien
Nous avons réalisé que plus de mots étaient nécessaires pour décrire des concepts similaires dans la langue locale, et nous avons dû modifier la taille et la forme des boutons à l'échelle mondiale pour s'adapter à ce que certains verbes exigeaient dans cette langue. Si nous n'avions rencontré aucun problème dans le texte lors du test des composants visuels dans l'interface utilisateur, nous n'aurions pas découvert que les boutons devaient occuper toute la largeur de l'écran mobile, ce qui a eu un impact sur la conception UX à partir de là.
Point important: il serait judicieux de préparer des interfaces utilisateur haute fidélité à partir de zéro, en particulier pour un projet multilingue.
Raison 3: Ils font vivre les développeurs et faire un enfer du QA
Ce qui se passe inévitablement pendant la phase de conception visuelle, c'est que tout bouge. Les images empilées deviennent des mosaïques. Le texte centré devient aligné à gauche. Quelles étaient les icônes avec un effet d'accordéon étaient + et -, mais maintenant ce sont quelques modèles.
C'est une partie normale de la aspect visuel . Ce qui est également courant, c'est que tout changement dans la conception visuelle ne sera pas reflété dans les wireframes car les wireframes ont déjà été «signés».
Lorsque tous les visuels sont approuvés, il est temps de tout envoyer aux développeurs. Dans de nombreux cas, ils recevront une variété de détails, des wireframes annotés et une collection de beaux designs visuels avec des guides de style. C'est maintenant à votre tour de croiser ces deux documents et de leur donner vie.
C'est un domaine où le processus de conception peut vraiment échouer. Nous donnons aux développeurs trop de documents auxquels se référer et leur laissons le soin de déterminer les informations qui ont préséance. Cela augmente le temps nécessaire aux appels de sauvegarde et au contrôle qualité, ce qui a naturellement un impact sur le temps nécessaire pour qu'un produit soit lancé ou mis à jour sur le marché.
Pourquoi ne pas donner le développeurs un seul document correct qui comprend tout? De nombreux clients apprécieraient également une copie à utiliser comme référence complète à l'œuvre.
La solution: ignorer les wireframes
De toute évidence, il y a des moments où une phase filaire entière est nécessaire, mais il y a d'autres moments où ce n'est pas nécessaire. Il y a même des moments où passer directement à quelque chose de hi-fi l'emporte sur la phase filaire en général.
Vous pouvez donc envisager de sauter la phase filaire si l'une de ces conditions s'applique:
Un matériau de référence solide est en place.
différence entre c et s corporation
Jetez un œil aux travaux existants. Des références détaillées peuvent déjà être disponibles sur l'interface utilisateur. Si vous mettez à jour un site Web existant ou ajoutez de nouvelles fonctionnalités à une application existante, consultez le site Web ou l'application actuel pour trouver des modèles et des styles à réutiliser.
Ce serait encore mieux si vous aviez accès aux fichiers source du travail existant. Certaines fonctionnalités et certains éléments peuvent avoir été perdus, pour ainsi dire, pendant la phase de développement, et vous pouvez revenir à l'archive d'origine pour voir ce que la fonctionnalité aurait dû faire.
Pour ajouter à un produit ou site existant (ou à son absence), vérifiez s'il existe un guide de style ou une bibliothèque de modèles en place. Le client aurait pu auparavant payer pour certains travaux de conception de la marque ou du visuel, et ces ressources pourraient être réutilisées dans votre projet.
Utilisez tous les styles et modèles que vous pouvez trouver pour que les résultats hi-fi que vous produisez soient aussi précis que possible.
Vous avez programmé de nombreux prototypes et tests interactifs en cours de route.
Épargnez-vous l'effort grâce à des semaines de prototypage et de test. Si vous avez bien créé vos documents du premier coup et que vous avez utilisé intelligemment des styles, des motifs et des symboles répétés, vous pouvez facilement effectuer de grandes mises à jour haute fidélité et les publier dans votre flux de travail de prototypage. Il n'y a pas besoin de wireframe.
En prime, vous pouvez faire d'une pierre deux coups. Vous pouvez recevoir des retours visuels et d'interface utilisateur avec des retours UX et effectuer toutes ces modifications en une seule fois.
Les participants à vos tests sont très littéraux.
Tout comme vos clients et collègues peuvent parfois avoir besoin d'exemples concrets, votre public cible le peut aussi.
Un projet récent m'a amené à concevoir des présentoirs financiers pour un public cible peu alphabétisé. La compréhension de la lecture n'était pas le seul problème - les concepts abstraits étaient souvent difficiles à comprendre. Ce public cible avait généralement besoin de discuter des concepts financiers à l'aide d'exemples concrets; sinon, ils ne pourraient pas vraiment suivre la conversation.
Pour comprendre les concepts financiers, les testeurs de ce public devaient sentir qu'ils effectuaient réellement une transaction. Et pour comprendre comment le produit fonctionnait, il devait ressembler et se sentir comme une vraie application.
Oubliez les wireframes pour un public comme celui-ci! Vous finirez par passer plus de temps à expliquer ce qu'ils sont - et votre public ne sera pas en mesure de se concentrer sur les tâches spécifiques, ou ce qu'il devrait ressentir à leur sujet, car ils ne peuvent pas penser à utiliser quelque chose d'aussi inconnu que les wireframes dans leur vies.
Votre client a un temps / budget limité.
Il est rare d'avoir le temps, les ressources et le budget entièrement en votre faveur. Vous pouvez généralement vous retrouver à essayer de réduire la portée et le prix, ou à mélanger les choses pour voir comment vous pouvez ajuster et économiser tout en offrant un excellent service à votre client.
Si vous avez un client qui ne peut pas se permettre (ou n'achètera probablement pas) un processus UX complet, pourriez-vous suggérer de réduire le temps de processus wireframe? Créez-en en interne si nécessaire, mais continuez à faire avancer le projet pour votre client. Essayez des designs réels et tangibles et laissez votre client réagir au travail réel.
quel langage de programmation utilise windows
Comment éliminer la phase des wireframes
Cette partie est principalement subjective, car elle dépend de votre processus de travail personnel et des besoins spécifiques de votre client.
Cela dit, il s'agit d'un processus de type «modèle» que vous pourriez essayer d'adapter à votre processus de travail, puis modifier au fur et à mesure que vous vous exercez de cette manière.
Étape 1: Commencez par votre processus habituel d'investigation et de découverte.
Entretiens, travail sur le terrain, recherche documentaire, analyse concurrentielle - quoi que vous fassiez (ou envisagez de faire) normalement, terminez cette phase comme vous le feriez normalement.
Étape 2: Dessinez un peu.
Au fur et à mesure de vos recherches, vous trouverez probablement des idées de mises en page et de modèles utiles, de flux intéressants, etc. Enregistrez ces idées comme vous le faites normalement. Je préfère faire des croquis dans mon cahier avec des notes écrites. Vous préférerez peut-être dessiner sur un tableau blanc ou prendre des captures d'écran des modèles d'interface utilisateur existants. Tout ce qui vous aide à vous souvenir des bonnes idées, faites-le.
(Pour Miklos Philips )
Étape 3: Préparez votre document hi-fi.
Ouvrez votre outil de mise en page préféré et organisez votre document de manière appropriée. Choisissez quelques tailles de canevas et commencez à créer des formes, des groupes et des symboles répétitifs.
Prenez le temps d'enregistrer les couleurs de la marque sous forme d'échantillons individuels, créez et organisez des styles de texte et assurez-vous de créer des ombres et des filtres standard que vous pouvez appliquer à autant de formes que nécessaire.
Passez beaucoup de temps à ajuster vos symboles. Vous pourriez avoir un bouton qui, selon son état, pourrait avoir quatre couleurs différentes. Assurez-vous d'utiliser le remplacement des symboles - si vous le pouvez - afin de pouvoir facilement appliquer différentes couleurs et étiquettes de texte lorsque vous en avez besoin.
Si des icônes personnalisées sont utilisées, enregistrez-les en tant que symboles individuels sur un canevas rectangulaire (ou quelle que soit la forme appropriée). De cette façon, il vous sera facile de les agrandir ou de réduire tout en conservant un espace et un alignement appropriés.
Étape 4: Commencez à concevoir.
Votre premier tour pourrait être un peu difficile car vous vous habituerez à travailler de cette façon et à voir jusqu'où le guide de style va (et où il ne le fait pas). En plus de créer des solutions pour des motifs qui n'ont pas encore de style défini, vous pouvez vous attendre à apporter de nombreuses modifications pour obtenir les styles parfaits.
Grâce à ce processus, optez pour une bonne 'adresse de contenu', ou du contenu réel si vous l'avez. Ne croyez pas les titres qui disent: 'Le titre de la page va ici'. Donnez au spectateur une idée de ce il y aurait là si c'était réel.
De même, ne créez pas une liste de noms où tout le monde est John Smith avec un numéro de téléphone 555-1212. Utilisez un générateur aléatoire ou un plug-in pour avoir différents noms et numéros, ou créez la liste des données que vous devez afficher. Cela peut sembler beaucoup de travail, mais cela vous permettra de résoudre des problèmes de largeur de caractère, et cela aidera l'utilisateur à comprendre que ces cinq champs à remplir sont différents.
(Gracieuseté de Plugin artisanal Oui Tethr modèle pour InVision Sketch)
Étape 5: Sachez quand arrêter la conception.
Il y a certains détails sur lesquels vous ne devriez pas vous concentrer à ce stade, car ils prennent vraiment trop de temps. Peut-être que c'est choisir l'image exacte pour un héros ou concevez une icône personnalisée pour indiquer l'état du téléchargement. Ce sont des cas où vous pouvez choisir d'utiliser une image ou une icône de référence et tester des images réelles ou une iconographie par la suite.
Vous devrez décider de ce qui est approprié ici, car cela dépendra des objectifs du projet, et aussi de son avancement.
Notez que cela dépendra de ce dont les participants au test auront besoin pour évaluer correctement le travail. Pour le public peu alphabétisé dont j'ai parlé plus tôt, rien n'était trop détaillé. Pour chaque participant, j'ai fait une variante du prototype avec son vrai nom et son numéro de téléphone qui a été utilisé via l'application pour leur donner un sens de la réalité. Moins ils avaient à assumer, plus il leur était facile de suivre le courant, et les résultats étaient encore meilleurs.
Étape 6: Profitez de résultats de test et de retours de haute qualité.
Publiez vos conceptions dans votre outil de prototypage préféré et apportez-les sur le terrain pour les tester. Désormais, vous pouvez obtenir des retours sur plus que de simples fonctionnalités, vous pouvez découvrir des problèmes potentiels au niveau visuel, tels que des problèmes de contraste de couleur ou de lisibilité, et vous pouvez découvrir des problèmes de direction ou de traduction du contenu. Vous pouvez également susciter des sentiments positifs ou négatifs que les utilisateurs peuvent avoir sur l'apparence et la sensation du produit ou de la marque.
(Pour Igor Ivancovic )
Ce sont des choses sur lesquelles vous allez probablement être remboursé de toute façon lorsque vous arrivez à la phase de conception visuelle, alors pourquoi ne pas obtenir un remboursement maintenant? Certains de ces retours visuels pourraient affecter directement l'UX, et vice versa, il est donc bon de travailler ensemble si possible.
Conclusions
Sans aucun doute, il existe de nombreux cas où une phase entière de wireframes sera nécessaire à la réussite du projet. Une conception complexe, comme une application Web réactive, nécessite des wireframes distincts dédiés spécifiquement à cela. Cela vous fera économiser de l'argent et du temps pour travailler sur toutes les exigences commerciales, les cas limites et la gestion des erreurs dans la phase filaire, plutôt que de le faire dans une étape visuelle qui a déjà été conceptualisée et appliquée.
Cependant, dans les bons cas, passer directement à la conception haute fidélité peut améliorer votre processus:
-
Améliorer le rendement des actionnaires . Les clients, les développeurs, les autres concepteurs et les testeurs du public cible peuvent voir exactement ce qu'ils vont obtenir, ce qui leur permet de donner des commentaires de haute qualité.
-
Rationalisez votre prototypage dans le processus de travail . Non seulement vos conceptions seront prêtes à être testées, mais vous pourrez également obtenir des retours sur un grand nombre de choses en même temps: UX, contenu et visuels.
qu'est-ce qu'un tableau de tendance
-
Livrer un document aux clients et développeurs . Éliminez le besoin de renvoyer et d'afficher une variété de documents pour comprendre comment un bouton doit fonctionner. C'est également un excellent moyen pour votre client de discuter du travail ou du projet avec les parties prenantes internes et de vous donner encore plus de commentaires.
-
* Économisez du temps et de l'argent . C'est toujours une bonne chose!
Essayez d'essayer cette méthode la prochaine fois que vous avez un projet où vous avez des matériaux de conception existants à consulter, ou où cela ferait une grande différence pour votre public cible si le projet est de faible ou haute qualité.
