Contenu
- 1. Le prototypage est essentiel
- 2. Le prototypage à petit prix est possible
- 3. Des outils pour vous faciliter la tâche
- 4. Construisez-le sur un cadre
- 5. Testez vos hypothèses
- 6. Obtenez des commentaires ou rentrez chez vous
- 7. Transition vers interactif et mobile: connaître les conditions d'engagement
- 8. Connaissez votre outil
- 9. Aucun produit n'est fini
- 10. Vous n'êtes pas décroché
Pendant longtemps, la conception Web était très similaire aux mises en page d'impression. Un site pouvait être rempli de contenu dynamique alimenté à partir d'une base de données, mais les systèmes typographiques de base de la grille régissaient la façon dont les sites étaient conçus. Une grande partie de notre navigation était basée sur l'émulation de systèmes physiques tels que des onglets de dossiers ou des pages. Ces conventions nous ont permis de créer des sites rapidement et nous semblions tous penser que tout fonctionnait très bien - et c'était probablement le cas pour la plupart.
Au cours des dernières années, tout est devenu plus intéressant, compliqué et interactif. Des conceptions de site relativement petites aux applications multicouches, toute conception interactive nécessite désormais un nouveau niveau de test rapide, de prototypage et de refonte avant de créer et de lancer un produit final solide. La nécessité pour un concepteur de bien connaître les contraintes et les pouvoirs de la plateforme pour laquelle il conçoit n'a jamais été aussi importante. Ce sont de nouveaux défis pour tout concepteur plongeant dans les eaux de l'interaction, mais c'est là que les choses s'amusent.
1. Le prototypage est essentiel
Le prototypage n'est pas une option. Comme Hemingway était célèbre pour le dire: «Le premier brouillon de quoi que ce soit est de la merde.» Si les tests ou le prototypage ne font pas officiellement partie de votre processus, votre produit final est essentiellement le prototype - et c'est probablement de la merde. Les délais et les budgets peuvent faire sortir la rédaction, l'IA et le prototypage de la mêlée des incontournables. Dans ce cas, trouvez un moyen de tout mettre à l'échelle afin de pouvoir conserver une certaine quantité de tests et de prototypes dans votre projet. Votre client, votre équipe ou vos investisseurs vous remercieront lorsque le retour sur investissement s'envolera.
L'opportunité de bons retours est le résultat de tests internes, d'itérations et de modifications nécessaires et intelligentes d'un site ou d'un produit avant l'expédition au public. Si vous ne faites pas de prototypage, vous montrez que vous êtes prêt à laisser votre public utiliser votre produit comme s'il s'agissait d'un prototype - une expérience qui peut potentiellement nuire à votre marque et à vos objectifs à long terme.
2. Le prototypage à petit prix est possible
Le budget et le temps sont toujours une contrainte, mais si vous travaillez avec peu de ressources, vous avez toujours des options. Un simple prototype d'esquisse au stylo et papier suivi d'une bonne période de questions et de réponses vous aidera beaucoup à comprendre comment l'outil doit être conçu pour votre public.
3. Des outils pour vous faciliter la tâche
Le prototypage rapide est un outil puissamment polyvalent et efficace pour le prototypage - quelque chose que j'ai choisi chez Dan Rubin. Créez un ensemble de compositions visuelles plates (JPG ou PNG) des vues que vous souhaitez tester. Placez ces vues comme arrière-plan du corps> élément. Vous placez ensuite des liens d'ancrage avec des hauteurs et des largeurs fixes sur les zones d'action de la conception en utilisant un positionnement absolu.
Demandez à un utilisateur d'effectuer une tâche spécifique telle que «Rechercher un livre, l'ajouter à votre panier, puis vérifier», puis regardez s'il fait ce que vous attendez de lui. Le seul comportement affiché par les zones de lien est celui par défaut curseur: pointeur au :flotter, mais c'est suffisant pour aider l'utilisateur à passer d'une page à l'autre.
L'intérêt de cette technique est que vous pouvez effectuer des modifications extrêmement rapides dans un document Photoshop et l'exporter à nouveau au format JPG, ainsi que des modifications tout aussi rapides vers des liens positionnés de manière absolue dans le HTML. C'est assez rapide.
Semblable à l'exemple de M. Rubin ci-dessus, Invision App vous offre la possibilité d'utiliser un design de toute fidélité à partir de boîtes de base et de flèches tout au long de mises en page ultra-parfaites au pixel près. L'application vous offre une interface claire et claire pour télécharger ces vues, les nommer, les ordonner, puis dessiner et mapper des liens vers l'une des vues que vous avez téléchargées. Essentiellement, InVision prend le codage interactif de vos mains et vous donne un espace organisé pour garder une trace des versions de prototypes en cours de route.
La simplicité du système a été une grande victoire pour nous chez Zaarly et nous l'utilisons régulièrement, en particulier lors du prototypage de notre application iPhone. Il a été particulièrement important pour nous de réaliser des prototypes pour nos plates-formes mobiles. Les interactions inhérentes à un nouveau type de marché exigent que nous explorions ce qui est disponible dans les conventions d'iOS et, dans certains cas, créent de nouvelles interactions. Nous sommes en mesure de tester et de simuler ces expériences avant d'expédier le produit à un demi-million d'utilisateurs - ce qui nous permet de continuer à expédier souvent, mais avec beaucoup de soin.
InVision a des comptes gratuits et payants pour répondre à vos besoins, et ils ne sont pas seuls sur le bloc.
4. Construisez-le sur un cadre
Si votre outil ou produit est complexe et pourrait être développé de manière plus approfondie, vous pouvez vraiment faire beaucoup de dégâts avec Sencha Touch, ou jQuery Mobile pour les appareils portables, ou Twitter Bootstrap sur le Web. Ceux-ci peuvent en fait être d'excellents outils pour créer une application juste pour voir si elle a de l'influence et de la force dans la communauté avant de devenir fou de créer votre propre HTML et style personnalisés. Un bon exemple de ceci est le 52Network de @ howell qui est une merveilleuse utilisation de Bootstrap piraté.
5. Testez vos hypothèses
Obtenez des analyses et des écouteurs d'événements attachés à votre application. Cela vous permet de surveiller et de tester vos hypothèses et de voir si les utilisateurs agissent comme vous le soupçonniez ou si votre UX doit être ajusté. Google Analytics est très bien, mais quelque chose qui suit plus habilement les cas d'utilisation par utilisateur serait mieux. KISSmetrics est un excellent entonnoir d'outils et de suivi des conversions dans ce domaine.
Une autre option saine consiste simplement à présenter vos créations à des personnes avec des questions simples. Un de mes outils préférés est VerifyApp de Zurb.
6. Obtenez des commentaires ou rentrez chez vous
Le prototypage à tous les niveaux est un ajout puissant à votre ensemble d'outils et souvent un must absolu dans la conception pour le Web interactif et les espaces mobiles. Mais le prototypage n'est pas une fin en soi. Nous prototypons pour tester. Un bon test d'utilisabilité est un art et une science, mais peut également être fait avec un peu de bon sens.
- Choisissez des personnes qui ressemblent à votre public.
- Guidez les gens de manière lâche en leur donnant des tâches globales et non des actions spécifiques sur le site.
- Prenez des notes détaillées et utiles.
- Révisez et testez à nouveau.
7. Transition vers interactif et mobile: connaître les conditions d'engagement
En tant que concepteur Web de longue date, il était toujours courant d'écrire mon propre code frontend, puis lorsque la taille du projet augmentait ou que le codage était plus rigoureux que mes compétences ne pouvaient le supporter, je me suis appuyé sur mes connaissances en codage pour maintenir une communication régulière avec les développeurs sur le projet. Cela s'est toujours avéré utile pour garder la vision de la conception intacte jusqu'à la fin.
La conception pour les plates-formes Web mobile, iOS et Android a été beaucoup plus difficile. L'obstacle des langages de programmation nécessaires pour écrire pour ces plates-formes est sans doute beaucoup plus complexe que HTML / CSS et JavaScript. Ce n'est plus une attente raisonnable pour un concepteur d'être polyvalent à la fois dans la conception visuelle et le code à ce niveau.
Le concepteur a un grand besoin de traduire son travail en utilisant un langage commun entre le concepteur et le développeur. Pour iOS, par exemple, cela signifie comprendre la nomenclature qu'Apple a définie dans ses directives d'interface humaine. Cela implique également de connaître les contraintes et les pouvoirs dont dispose la plate-forme et la manière dont un développeur est susceptible de vouloir élaborer une solution d'interaction qui s'intègre bien à la plate-forme.
La communication devient l'outil le plus important dans une relation concepteur-développeur. Quels éléments sont faciles à mettre en œuvre sur mobile? Quelles sont les choses beaucoup plus difficiles (comme la hauteur de ligne / le début dans les vues iOS natives par exemple)? La clé ici est que les systèmes de développement pour iOS ou Android sont très différents des systèmes de conception Web moderne.
En fin de compte, ces deux artisans devraient être soucieux de la conception, que ce soit visuellement ou en code. Cela crée un lien qui fait de grandes équipes et des produits qui valent leur sel.
8. Connaissez votre outil
Le Web à grande échelle, le Web mobile, Android, iPhone, iPad et autres appareils ont chacun leur propre environnement et culture qui affectent la manière dont la conception de l'interaction doit être considérée. Il existe des conventions selon lesquelles chaque plate-forme ou appareil a intégré à la fois par programmation et par culture, qui dépendent de la vitesse d'Internet, de la portabilité, de la capacité tactile, de l'utilité et du jeu.
Si vous vous efforcez de vous lancer dans le design interactif, copier les styles du travail d’autres designers n’est pas une bonne façon d’entrer. Prenez le temps nécessaire pour rechercher et savoir comment les utilisateurs engagent l'outil pour lequel vous concevez et comme je l'ai mentionné ci-dessus, ne vous fiez pas uniquement à la recherche ou à l'intuition - testez et prototypez!
9. Aucun produit n'est fini
J'ai récemment dirigé une petite boutique en ligne produisant du travail pour des clients qui avaient le budget et la prévoyance pour nous payer pour une seule fois sur un projet. Le mieux que nous puissions faire pour ces clients, c'est ce que je pensais à l'époque, était de les impliquer dans les meilleures recherches et les meilleurs tests de pré-lancement pour lesquels nous pouvions obtenir le budget, utiliser une excellente intuition de conception, puis lancer et prier pour un excellent retour sur investissement. .
Alors que je commence à m'aventurer dans la conception de produits, je me rends compte chaque jour plus que le produit n'est jamais complet. Il y a toujours des tests à faire, des personnes à qui obtenir des commentaires et de nouvelles et meilleures façons de prototyper et de concevoir.
Si vous ne faites pas partie d'une équipe produit, il existe toujours des moyens d'engager vos clients avec ces outils. Pensez à établir un calendrier de test avec vos clients tous les trois mois pendant un an après le lancement. Définissez des objectifs spécifiques avec vos clients, puis aidez à peaufiner le site ou le produit pour atteindre ces objectifs et améliorer leur retour sur investissement. Étant donné l'opportunité d'augmenter leurs revenus, je ne peux pas penser à un client qui ne l'envisagerait pas.
10. Vous n'êtes pas décroché
Si vous vous éloignez de cette pensée que vos sites ne nécessitent pas de prototypage ou une compréhension plus rigoureuse des plates-formes pour lesquelles vous concevez, vous vous trompez mal. Le monde du contenu sur le Web devient polyvalent. Ce sera le contenu mobile, tablette, et dynamiquement libre et interactif qui l'emportera sur le site statique.
