Prototipazione con dati reali: un tutorial per Framer

Framer è uno degli strumenti di prototipazione di app più potenti in circolazione. Può essere utilizzato per progettare per qualsiasi dispositivo mobile, da iOS ad Android. Se conosci un po' di programmazione, le sue capacità sono virtualmente illimitate perché si basa su CoffeeScript, un linguaggio di programmazione relativamente semplice. Un designer sarebbe limitato solo dalla sua immaginazione e dalle capacità di programmazione.

Per seguire questo articolo, dovresti avere almeno una conoscenza di base di Framer. Useremo la modalità di progettazione e l'editor di codice. Se vuoi integrare le tue conoscenze, puoi leggere i nostri precedenti articoli di Framer: Come creare splendidi prototipi interattivi, 7 semplici microinterazioni per migliorare i tuoi prototipi

Perché dovresti usare Framer con dati reali

Un problema comune nella progettazione o nella prototipazione è la mancanza di dati reali. Quando si progetta una nuova funzione per un prodotto esistente, invece di utilizzare contenuti fittizi, è possibile visualizzare contenuti logici, pertinenti e dall'aspetto reale. Può essere qualsiasi tipo di dato, ad esempio le foto degli utenti. In questo modo, non si perde tempo a cercare di trovare contenuti fasulli e si eviteranno errori derivanti dall'utilizzo di dati non validi. Tutti i dati disponibili sono visibili e si può stabilire quale contenuto potrebbe essere ancora necessario, di conseguenza, la comunicazione con le parti interessate e il team di sviluppo è più efficace. È anche possibile progettare attorno a diversi scenari di casi d'uso.

Quando progettiamo una nuova funzione, a volte dimentichiamo che non tutti i profili utente sono completi, non tutte le categorie nel negozio hanno la stessa quantità di prodotti e non tutti i prodotti mostrano gli stessi dati. La prototipazione con dati reali può essere paragonata alla costruzione di qualcosa con i blocchi LEGO: invece di lavorare con forme immaginarie e sciolte, possiamo utilizzare i componenti esistenti dalla scatola e costruire qualcosa di reale.

Prototipiamo con dati reali!

Il vero divertimento in Framer inizia quando vengono utilizzati dati reali aggiornati in tempo reale da un database. È possibile applicare qualsiasi tipo di dato, ad esempio: profili utente con foto, indirizzi stradali, quotazioni di borsa, tassi di cambio, previsioni meteorologiche, informazioni sulle transazioni, tutti i dati normalmente utilizzati dalle app. Quando si combinano la prototipazione in tempo reale con dati reali, inizia a realizzarsi un design di prodotto davvero potente. E non sarà più necessario utilizzare i famigerati pezzi di testo segnaposto "lorem ipsum" in stile latino.

L'API che utilizza dati reali: che cos'è? Come lo usiamo?

Un'API (Application Programming Interface) è l'interfaccia attraverso la quale comunichiamo con le applicazioni. Immagina un'app come un ristorante. Il cibo sono i dati ei camerieri sono le API. Chiedi il cibo ai camerieri: è tutto ciò che devi fare. Al resto ci pensano i camerieri (API) e la cucina (database).

Si tratta di accedere a dati reali che risiedono in un determinato database.

Ogni app ha un'API che consente di acquisire e visualizzare i dati. Alcune API sono disponibili pubblicamente e alcune vengono utilizzate solo nei prodotti interni.

Le API pubblicamente disponibili sono ampiamente utilizzate per creare nuove applicazioni. Ad esempio, per creare un'applicazione meteo, sono necessari alcuni dati meteo. Con l'aiuto di numerosi siti Web di previsioni del tempo che condividono le loro API pubbliche, è semplicissimo. Inoltre, molte API diverse possono essere combinate per creare un prodotto completamente nuovo.

Dove possiamo ottenere dati reali? Gli elenchi delle API aperte

Esistono molte API pubblicamente disponibili che forniscono vari dati. Ecco un elenco di cinque che sono ottimi per la prototipazione con dati reali in Framer. Ognuna di queste API restituisce anche dati in formato JSON, che possono essere facilmente gestiti nel framework.

Utente casuale – Sicuramente la migliore API per i principianti. Genera profili utente completi e casuali, da un avatar a un indirizzo e-mail.

