🚶🏽 ⚒️ 🏇🏽 Conception de produits sans concepteur 🏕️ ☔️ 👨‍🔬

Je travaille chez KORUS Consulting CIS depuis 3 ans, et pendant ce temps j'ai participé à la conception de dix-neuf services B2B. La conception d'interaction est généralement associée à Axure, InVision, Moqups, Framer, (insérez votre option préférée), mais mes outils sont HTML, SCSS et AngularJs. Je vais vous dire comment la pratique habituelle de l'enregistrement des modèles HTML s'est développée dans les almanachs de mises en page à part entière, et comment un groupe de typographes dirigé par un directeur artistique a conçu l'interaction avec les interfaces de tous les produits KORUS Consulting CIS pendant six ans.

Et pourquoi cela a-t-il fonctionné.

Dans «Un hôpital psychiatrique entre les mains des patients» dans le chapitre «D'où viennent les concepteurs d'interaction», Alan Cooper écrit que les compétences nécessaires sont faciles à trouver chez tout participant au développement. La conception peut être réalisée par un chef de projet, analyste, rédacteur technique, responsable marketing, développeur. C'est bien quand cette fonction est reprise par un spécialiste distinct, de préférence un designer. KORUS a donné ce rôle aux codeurs. Mais pas tout de suite.

Photoshop rejeté

Jusqu'en 2019, il n'y avait pas de créateurs chez KORUS. Et jusqu'en 2011, il n'y avait personne pour entendre parler d'une telle expérience utilisateur. En tant que développeur de logiciels qui se respecte, la société a cherché à mettre rapidement le produit sur le marché, et les analystes et développeurs étaient responsables de l'apparence et du comportement de l'interface. Surtout des développeurs.

Par conséquent, quand en 2011 un codeur avec les compétences d'un designer est apparu dans l'entreprise, avant le développement, il n'était autorisé qu'aux étapes finales.

Un nouveau spécialiste (lu - inhabituel) pour KORUS a rencontré un schéma de développement typique, où il était autorisé à déplacer des pixels et à peindre, alors que les principales fonctionnalités étaient déjà implémentées. Cela ressemble à la conception après le développement. Et cela est décrit en détail dans l'Hôpital psychiatrique, M. Cooper. KORUS pourrait être considéré comme le héros des manuels de ses histoires.

Photoshop ou un autre éditeur graphique est entré difficilement dans ce processus de développement. Dès le début, nous nous sommes davantage appuyés sur la mise en page car elle est plus facile à éditer, notamment dans des conditions d'exigences en constante évolution. Et vous pouvez donner la mise en page au développeur. Concevoir, composer et inspirer la beauté en même temps est beaucoup plus efficace. Avec cette approche, dessiner dans n'importe quel éditeur est un lien intermédiaire inutile, et probablement beaucoup seraient d'accord avec cela en 2011.

Le rejet des outils de conception a contribué à jeter une nouvelle piste au-dessus du schéma bien établi et à commencer un long chemin vers la conception correcte des interfaces. Lorsque le temps de développement est limité, la disposition PSD devient juste une recommandation, la disposition ressemble plus à un ensemble de règles, il est plus difficile de se retourner et d'oublier le cas invisible. Ou considérez-le, basé sur vos propres idées sur la commodité.

La disposition vous permet également d'enregistrer des composants individuels afin de ne pas perdre de temps avec eux la prochaine fois, et la première page HTML avec de tels composants est affichée ci-dessous:

Elle est devenue la première brique pour le référentiel du futur kit sur AngularJs. Dans un premier temps, des formulaires imprimés et des pages individuelles de notre service de gestion électronique des documents (ci-après dénommé le Courrier) y ont été ajoutés.

Lorsque le référentiel s'est développé et qu'il y avait beaucoup plus de dispositions, il s'appelait UIKIT et un chaton-ninja sur le logo:

