Le guide du pro sur la conception de l'interface utilisateur

Quand j'ai commencé ma carrière, j'étais web designer. J'ai travaillé dans la conception de sites Web pendant quatre ans, en commençant par des sites de petites entreprises et en passant finalement à des clients plus importants. J'ai découvert que ce n'était pas le design graphique qui m'intéressait, ni travailler pour de plus grandes marques. J'étais plus intéressé par les modèles de pagination, la façon dont les gens interagissaient avec les formulaires, et des choses comme la performance perçue, que la conception visuelle d'une page Web.

Quand je regardais des films de science-fiction, je regardais les interfaces. Et quand je jouais aux jeux vidéo, j'observais la façon dont les menus étaient disposés. Si l'un de ces traits vous semble familier, vous pourriez également être un concepteur d'interface utilisateur dans l'âme.

J'ai quitté mon emploi d'agence et créé ma propre entreprise. Sur ma page LinkedIn, j'ai essayé de résumer mon nouvel objectif de carrière: créer le meilleur logiciel possible. Cela fait quatre ans que j'ai commencé en tant que pigiste et mon parcours ne s'est pas arrêté. Ces jours-ci, j'aide à gérer une petite entreprise de conception d'interface utilisateur appelée Mono . Nous avons récemment accueilli notre quatrième membre de l'équipe.

Dans cet article, je veux décrire ce que c'est que d'être un concepteur d'interface utilisateur, y compris ce qu'implique exactement le travail, où trouver les meilleures ressources d'apprentissage et comment s'améliorer dans votre métier.

Que fait un concepteur d'interface utilisateur?

Conception de l

Le travail d'un concepteur d'interface utilisateur peut être divisé en quatre domaines clés

Je trouve que généralement, vous pouvez diviser le travail d'un concepteur d'interface utilisateur en quatre catégories. Vous communiquez avec le client, vous recherchez, vous concevez et prototypez, et vous communiquez avec les développeurs. Jetons un coup d'œil à chacune de ces phases plus en détail.

Communication client

La communication avec le client consiste à comprendre le problème du client. L'objectif est de se familiariser avec l'activité de votre client, donc le début d'un projet constitue généralement beaucoup de discussions. C'est bien de ne pas en savoir trop sur le domaine de votre client lorsque vous démarrez - vous pouvez regarder leur entreprise d'une manière nouvelle tout en envisageant des solutions de conception possibles.

Pour être un bon concepteur d'interface utilisateur, vous devez être en mesure de réfléchir éventuellement avec l'entreprise de votre client. Par exemple, votre client pourrait être dans l'aviation. Travailler pour eux vous rendra finalement assez bien informé sur cette industrie. Donc, une astuce pour votre propre bonheur ici est de choisir judicieusement les industries pour lesquelles vous travaillez, afin de ne pas finir par être un expert dans quelque chose qui ne vous intéresse pas ou qui ne vous intéresse pas.

Pendant un projet, la communication ne s'arrête pas. En tant que designer, vous présenterez constamment votre travail. Dans notre entreprise, nous sommes une équipe à distance, nous n'avons donc pas beaucoup de réunions en personne. Au lieu de cela, nous utilisons beaucoup le partage d'écran via la vidéoconférence. Des outils de communication comme Skype et Slack sont utilisés tous les jours.

Il est utile de combiner des méthodes de communication synchrones et asynchrones. Un appel est idéal si vous avez besoin rapidement de beaucoup d'informations, mais vous devez être présent en même temps. Nous considérons Slack comme notre «refroidisseur d'eau virtuel» et utilisons Basecamp pour gérer des projets de conception complexes. Lorsque nous concevons des prototypes en utilisant HTML et CSS, nous utilisons les problèmes GitHub pour discuter directement du code.

Rechercher

En plus de la communication avec les clients, vous ferez de nombreuses recherches. Cela pourrait inclure des études de terrain, des ateliers avec le client, l'analyse de la concurrence ou la définition d'une stratégie - essentiellement, à peu près tout ce qui vous aide à comprendre le problème à résoudre.