OpenWeatherMap: questa è un'API molto facile da usare. Ti consente di controllare il tempo e le previsioni attuali in qualsiasi luogo. Utilizzando questa API, possiamo visualizzare dati come temperatura, umidità o velocità del vento.

Pokeapi – una delle migliori API create per scopi didattici. Cerchi qualcosa sui Pokemon? Può essere trovato qui. Questa è un'API RESTful completa collegata a un ampio database che descrive in dettaglio tutto ciò che riguarda la serie di giochi principali Pokemon.

Instagram: la prima API nell'elenco che richiede l'autorizzazione per l'uso. Il suo servizio, tuttavia, è molto semplice. Puoi accedere a tutte le foto e agli utenti di Instagram e visualizzarli nella tua nuova app.

Mapbox – fornisce una serie di incredibili servizi facili da integrare con un'applicazione, dalle mappe e indicazioni stradali alla geocodifica e persino alle immagini satellitari. Foursquare, Evernote, Instacart, Pinterest, GitHub ed Etsy hanno tutti qualcosa in comune: le loro mappe sono basate su Mapbox.

Questa API è diversa dalle precedenti perché non restituisce file JSON, ma dà accesso a tutte le funzionalità di Mapbox. Mapbox ha anche prodotto un ottimo tutorial su come utilizzare la loro API in Framer.

Tutorial API utente casuale in Framer utilizzando dati reali

Per capire come lavorare con le API in Framer, iniziamo con l'API utente casuale. Avremo bisogno di un'unica schermata dell'app: un elenco di utenti.

Passaggio 1: modalità di progettazione

Ecco un elenco di utenti contenente nomi, cognomi e avatar. Questo è tutto ciò che serve. La parte più importante di questo processo è nominare e raggruppare correttamente tutti gli elementi. Avatar e nomi sono raggruppati nel livello box e tutti i box sono raggruppati all'interno dell'elenco:

L'ultima cosa che deve essere fatta in modalità Progettazione è contrassegnare il livello elenco come livello interattivo. Per farlo, fai semplicemente clic sull'icona di destinazione.

Passaggio 2: comprensione di JSON

Prima di tutto, è necessario capire cos'è JSON e come ottenerlo al di fuori di Framer. Nei documenti dell'API Random User, trova una richiesta di dati dall'API. Si presenta così: https://randomuser.me/api/?results=20. Come puoi vedere, è un collegamento normale che apre un file JSON nel tuo browser:

Così com'è, non sembra affatto chiaro. Per visualizzare i file JSON formattati correttamente, utilizza il plug-in di Chrome chiamato JSONview. Con il plugin, il file sarà simile a questo:

Molto meglio. Ora dovrebbe essere facile da leggere. Il file contiene l'array di risultati con i dati dell'utente, che è stato ricevuto dopo averlo richiesto all'API. Allora, qual è il file JSON? Senza entrare nei dettagli tecnici, è un file di testo basato sulla sintassi JavaScript che contiene dati specifici da un database. JSON può essere utilizzato in Framer per visualizzare i dati da esso.

Passaggio 3: importa il file JSON in Framer

Ora, il file JSON può essere importato in Framer con una singola riga di codice:

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

Crea l'oggetto chiamato data che conterrà il file JSON. Usa la funzione di stampa per vedere se il file JSON è stato importato correttamente:

 print data 

Passaggio 4: accesso a dati specifici dal file JSON

Ora torna alla struttura del file JSON:

In questo file JSON, results è un array che contiene più oggetti. Ogni oggetto è un utente diverso. Innanzitutto, uno di questi oggetti deve essere preso di mira. Usa la funzione di stampa per capire meglio cosa sta succedendo:

 print data.results[1]

