Fiches de contrôle PDF

À propos de l'auteur

Vitaly Friedman aime le beau contenu et n'aime pas céder facilement. Lorsqu'il n'écrit pas ou ne prend pas la parole lors d'une conférence, il est probablement en train de courir…
En savoir plus sur
Vitaly
Friedman
…

Le mois dernier, nous avons publié Listes de contrôle de conception d'interface intelligente PDF un jeu de 100 cartes avec des questions à poser lors de la conception et de la construction à peu près n'importe quel composant d'interface. Chaque liste de contrôle – des tableaux de données complexes et des formulaires Web aux hamburgers et carrousels gênants – a été organisée et affinée pendant des années.

Toutes les listes de contrôle sont basées sur des sessions d'utilisation des itérations de conception et des tests A / B. C'est un outil utile pour les concepteurs et les développeurs frontaux pour discuter à peu près de tout un composant a besoin avant de commencer la conception ou le codage. Aller à la table des matières ↓

Comment ces listes de contrôle peuvent-elles vous être utiles?

Les fiches ne doivent pas servir uniquement de référence avant une conclusion finale. Nous les avons créés pour différentes raisons et dans un but différent: aider les concepteurs et les développeurs à résoudre les malentendus dès le début évitant ainsi toute ambiguïté, travail inutile et erreurs coûteuses sur toute la ligne.

Et: veillez à ce que petits détails UX ne soient pas perdus lors de la traduction des maquettes de conception aux prototypes HTML / CSS. Peu importe le composant que vous concevez: les cartes soulèvent des questions et des conversations importantes, de sorte que tout le monde est sur la même longueur d'onde avant de se lancer dans les outils de conception ou de codage. Consultez l'aperçu (PDF) et passez à la description .

Si vous souhaitez vous plonger dans les modèles de conception en direct assistez à notre prochaine ateliers en ligne sur Modèles de conception d'interface intelligente, édition 2020 où nous explorerons des centaines d'exemples sur des sessions en direct de 5 × 2,5 h.

1. Utilisez des cartes pour guider les décisions du concepteur

Les projets à grande échelle impliquent généralement aujourd'hui une sorte de composant ou de système de conception. Les sites Web sont rarement conçus ad hoc; au lieu de cela, nous les architecturons créant, empilant et réorganisant des blocs de construction .

Le processus est assez simple. Alors que nous esquissons nos sites Web et nos applications, nous explorons les directions visuelles et décidons d'abord des lignes directrices et principes généraux – pour tout ce qui va du type et des couleurs aux fonctions simplifiées et aux conventions de dénomination.

Nous procédons ensuite à la création des premières maquettes et prototypes. Et ce faisant, nous concevons, nommons et construisons des composants de différentes tailles, couleurs et variations – en fait familles de composants, pour différents contextes et conditions. C'est-à-dire que nous pensons généralement aux composants tout au long du processus, de la toute première esquisse à la release candidate à part entière.

C'est là que les listes de contrôle s'avèrent utiles. Lors de la conception des premiers croquis, des listes de contrôle aident les concepteurs à détecter les lacunes ou les détails manquants des conceptions, ou simplement à avoir une conversation interne sur la manière alignée d'avancer. Peu importe le composant que vous concevez, les cartes soulèvent des questions et des conversations importantes qui aident à résoudre l'ambiguïté et à clarifier les livrables.

2. Utilisez des cartes pour aligner les concepteurs et les développeurs

Bien sûr, chaque processus sera légèrement différent, mais une fois que nous aurons des maquettes pour les écrans étroits et grands, nous pourrions commencer à les créer sur mobile en passant lentement du mobile au bureau.

À ce stade, il vaut la peine de prendre du recul et de parler en grand avant de se lancer dans les tranchées du prototypage. La raison est simple: trop souvent, les petits détails de l’intention du concepteur se perdent quelque part entre les calques cachés, les pixels flous et les longs messages Slack. Les développeurs ne connaissent tout simplement pas certaines des décisions importantes que les concepteurs ont prises en cours de route. Et les concepteurs ne sont pas conscients de certaines des implications techniques et des défis qu'une décision de conception particulière pourrait avoir. La réunion est l'occasion de discuter des deux.

Donc, si possible, nous organisons une réunion dédiée pour les concepteurs et les développeurs pour discuter de l'intention de la conception et du comportement des composants sur lesquels elle est construite. En fin de compte, ils alignent les équipes de conception et de développement et aident à découvrir les inconvénients et problèmes techniques potentiels dès le début.

