Le guide des pros de la conception de l'interface utilisateur

Auteur: Randy Alexander
Date De Création: 25 Avril 2021
Date De Mise À Jour: 6 Peut 2024
Anonim
How to draw with Concepts app: User Interface (part 1/2)
Vidéo: How to draw with Concepts app: User Interface (part 1/2)

Contenu

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 graphisme qui m'intéressait, ni le travail 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 à des jeux vidéo, j'observais la façon dont les menus étaient disposés. Si l'un de ces traits vous semble familier, vous pouvez é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 je suis indépendant 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?

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. Examinons chacune de ces phases plus en détail.

Communication avec les clients

La communication avec le client consiste à comprendre le problème du client. L’objectif est de se familiariser avec l’activité de votre client, de sorte que 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 son 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 avec l’activité 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 que vous ne finissiez pas 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 distante, nous n’avons donc pas beaucoup de réunions en personne. Au lieu de cela, nous faisons un usage intensif du partage d'écran via la visioconfé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 de beaucoup d'informations rapidement, 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.


Recherche

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 des travaux de conception et de prototypage. Un projet de conception d'interface utilisateur peut aller de l'avant de plusieurs façons, 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-vous de zéro?

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. Si les bons outils sont importants, ils ne sont pas la chose la plus importante. Être capable d'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 conceptions 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 plus vous en passer en envoyant simplement vos conceptions aux développeurs 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.

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 éléments sont des PNG et des SVG d'icônes prêts à l'emploi, de sorte que les développeurs n'ont pas à faire affaire avec un éditeur graphique.

Dans notre entreprise, nous sommes partisans de fournir plus que cela. Nous utilisons des guides de style de composant pour aider à maintenir la cohérence dans nos conceptions. Lorsque nous traitons 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 sur la conception à 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 a un ensemble de directives graphiques pour sa marque qui détermine à quoi les choses devraient ressembler.

Cependant, ces consignes ont tendance à être adaptées aux sites Web de marketing, et ce qui s'y trouve ne conduit pas toujours à de bonnes décisions en matière 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 maintenant libre de dessiner des interfaces utilisateur avec beaucoup d'ombres, de transitions, d'animations et même de 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 de nombreux 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 chose courante. 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, il s’agit 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

La connaissance des plates-formes constitue une part importante de l’arsenal d’un concepteur. 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 alors facile d’oublier que la majorité des gens utilisent des boîtiers 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érentes modifications apportées à 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 grand-chose à ma vie.

De plus, le Web peut être considéré comme son propre système d'exploitation. Il évolue constamment, de nouvelles fonctionnalités étant ajoutées chaque semaine à chaque fournisseur de navigateur. Il est extrêmement utile 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 plate-forme é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. Pour commencer, essayez Defensive Design for the Web de Jason Fried et Matthew Linderman et Don't Make Me Think de Steve Krug.

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

En tant que concepteur d'interface utilisateur, 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 d'entreprise.

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 créateurs.

Vous évoluez en tant que designer grâce à un 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. Je sens que je ne fais que commencer. Qu'en pensez-vous?

Articles Frais
Les meilleurs conseils pour affiner vos techniques d'illustration dessinées à la main
Lire La Suite

Les meilleurs conseils pour affiner vos techniques d'illustration dessinées à la main

Je fai du crayon depui mon enfance, quand je portai un crayon et du papier avec moi. La coloration et la peinture, cependant, ont de compétence que j'ai développée plu lentement. Qu...
Transformez votre portefeuille de bon en excellent
Lire La Suite

Transformez votre portefeuille de bon en excellent

Po tuler à un emploi dan le monde du de ign peut être une entrepri e fru trante. Vou ête certain dan votre e prit que vou pourriez avoir ce rôle; pourquoi le employeur ne peuvent-i...
Didacticiel vidéo: utiliser le filtre Tilt-Shift de Photoshop CS6
Lire La Suite

Didacticiel vidéo: utiliser le filtre Tilt-Shift de Photoshop CS6

La photographie à inclinai on-décalage e t une manière péciale de mettre au point et de défocali er de manière élective de partie d'une image en inclinant et en ...