La recherche est ce qui informe vos choix de conception. C'est un article que vous avez lu une fois, ou cette nouvelle chose qu'Apple vient de publier. Lorsqu'il est temps d'expliquer pourquoi vous avez fait un choix de conception particulier, vos recherches vous soutiennent.

La recherche peut être très vaste. Je teste souvent de nouveaux appareils à des fins de recherche ou je m'inscris à une nouvelle application Web pour étudier son interface utilisateur.

Conception et prototypage

En tant que concepteur, vous passerez probablement la plupart de votre temps à faire du travail de conception et de prototypage. Un projet de conception d'interface utilisateur peut aller de l'avant de plusieurs manières, de l'esquisse à la conception détaillée, en passant par le codage.

La méthode que vous utilisez dépend en grande partie du type de projet. Que concevez-vous? Est-ce un site Web ou préférez-vous l'appeler une application? Utilise-t-il une technologie native? Est-ce une refonte ou partez de zéro?

Conception de l

Certains de nos outils de choix: Sketch, Illustrator et InVision

Dans notre entreprise, il n'y a pas de processus fixe, mais la plupart des projets suivent le même ordre approximatif: ils commencent par des croquis et des wireframes, passent à une conception visuelle et d'interaction détaillée et se terminent par un prototype.

En tant que designers, nous passons beaucoup de temps à réfléchir à nos outils. Bien que les bons outils soient importants, ils ne sont pas la chose la plus importante. Pouvoir utiliser avec compétence Adobe Creative Suite et des applications comme Sketch équivaut à pouvoir utiliser un crayon pour dessiner ou un pinceau pour peindre. Vous devez encore faire la peinture.

Cela étant dit, un intérêt sain pour les outils est une bonne chose. J'adore essayer de nouveaux outils qui peuvent m'aider à être plus productif. Mon outil d'édition vectoriel préféré est Illustrator, mais la plupart de mon travail de conception visuelle est effectué dans Sketch ces jours-ci. D'autres membres de l'équipe sont passés à des outils plus récents comme Affinity Designer.

Les outils sont un choix très personnel. Tant que nous pouvons facilement travailler ensemble, chacun est libre de choisir le sien. Pour simplifier la discussion de nos créations avec nos clients, nous réalisons des prototypes avec InVision. Pour un prototypage plus avancé, cependant, nous utilisons HTML et CSS. L'outil dont vous avez besoin dépend du travail que vous souhaitez en faire.

Communication avec les développeurs

Une partie souvent oubliée du travail d'un concepteur d'interface utilisateur est la communication avec les développeurs. De nos jours, vous ne pouvez pas vous en passer en envoyant simplement vos conceptions aux développeurs et en espérant qu'elles seront mises en œuvre correctement. Les meilleurs designers savent que le défi n'est pas de créer le design, mais de le communiquer - non seulement aux parties prenantes qui doivent donner leur approbation, mais aussi aux développeurs qui doivent le mettre en œuvre.

Conception de l

GOV.UK fournit un guide pour permettre aux utilisateurs de rendre leur service cohérent avec le site principal

La communication d'une conception se présente sous de nombreuses formes: spécifications détaillées, fourniture d'actifs, revue de la conception ensemble. Ce qu'il est judicieux de fournir dans chaque instance dépend en grande partie du fait que le projet est une application native ou Web.

L'approche traditionnelle consiste à fournir des actifs à côté des conceptions d'écran. Les conceptions d'écran peuvent être utilisées pour voir à quoi ressemblera la conception dans son ensemble, tandis que les actifs sont des PNG et des SVG d'icônes prêts à l'emploi, de sorte que les développeurs n'ont pas à traiter avec un éditeur graphique.

Dans notre entreprise, nous sommes partisans de fournir plus que cela. Nous utilisons des guides de style de composants pour aider à maintenir la cohérence dans nos conceptions. Lorsque nous avons affaire à un projet Web, nous fournissons des ensembles détaillés de HTML et de CSS, documentés pièce par pièce, prêts à être mis en œuvre. Je crois qu'avoir un œil design à chaque phase du développement logiciel est le seul moyen d'atteindre mon objectif de créer des logiciels de classe mondiale.

