Blog sur le développement
Publié le par Amber Black

Utilisation de OneNote dans notre processus de conception

Bonjour, c'est Amber. Je suis la conceptrice principale de SoCreate. Mon rôle consiste à concevoir la façon dont les utilisateurs vivent et interagissent avec nos produits. Les concepteurs de notre équipe doivent non seulement être capables de créer de belles interfaces, mais doivent aussi avoir une compréhension complète du fonctionnement de ce que nous créons.

Le processus de conception chez SoCreate est en constante évolution. Nous fonctionnons de la même manière que de nombreuses autres équipes et entreprises de conception ; nous établissons souvent nos meilleures pratiques en nous basant sur nos essais et nos erreurs. Lorsque nous identifions un point sensible dans notre processus, nous essayons quelque chose de différent. Parfois, les nouveautés s'imposent, parfois non.

Une chose qui a fait son chemin dans notre processus est le croquis. Lorsque nous avons quelque chose à concevoir qui est nouveau ou qui s'écarte suffisamment de ce que nous avons déjà, il peut être improductif de se lancer directement dans le travail. Nous utilisons les croquis dans le cadre de l'étape de planification de notre processus.

Les croquis nous permettent de déterminer rapidement la disposition de la conception. Cette méthode s'est avérée particulièrement utile pour les nouveaux produits qui ne peuvent pas utiliser les éléments de conception existants, c'est-à-dire les éléments familiers du système de conception de notre produit. Lorsque nous faisons des croquis, nous nous concentrons davantage sur :

  • Le contenu/les données qui doivent être affichés dans la conception.

  • La disposition générale/la hiérarchie de la conception

Notre bureau fonctionne plus ou moins sans papier depuis longtemps. Nous utilisons tous des tablettes PC. Lorsque nous travaillions encore au bureau, chaque espace avait de grands ordinateurs muraux à écran tactile que nous utilisions comme tableaux blancs numériques et écrans de présentation pour les réunions. Ils étaient également pratiques pour travailler seul sur quelque chose lorsque vous aviez besoin d'un écran plus grand. Cet environnement sans papier nous a toujours encouragés à résoudre les problèmes par le biais d'un support numérique.

Un peu de contexte

Il y a longtemps, notre équipe a travaillé sur un projet de conception d'un état financier. Nous avons travaillé pendant des semaines et avons réalisé de nombreuses itérations très différentes de l'état financier. À l'époque, j'avais du mal à comprendre les fondements du système. J'avais l'impression de concevoir de manière réactive plutôt que proactive. Chaque itération nécessitait une réorganisation importante et devait être travaillée pratiquement à partir de zéro sur Photoshop, ce qui prenait beaucoup de temps.

Finalement, j'ai commencé à simuler ces mises en page dans notre application de prise de notes préférée, OneNote. Le gribouillage m'a toujours aidé à comprendre, et j'aime utiliser le stylet pour dessiner sur ma tablette, mais il ne m'était pas encore venu à l'esprit que nous pouvions planifier des conceptions à l'aide de ces outils.

Un croquis dans OneNote montre une première conception d'un système financier.

Si vous n'arrivez pas à comprendre, ne vous inquiétez pas. Je ne peux probablement pas non plus.

La couche visuelle de la conception ayant été supprimée, il était plus facile de se concentrer uniquement sur les données, la mise en page et les calculs nécessaires, ce qui nous a permis de trouver l'origine du problème.

En fin de compte, le problème résidait dans nos besoins en matière de système sous-jacent à la déclaration, plutôt que dans les aspects visuels de la conception elle-même. Cette prise de conscience a été l'une des nombreuses étapes d'un processus qui avait commencé par une simple refonte de l'application. Nous avons pris conscience que des améliorations fondamentales étaient nécessaires pour que l'application soit à la hauteur du produit de haute qualité que nous voulions créer.

L'esquisse nous a permis d'arriver à cette conclusion beaucoup plus rapidement que si nous avions continué à faire des travaux longs et complexes. En fin de compte, cela a donné lieu à une vaste refonte de la façon dont nous avions conçu le système financier, et aujourd'hui nous avons un système qui fonctionne encore mieux que ce que nous avions initialement prévu.

