Catégories
Plugin et site web

Fiches de contrôle PDF – Smashing Magazine

A propos de l'auteur

Vitaly Friedman aime les beaux contenus 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…
Plus à propos
Vitaly
Friedman

Rencontrez notre Cartes de vérification des modèles de conception d'interface intelligente, une jeu de 100 cartes avec des questions à poser lors de la conception et de la construction de tout composant d'interface – carrousel, hamburger, table, sélecteur de date, saisie semi-automatique, curseur, intégration, plans de tarification, authentification, formulaires Web et bien d'autres. Vérifiez l'aperçu (PDF) et passez à la description ↓

Le mois dernier, nous avons publié les 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é sur des sessions d'utilisabilité, des itérations de conception et des tests A / B. C'est un outil utile pour les concepteurs et les développeurs front-end discuter à peu près tout un composant nécessite avant de commencer la conception ou le codage. Aller à la table des matières ↓

Listes de vérification des modèles de conception d'interface intelligente
Découvrez les «listes de contrôle de conception d'interface intelligente», avec des questions à poser lors de la conception et de la construction de tout composant d'interface.

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

Les cartes 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 autre but: aider les concepteurs et les développeurs aplanir les malentendus dès le début, évitant ainsi l'ambiguïté, le travail inutile et les erreurs coûteuses sur toute la ligne.

Et: assurez-vous que bien les petits détails UX ne se perdent pas dans 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. Vérifiez l'aperçu (PDF) et passez à la description.

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

Boîte de cartes de contrôle

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

Aujourd'hui, les projets à grande échelle impliquent généralement une sorte de composant ou de système de conception. Les sites Web sont rarement conçus ad hoc; à la place nous architecte eux, créer, empiler et réorganiser 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 des lignes directrices et principes d'abord – pour tout, du type et des couleurs aux fonctions simplifiées et aux conventions de dénomination.

Un regard à l'intérieur de la boîte de la carte de contrôle.
Liste de contrôle de la conception du hamburger
Chaque composant est discuté en détail dans l'atelier des modèles de conception d'interface intelligente de Vitaly – un atelier en ligne divisé en 5 séances de 2,5 h, avec des centaines d'exemples de conception.

Nous procédons ensuite à la création de premières maquettes et prototypes. Et ce faisant, nous concevons, nommons et construisons des composants dans différentes tailles, couleurs et variations – en fait familles des composants, pour divers contextes et conditions. C'est-à-dire que nous pensons généralement en composants tout au long du processus, de la toute première esquisse à la sortie 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'aller de l'avant. Quel que soit le composant que vous concevez, les cartes soulèvent des questions et des conversations importantes qui aident à résoudre les ambiguïtés 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 pourrons commencer à les construire d'abord sur mobile, en passant lentement du mobile au bureau.

À ce stade, il est rentable de prendre du recul et parler en grand avant de passer 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 rencontre 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 de la comportement des composants il est construit sur. En fin de compte, ils aligner les équipes de conception et de développement et aider à découvrir les inconvénients et problèmes techniques potentiels dès le début.

Exemple de curseur Google
Liste de contrôle de conception de carrousel
Le deck est livré avec un petit bonus: 400 exemples d'interface utilisateur pratiques, des points d'action et des checklists en 16 × 9. Par exemple. pour les carrousels.

Et c'est là que les listes de contrôle peuvent également ê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 donc éviter les changements complexes de dernière minute.

Ainsi, 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ées. De la mise en page et des tailles cibles 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 sur un niveau composant. 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 avoir une conversation sur l'idée du concepteur et le point de vue du développeur sur sa complexité – puis trouvons un équilibre entre les deux.

Les décisions sont ensuite consignées dans un doc collaboratif qui peut être utilisé comme référence pour les discussions futures, ou comme ligne directrice pour d'autres équipes.

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

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 s'assurer que tous les petits détails fins ont été considérés, conçus et mis en œuvre.

Vous pouvez également personnalisez-les selon vos besoins de rayer toutes les décisions importantes et de se concentrer 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.

Boîte de cartes de contrôle

À propos des listes de contrôle

Rencontrer 100 fiches de contrôle avec tout ce dont vous avez besoin pour relever tous les défis de l'interface utilisateur – des tables complexes aux carrousels gênants. Créé pour nous aider tous à garder une trace de tous les petits détails à concevoir et créer de meilleures interfaces, plus rapidement. De plus, il est utile de ne pas oubliez tout ce qui est critique et évitez les 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 – à l'aide de listes de contrôle. Le pont crée un élément indispensable sens de l'alignement, donc tout le monde est sur la même page avant de se lancer dans les outils de conception ou de codage.