en 2015, notre entreprise a déployé tous ses efforts pour interagir avec Sberbank, et la question s'est posée de repeindre le service. KORUS a utilisé à plusieurs reprises le fait qu'il existe déjà des réalisations dans les composants et les styles: il suffit de changer les couleurs pour correspondre au style d'entreprise de Beeline, Alfa Bank, etc. Grâce à cette expérience, le Courrier a été repeint en seulement une heure.

Et imaginez, si au début le graphiste repeignait les mises en page graphiques, et que le graphiste modifiait ensuite les styles? Deux tâches - une solution: déjà mise en page dans UIKIT.

Comment les empêcher de faire du "mal"?

Étonnamment, pendant les 4 premières années, un seul spécialiste s'est occupé de toutes les tâches de conception. Les développements dans UIKIT ont été enregistrés, c'est un sérieux gain de temps: le concepteur a réussi à se connecter au développement le plus tôt possible et à éviter les terribles solutions d'interface.

L'expansion du portefeuille de produits a naturellement conduit à l'émergence de nouveaux concepteurs de mise en page. Cela a permis au ninja baleine d'allouer plus de ressources et les dispositions sont devenues plus interactives. Il ne suffit pas de lier des liens HTML entre eux, nous en voulions plus. JQuery et AngularJs ont été utilisés. Les prototypes vivants ont été principalement évalués par les analystes. Vous pouvez cliquer sur tous les états, prendre des captures d'écran et les coller dans le TK.

«Nous avons fait quelque chose de similaire à BEM, mais pas BEM, et nous sommes donc allés à l'unification de la mise en page dans tous les projets»

Cependant, si tout est clair avec le concepteur de mise en page, le concepteur de mise en page peut-il simplement être guidé par des directives et sa propre expérience riche en composition de diverses mises en page pour concevoir quelque chose de simple? Les concepteurs de mise en page peuvent assembler l'interface en tant que concepteur et n'attendent pas que quelqu'un vous dise où placer le bouton. Ils ont déjà vu ce bouton plusieurs fois dans la barre d'outils. Les concepteurs appellent cette obscurité. Et KORUS avait besoin de cas de vie compréhensibles, appelés «design naturel». Et si vous vous souvenez que les produits d'un écosystème sont généralement similaires et que l'unicité ne leur fait que du tort, alors ma réponse est oui.

L'arrivée d'UIKIT a accéléré le processus de prototypage. Une démonstration de mise en page cliquable a été utilisée pour la pré-vente, la coordination des détails avec le client avant le début du projet. Enfin, les développeurs ont reçu les informations nécessaires sur le comportement de l'interface, afin de ne pas les proposer directement dans le processus de codage.

«Les façades leur ont facilité la tâche. UIKIT m'a en partie fait faire les choses correctement. »

Interactivité avec AngularJs

C'est précisément un tel schéma de travail qui est venu à KORUS après l'apparition d'UIKIT: le besoin est apparu, a été formalisé dans les exigences techniques, les concepteurs de la mise en page l'ont incarné immédiatement dans un prototype Web.
Il restait à obtenir un cadre des profondeurs d'Internet, à le repeindre sous une étiquette verte et à l'implémenter dans des produits pour rendre non seulement les boutons et les en-têtes uniformes pour tous les services.

En plus des contrôles du cadre, UIKIT a été reconstitué avec un ensemble d'icônes, de widgets, de développements et de styles propres.

S'il y avait une tâche pour une mise en page similaire à quelque chose de nos services, nous avons pris celle terminée, changé le contenu en fonction des exigences, et le wrapper et la logique sont restés les mêmes. Les transitions entre les pages peuvent être configurées, tous les boutons et champs sont cliquables, nous pouvons afficher la validation, les fenêtres modales, le succès du téléchargement de fichiers. Nous pouvons montrer l'intégralité du parcours utilisateur du début à la fin avec des scénarios positifs et négatifs, dans la représentation de l'ensemble du modèle de rôle.

