Contenu
- Une méthodologie réactive
- Comment conserver le contenu en premier?
- Pourquoi?
- 01. Définissez vos objectifs commerciaux et utilisateurs
- 02. Référencez-les chaque fois que vous en avez l'occasion
- 03. N'ayez pas peur de repousser
- 04. Poussez aussi votre propre équipe
- 05. Définissez dès le départ tous vos besoins en contenu
- Comment puis-je résumer le contenu de la présentation?
- Il faut arrêter de penser au contenu en termes de mise en page
- Forcer vos clients à planifier leur contenu indépendamment de la conception
- Finalisez votre contenu avant la conception
- Utilisez du contenu réel - à chaque fois
- Alors, comment fonctionnent les wireframes pour les projets de conception réactive?
- Esquisser
- Cadre intégré au navigateur
- Annotations
- Utilisez du contenu réel dans des wireframes
- Comment concevoir d'abord pour les petits écrans?
- Dessins abstraits à partir d'appareils au début
- Utiliser des tuiles de style
- Créer une harmonie d'interface
- Tout afficher dans le navigateur
- Trouvez un équilibre avec des programmes statiques
- Conclusion
Soyons clairs: le design n’est la solution que s’il se concentre sur les problèmes les plus profonds, le pourquoi de tout. Un processus solide devrait toujours guider notre travail, mais nous devons adopter quelque chose de plus flexible. Notre médium a enfin prouvé qu'il était fluide, notre processus ne devrait-il pas l'être? Pensez à la conception du système: vous devez voir à la fois l'image entière et les petits détails. Impossible? Loin de là!
Frank Chimero l'exprime magnifiquement dans son livre The Shape of Design: «Il y a une partie où l'artiste se retire du chevalet pour acquérir une nouvelle perspective sur l'œuvre. La peinture est à parts égales de près et de loin: de près, l'artiste travaille dur pour faire sa marque; loin, il évalue l'œuvre pour en analyser les qualités. Il recule pour laisser le travail lui parler.
Nous devons laisser notre travail, notre médium, nous parler. Avec l'essor du responsive design, nous adoptons enfin notre médium tel qu'il était censé être: fluide. C'est le moment idéal pour prendre du recul et évaluer le travail, analyser et adopter une nouvelle façon de faire les choses, un nouveau processus. Fini le temps des maquettes statiques et des concepteurs Web qui ne comprennent pas le code. Il est temps pour un processus réactif.
Une méthodologie réactive
Nous allons révéler le grand secret d'un processus solide dès le début de cet article. Parce que nous sommes fous comme ça. Prêt? Un processus réactif est un processus responsable. Vague? Peut-être. Bête? Non. Tout comme le mouvement des normes Web qui l'a précédé, la conception réactive fait avancer le Web avec des méthodes d'avenir.
Comme tout processus de conception, il doit se concentrer sur le «pourquoi» derrière tout cela. Alors pourquoi existe-t-il des sites Web? Pour livrer du contenu. Cela peut être basé sur des tâches, social, informatif… cela n’a pas d’importance. Tout se résume à ceci: commencez par le pourquoi, le contenu bien structuré et les interactions qui comptent.
Voici les questions que nous entendons le plus souvent sur notre processus de conception réactive.
Comment conserver le contenu en premier?
Nous sommes tous tellement optimistes au début d’un projet. "Le contenu d'abord!" nous disons. «Les objectifs des utilisateurs! Souvenez-vous de ce qui est important! » C'est vrai. Mais qu'est-ce que ça veut dire? Comment mettre en œuvre un processus axé sur le contenu?
Même si vous savez (ou pensez savoir), il est facile de l’oublier au fur et à mesure qu’un projet progresse. Les projets à long terme ont tendance à s'éterniser (et encore… et encore…). Nous arrêtons de penser au pourquoi et commençons à nous concentrer sur le comment. Nous nous trompons en pensant que nos projets peuvent être divisés en phases distinctes de «découverte» et de «développement» qui peuvent exister indépendamment.
La vérité est que nous devons continuer à nous demander pourquoi, tout le temps. Peu importe ce que vous pensez savoir, quelle que soit la planification que vous avez effectuée - chaque fois que vous prenez une décision, chaque fois que vous concevez un bouton ou écrivez un titre, vous devez demander…
Pourquoi?
Pourquoi je fais ça? C'est pour qui? Quel objectif commercial aidera-t-il mon client à atteindre? À quel besoin cela aidera-t-il mes utilisateurs à répondre? Ne gardez pas simplement le contenu en premier. Gardez d'abord le pourquoi.
Cela rend les choses faciles. Mais pour bien le faire, vous allez devoir pousser. Poussez vos clients et votre équipe à définir d'abord leurs pourquoi. Non Lorem Ipsum, non «nous y reviendrons plus tard». Fais tes devoirs! Tous vos explications doivent commencer par un pourquoi. Chez Yellow Pencil, cela a entraîné de grands changements dans la façon dont nous présentons, estimons, budgétisons et planifions les projets. Nous avons dû insister sur le budget et le temps nécessaires pour mener des recherches, une stratégie et une planification solides. Vous pourriez aussi. Mais une fois que vos clients et vos équipes voient les énormes avantages de la définition immédiate des besoins en contenu, ils ne se retourneront jamais en arrière.
Et c'est notre travail de les éduquer. (Lisez l'excellent livre de Mike Monteiro, Design is a Job, si vous voulez en savoir plus sur les relations avec les clients.) Les clients peuvent avoir du mal à comprendre la valeur de toutes ces recherches et de travailler dès le départ. Et pourquoi devraient-ils? Ils n’obtiennent rien de «fini» à la fin - et trop souvent, ils n’obtiennent qu’une facture et un gros document Word.
Ce n’est pas leur faute, c’est notre faute. Il est de notre responsabilité de mieux démontrer cette valeur. À chaque étape du processus, nous devons ramener tout cela au pourquoi le plus important.
Ceci est particulièrement important pour la conception réactive. Un site Web réactif ne nécessite pas beaucoup plus d'efforts de développement, mais cela signifie beaucoup plus de planification. En réalité, c’est une planification que nous aurions dû faire depuis le début. Soyez témoin du cycle de projet actuel de refonte tous les trois ans. Voulez-vous continuer à faire ça? Nous ne le sommes certainement pas.
Voici donc trois étapes pour conserver le contenu en premier dans le processus de votre projet.
01. Définissez vos objectifs commerciaux et utilisateurs
Établissez une liste hiérarchisée des objectifs commerciaux et utilisateurs pour votre projet. Qu'est-ce que vos utilisateurs veulent le plus savoir ou faire? Faire votre recherche. Faites des inférences éclairées, pas des suppositions sauvages. Faites en sorte que toutes vos parties prenantes soient d'accord.
02. Référencez-les chaque fois que vous en avez l'occasion
Chaque fois que vous prenez une décision, chaque fois que quelqu'un propose une nouvelle fonctionnalité ou un nouvel élément de conception, ou une page de contenu, demandez-lui de faire correspondre la demande à un objectif commercial et utilisateur. À quel réel besoin cette fonctionnalité répondra-t-elle? Quelle est la vraie raison? (Indice: "Parce que je veux" ou "J'aime vraiment le bleu" ou "tout le monde sur Facebook" ne compte pas.)
03. N'ayez pas peur de repousser
Cela peut être difficile. Les relations avec les clients peuvent être délicates et il peut être tentant d'abandonner la bataille pour gagner la guerre. Mais rappelez-vous, nous sommes tous dans le même bateau! Ce n’est pas l’entreprise contre l’utilisateur; nous contre eux.
Répondre aux besoins des utilisateurs est le meilleur moyen de répondre aux besoins de l'entreprise. Parce que sans nos utilisateurs, nous n’avons pas d’entreprise! Les clients (bons clients) ne vous engagent pas pour dire «oui» à tout. Donc, si votre client demande quelque chose qui ne répond pas à ses objectifs ou aux besoins de ses utilisateurs, n’ayez pas peur de le défier. Ce n’est pas une question d’ego. Il s’agit de créer la meilleure solution possible.
04. Poussez aussi votre propre équipe
Cela peut également être un défi lorsque vous travaillez au sein d'une équipe créative. La séparation des rôles - conception visuelle, expérience utilisateur, architecture de l'information, stratégie de contenu, production de contenu - peut conduire à une mauvaise communication. Nous sommes occupés, nous sommes submergés de courriels. Il est difficile de rester avec un projet du début à la fin, surtout une fois que «votre» travail est terminé.
La relation de votre équipe est au moins aussi importante que votre relation client. Nous devons nous rappeler le pourquoi, tout comme nous le faisons pour nos clients. La collaboration est essentielle. Vous ne pouvez pas simplement «transmettre» un plan de contenu, des wireframes ou des conceptions. Autant que possible, nous devons travailler main dans la main. Il est facile de «terminer» un livrable et de passer à autre chose. Il est beaucoup plus difficile de rester avec un projet lorsque les choses se compliquent.
Une approche en cascade du travail créatif ne fonctionne tout simplement pas. Un travail agile et collaboratif entre les membres de l'équipe permet d'obtenir de meilleurs résultats.
05. Définissez dès le départ tous vos besoins en contenu
Voici le problème: les sites Web réactifs prennent plus de temps à planifier. Nous ne prévoyons plus uniquement un contexte unique. Nous prévoyons tous les contextes que nous connaissons actuellement, et certains qui n'existent pas encore.
Mais il faut beaucoup moins de temps pour planifier toutes ces complexités à l’avance que pour revenir en arrière et mettre à niveau des fonctionnalités et des fonctions dont vous n’aviez pas tenu compte. Alors passez le temps / l'effort / le budget. Forcez vos clients et votre équipe à définir (et à s'engager!) Tout leur contenu avant de vous lancer dans la conception. Utilisez des tableaux de pages. Utilisez du contenu structuré. Protégez votre contenu dès maintenant! Ou pleurer plus tard.
Comment puis-je résumer le contenu de la présentation?
Vous entendez souvent cela dans Internet-o-Sphere. Mais attendez quoi? Et attendez - pourquoi?
Parce que la présentation peut (et va) changer. La façon dont nous avons conçu les sites Web il y a 15 ans est presque méconnaissable de la façon dont nous les présentons maintenant. Mais savez-vous ce qui n’a pas changé? Mots. Nous les utilisons toujours. Internet existe principalement pour le contenu (textuel). Nous l'utilisons toujours pour résoudre des problèmes d'information; pour accomplir des tâches. Mais si votre contenu dépend d'un moyen de présentation (pages d'introduction Flash, n'importe qui?), Il y a de fortes chances qu'il ne soit plus utilisable dans quelques années. Et ça craint.
Il faut arrêter de penser au contenu en termes de mise en page
Nous (en tant qu'industrie) avons formé nos clients à penser le contenu en termes de mise en page. «Mettez-le dans la barre latérale», disons-nous. "Cela devrait aller dans le pied de page." Arrêter! Arrête ça. Arrêter. Ce n’est pas une question de localisation. C'est une question de priorité. Quel est le contenu le plus important pour vos utilisateurs? Parce que devinez quoi: la mise en page change selon les contextes. Il n'y aura (probablement) pas de barre latérale sur votre conception sur petit écran.
Le super menu géant que veut votre client? Je ne vais pas voler sur un iPhone.
Forcer vos clients à planifier leur contenu indépendamment de la conception
D'accord, vous n'êtes pas obligé de les forcer. Encourage les. Encouragez fortement. Les tableaux de pages sont parfaits pour cela. Si vous ne l’avez pas encore lu, passez immédiatement à la stratégie de contenu pour le Web de Kristina Halvorson et Melissa Rach pour plus d’informations sur la façon de les créer. Organisez-les par ordre de priorité. Ne faites pas référence à l'emplacement ou à la mise en page. Cela aidera vos clients à réfléchir à leur contenu de manière plus productive, et fera également avancer le processus de création de contenu, avant la finalisation des wireframes ou de la conception.
Finalisez votre contenu avant la conception
D'accord, ce n'est pas toujours possible. Mais plus vous pourrez éliminer l'incertitude avant de commencer à concevoir, moins vous devrez revenir en arrière et changer les choses plus tard.
Utilisez du contenu réel - à chaque fois
Si possible, utilisez le contenu de cas de bord - montrez à vos clients les pages, les images et les menus les plus compliqués. Cela évitera les surprises plus tard dans le processus, lorsqu'ils verront leur contenu le plus désordonné dans le produit fini.
Les wireframes fonctionnels intégrés au navigateur font toute la différence. Permettez à vos clients d'observer leur contenu se déplacer et changer sur une gamme de tailles d'écran. Faites-leur remarquer lorsque vous présentez vos wireframes (vous faites des présentations en personne, n'est-ce pas?). Montrez-leur comment la priorité de leurs informations reste la même dans toutes les tailles d'écran, tandis que la mise en page change.
Alors, comment fonctionnent les wireframes pour les projets de conception réactive?
Nous sommes convaincus que la conception d'interaction pour RWD doit entrer dans le navigateur rapidement et souvent. Il est pratiquement impossible de créer un document statique qui décrira tout. Bien sûr, nous pourrions créer un document qui présente trois, quatre ou cinq points de rupture, mais ce n’est qu’une fraction de l’histoire. Qu'en est-il de tous les moments entre les points d'arrêt? Cela se produit dans le navigateur.
Esquisser
Néanmoins, il est bon de pouvoir rapidement esquisser vos idées en collaboration. Cela n’a pas besoin de se produire sur un support en particulier, mais il y a juste quelque chose à propos du crayon sur papier. Le but ici est de faire sortir les idées rapidement et de manière itérative. Nous adorons faire des croquis chaque fois que possible, et il existe même une application pour cela: UI Sketcher.
Cadre intégré au navigateur
Voici le vrai ticket pour nous. Nous aimons réutiliser les modèles et les systèmes lors de la démonstration de RWD dans le navigateur. Bien sûr, nous pourrions créer notre propre système à partir de zéro à chaque fois, mais cela ne nous aide ni nous ni nos clients.
Nous aimons également utiliser des cadres de prototypage réactifs rapides tels que Bootstrap de Twitter ou Zurb’s Foundation. Nous nous tournons personnellement vers Foundation car cela correspond à notre flux de travail. Ce serait formidable si l’une ou l’autre adoptait une approche à faible bande passante et petit écran en premier, mais c’est comme ça que nous roulons.
Annotations
Les annotations pour les wireframes RWD sont essentielles mais, nous le constatons, sont souvent négligées. Dites-le à voix haute: documentation, documentation, documentation! Nous en avons vu quelques exemples de la part d’amis et nous pensons que le jury n’est toujours pas sur la «meilleure» façon d’annoter correctement les wireframes réactifs dans le navigateur. Comme mentionné ci-dessus, nous utilisons régulièrement Foundation by Zurb et aimons utiliser son module complémentaire Reveal pour afficher nos annotations. Ces annotations n'apparaissent que pour les écrans plus grands et peuvent idéalement être activées et désactivées.
Utilisez du contenu réel dans des wireframes
Il y a eu beaucoup de débats autour de Lorem Ipsum dans les wireframes et les maquettes de conception, mais si vous n'avez pas de contenu réel dans vos wireframes, vous le faites mal. Le contenu informe les décisions d'interaction et vous indique quand un design se cassera. Comment Lorem Ipsum peut-il faire cela?
Comment concevoir d'abord pour les petits écrans?
Pendant des années, nous avons conçu avec une résolution spécifique à l'esprit. C'était un paramètre par défaut. Qu'il s'agisse d'esquisser dans des cahiers, de faire du wireframing dans OmniGraffle, de travailler dans Photoshop ou de concevoir dans le navigateur, nous savions quelle serait la taille de notre toile. Ces jours sont révolus. Nous croyons fermement à la conception d’abord pour le petit écran et à l’amélioration progressive. Alors, comment un designer change-t-il son flux de travail d'une taille de toile fixe à une taille fluide?
Dessins abstraits à partir d'appareils au début
À moins que nous ne concevions pour un appareil spécifique, il est essentiel d'arrêter de penser aux appareils et de commencer à penser aux expériences. Toutes les techniques suivantes aident les concepteurs à créer leurs expériences tout en restant indépendants des appareils (jusqu'à un certain point).
Utiliser des tuiles de style
Utilisez les tuiles de style pour établir la direction et effectuer une itération rapide. Les carreaux de style permettent à un concepteur de définir la direction d'un système de conception sans être trop précis. Leur créatrice, Samantha Warren, les décrit ainsi:
«Les tuiles de style sont pour quand un moodboard est trop vague et une composition est trop littérale. Les tuiles de style établissent une connexion directe avec les éléments d'interface réels sans définir la disposition. »
Créer une harmonie d'interface
Imaginez une toile avec tous les éléments visuels et interactifs réunis. Pas pour voir une disposition d'interface utilisateur particulière, mais pour voir comment tous les éléments fonctionnent ensemble. Il s'agit d'un canevas d'harmonie d'interface. Un canevas d'harmonie d'interface permet à un concepteur de garder les idées ensemble, mais pas de se concentrer sur une seule taille d'écran. De plus, c'est un excellent moyen de communiquer et de documenter efficacement les éléments conçus plutôt que de produire un guide de style complet.
Si vous souhaitez en savoir plus, vous trouverez ici et ici deux excellents articles sur le thème de l’harmonie des interfaces.
Tout afficher dans le navigateur
Tout doit être réuni dans le navigateur. C'est là que la conception de l'interface utilisateur prend vraiment vie. Voir comment le contenu réel interagit avec les éléments visuels est crucial. Il n’existe aucun moyen de le faire correctement dans un environnement statique. Vous devez voir comment il répondra dans le support natif.
Trouvez un équilibre avec des programmes statiques
Il existe un flux entre le navigateur et les programmes statiques tels que Photoshop. Il devrait y avoir un équilibre qui permette au système de conception d'être créé de manière fluide et naturelle. Bien sûr, cela se produira dans Photoshop, mais un concepteur qui conçoit de manière réactive doit également apprendre à penser de manière créative dans le navigateur.
Conclusion
Encore une fois, avec le sentiment: commencez par le pourquoi, avec un contenu bien structuré et des interactions qui comptent. Concentrez-vous d'abord sur le petit écran et la faible bande passante, et améliorez progressivement vos concepts réactifs. Notre médium arrive à maturité. Nous avons la chance de bien faire les choses et de changer le monde, un projet Web à la fois.
Découvrez les 20 meilleurs outils de wireframing pour les concepteurs
Steve Fisher coordonne la recherche, l'analyse, la conception et la stratégie chez Yellow Pencil au Canada et intervient sur des sujets tels que RWD, UX et open source. Alaine Mackenzie est stratège de contenu chez Yellow Pencil.
