Prototypage avec des données réelles - Un tutoriel Framer

Framer est l'un des outils de prototypage d'applications les plus puissants du marché. Il peut être utilisé pour concevoir pour n'importe quel appareil mobile, d'iOS à Android. Si vous connaissez un peu la programmation, ses capacités sont pratiquement illimitées car il est basé sur CoffeeScript, un langage de programmation relativement simple. Un designer ne serait limité que par son imagination et ses compétences en codage.

Pour suivre cet article, vous devez avoir au moins une connaissance de base de Framer. Nous utiliserons le mode Design et l'éditeur de code. Si vous souhaitez compléter vos connaissances, vous pouvez lire nos précédents articles Framer : Comment créer de superbes prototypes interactifs, 7 microinteractions simples pour améliorer vos prototypes

Pourquoi devriez-vous utiliser Framer avec des données réelles

Un problème courant dans la conception ou le prototypage est le manque de données réelles. Lorsqu'une nouvelle fonction est conçue pour un produit existant, au lieu d'utiliser un contenu fictif, un contenu logique, pertinent et réaliste peut être affiché. Il peut s'agir de n'importe quel type de données, par exemple des photos d'utilisateurs. De cette façon, vous ne perdez pas de temps à essayer de créer un faux contenu, et les erreurs résultant de l'utilisation de données invalides seront évitées. Toutes les données disponibles sont visibles et il est possible d'établir quel contenu peut encore être nécessaire. Par conséquent, la communication avec les parties prenantes et l'équipe de développement est plus efficace. Il est également possible de concevoir autour de différents scénarios de cas d'utilisation.

Lorsque nous concevons une nouvelle fonction, nous oublions parfois que tous les profils d'utilisateurs ne sont pas complets, que toutes les catégories du magasin n'ont pas la même quantité de produits et que tous les produits n'affichent pas les mêmes données. Le prototypage avec des données réelles peut être comparé à la construction de quelque chose à partir de blocs LEGO : au lieu de travailler avec des formes lâches imaginaires, nous pouvons utiliser des composants existants de la boîte et construire quelque chose de réel.

Prototypons avec des données réelles !

Le vrai plaisir dans Framer commence lorsque de vraies données mises à jour en temps réel à partir d'une base de données sont utilisées. Tout type de données peut être appliqué, par exemple : profils d'utilisateurs avec photos, adresses postales, cotations boursières, taux de change, prévisions météorologiques, informations sur les transactions - toutes les données que les applications utilisent généralement. Une conception de produit vraiment puissante commence à se produire lorsque vous combinez le prototypage en temps réel avec des données réelles. Et il ne sera plus nécessaire d'utiliser les infâmes morceaux de texte d'espace réservé de style latin "lorem ipsum".

L'API utilisant des données réelles : qu'est-ce que c'est ? Comment l'utilisons-nous ?

Une interface de programmation d'application (API) est l'interface par laquelle nous communiquons avec les applications. Imaginez une application comme un restaurant. La nourriture est les données et les serveurs sont l'API. Vous demandez la nourriture au serveur, c'est tout ce que vous avez à faire. Le serveur (API) et la cuisine (base de données) s'occupent du reste.

Il s'agit d'accéder à des données réelles qui résident dans une base de données donnée.

Chaque application dispose d'une API qui permet de capturer et d'afficher des données. Certaines API sont accessibles au public et certaines sont utilisées uniquement dans des produits internes.

Les API accessibles au public sont largement utilisées pour créer de nouvelles applications. Par exemple, pour créer une application météo, certaines données météorologiques sont nécessaires. Avec l'aide de nombreux sites Web de prévisions météorologiques qui partagent leurs API publiques, c'est super facile. De plus, de nombreuses API différentes peuvent être combinées pour créer un tout nouveau produit.

Où pouvons-nous obtenir de vraies données ? Les listes d'API ouvertes

Il existe de nombreuses API accessibles au public qui fournissent diverses données. Voici une liste restreinte de cinq qui sont idéales pour le prototypage avec des données réelles dans Framer. Chacune de ces API renvoie également des données au format JSON, qui peuvent être facilement manipulées dans le framework.

Utilisateur aléatoire - Certainement la meilleure API pour les débutants. Il génère des profils d'utilisateurs complets et aléatoires, d'un avatar à une adresse e-mail.