Interfaces uniformes

La réutilisation de parties préconçues de l'interface n'est pas nouvelle pour 2015. Il y a encore dix ans, les concepteurs de mise en page des studios Web optimisaient ainsi leurs processus pour ne pas recomposer à chaque fois le même élément. Nous n'avons pas découvert la galaxie, mais ce n'était que le début.

Il est clair que plus nous ajoutons des mises en page à UIKIT, plus nous couvrons les cas existants et pouvons les appliquer davantage à de nouveaux projets.

Besoin d'une nouvelle mise en page d'enregistrement utilisateur? Nous l'avons déjà: nous l'adaptons aux besoins de l'entreprise, n'y consacrons pas plus de quelques heures, et maintenant - l'inscription est prête à être transférée aux développeurs, mais dans un service différent.

Besoin d'un tableau avec les données de l'entreprise? Cette bonté dans nos services en vrac: CRTL + C CTRL + V.

Les styles uniformes sont les plus attrayants pour l'équipe de mise en page. Les directives sont une chose qui nous dicte à quoi devraient ressembler les éléments atomiques d'une interface. Il semble raisonnable de fixer le style de ces composants et de le changer uniquement en dernier recours. Peu importe le nombre de nouvelles dispositions de produits que nous introduisons chez UIKIT, les styles des composants sont au même endroit. Pour les besoins du projet lui-même, il existe un CSS de produit distinct dans lequel vous pouvez personnaliser quelque chose.

Sous l'influence des directives, de l'optimisation et de notre propre expérience, nous avons toujours eu sous la main:

Entrées, boutons, listes déroulantes;
Tables, côtés, menus, barres d'outils;
Formulaires, chronologies, fenêtres modales;
L'ensemble du flux de traitement d'une sorte de demande de prêt ou de création d'un document de paiement.

De tout cela, il était déjà possible d'assembler des interfaces à part entière, et grâce à AngularJs, sur les mises en page, l'interactivité de la production a été réalisée, ce qui était très populaire auprès des clients.

En secret, je dirai que nous avons effectué une démo pour un client à quelques reprises à l'UIKIT, car nous avions un banc d'essai tombant juste avant la démo.

Circuit de travail

Le temps a passé, l'inspirateur idéologique et créateur d'UIKIT est devenu directeur artistique, il y avait de plus en plus de projets. Qui poursuivra ce grand travail - concevoir des interfaces en HTML en utilisant des fonctionnalités déjà développées? Les concepteurs de mise en page, bien sûr.

Dire que les concepteurs de mise en page étaient très heureux de la perspective de travailler en étroite collaboration avec les analystes et de réfléchir de manière indépendante à la convivialité est une petite astuce. Pourtant, tout le monde (moi?) S'est habitué au fait que le concepteur de mise en page est un spécialiste qui reçoit une mise en page d'un concepteur, la coupe et la transforme en page Web. La conception d'interaction ajoute par endroits à un travail mécanique une responsabilité inhabituelle, pas encore étudiée. Mais nous avons été aidés par la présence d'une personne qui a constamment révisé notre travail, a suggéré comment le faire correctement. Et il ne s'est pas contenté de demander, mais a fait référence à des sources faisant autorité, afin que nous les lisions aussi et que nous fassions moins d'erreurs. Le directeur artistique a constamment pointé soit vers certaines lois Fitts, puis vers les règles de l'écriture commerciale, soit vers la mise en forme du texte, en mettant l'accent sur les éléments ... Nous avons résisté, mais absorbé l'information.

Aujourd'hui, nous pourrions mettre deux boutons verts côte à côte - demain nous ne l'avons pas fait parce que nous le savions: le bouton avec l'action cible devrait être un par page.

Aujourd'hui, toutes les entrées ont été bloquées dans la même largeur, demain nous ferons le champ pour le TIN exactement pour le contenu. Ainsi, l'utilisateur lit mieux combien de temps les données sont attendues de lui.

