La premi\u00e8re fois que vous ouvrez votre maquette Figma soigneusement con\u00e7ue sur un vrai t\u00e9l\u00e9phone, quelque chose vous surprend toujours.<\/p>\n
Le texte est plus petit que vous ne le pensiez. Les \u00e9l\u00e9ments \u00e0 s\u00e9lectionner sont plus rapproch\u00e9s que vous ne le pensiez. L'ensemble de la mise en page semble plus charg\u00e9 que sur l'\u00e9cran d'ordinateur \u2014 car sur l'\u00e9cran d'ordinateur, vous observiez le design isol\u00e9ment. Sur le t\u00e9l\u00e9phone, vous le regardez en m\u00eame temps que tout ce que fait votre main.<\/p>\n
Nous utilisons toujours des outils de conception. Ils sont utiles pour explorer rapidement des id\u00e9es, comparer diff\u00e9rentes options et garantir la coh\u00e9rence des \u00e9l\u00e9ments. Ce que nous ne faisons pas, c'est les consid\u00e9rer comme le lieu o\u00f9 un projet est valid\u00e9.<\/p>\n
Aucune d\u00e9cision de conception n'est d\u00e9finitive tant qu'elle n'a pas \u00e9t\u00e9 test\u00e9e sur un vrai t\u00e9l\u00e9phone pendant au moins 48 heures. Pas sur un simulateur. Pas en mode miroir depuis un ordinateur portable. Un t\u00e9l\u00e9phone, dans la main, \u00e0 la lumi\u00e8re du jour, dans une pi\u00e8ce sombre, dans le m\u00e9tro, dans une poche, l'\u00e9cran \u00e9teint puis rallum\u00e9.<\/p>\n
La plupart des choix sont modifi\u00e9s apr\u00e8s ce test. La taille des polices est augment\u00e9e. Les espacements sont l\u00e9g\u00e8rement \u00e9largis. Ce trait fin et \u00e9l\u00e9gant devient un trait de 2 px, car un trait de 1 px n\u2019est pas lisible \u00e0 un arr\u00eat de bus en plein soleil.<\/p>\n
Le chemin le plus rapide passe g\u00e9n\u00e9ralement par une version pr\u00e9liminaire rudimentaire plut\u00f4t que par un prototype peaufin\u00e9. Un \u00e9cran affichant de vraies donn\u00e9es, de vraies polices et un v\u00e9ritable d\u00e9filement nous en apprend davantage qu\u2019une maquette cliquable parfaite, car il se comporte exactement comme le fera l\u2019application. Pour les petites modifications, nous les int\u00e9grons simplement dans une version de test et l\u2019installons sur nos propres t\u00e9l\u00e9phones le jour m\u00eame.<\/p>\n
Les donn\u00e9es r\u00e9elles sont tout aussi importantes que l'appareil lui-m\u00eame. Une maquette comportant trois entr\u00e9es soigneusement nomm\u00e9es ne donne aucune indication sur ce qui se passe lorsqu'un utilisateur se retrouve face \u00e0 une longue liste, \u00e0 un nom tr\u00e8s long ou \u00e0 un champ encore vide. C'est pourquoi nous effectuons nos tests avec du contenu d\u00e9sordonn\u00e9 : une liste d'invit\u00e9s comportant des noms \u00e9crits dans plusieurs alphabets, un voyage comprenant une douzaine d'\u00e9tapes, un jardin dans lequel des plantes ont \u00e9t\u00e9 ajout\u00e9es au fil des mois.<\/p>\n
Le m\u00eame principe s'applique \u00e0 nos autres plateformes. Les applications Windows sont test\u00e9es sur l'\u00e9cran d'un ordinateur portable standard, \u00e0 une \u00e9chelle normale, et pas uniquement sur un grand \u00e9cran externe. Les extensions de navigateur sont test\u00e9es dans une v\u00e9ritable barre d\u2019outils, avec une fen\u00eatre contextuelle s\u2019ouvrant sur de v\u00e9ritables pages web. Les applications iPhone fonctionnant sur un Mac sont v\u00e9rifi\u00e9es dans une fen\u00eatre redimensionnable. Chaque interface pr\u00e9sente son propre \u00e9cart entre la maquette et la r\u00e9alit\u00e9.<\/p>\n
Cela vous apprend l'humilit\u00e9. Des designs qui semblaient sophistiqu\u00e9s dans l'outil de maquette paraissent alors trop \u00e9pur\u00e9s ou d\u00e9routants sur l'appareil r\u00e9el. Des gestes qui semblaient astucieux deviennent maladroits lorsqu'on essaie de les effectuer d'une seule main. Des animations qui semblaient fluides sur un \u00e9cran \u00e0 taux de rafra\u00eechissement \u00e9lev\u00e9 paraissent saccad\u00e9es sur un Android vieux de trois ans.<\/p>\n
Avant, nous avions l\u2019habitude de peaufiner les maquettes jusqu\u2019\u00e0 ce qu\u2019elles soient parfaites avant m\u00eame de les tester sur un appareil, puis nous passions des jours \u00e0 d\u00e9fendre des choix qui, dans la pratique, ne fonctionnaient manifestement pas. Ce souci de perfection donnait l\u2019impression que les designs \u00e9taient aboutis, alors qu\u2019ils ne l\u2019\u00e9taient pas. D\u00e9sormais, nous laissons d\u00e9lib\u00e9r\u00e9ment les maquettes \u00e0 l\u2019\u00e9tat brut et les testons sur un appareil le plus t\u00f4t possible, afin que changer d\u2019avis ne nous co\u00fbte pas trop cher.<\/p>\n
Le revers de la m\u00e9daille, c'est que les premi\u00e8res versions semblent inachev\u00e9es, et il faut faire preuve d'une certaine discipline pour ne pas les juger sur leur apparence. Mais corriger une mise en page d\u00e8s la premi\u00e8re semaine revient bien moins cher que de la corriger apr\u00e8s sa mise en ligne.<\/p>\n
Ce n'est pas une mauvaise nouvelle. C'est simplement la r\u00e9alit\u00e9 \u00e0 laquelle votre travail doit s'adapter. Plus t\u00f4t votre conception s'adaptera \u00e0 cette r\u00e9alit\u00e9, meilleur sera le r\u00e9sultat final.<\/p>","protected":false},"excerpt":{"rendered":"
Figma makes things look good on a 27-inch monitor. Phones are not 27-inch monitors. Here’s what actually happens when you test on a real device.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","hentry","category-journal"],"yoast_head":"\n