Le pont inclut des listes de contrôle sur:

  • concevoir 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 tarifaires et page produit,
  • curseurs et lecteurs vidéo,
  • configurateurs et assistants,
  • sélecteurs de dates et calendriers,
  • chronologies, cartes, plans de salle,
  • confidentialité et authentification,
  • onboarding et offboarding,
  • avis et témoignages,
  • lecteurs vidéo et audio,
  • formulaires Web et formulaires de don.
  • Plus, 400 exemples d'interface pratiques (aperçu gratuit).
Un coup d'oeil à l'intérieur de la boîte de la carte de vérification.

Magnifiquement conçu par notre cher illustrateur Ricardo Gimenes, 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 exemples d'interface utilisateur pratiques, les points d'action et les listes de contrôle dans une résolution large (16 × 9) pour référence et présentations.

Tu auras:

  • 100 fiches de contrôle PDF sur tout, des carrousels aux formulaires Web, soigneusement sélectionnés et conçus,
  • Exemples de conception pratique et des 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,
  • Accès à vie à la terrasse, mis à jour régulièrement.
  • Participez à l'atelier en ligne et obtenez la liste de contrôle PDF.
Un regard à l'intérieur du jeu de cartes.

Table des matières

Et le deck imprimé?

Nous aimerions aussi produire un joli pack relié avec les cartes, mais pour le moment l'expédition et l'impression dans le monde entier sont très difficileset cher. Si vous obtenez la copie numérique, vous obtiendrez un remise amicale pour le jeu imprimé également – nous devons simplement attendre et voir quand il sera plus raisonnable d'expédier les cartes dans le monde entier. Désolé, chers amis.

À propos du conservateur des listes de contrôle

Vitaly FriedmanVitaly Friedman aime les beaux contenus et n'aime pas céder facilement. Lorsqu'il n'écrit pas ou ne prend pas la parole lors d'une conférence, il organise très probablement des ateliers et des webinaires front-end / UX. Il adore résoudre des problèmes complexes d'UX, de front-end et de performances. Entrer en contact.

À propos de l'atelier: «Modèles de conception d'interface intelligente, édition 2020» (22 septembre – 6 octobre)

Voulez-vous approfondir les éléments des modèles de conception d'interfaces intelligentes? Nous organiserons une série d’ateliers en ligne, au cours desquels nous effectuerons un examen microscopique des composants d’interface courants et des solutions fiables pour les obtenir correctement, à la fois sur ordinateur et sur mobile.

Nous étudierons Des centaines d'exemples triés sur le volet et nous concevrons des interfaces vivre, des méga-menus déroulants et des configurateurs de voiture – jusqu'aux calendriers et à l'intégration. Et: nous examinerons et fournirons des commentaires sur le travail de chacun. Vérifiez tous les sujets et le calendrier.

Exemple de saisie semi-automatique dans trois boutiques en ligne différentes.
Exemple de curseur Spotify
Un des exemples de curseurs bien conçus de la plate-forme: conçus par Spotify pour leur configurateur de playlist pour animaux de compagnie.

L'atelier est livré en cinq sessions de 2,5 h avec beaucoup de temps pour poser toutes vos questions. Il s'adresse aux concepteurs d'interfaces, aux concepteurs frontaux et aux développeurs qui aimeraient être prêts à relever tous les défis qui se présentent.

Vous repartirez avec un boîte à outils de techniques pratiques pour votre produit, site Web, application de bureau ou application mobile.

Merci pour votre soutien!

Nous espérons sincèrement que les connaissances que vous tirerez de nos petits cadeaux vous aideront à améliorer vos compétences tout en vous faisant de nouveaux amis merveilleux. Un sincère Merci pour votre aimable soutien continu, votre patience et votre générosité – pour être fracassant, maintenant et à jamais. ❤️

Plus de trucs sensationnels

Ces dernières années, nous avons eu la chance de travailler avec des personnes talentueuses et attentionnées de la communauté Web pour publier leur riche expérience sous forme de livres imprimés qui résistent à l'épreuve du temps. Paul et Alla font partie de ces personnes. Avez-vous déjà consulté leurs livres?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *