Il prototipo, come concetto, è in circolazione da prima di Internet. In genere, le persone che sviluppano un nuovo prodotto fisico prima costruivano la cosa e si assicuravano che funzionasse come previsto. La prima versione sarebbe stata brevettata, forse, e mostrata ai potenziali investitori. Se l'inventore avesse accesso ai propri mezzi di produzione (se lavorassero in un'azienda esistente, ad esempio), sarebbe andato avanti e risolto i bug fino a quando non avessero un modello pronto per la produzione.
Ricorda quei vecchi dischi demo? Sai, quelli che sono venuti con i programmi con funzionalità limitate, o il primo livello o due in un gioco? I prototipi sono molto simili a questi demo, solo ancora più semplici.
Costruisci un prototipo di un sito web o di un'app per assicurarti che il concetto funzioni come previsto
Il loro scopo non è tanto quello di convincere i potenziali clienti a comprare un prodotto, quanto di aiutarti a migliorarne uno. Costruisci un prototipo di un sito web o di un'app per assicurarti che il concetto funzioni come previsto. Lo usi anche per mostrare ai tuoi clienti, o potenziali investitori, come dovrebbe funzionare.
Di recente, abbiamo visto molte app orientate alla creazione di prototipi per il Web e anche per le app mobili. Ora, Adobe Experience Designer è stato rilasciato, combinando le funzionalità di una "app di design" specifica per il web e il mobile con quella di un'app di prototipazione. Vista la reputazione di Adobe e la loro quota di mercato nel settore professionale, è ovvio che molte persone che non hanno fatto molti prototipi in passato potrebbero ora fare quel passo.
Quindi, come la maggior parte delle altre guide finali, questa è per i principianti. È per le persone che stanno appena iniziando a costruire prototipi su base regolare, indipendentemente dalla loro precedente esperienza (o mancanza) nel settore del design.
In questa guida, abbiamo cercato di coprire soprattutto i principi di base. Dopodiché, ci sono collegamenti a guide con ulteriori informazioni e, naturalmente, una lunga lista di app e strumenti con cui puoi lavorare.
Ora, e il designer che è in giro da un po 'probabilmente ha già lavorato con wireframes e / o ha progettato mockup in qualche editor di immagini. Non sono questi prototipi?
No. Non sempre, comunque.
Il problema con wireframes e mockup statici è che sono ... beh ... statici. Ci sono molte informazioni che semplicemente non possono trasmettere sulla funzionalità di una cosa. Ciò può portare a idee sbagliate nella mente dei clienti, o anche dei tuoi sviluppatori, su come dovrebbe funzionare la cosa. Per questo motivo, i prototipi sono in genere interattivi in qualche modo.
Le eccezioni più comuni sono i prototipi concettuali e i prototipi statici eccezionalmente ben documentati. Ciò che fa la differenza non è l'interattività in sé, ma la trasmissione di informazioni sulla funzionalità prevista di un prodotto.
Detto questo, i wireframe e i prototipi vengono spesso utilizzati per realizzare prototipi, quindi nessuno li abbandona.
Ogni volta che hai bisogno di mostrare come qualcosa dovrebbe funzionare. Questo è tutto.
L'esempio ovvio è quello di un'applicazione web o mobile. Le app tendono ad avere un bel po 'di funzionalità che potrebbero non essere facilmente viste o dedotte da un mockup. Tuttavia, anche i siti Web basati sul contenuto, piuttosto statici, potrebbero richiedere un prototipo.
Per prima cosa, ho chiesto ai clienti di esaminare i prototipi di un semplice sito aziendale e chiedere "Ok, quindi se fanno clic su quelle cose in alto," Chi siamo "," Servizi "e roba, che li portano ad altri pagine? "o" Quando fanno clic su invia sul modulo di contatto, ricevo un'email? "
Anche semplici ... i compiti sono spesso pieni di incertezza ... i prototipi possono aiutare a tirare fuori alcune congetture
Anche le semplici attività di navigazione sono spesso piene di incertezza per alcuni utenti e potenziali clienti, quindi i prototipi possono aiutare a risolvere alcune delle congetture dal processo di approvazione.
Inoltre, sono sempre utili nei test degli utenti. Dopotutto, se hai intenzione di fare test sugli utenti, è meglio iniziare con una anteprima anticipata del progetto. L'ultima cosa che vuoi è fare grandi cambiamenti dopo che gran parte del lavoro è già stato fatto.
Prima di iniziare la prototipazione, dovrai decidere quale tipo di utilizzo vorresti utilizzare. Puoi sempre usare più di un tipo in un dato progetto; la maggior parte dei progettisti, ad un certo punto.
Il tipo di prototipo scelto deve essere adatto a te, al tuo cliente, al progetto e persino allo stadio specifico del progetto in cui ti trovi. Ora, ciò potrebbe sembrare complesso, ma non è poi così male.
Ognuno di questi è destinato a essere utilizzato in diverse fasi della fase di progettazione. Il resto dipende dalle tue preferenze e quanto è buono il tuo cliente nella comprensione delle immagini astratte.
I clienti che hanno meno esperienza con i moderni processi di progettazione potrebbero aspettarsi di vedere qualcosa che sembra più "lucido" in modo che possano dirti di ingrandire il logo, spostare quella linea di un pollice a sinistra e che il loro sito non sarà in latino , quindi potresti mettere un po 'di inglese per favore?
Se hai problemi con questo, i prototipi più dettagliati e un sacco di caffè sono la soluzione migliore. In caso contrario, è possibile utilizzare qualcosa di un po 'più vago, e concentrarsi sulla simulazione della funzionalità desiderata.
Questi spesso non assomigliano al prodotto finito in alcun modo forma o forma. Con i prototipi concettuali, i dettagli e il layout dell'interfaccia non contano. Le uniche cose su cui stai lavorando sono interazioni e processi.
L'obiettivo di ogni prototipo è mostrare come funziona qualcosa o funzionerà. In questo senso, questo è il prototipo nella sua forma più pura. È letteralmente tutto relativo alla funzione, e la forma non viene nemmeno dentro.
Possono assomigliare a qualsiasi cosa, in questa fase. Puoi utilizzare un diagramma di flusso, post-it, una presentazione di PowerPoint, un video che spiega il processo con illustrazioni basate su icone, o una registrazione di te stesso che parla nella fotocamera e che agita selvaggiamente le braccia. Qualunque cosa abbia successo, lo farà.
I prototipi concettuali vengono generalmente utilizzati nella primissima fase di qualsiasi progetto. Il tuo progetto potrebbe non avere nemmeno un nome. È solo un'idea per un'app o un sito web e dirai cose come: "Sì, penso che dovrebbe funzionare in questo modo ..."
I prototipi low-fi sono il punto in cui inizi a includere elementi come il layout e le dimensioni dello schermo e altre preoccupazioni più tangibili. Di solito sono fatti velocemente e scartati più velocemente.
Sono destinati a fornire il modo più veloce possibile per iterare le tue idee fino a quando tu e / o il tuo cliente non siano soddisfatti delle nozioni di base. Quindi non attaccarti. La maggior parte di questi non dureranno a lungo, e questa è una buona cosa.
Come accennato in precedenza, il termine "prototipi a bassa fedeltà" è spesso intercambiabile con "wireframes". In effetti, questa fase si svolge spesso sulla carta.
Quando è fatto in un'app, è consigliabile utilizzarne uno che abbia funzioni di base di prototipazione come il collegamento ad altri schermi, annotazioni, ecc. Le app di wireframing hanno il vantaggio di consentire una collaborazione più semplice su Internet, ma sono spesso un po 'più lenti uso.
Questi sono anche usati all'inizio di un progetto, ma probabilmente hai già un modello di business e un'idea per un nome. È ora di selezionare le innumerevoli idee che ti circondano la testa e iterare finché non avrai qualcosa che sei sicuro funzionerà.
A volte un prototipo di bassa fedeltà non riesce a ottenere il giusto risultato, e un'alta fedeltà è troppo lavoro per il momento. Forse non hai completamente perfezionato la guida allo stile, o non tutte le tue risorse grafiche sono state ancora create.
In ogni caso, questo è il tipo di prototipo che è possibile utilizzare dall'inizio alla metà della fase di progettazione. Sono spesso realizzati con applicazioni di prototipazione, che fanno un uso pesante dell'interazione simulata. Possono anche essere costruiti con HTML e CSS, solitamente con l'aiuto di un framework CSS.
Yup, Bootstrap e Foundation sono probabilmente due dei più grandi strumenti di prototipazione disponibili in questo momento.
Dovresti usare le immagini di marca per questi se ce l'hai, ma le immagini d'archivio andranno bene. Gli elementi UI di Stock vengono in genere utilizzati per costruire l'interfaccia simulata più velocemente. Molte app di prototipazione sono dotate di librerie di questi elementi per rendere il tuo lavoro più veloce.
Questi prototipi sono ideali per i pensatori più letterali che hanno bisogno di vedere un'approssimativa approssimazione di come apparirà e funzionerà. È più facile per loro ignorare un'intestazione che "non è ancora finita", piuttosto che una forma dall'aspetto sghembo che non assomiglia a un'intestazione di un sito web come lo sanno.
Per questi clienti, potresti voler collegare rapidamente le tue idee e non mostrarle mai al cliente. Quindi crea un prototipo di media fedeltà che permetta loro di vedere dove stai andando.
Bene, siamo qui. E così è il tuo progetto. Hai i tuoi prototipi per ogni schermo e tutto sembra perfetto. È tempo di mostrare alla gente come funzionerà, in tutta la sua gloria, quando qualcuno finalmente lo integra con il codice back-end.
I prototipi ad alta fedeltà vengono solitamente utilizzati per ottenere un accordo finale sul progetto da parte del cliente. Ma non puoi semplicemente inviare loro i PSD. Questa roba deve essere interattiva.
Questo è in genere realizzato in due modi. Alcuni usano l'HTML statico e il CSS per mettere insieme le immagini finalizzate in un modo semi-interattivo. Altri usano app che importano immagini, o persino file PSD grezzi, e aggiungono funzionalità pseudo-interattive per imitare la funzionalità finale dell'app.
A seconda dell'app, puoi persino provare questi prototipi sul web (o su un dispositivo mobile, se hai lavorato su un'app).
Ora che abbiamo esaminato i principali tipi di prototipi che è possibile realizzare, è il momento di coprire gli strumenti utilizzati per realizzarli. Ho menzionato la maggior parte di questi nella sezione precedente e il loro uso di base; ma mi piacerebbe entrare un po 'più in dettaglio.
Ancora una volta, il metodo che scegli dovrebbe dipendere da ciò che tu e il tuo cliente siete a vostro agio.
Questi sono spesso fatti per vendere un'idea prima che qualsiasi lavoro concreto sia stato fatto. Pertanto, di solito sono diretti a potenziali investitori. Possono essere utilizzati anche per i clienti; ma ci sono spesso modi più efficienti di comunicare con un cliente. Il tuo chilometraggio può variare.
I prototipi di video e presentazioni che vengono realizzati per le presentazioni di vendita di solito seguono una formula in stile commerciale:
Alcuni di questi prototipi usano solo icone, testo e illustrazioni. Altri hanno animazione; e altri ancora usano l'azione dal vivo per ottenere il risultato. E questo è, beh ... il punto. Finché vendi la tua idea, hai fatto bene.
Ecco un fantastico esempio che combina la prototipazione video con la prototipazione cartacea.
I wireframe possono essere fatti su carta o in app. Sono quasi sempre considerati dei prototipi a bassa fedeltà, sebbene possano essere aggiornati a media fedeltà se ci si dedica abbastanza tempo. Raramente vale la pena, però.
Di solito, i wireframe sono progettati per essere disegnati e scaricati rapidamente. Questa è una delle cose che rende il disegno su carta così attraente. Le app possono essere molto più precise e puoi facilmente modificare i wireframe esistenti; ma niente batte la velocità di uno schizzo che nessuno dovrebbe vedere tranne te stesso ... mai.
Tuttavia, come accennato in precedenza, i wireframe basati su App hanno il vantaggio di simulare più facilmente la funzionalità di un'interfaccia. Toccando su una cornice di carta si ottiene un piacevole suono thunk-thunk-thunk.
Può essere divertente, ma potrebbe non trasmettere il tuo significato.
Potresti scegliere di utilizzare entrambi: la carta per inchiodare i concetti di base e un'app per arricchirla e condividerla facilmente.
Questi differiscono dai wireframe in quanto sono molto più che disegni. In questo tipo di prototipo, la carta viene utilizzata per realizzare un modello fisico, seppur ancora piuttosto piatto, dell'interfaccia. Puoi vedere uno di questi nel video qui sopra.
Gli elementi dell'interfaccia sono solitamente disegnati, ritagliati, a volte copiati per creare degli extra e quindi assemblati su un altro foglio di carta. Questo dà loro il vantaggio della flessibilità. Dove puoi buttare via un intero foglio di carta con un wireframe, puoi semplicemente riorganizzare gli elementi di un modello di carta fino a quando non sei soddisfatto. Hai un elemento di dimensioni sbagliate, dopo che hai riorganizzato le cose un paio di volte? Basta ritagliare una nuova versione.
Inoltre tendono a sentirsi un po 'più "reali" di una cornice metallica. Anche se non accadrà nulla di interessante, un cliente può toccare un modello di carta. Possono sentirlo. Quella sensazione tattile a volte può spiegare più a un cliente di qualsiasi cosa tu possa mai mostrargli.
Tutti hanno bisogno di un contatto fisico per ottenere una migliore comprensione di qualsiasi oggetto. La metà del design UX riguarda la ri-creazione della sensazione di interazione fisica con un'interfaccia digitale.
Questi hanno molto in comune con i prototipi di carta. I prototipi realizzati con un'app come Invision, o una delle molte altre opzioni disponibili (vedi l'elenco sotto), sono in genere realizzati da elementi di interfaccia pre-progettati e quindi assemblati per simulare il prodotto finale.
La differenza è, naturalmente, che tutto è fatto sullo schermo. Oh, e puoi farlo con la grafica e il branding finali, facendo apparire il prototipo esattamente come il prodotto finito. Quindi, come ho detto prima, alcune app possono demo del prodotto nel browser e sui dispositivi mobili.
Questo riporta in gioco la sensazione tattile, e tu vuoi questo. Se puoi dare ai tuoi clienti quella sensazione, e gli piace, hai praticamente ottenuto la loro approvazione finale.
Naturalmente, se l'interazione è ciò che si desidera, creare un prototipo di interfaccia con il codice è un buon modo per ottenerlo. Ora puoi scegliere i prototipi basati su codice per una delle seguenti ragioni:
La prototipazione nel browser può essere un po 'più lenta, specialmente se sono ancora in corso revisioni importanti. Non lo consiglierei per le prime fasi di un progetto, quindi è meglio per i prototipi di fedeltà medio-alta.
Eppure, è uno dei modi migliori per mostrare un progetto quasi finito, se ti piace già lavorare con HTML e CSS.
Prototipazione con framework
Va notato che l'utilizzo di un framework per la creazione di prototipi può accelerare notevolmente la prototipazione basata su codice. Come bonus, se si utilizza il framework che è destinato a essere utilizzato per il prodotto finale, c'è meno codice da fare nel complesso.
Come nota a margine, alcune persone hanno creato editor di pagine web con trascinamento e rilascio basati su framework più popolari, come bootstrap e Fondazione . Usando questi, una volta potrebbe concepibilmente creare tutto, dai prototipi di bassa fedeltà al prodotto finale con il codice.
Tuttavia, alcune persone li usano semplicemente per costruire prototipi velocemente, e quindi usano un codice personalizzato per il progetto finale. Funziona in entrambi i modi.
Ora che abbiamo coperto tutti gli elementi di base, è ora di entrare nei dettagli. Come per quasi tutto il resto nel design e nella vita, non esiste un modo giusto per costruire un prototipo. C'è solo il modo che funziona per te. Detto questo, i processi di progettazione di successo tendono ad avere alcune cose in comune.
Ecco alcune guide alla prototipazione che si focalizzano su metodi e fedeltà diversi, solo per iniziare. Prendi da loro ciò che funziona per te, ignora ciò che non funziona.
(Non includeremo tutorial specifici per app perché ce ne sono semplicemente troppi).
Questa guida da Smashing Magazine si concentra su una metodologia per la costruzione rapida di prototipi e un'iterazione frequente.
Questo è un articolo più personale di Nick Pettit sul blog Treehouse che delinea il suo approccio alla prototipazione.
Ecco un terzo articolo sulla prototipazione rapida. Sembra essere popolare. Questo è proprio qui su Webdesigner Depot, e delinea alcuni suggerimenti e insidie inerenti al processo.
Un altro articolo di Smashing Magazine , questo approfondisce i dettagli sulla prototipazione a bassa fedeltà.
In questo in profondità, e francamente articolo affascinante l'agenzia Newfangled descrive il loro processo in profondità. Riguarda la prototipazione del greyscreen basata su browser e rappresentano un caso convincente per provarlo.
Un altro qui su WDD , questo articolo è tutto per assicurarsi che la tua prototipazione abbia un punto. Se esegui i test di usabilità solo dopo aver completato il progetto finale, probabilmente stai sbagliando.
Dovrai rinunciare ad alcune delle tue informazioni personali (o semplicemente mentire) per ottenere questo ebook ma hey, non stanno chiedendo soldi! include ulteriori informazioni sui metodi di prototipazione più diffusi, esercitazioni basate su app e best practice di aziende importanti come Google, Apple, Zurb e altro ancora.
Ora, è creato dalle persone dietro a UXPin, un'app di prototipazione, quindi potrebbero essere leggermente sbilanciati su quale app dovresti usare. Tuttavia, ha molte buone informazioni.
Ok, quindi hai la teoria. È ora di iniziare a costruire prototipi. Supponendo che non hai intenzione di attenersi a modelli di carta o codice, a un certo punto userai un'app.
La buona notizia: ci sono un sacco di fantastiche app tra cui scegliere. Le cattive notizie: ci sono molte fantastiche app tra cui scegliere.
Ancora una volta, tutto dipenderà dal tuo modo di lavorare. Ti serve la possibilità di provare le app mobili? Devi sincronizzare i tuoi file con Google Drive, Dropbox o qualche altro servizio? Che ne dici di integrazione con Github? Basso-fi, medio o alto-fi? Scripting avanzato?
Le app elencate di seguito mostreranno alcune o tutte queste opzioni. Elencherò le caratteristiche più rilevanti per ognuna per darti un'idea di dove guardare.
Va notato che molti di questi sono noti principalmente come strumenti per l'inquadratura del filo. È comune per il software wireframing integrare le funzionalità necessarie per i prototipi interattivi. Il tuo chilometraggio con queste app può variare.
Questo è la più recente offerta sul mercato in questo momento, ed è pronta a offrire una seria concorrenza ad un mercato un po 'saturo. Non è solo un'app per l'inquadratura di fili o per la prototipazione; è un'app di design. È come Schizzo o l'ormai morto Fuochi d'artificio , ma fa un ulteriore passo avanti consentendo di realizzare prototipi da tutto ciò che hai appena progettato.
Al momento è solo per Mac, e nella fase di anteprima, ma una versione di Windows è prevista prima della fine dell'anno.
La versione preliminare è gratuita, una volta che la versione finale sarà inclusa, farà parte del piano di abbonamento Creative Cloud di Adobe.
Microsoft Powerpoint , Keynote di Apple , LibreOffice Impress , e Presentazioni Google possono essere tutti usati per realizzare prototipi. Per lo più, questi prototipi sarebbero della varietà concettuale. Puoi simulare una certa quantità di interattività, però, semplicemente collegando le diapositive.
Potrebbe funzionare altrettanto bene per la prototipazione di siti basati sui contenuti, e è probabile che tu stia già utilizzando almeno uno di questi programmi. In caso contrario, Impress e Presentazioni sono gratuiti.
Invision è un altro dei "grandi nomi", con più prototipi ad alta fedeltà. Sottolinea il controllo della versione e si vanta delle sue funzionalità di collaborazione e feedback in tempo reale. Come l'app Marvel, ha anche animazione, incorporamento di prototipi, demo sul dispositivo e altro ancora.
Inoltre, di recente hanno acquistato Silver Flows, uno strumento che integra funzionalità di prototipazione con Sketch. Intendono utilizzarlo per integrare Sketch con il loro software online.
C'è un piano gratuito, ma puoi creare un solo prototipo. Successivamente, puoi iniziare con $ 15 USD al mese.
Justinmind sembra deliberatamente orientato verso la creazione di prototipi di applicazioni ad alta fedeltà. Il sito menziona anche siti web reattivi per la prototipazione. Ci sono anche demo in-app.
Il prezzo attualmente parte da $ 19 USD per utente, al mese, se paghi annualmente.
App Marvel è un'app enorme (uno dei "grandi nomi" in fase di prototipazione) con un piano gratuito e prezzi moderati per tutti gli aggiornamenti. Tra le caratteristiche degne di nota: supporto per Photoshop e Sketch, sincronizzazione con Drive e Dropbox, integrazione di prototipi nelle pagine Web) e funzionalità che trasformano i tuoi prototipi in presentazioni animate.
Questo riguarda sicuramente i prototipi ad alta fedeltà.
Axure è un po 'strano con le funzionalità per la prototipazione sia low-fi che high-fi. è ancora più strano, perché è un'app desktop con un prezzo unico. È progettato per utenti aziendali e grandi team, con funzionalità per scrivere la tua documentazione, la gestione dei progetti e altro ancora.
Le edizioni standard arrivano a $ 289 USD per licenza.
HotGloo si tratta di wireframe e prototipi di bassa e media fedeltà. Inizialmente si trattava principalmente di un'applicazione wireframing, ma la funzionalità per i prototipi più avanzati è disponibile.
Mentre le altre app si concentrano sulle applicazioni di prototipazione, HotGloo ha avuto il via con i web designer. Quindi, puoi fare entrambi, davvero.
I piani partono da $ 14 USD al mese e tale piano può includere fino a 10 persone che collaborano.
Annnnnnd siamo tornati alla prototipazione ad alta fedeltà con Proto.io . Ha interazioni complesse, animazioni, esportazione, stampa, incorporamento e dimostrazioni di dispositivi tutte incorporate. I prezzi partono da $ 24 USD al mese, ma c'è una prova gratuita di 15 giorni se vuoi dargli un vortice.
solidificare ci è stata presentata da Zurb, la stessa società che realizza la struttura della Fondazione. È progettato per gestire (e ottenere feedback) tutto, dai bozzetti ai prototipi e ai prototipi ad alta fedeltà.
Invece di concentrarsi sull'animazione e altri strumenti di presentazione, Solidify offre numerose funzionalità di test degli utenti. Puoi eseguire test di persona o in remoto e condividere i risultati con il tuo team.
POP si distingue dalle altre app aiutandoti a creare un ibrido tra schizzi a telaio e prototipi digitali. Inizi a fotografare i tuoi schizzi con un iPhone, un telefono Android o un telefono Windows e trasforma questi schizzi in un prototipo interattivo.
Se fai la maggior parte del tuo lavoro su carta, potrebbe essere un ottimo modo per condividere i risultati. Il servizio è gratuito per due progetti, quindi i piani partono da $ 10 USD al mese.
FlairBuilder è un'altra applicazione desktop, sebbene abbia un visualizzatore online per i progetti. Sembra orientato verso wireframe e prototipi di media fedeltà. Ha funzionalità che ti permettono di aggiungere interazione, possono fare demo in-device e pone un accento particolare sulla progettazione basata sulla griglia.
Il prezzo è di una tantum di $ 99 USD. È ripida, certo, ma molto più economica di Axure.
Flinto in realtà ha due versioni: c'è un'app per Mac e una versione Lite basata sul web. La differenza? La versione per Mac porta animazioni, caratteristiche e interazioni più complesse alla tabella. Consente inoltre di importare le risorse da Sketch, che la versione Web non può eseguire.
Costa $ 99 USD come acquisto una tantum. È interessante notare che la versione Lite (che costa 20USD al mese) include una licenza per la versione desktop, che offre il meglio di entrambi i mondi.
UXPin è un'app di prototipazione medio-alta fedeltà con tutte le funzionalità che ci si aspetta. Come alcuni altri, ha anche una collaborazione in tempo reale, funzionalità di test di usabilità integrate e gestione del progetto.
A differenza di altre app, UXPin mira a essere un negozio di design one-stop. Come in, puoi saltare Photoshop, Sketch o what-have-you e trasformare i wireframe in mockup. Questo è ambizioso per non dire altro, ma se funziona come promesso, posso vedere che è utile a molti designer.
I prezzi partono da $ 19UD al mese, per utente.