Le processus a démarré. Les concepteurs de mise en page collectent les interfaces, en s'appuyant sur les exigences commerciales des analystes, coordonnent leur décision avec le directeur artistique et les confient au développement.

Nous avons grandi en tant que designers, avons appris à prendre des décisions, nous avons nourri notre indépendance pour élargir l'éventail des tâches dans lesquelles une immersion profonde du directeur artistique n'est pas nécessaire.

Quelque part dans ce pipeline est apparu GitLab, un examen de la mise en page, améliorant la visualisation à l'aide de js.

Si le maquettiste était confronté à une tâche difficile et non standard, le directeur artistique se connectait et aidait à trouver une solution. A cette époque, il a lui-même conçu le concept de nouveaux produits.
Nous avons fourni 2-3 options pour notre compréhension du problème, et il en a choisi une et a expliqué comment il pourrait être amélioré. De temps en temps, il disait simplement «ok», et nous étions heureux de comprendre que nous avions atteint la cible. Cependant, nous n'avons parfois pas eu suffisamment de commentaires pour comprendre comment notre solution est pratique et compréhensible pour les utilisateurs, et même si elle est claire pour le directeur artistique. Le doute nous a fait essayer encore et encore d'interpréter les exigences de plusieurs façons.

Notre chef avait sa propre opinion à ce sujet. Il a dit que cela nous faisait réfléchir. Chacun à sa manière a évalué le processus. Je pensais que je gagnais du temps pour lui et pour moi. Comme, laissez-moi vous montrer trois options à la fois pour ne pas marcher trois fois. Une sorte de test A / B / C sur l'artillerie pour moi.

Bien sûr, nous avons beaucoup appris (regardez simplement comment ce concepteur de mise en page cite des livres de conception).

Comme vous le comprenez, dans ce processus, il n'y a pas de place pour une réflexion détaillée sur l'analyse UX et UX. Bien qu'avec un tel outil, on testerait et testerait. Ce que le directeur artistique a mis à l'origine dans la mise en page au stade du prototypage a été utilisé. Toutes les nouvelles fonctionnalités ont déjà été inventées et décrites par les parties prenantes, les gestionnaires et les analystes. Pas des codeurs. C'était un inconvénient, car nous ne pouvions pas toujours expliquer de manière concluante pourquoi la solution déjà inventée par l'entreprise n'était pas adaptée.

À la sortie, le compositeur a reçu une description dans Confluence de l'analyste - comme ceci:

:
:
: « »
« » checkbox .
tooltip .

Une mocap impersonnelle dans les carrés de la basilique a même été appliquée à la tâche pour montrer la position et le but des éléments sur la page.

Parfois, nous avons reçu des tâches d'analystes avec le libellé suivant:

Bien que UIKIT soit entré dans la pile d'outils de l'entreprise, sans analyse UX, il n'y avait aucun argument de poids contre la prise de décisions concernant l'interface, à l'exception du dernier mot du directeur artistique. Mais notre chemin vers une interaction parfaite s'est poursuivi.

Au fil du temps, nous avons pu trouver un langage commun et répartir les domaines de responsabilité pour la qualité et la convivialité de l'interface.

Au total, l'ensemble du processus de création d'une présentation de produit ressemblait à ceci:

- , UIKIT. , , , ;
, . , -, , . ;
Le concepteur de la mise en page a pris la frontière du nouveau projet et l'a complété, le soumettant à une tâche technique plus détaillée. Si au début le client voulait remplir la demande en une seule étape, puis en deux, le concepteur de la mise en page l'a facilement mis en œuvre. À l'avenir, la mise en page pourrait changer au-delà de la reconnaissance, et de la version originale, il n'y avait que des styles qui, en principe, ne changeaient pas. Tout cela est discuté progressivement, étape par étape, avec le directeur artistique. Dans un premier temps, le prototype a été alloué de deux jours à quelques semaines, puis le développement pourrait durer des années. Dans de tels projets, notre responsable a parfois «attaqué» une refonte afin de compenser l'augmentation de la masse critique de fonctionnalités et de repenser l'interface d'une nouvelle manière.