Depuis ce projet, nous avons intégré des croquis dans le processus de conception chaque fois que nous avons une interface utilisateur compliquée qui bénéficierait d'une ébauche.

Comment utilisons-nous OneNote pour les croquis aujourd'hui

Nous avons utilisé OneNote pour prendre des notes pendant toute la durée de mon travail chez SoCreate. J'ai constaté que les outils de dessin de OneNote fonctionnent étonnamment bien pour les esquisses, et ses limites nous aident à savoir quand il est temps de passer de cette phase aux conceptions finales.

Nous pouvons rapidement dessiner des mises en page à l'aide de l'outil stylo. Outre le noir, j'aime utiliser plusieurs couleurs de stylo différentes. J'utilise parfois des surligneurs lorsque je dessine des flux de travail pour mettre en évidence des éléments individuels de l'interface utilisateur. Vous pouvez enregistrer les couleurs, les tailles et les types de stylo dans la barre d'outils Dessin.

Diverses options de stylo dans OneNote

Diverses options de stylo dans OneNote

Les lignes droites sont parfois difficiles à réaliser, à moins d'avoir une main sûre. Une astuce qui permet de rendre nos esquisses belles et nettes consiste à tracer une ligne courte, puis à utiliser les outils de transformation pour lui donner la longueur souhaitée. Une fois que vous avez cette ligne droite, vous pouvez la copier et la coller partout où vous avez besoin d'une autre ligne dans la même orientation. Vous pouvez également utiliser l'outil règle pour tracer des lignes droites. Je préfère l'outil d'étirement des lignes pour des raisons purement esthétiques.

Utilisation des commandes de transformation sur les formes dans OneNote pour remodeler les lignes

Les commandes de transformation des formes créées avec l'outil crayon vous permettent de redimensionner votre ligne.

Avec OneNote, je peux sélectionner, copier et coller n'importe quelle partie de mon croquis que je souhaite dupliquer. Le copier-coller permet de composer facilement des listes, des flux de travail et des versions alternatives d'un même dessin. La fonction de sélection nous permet d'effectuer des modifications rapides après avoir reçu des commentaires.

Grâce à ces méthodes, nous pouvons élaborer les bases de ce qui doit être conçu à l'échelle réelle.

Quand terminer la phase d'esquisse

Habituellement, le moment où il faut passer au croquis se révèle de lui-même - nous avons répondu aux exigences initiales du projet et pouvons maintenant les faire passer de l'ébauche à la version finale. Mais il arrive parfois que nous soyons trop concentrés sur un aspect particulier de la conception, que nous fassions trop de petites révisions ou d'ajustements précis du placement. Lorsque cela se produit, il devient généralement très difficile de continuer sur OneNote. À ce stade, il est clair que nous devons passer à autre chose que cette étape du processus de conception.

Lorsque nous avons décidé que la phase d'esquisse est terminée, nous choisissons ce que nous allons faire ensuite.

Presenter le croquis pour le développement

Lorsque le processus de croquis est terminé, nous le présentons généralement directement aux équipes de développement. Cette étape est particulièrement importante lorsque nous prévoyons des changements radicaux dans la structure de base de notre application. Avant de finaliser nos conceptions, nous devons faire appel à des collègues qui ont un point de vue plus axé sur le développement pour obtenir leur avis. Leurs commentaires permettent de développer davantage nos conceptions.

Il y a quelque temps, nous avons retravaillé la façon dont les gens accèdent aux comptes dans l'un de nos produits. Cette partie du logiciel concernait l'ensemble de l'application, il était donc essentiel de faire participer les équipes de développement au processus dès le début. En obtenant un retour d'information précieux de la part des personnes qui allaient construire ce que nous étions en train de créer, nous avons évité certains écueils importants. Ce processus a permis de réduire considérablement le temps nécessaire à l'obtention d'un design que nous aimions et qui ne serait pas trop difficile à réaliser pour notre équipe de développement.

Un croquis dans OneNote montre une conception potentielle pour un menu déroulant.