Et c'est là que les listes de contrôle peuvent aussi être utiles. Nous avons tous eu des discussions tardives dont nous savons qu'elles auraient dû avoir lieu plus tôt. Peut-être avons-nous oublié la prise en charge des gestes de balayage pour les carrousels sur mobile, ou l'empreinte des performances des vidéos d'arrière-plan, ou les manipulations DOM trop coûteuses requises pour cet effet visuel astucieux.

Les listes de contrôle poussent ces conversations au premier plan. Ils créent un cadre utile pour évoquer des conversations importantes avant qu'il ne soit tard et par conséquent évitent les changements élaborés de dernière minute .

Donc, pour chaque réunion, nous utilisons ces cartes pour soulever des questions et susciter des conversations que les concepteurs ou les développeurs n'ont pas encore envisagé. De la mise en page et des tailles de cible aux détails d'interaction fins et aux états accessibles, nous explorons des choses qui sont souvent perdues ou négligées en production, pour finalement se révéler par de mauvais résultats des tests d'utilisabilité.

Toutes ces choses sont discutées dans un composant niveau . Ainsi, avec des listes de contrôle à portée de main, nous passons en revue chaque composant utilisé dans une maquette un par un, et utilisons les cartes pour discuter de l'idée du concepteur et du point de vue du développeur sur sa complexité – et ensuite trouver un équilibre entre les deux. [19659006] Les décisions sont ensuite écrites dans un document collaboratif qui peut être utilisé comme référence pour de futures discussions, ou comme ligne directrice pour d 'autres équipes.

3. Utilisez des cartes pour vérifier les petits détails

Une fois que vous avez pris l’habitude d’utiliser des listes de contrôle dans votre travail, il est difficile de ne pas vous y fier. Les cartes peuvent être utilisées comme point de référence fiable pour vous assurer que tous les petits détails ont été pris en compte, conçus et mis en œuvre.

Vous pouvez également les personnaliser selon vos besoins pour biffez toutes les décisions importantes et concentrez-vous sur celles qui manquent. En fin de compte, les cartes aident à éviter les tournures d'événements inattendues et à vous rassurer. Il est vraiment difficile de passer à côté de certains détails d’implémentation critiques et nécessaires ou de certaines touches de conception car ils sont discutés et décidés avant qu’une seule ligne de code ne soit écrite. C'est là que les cartes sont vraiment précieuses pour les concepteurs et les développeurs.

À propos des listes de contrôle

Rencontrez 100 cartes de liste de contrôle avec tout ce dont vous avez besoin pour relever tous les défis de l'interface utilisateur – des plus complexes tables aux carrousels gênants. Créé pour nous aider tous à garder une trace de tous les petits détails à concevoir et à construire de meilleures interfaces, plus rapidement . De plus, il est utile de ne rien oublier de critique et d'éviter des erreurs coûteuses sur toute la ligne. Vérifiez l'aperçu .

Lorsque nous travaillons sur à peu près n'importe quel problème d'interface, nous nous asseyons avec des concepteurs et des développeurs et parlons de sa conception, de son balisage et de son comportement – en utilisant des listes de contrôle. Le jeu crée un sens de l'alignement indispensable de sorte que tout le monde est sur la même page avant de se lancer dans des outils de conception ou de codage.

Le jeu comprend des listes de contrôle sur :

• conception pour le toucher (aperçu gratuit),
• menu hamburger et accordéons,
• carrousels et navigation,
• filtrage, tri, recherche,
• tableaux de données et comparaison de fonctionnalités,
• plans de tarification et page produit,
• curseurs et lecteurs vidéo,
• configurateurs et assistants,
• sélecteurs de dates et calendriers,
• chronologies, plans, plans de salle,
• confidentialité et authentification,
• embarquement et débarquement,
• critiques et témoignages,
• lecteurs vidéo et audio,
• formulaires Web et formulaires de don.
• Plus, 400 exemples d'interfaces pratiques (aperçu gratuit).

Magnifiquement conçu par notre cher illustrateur Ricardo Gi menes ce deck est toujours à vos côtés – sur votre bureau ou sur votre téléphone lorsque vous êtes en déplacement.

De plus, vous obtenez des exemples d'interface utilisateur pratiques des points d'action et des listes de contrôle dans une résolution large (16 × 9) pour référence et présentations.

Vous obtiendrez:

• 100 fiches de contrôle PDF sur tout, des carrousels aux formulaires Web, soigneusement organisées et conçues,
• Exemples de conception pratique et points d'action pour votre référence en 16 × 9,
• Listes de contrôle sous forme de documents en texte brut pour s'adapter à vos besoins comme vous le souhaitez,
• Durée de vie accès au jeu de cartes mis à jour régulièrement.
• Participez à l'atelier en ligne et obtenez la liste de contrôle PDF.

Table des matières [19659069] Conception pour la liste de contrôle tactile