Applications Web vs natives

Lorsque vous concevez une application native pour une plate-forme (par exemple, iOS ou Android), vous avez tendance à respecter certaines directives. Lorsque vous concevez pour le Web, il n'y a pas tellement de conseils. Ce qui se passe généralement, c'est que votre client dispose d'un ensemble de directives graphiques pour sa marque qui détermine à quoi les choses devraient ressembler.

Cependant, ces directives ont tendance à être adaptées aux sites Web de marketing, et ce qui s'y trouve ne conduit pas toujours à de bonnes décisions d'interface utilisateur. Les polices ont tendance à être choisies pour des raisons de marketing et non pour des raisons de lisibilité. Les couleurs peuvent être audacieuses et frappantes, ce qui fonctionne dans une campagne publicitaire, mais pas dans une application que vous utilisez au quotidien. Ces guides doivent être interprétés.

Il existe quelques directives d'interface utilisateur pour le Web. On pourrait dire que le Web est un creuset de styles différents. Si vous créez quelque chose qui ressemble plus à une application qu'à un site Web, vous devez connaître les frameworks largement utilisés tels que Bootstrap et ZURB Foundation. Le cadre commence à déterminer à quoi les choses devraient ressembler, car vous ne voulez pas réinventer la roue. Et c'est probablement une bonne chose.

Dans notre entreprise, nous aimons utiliser Bootstrap. Il fournit des tailles par défaut raisonnables pour les éléments d'interface utilisateur courants tels que les boutons, les tables de données et les modaux.

En conception web, vous êtes plus contraint par les capacités techniques du web. Auparavant, il était difficile de mettre en œuvre des fioritures visuelles simples comme des coins arrondis sur un site Web. Ces jours sont révolus depuis longtemps - vous êtes désormais libre de dessiner des interfaces utilisateur avec de nombreuses ombres, transitions, animations et même 3D.

En tant que concepteur, il est beaucoup plus réaliste de prendre le contrôle du processus et de la conception dans le navigateur. Je n'ai pas vu beaucoup de concepteurs d'interface utilisateur prendre en charge la programmation d'interface utilisateur d'une application native, mais un concepteur faisant le HTML et le CSS d'une application Web est un phénomène courant. Si vous pouvez coder vos propres conceptions, vous aurez un avantage sur vos pairs non codeurs, et pour moi, c'est le seul moyen de vraiment comprendre le fonctionnement du Web.

Contraintes Web

Vous découvrirez bientôt que toutes les astuces intéressantes que vous apprenez ne sont pas prises en charge dans tous les navigateurs, et c'est la réalité de la conception pour le Web. Il est bon de suivre des principes bien connus tels que l'amélioration progressive, dans laquelle vous chargez du contenu amélioré chaque fois que possible, mais réfléchissez également à la façon dont le contenu se dégrade.

Récemment, «couper la moutarde» est devenu populaire. Soutenu par l'équipe Web de la BBC, cela implique de faire la distinction entre les «bons» et les «mauvais» navigateurs, et de fournir une expérience limitée aux «mauvais» navigateurs. Cependant, cela ne fonctionne vraiment que pour les sites de contenu.

En ce qui concerne les expériences de type application, de nombreuses personnes limitent la prise en charge à quelques navigateurs de premier plan uniquement, pour faciliter le développement. Malheureusement, cela nous ramène à la situation de 1996 où vous avez besoin d'un certain navigateur pour afficher le contenu.

Améliorer vos compétences

Alors, comment vous tenir au courant de l'évolution rapide de l'industrie du Web et améliorer vos compétences? Examinons quelques méthodes différentes pour améliorer vos compétences ...

Connaissance de la plateforme

Une grande partie de l'arsenal d'un concepteur est la connaissance de la plateforme. Vous devez connaître les différents systèmes d'exploitation et la manière dont les gens les utilisent. En tant que concepteurs, nous avons tendance à utiliser des Mac, mais il est facile d'oublier que la majorité des gens utilisent des boîtes Windows pour faire leur travail.