OpenWeatherMap - c'est une API très facile à utiliser. Il vous permet de vérifier la météo actuelle et les prévisions dans n'importe quel endroit. Grâce à cette API, nous pouvons afficher des données telles que la température, l'humidité ou la vitesse du vent.

Pokeapi - l'une des meilleures API créées à des fins éducatives. Vous cherchez quelque chose sur Pokemon? Il peut être trouvé ici. Il s'agit d'une API RESTful complète liée à une vaste base de données détaillant tout sur la série de jeux principale Pokemon.

Instagram - la première API de la liste qui nécessite une autorisation d'utilisation. Son service, cependant, est très simple. Vous pouvez accéder à toutes les photos et tous les utilisateurs d'Instagram et les afficher dans votre nouvelle application.

Mapbox - fournit un certain nombre de services incroyables faciles à intégrer à une application, des cartes et des directions au géocodage et même à l'imagerie satellite. Foursquare, Evernote, Instacart, Pinterest, GitHub et Etsy ont tous quelque chose en commun : leurs cartes sont alimentées par Mapbox.

Cette API est différente des précédentes car elle ne renvoie pas de fichiers JSON, mais donne accès à toutes les fonctionnalités de Mapbox. Mapbox a également produit un excellent tutoriel sur la façon d'utiliser leur API dans Framer.

Didacticiel de l'API utilisateur aléatoire dans Framer utilisant des données réelles

Pour comprendre comment travailler avec les API dans Framer, commençons par l'API Random User. Nous aurons besoin d'un seul écran d'application, une liste d'utilisateurs.

Étape 1 : Mode Conception

Voici une liste d'utilisateurs contenant les noms, prénoms et avatars. C'est tout ce qu'il faut. La partie la plus importante de ce processus est de nommer et de regrouper correctement tous les éléments. Les avatars et les noms sont regroupés dans la couche de boîtes, et toutes les boîtes sont regroupées dans la liste :

La dernière chose à faire en mode conception est de marquer la couche de liste comme couche interactive. Pour ce faire, cliquez simplement sur l'icône cible.

Étape 2 : Comprendre JSON

Tout d'abord, il est nécessaire de comprendre ce qu'est JSON et comment l'obtenir en dehors de Framer. Dans la documentation de l'API Random User, recherchez une demande de données à partir de l'API. Cela ressemble à ceci : https://randomuser.me/api/?results=20. Comme vous pouvez le voir, c'est un lien normal qui ouvre un fichier JSON dans votre navigateur :

En l'état, ça n'a pas l'air clair du tout. Pour afficher les fichiers JSON correctement formatés, utilisez le plugin Chrome appelé JSONview. Avec le plugin, le fichier ressemblera à ceci :

Beaucoup mieux. Maintenant, il devrait être facile à lire. Le fichier contient le tableau des résultats avec les données utilisateur, qui a été reçu après avoir demandé à l'API. Alors, qu'est-ce que le fichier JSON ? Sans entrer dans les détails techniques, il s'agit d'un fichier texte basé sur la syntaxe JavaScript qui contient des données spécifiques issues d'une base de données. JSON peut être utilisé dans Framer pour afficher les données qu'il contient.

Étape 3 : Importer le fichier JSON dans Framer

Désormais, le fichier JSON peut être importé dans Framer avec une seule ligne de code :

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Créez l'objet nommé data qui contiendra le fichier JSON. Utilisez la fonction d' impression pour voir si le fichier JSON a été importé correctement :

 print data 

Étape 4 : Accéder à des données spécifiques à partir du fichier JSON

Revenez maintenant à la structure du fichier JSON :

Dans ce fichier JSON, les results sont un tableau qui contient plus d'objets. Chaque objet est un utilisateur différent. Tout d'abord, l'un de ces objets doit être ciblé. Utilisez la fonction d'impression pour mieux comprendre ce qui se passe :

 print data.results[1]

Console de l'encadreur :

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

Le chiffre entre parenthèses représente un numéro de l'objet dans le tableau. À l'aide data.results[1] , l'accès à toutes les données du premier utilisateur dans le fichier JSON est reçu.

Ensuite, des éléments comme le nom ou le prénom peuvent être affichés :

 print data.results[1].name.first

Framer répond par : "benjamin" . Et voilà! L'accès aux données de l'API a été réalisé !

Étape 5 : Affichage des données à partir de JSON

Finalement! Il ne reste plus qu'à afficher les données. Maintenant, une boucle simple qui ciblera tous les calques du mode conception doit être créée. En savoir plus sur le ciblage des calques avec une boucle dans cet article précédent.