Il a fallu 2 ans à l'équipe UIKIT pour arriver à ce processus.

Démonstration visuelle

À toutes les étapes, la mise en page est disponible pour démonstration au client et à l'équipe. C'est l'un des avantages les plus forts d'UIKIT.

Quoi de plus pratique et compréhensible pour le client que de suivre le lien et de cliquer sur la mise en page vous-même, de regarder le comportement de l'interface? Il peut évaluer et corriger les textes qui sont ensuite mis en production. Parfois, la mise en page faite chez le client changeait l'idée de la tâche, il pouvait comprendre que son idée n'était pas viable et accepter les changements. Si, en mots, il était sûr que son questionnaire avec 150 champs s'intégrerait facilement dans l'interface, alors dans la mise en page, il a clairement vu qu'il nécessitait des améliorations. Plus important encore, lancer ce profil dans UIKIT n'est pas cher.

Un petit exemple:

Première exigence incontestable et finale:

Compromis vu dans le processus:

Quelqu'un peut remarquer qu'Axure, Figma, Marvel ont tous les avantages UIKIT décrits par moi ... Mais certains d'entre eux n'existaient pas au stade de la sélection de la technologie, d'autres ont été rejetés comme un lien supplémentaire entre la conception et la mise en page.
UIKIT est l'occasion d'assembler même pas un prototype, mais une interface de produit prête à l'emploi, que le front-end mettra en service.

Reconnaissance de l'entreprise

D'ici 2020, UIKIT dispose de 38 maquettes de projets existants, dont 13 sont en cours de développement. C'est une vaste expérience de quatre ans, dans laquelle vous pouvez trouver mille solutions de différents spécialistes, du directeur artistique au testeur. Tous obéissent aux règles générales de CSS et de création de page.

Au fil du temps, nous avons dû connecter de nouveaux plugins, organiser plusieurs stands pour UIKIT (notre interne pour le développement actuel et externe pour la version fixe, qui sera développée), ajouter la version des styles, commencer à importer le pack de styles dans artifactory et nexus, puis faciliter le package npm Transfert de fichiers multimédias vers CDN. Ensuite, nous sommes passés au SASS. Une collection de sites apparemment ordinaire de mises en page s'est transformée en un projet à part entière avec ses déploiements, les mises à jour de l'équipe et une discussion active sur les améliorations futures. Autrement dit, notre projet, qui n'était au départ qu'une aide au prototypage rapide, s'est transformé en un produit à part entière avec ses processus inhérents.

UIKIT a été apprécié par les clients, les analystes, les développeurs, puis les testeurs l'ont également apprécié.

Un beau jour, j’ai reçu une question historique de l’équipe de développement de notre client:

«Quand sont les plans de la baleine? Ils sont beaucoup plus pratiques que les exigences. »

Pour moi, en tant que concepteur de mise en page, cette phrase a flatté. Mais mieux vaut ne pas le faire, lisez les exigences.

Jusqu'à ce moment mémorable, l'équipe UIKIT s'est obstinément attachée à la reconnaissance de l'instrument même entre collègues. La valeur commerciale du projet était nulle, ce qui signifie que son développement reposait entièrement sur les typographes. En plus des tâches en cours, ils ont continué d'optimiser leur travail. J'aime voir à quel point notre kit ninja a grandi au fil des ans, non inférieur en puissance à la figure moderne, mais grâce à la mise en page finie, et le dépassant.

Ma prochaine histoire portera sur les détails techniques de la conception utilisant UIKIT, sur la façon dont notre circuit a survécu et sur les étapes que nous avons suivies pour le développer.

Conception de produits sans concepteur