Je pense que vous ne pouvez vraiment comprendre quelque chose que si vous l'utilisez vous-même. Je préfère utiliser mon Mac pour concevoir, mais je passe beaucoup de temps à rattraper l'évolution de diverses autres plates-formes. J'ai plusieurs copies de Windows installées sur mon Mac en tant que machines virtuelles. J'ai été occupé à tester de nouvelles versions de Windows 10 à l'aide du programme Insider de Microsoft pour vérifier les différents changements dans l'interface utilisateur.

J'achète aussi régulièrement du nouveau matériel pour tester son fonctionnement. J'ai acheté une Apple Watch juste pour tester la plate-forme. Je l'ai ensuite vendu parce que je sentais que cela n'ajoutait pas beaucoup à ma vie.

De plus, le Web peut être considéré comme son propre système d'exploitation. Il évolue constamment, avec de nouvelles fonctionnalités ajoutées chaque semaine à chaque fournisseur de navigateur. Il est extrêmement intéressant de connaître les aspects techniques des navigateurs, en particulier en ce qui concerne les capacités CSS et graphiques. Vous devez savoir ce que sont SVG et WebGL et comment utiliser l'API Web Animations.

Chaque plateforme évolue au fil du temps et en tant que concepteur d'interface utilisateur, il est de votre devoir de rester à jour. Après tout, tout ce que vous concevez ne vit pas de manière isolée, mais fait partie d'un écosystème logiciel plus vaste.

Revenez à l'essentiel

Ce avec quoi nous luttons aujourd'hui n'est pas si différent de ce avec quoi nous luttions il y a 20 ans. Il y a une tonne de bons conseils dans les livres. Essayez la conception défensive pour le Web de Jason Fried et Matthew Linderman et Don't Make Me Think de Steve Krug pour commencer.

Si vous ne connaissez pas des concepts tels que la modalité et l'abordance, vous devez lire. Vous devriez être en mesure d'expliquer ce qu'est la loi de Fitts. La loi Gestalt de la proximité? C'est le pain et le beurre de la conception de l'interface utilisateur.

Inspirez-vous des jeux et des films

Conception de l

L'interface utilisateur d'Oblivion de 2006 (à gauche) est beaucoup plus décorative que celle de Skyrim (à droite), sortie en 2011

En tant que designer UI, je m'inspire d'autres sources d'inspiration pour faire mon travail. Je trouve beaucoup d'inspiration dans les jeux. Certains jeux sont très complexes et les concepteurs d'interface utilisateur ont dû résoudre les mêmes problèmes d'interface complexes que les concepteurs d'interface utilisateur travaillant sur des projets commerciaux.

Les jeux peuvent également signifier des tendances. Le minimalisme que l'on retrouve dans les menus de Colin McRae Rally me rappelle la direction d'iOS7. D'une certaine manière, la conception d'animation de l'interface utilisateur qui est maintenant à la mode faisait son apparition dans les jeux il y a des années et des années. Le passage du skeuomorphisme aux interfaces nues et fonctionnelles et au «design plat» est également apparu dans les jeux. Comparez Oblivion de 2006 avec Skyrim de 2011. Les deux jeux sont des RPG de la même série, mais la différence est frappante.

Les interfaces futuristes dans les films Marvel comme Iron Man ont également été une inspiration pour moi. Ce ne sont pas exactement des exemples utilisables, mais ils me font penser davantage à l'informatique dans son ensemble. Voulons-nous un avenir d'écrans ou voulons-nous que les écrans disparaissent? C'est probablement une bonne question à poser dans un pub rempli de designers.

Vous évoluez en tant que designer grâce au travail acharné, à la persévérance, à parler à vos pairs et à lire énormément. Il y a environ un an, j'ai lu un article dans le New York Times sur des personnes dans les années 80 qui continuent à perfectionner leur métier. J'ai l'impression que je ne fais que commencer. Et toi?

Articles Liés:

  • Rencontrez l'équipe pour faire avancer le Web et améliorer les relations clients
  • Pourquoi vous devriez être enthousiasmé par zéro UI
  • 7 outils UX à essayer cette année