Console corniciaio:

 {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"}

La figura tra parentesi rappresenta un numero dell'oggetto nell'array. Utilizzando data.results[1] , viene ricevuto l'accesso a tutti i dati del primo utente nel file JSON.

Quindi, elementi come nome o cognome possono essere visualizzati:

 print data.results[1].name.first

Framer risponde con: "benjamin" . Et voilà! L'accesso ai dati dell'API è stato raggiunto!

Passaggio 5: visualizzazione dei dati da JSON

Finalmente! L'unica cosa rimasta è visualizzare i dati. Ora, è necessario creare un ciclo semplice che indirizzerà tutti i livelli dalla modalità di progettazione. Ulteriori informazioni sul targeting dei livelli con un ciclo in questo articolo precedente.

Stiamo usando x = 0 per indirizzare il primo oggetto nell'array dai dati JSON. Quindi, per ogni elemento children dell'elenco , assegniamo i dati dai dati JSON. Alla fine del ciclo, aggiungiamo +1 per utilizzare i dati dell'oggetto successivo nell'array:

 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++

Questo è tutto! Ora puoi tornare alla modalità di progettazione e giocare con il design e i dati reali verranno visualizzati nel tuo prototipo!

Puoi scaricare il file Framer sopra qui: https://framer.cloud/djmvG

API di Instagram: dati in tempo reale in Framer

Instagram è un punto di partenza interessante per iniziare un viaggio con i dati in tempo reale. Le istruzioni sono relativamente facili da seguire e l'API fornisce dati interessanti: ottieni l'accesso completo. In questa parte dell'articolo, l'API di Instagram viene utilizzata per creare un semplice prototipo che mostra i dati del mio profilo Instagram: nome, ultima foto e numero di Mi piace.

Passaggio 1: ottieni un token di accesso

Per utilizzare l'API di Instagram, è necessario un token di accesso. Può essere ottenuto in due modi diversi:

1. Il modo più comune è visitare il sito Web di Instagram for Developers e seguire le istruzioni. Questo processo potrebbe essere complicato per le persone non tecniche.
2. Fortunatamente, esiste un modo semplice e sicuro per ottenerlo. Pixel Union ha sviluppato un processo molto più semplice con un clic: vai sul loro sito Web e fai clic sul pulsante Ottieni token di accesso.

Passaggio 2: abilita le richieste tra domini

Dopo aver ricevuto un token di accesso, è necessario un piccolo trucco. Instagram non consente richieste API dal tuo localhost (Framer) e pertanto è necessario utilizzare le query lato server. Uno di questi è JSONProxy. Vai al loro sito Web, incolla una richiesta dall'API di Instagram e premi VAI.

Al termine, invece di utilizzare il collegamento API di Instagram, è possibile utilizzare il collegamento JSONProxy.

Passaggio 3: progetta un'app semplice in Framer

Ci sono solo tre elementi cruciali in questo design: il segnaposto del nome, un rettangolo che mostrerà l'ultima foto e il numero di Mi piace sotto l'immagine. Tutti questi sono contrassegnati come livelli interattivi da riutilizzare nell'editor di codice.

Passaggio 4: scrivi quattro righe di codice per utilizzare i dati di Instagram

Il flusso qui è lo stesso dell'API utente casuale. Tutti i dati dell'utente sono accessibili da 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

Questo è tutto! Cinque righe di codice e puoi creare prototipi utilizzando dati live e reali forniti da Instagram. Scarica un prototipo funzionante qui: https://framer.cloud/iYAXl. (Tieni presente che devi aggiungere la tua CHIAVE DI ACCESSO per eseguire questo prototipo.)

Riepilogo: pro e contro

Creando prototipi che utilizzano dati reali ottenuti tramite un'API da un database, vengono messe in luce nuove possibilità creative e la possibilità di controllare il design del prodotto: è possibile costruire prototipi coerenti al 100% con il prodotto e testare nuove funzioni su utenti reali . Con un'anteprima di tutti i dati nel sistema, è più difficile perdere un elemento che deve essere incluso nella progettazione e con l'accesso a dati reali si evitano errori di progettazione derivanti dall'utilizzo di dati falsi.

Detto questo, la prototipazione ad alta fedeltà in Framer è piuttosto costosa. Ci vogliono molte modifiche per ottenere l'effetto desiderato, il che consuma tempo e denaro. Come mostrato nell'esempio dell'API Random User, comunicare con l'API non è difficile, ma è necessario ancora molto tempo per creare un ottimo prototipo da essa.

Tuttavia, quando viene data la misura completa, vale sicuramente la pena considerare. Buona prototipazione con dati reali!

• • •

Ulteriori letture sul blog di Toptal Design:

• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Stati vuoti: l'aspetto più trascurato dell'esperienza utente
• La semplicità è la chiave: esplorare il design Web minimale
• Principi euristici per interfacce mobili
• Progettare per la leggibilità - Una guida alla tipografia Web