Nous utilisons x = 0 pour cibler le premier objet du tableau à partir des données JSON. Ensuite, pour chaque élément enfant de la liste , nous affectons les données des données JSON. À la fin de la boucle, nous ajoutons +1 pour utiliser les données de l'objet suivant dans le tableau :

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

C'est ça! Vous pouvez maintenant revenir au mode conception et jouer avec la conception, et les données réelles seront affichées dans votre prototype !

Vous pouvez télécharger le fichier Framer ci-dessus ici : https://framer.cloud/djmvG

API Instagram - Données en temps réel dans Framer

Instagram est un point de départ intéressant pour commencer un voyage avec des données en temps réel. Les instructions sont relativement faciles à suivre et l'API fournit des données intéressantes - vous recevez un accès complet. Dans cette partie de l'article, l'API Instagram est utilisée pour construire un prototype simple qui affiche les données de mon profil Instagram : nom, dernière photo et nombre de likes.

Étape 1 : Obtenir un jeton d'accès

Pour utiliser l'API Instagram, un jeton d'accès est requis. Il peut être obtenu de deux manières différentes :

1. Le moyen le plus courant consiste à se rendre sur le site Web Instagram for Developers et à suivre les instructions. Ce processus peut être compliqué pour les personnes non techniques.
2. Heureusement, il existe un moyen simple et sécurisé de l'obtenir. Pixel Union a développé un processus en un clic beaucoup plus simple : accédez à leur site Web et cliquez sur le bouton Obtenir un jeton d'accès.

Étape 2 : Activer les requêtes interdomaines

Après avoir reçu un jeton d'accès, une petite astuce s'impose. Instagram n'autorise pas les requêtes API de votre hôte local (Framer), et par conséquent, les requêtes côté serveur doivent être utilisées. L'un d'eux est JSONProxy. Allez sur leur site Web, collez une demande de l'API Instagram et appuyez sur GO.

Une fois que c'est fait, au lieu d'utiliser le lien API Instagram, le lien JSONProxy peut être utilisé.

Étape 3 : Concevoir une application simple dans Framer

Il n'y a que trois éléments cruciaux dans cette conception : l'espace réservé au nom, un rectangle qui affichera la dernière photo et le nombre de likes sous l'image. Tous ces éléments sont marqués comme des couches interactives à réutiliser dans l'éditeur de code.

Étape 4 : Rédigez quatre lignes de code pour utiliser les données d'Instagram

Le flux ici est le même que dans l'API Random User. Toutes les données utilisateur sont accessibles depuis Instagram :

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

C'est ça! Cinq lignes de code, et vous pouvez prototyper en utilisant des données en direct et réelles fournies par Instagram. Téléchargez un prototype fonctionnel ici : https://framer.cloud/iYAXl. (Veuillez garder à l'esprit que vous devez ajouter votre propre CLÉ D'ACCÈS pour exécuter ce prototype.)

Résumé - Avantages et inconvénients

En créant des prototypes qui utilisent des données réelles obtenues via une API à partir d'une base de données, de nouvelles possibilités créatives et la possibilité de vérifier la conception du produit sont mises en lumière. Des prototypes 100 % cohérents avec le produit peuvent être construits et de nouvelles fonctions testées sur de vrais utilisateurs. . Avec un aperçu de toutes les données du système, il est plus difficile de manquer un élément qui doit être inclus dans la conception, et avec l'accès à des données réelles, les erreurs de conception résultant de l'utilisation de fausses données sont évitées.

Cela dit, le prototypage haute fidélité dans Framer est assez coûteux. Il faut beaucoup de peaufinage pour obtenir l'effet désiré, ce qui prend du temps et de l'argent. Comme le montre l'exemple de l'API utilisateur aléatoire, communiquer avec l'API n'est pas difficile, mais il faut encore beaucoup de temps pour créer un bon prototype à partir de celle-ci.

Néanmoins, lorsqu'il est pleinement mesuré, cela vaut certainement la peine d'être considéré. Bon prototypage avec de vraies données !

• • •

Pour en savoir plus sur le blog Toptal Design :

• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• États vides - L'aspect le plus négligé de l'UX
• La simplicité est la clé - Explorer la conception Web minimale
• Principes heuristiques pour les interfaces mobiles
• Concevoir pour la lisibilité - Un guide de la typographie Web