Lorsque nous avons esquissé un flux de travail utilisant un champ déroulant de sélection fantaisie, nous avons discuté avec les membres de l'équipe UX pour nous assurer qu'un composant de ce type pouvait être créé.

Passer à la phase de conception suivante

Si notre projet est plus strictement lié à la conception et qu'il n'est pas aussi nécessaire de faire appel à nos collègues développeurs, nous pouvons passer rapidement à des conceptions de grande fidélité. Les décisions prises et les connaissances acquises pendant la phase d'esquisse informent sur ce que nous devons faire pour le produit final.

Autres raisons pour utiliser les croquis

Un croquis rapide peut également s'avérer utile lors des réunions de révision de la conception pour accompagner la prise en compte des commentaires du responsable de projet. Parfois, le directeur du projet lui-même notera une ou deux idées pendant que nous collaborons pour résoudre un problème.

L'année dernière, nous avons embauché un nouveau designer, et notre équipe s'est agrandie de 100 % ! Le fait d'endosser le rôle de chef d'équipe a été un défi à bien des égards pour moi. Je trouve que, parfois, le fait de dessiner rapidement quelque chose permet de mieux faire passer le message que d'utiliser des mots pour le décrire. Le langage d'une esquisse peut être beaucoup plus simple, et il a été pratique à utiliser avec mon nouveau collègue lorsque nous travaillons à distance.

Un croquis dans le temps --

En tant que gribouilleur de longue date, le croquis a été un ajout agréable et bénéfique à notre processus. Cela nous a réussi, mais, bien sûr, les solutions de ce type ne sont pas toujours les mêmes pour tous. Si votre équipe travaille principalement avec un langage de conception établi, ou si vous avez souvent des problèmes de conception complexes à résoudre, l'intégration de croquis dans votre processus de conception pourrait peut vous être bénéfique.

Si votre équipe utilise un processus similaire ou différent, n'hésitez pas à m'en faire part. Nous sommes toujours à la recherche de moyens pour nous améliorer et travailler plus efficacement.

Vous pourriez également être intéressé par...

Lauren Spence présente le système de couleurs

Le système de couleurs : SoCreate définit des standards avec les propriétés personnalisées CSS

Notre récent Lunch Meet - une série d'apprentissage dirigée par l'équipe SoCreate - a peut-être été le plus coloré à ce jour ! Lauren Spence, développeur UX, a pris la parole pour enseigner à l'équipe les pratiques avancées utilisées du côté UX dans les projets SoCreate. Alors que le reste d'entre nous a satisfait nos appétits avec un déjeuner servi par un traiteur, Lauren a ravi nos sens visuels avec sa présentation sur le système de couleurs SoCreate. Le Color System est une approche innovante qui contrôle et regroupe par thèmes les couleurs dans toutes les applications que nous créons...

SoCreate analyse l'état de l'industrie cinématographique de 2021 lors de son dernier déjeuner-débat

Les temps changent. La pandémie du COVID-19 a bouleversé de nombreuses industries, et le secteur du cinéma n'a pas été épargné. L'équipe de sensibilisation de SoCreate suit de près les tendances de l'industrie cinématographique et télévisuelle, et comme il y a tant de choses à rattraper dans l'actualité 2020, nous avons décidé d'inviter le reste de l'équipe à participer à notre dernier Lunch Meet. La série d'apprentissage dirigée par l'équipe est désormais virtuelle, mais la discussion n'en était pas moins animée...
L'écran de l'ordinateur affiche le code et le tracker du score de sport.

Un ingénieur de SoCreate se plie en quatre pour construire son projet secondaire

Nous commençons la nouvelle année avec un de nos favoris ! J'ai été ravie de retrouver la programmation régulière de SoCreate en cette ère de travail à distance et de m'asseoir pour l'un de nos Lunch Meets, une série d'apprentissage en équipe sur les nouvelles technologies et les projets personnels des membres de l'équipe. Alors que nous prenions généralement une chaise et apportions notre déjeuner dans la salle de conférence, nous avons renouvelé la série sous la forme d'une présentation virtuelle via Microsoft Teams...